/* THE GUIDES KIND (10 pages), lifted from the approved example on the board, rebrand/pages/src/guide-pricing.html
   (a4fdc4d), where it sat inside the page. Calm long reading beside "On this page", tables in figures with their live
   captions, one clip beside the guide's key numbers, questions, related guides and the closing band. */
/* GUIDES: long articles for coaches. Calm reading, with one bold place: the worked example on a clip of a coach with her client.
   Every class of this page starts with g-, because the home draft already uses short names (.stack, .line, .wide) for other things. */
.pg-guide .page-hero h1{max-width:16ch}
.pg-guide .g-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:16px}
.pg-guide .g-meta span{display:inline-flex;align-items:center;gap:6px}

/* the reading column: about 73 characters a line. The price lists, the worked example, the three shapes and the cards use the whole column. */
.pg-guide .art{max-width:none;font-size:clamp(17px,1.32vw,19px);line-height:1.7;color:var(--ink-2)}
.pg-guide .art > *{max-width:33em}
.pg-guide .art > .g-wide{max-width:none}
.pg-guide .art h2{max-width:18em;color:var(--ink);scroll-margin-top:calc(var(--head,76px) + 28px)}
.pg-guide .art h3{color:var(--ink);scroll-margin-top:calc(var(--head,76px) + 28px)}
.pg-guide .art b{color:var(--ink)}
.pg-guide .g-toc-m + h2{margin-top:0}

/* On this page: on a computer it sits on the left, stays in view and marks the part being read */
@media (min-width:981px){
  .pg-guide .art-side{grid-template-columns:248px minmax(0,1fr);column-gap:clamp(40px,5vw,88px)}
  .pg-guide .art-side > .toc{grid-column:1;grid-row:1}
  .pg-guide .art-side > .art{grid-column:2;grid-row:1}
}
.pg-guide .toc{padding:20px 18px 14px}
.pg-guide .toc a{padding:6px 0 6px 14px;border-left:3px solid #E4E4DC;line-height:1.35}
.pg-guide .toc a:hover{border-left-color:rgba(14,14,16,.3)}
.pg-guide .toc a[aria-current]{color:var(--ink);font-weight:600;border-left-color:var(--sun)}
.pg-guide .g-toc-m{display:none}

/* tables: each sits in a figure whose caption is a small note above it (a caption inside the table squares off the kit's rounded corners);
   a list of coaches turns into cards on a phone */
.pg-guide .art .g-tbl{margin:1.1em 0 0}
.pg-guide .g-tbl figcaption{margin:0 0 10px;padding:0 2px;font-size:14px;line-height:1.45;color:var(--muted)}
.pg-guide .tbl-scroll{padding:1px}
.pg-guide .art .tbl{color:var(--ink);line-height:1.5}
.pg-guide .g-prices th:nth-child(1){width:27%}
.pg-guide .g-prices th:nth-child(2){width:31%}
.pg-guide .g-prices td:nth-child(3){color:var(--ink-2)}

/* the one bold place: a coach with her client, and the floor worked through */
.pg-guide .g-moment{margin:1.8em 0 2em;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border-radius:28px;overflow:hidden;background:#FFF4CC}
.pg-guide .g-clip.duo-media{aspect-ratio:auto;min-height:360px;background:#D9D2BC}
.pg-guide .g-sum{padding:clamp(24px,2.8vw,40px);display:flex;flex-direction:column;justify-content:center;color:var(--ink)}
.pg-guide .g-k{font-family:var(--display);font-weight:700;font-size:14px;color:rgba(14,14,16,.62);margin-bottom:14px}
.pg-guide .g-calc{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 16px}
.pg-guide .g-calc b{font-family:var(--display);font-weight:900;font-size:clamp(32px,3vw,46px);line-height:1;letter-spacing:-0.035em;white-space:nowrap;font-variant-numeric:tabular-nums}
.pg-guide .g-calc b i{font-style:normal;font-weight:700;color:rgba(14,14,16,.42);margin-right:4px}
.pg-guide .g-calc span{font-size:15px;line-height:1.35;color:var(--ink-2)}
.pg-guide .g-calc .g-rule{grid-column:1 / -1;height:2px;background:var(--ink);border-radius:2px;margin:2px 0}
.pg-guide .g-calc b.g-tot{justify-self:start;background:var(--sun);border-radius:14px;padding:8px 12px 4px}

/* three shapes, side by side */
.pg-guide .g-shapes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pg-guide .art .g-shapes li{margin:0;padding:20px 22px 22px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px #E6E6DF;font-size:16px;line-height:1.6}
.pg-guide .g-shapes li b{display:block;margin-bottom:6px;font-family:var(--display);font-weight:800;font-size:20px;line-height:1.2}

/* a pull line */
.pg-guide .art .g-pull{max-width:19em;margin-top:.9em;padding:2px 0 2px 22px;border-left:4px solid var(--sun);font-family:var(--display);font-weight:800;font-size:clamp(24px,2vw,31px);line-height:1.2;letter-spacing:-0.015em;color:var(--ink)}

/* the end of the guide */
.pg-guide .art h2.g-small{font-size:clamp(22px,1.8vw,26px)}
.pg-guide .art .next-cards{margin-top:1em}
.pg-guide .g-acts{display:flex;flex-wrap:wrap;gap:12px}
.pg-guide .btn.g-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}

@media (max-width:980px){
  .pg-guide .toc{display:none}
  .pg-guide .g-toc-m{display:block;border-radius:18px;background:#F6F6F1;padding:0 18px}
  .pg-guide .g-toc-m summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink)}
  .pg-guide .g-toc-m summary::-webkit-details-marker{display:none}
  .pg-guide .g-toc-m .pm{width:34px;height:34px;border-radius:12px;background:#fff;display:grid;place-items:center;flex:none;transition:transform .35s var(--ease),background-color .3s}
  .pg-guide .g-toc-m[open] .pm{transform:rotate(45deg);background:var(--sun)}
  .pg-guide .g-toc-m nav{padding:0 0 10px}
  .pg-guide .art .g-toc-m a{display:block;padding:10px 0;border-top:1px solid #E6E6DE;font-size:16px;line-height:1.35;color:var(--ink-2);text-decoration:none}
  .pg-guide .g-toc-m + h2{margin-top:1.4em}
}
@media (max-width:760px){
  .pg-guide .g-moment{grid-template-columns:1fr}
  .pg-guide .g-clip.duo-media{aspect-ratio:16/10;min-height:0}
  .pg-guide .g-shapes{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pg-guide .g-prices,.pg-guide .g-prices tbody,.pg-guide .g-prices tr,.pg-guide .g-prices td{display:block;width:auto}
  .pg-guide .g-prices thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pg-guide .g-prices tr{padding:15px 18px;border-bottom:1px solid #EDEDE7}
  .pg-guide .g-prices tr:last-child{border-bottom:0}
  .pg-guide .g-prices td{padding:0;border:0}
  .pg-guide .g-prices td:nth-child(1){font-size:16.5px}
  .pg-guide .g-prices td:nth-child(2){margin-top:5px;font-weight:600}
  .pg-guide .g-prices td:nth-child(3){margin-top:4px;font-size:15px}
  .pg-guide .g-calc b{font-size:34px}
  .pg-guide .cta-band .btn{flex:1 1 auto}
}