/* Guides - long-form reading surface.
   Quiet Black tokens only; no new colours. The article column is capped at a
   comfortable measure and the sidebar carries the TOC so a 3,000-word guide
   stays navigable without a floating widget. */

/* ── Hub ── */
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.g-featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:960px){.g-grid,.g-featgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.g-grid,.g-featgrid{grid-template-columns:1fr}}

.g-card{
  display:flex;flex-direction:column;gap:9px;
  background:var(--s1);border:1px solid var(--hair);border-radius:6px;
  padding:18px 18px 16px;transition:border-color .14s,background .14s;min-height:100%
}
a.g-card:hover{border-color:var(--hair3);background:var(--s2)}
.g-card .tag{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg4)
}
.g-card h3{font-size:15px;line-height:1.35;color:var(--fg);margin:0;font-weight:600;letter-spacing:-.01em}
.g-card p{font-size:12.5px;line-height:1.55;color:var(--fg3);margin:0;flex:1}
.g-cardfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.g-card .go{font-family:var(--f-mono);font-size:10.5px;color:var(--fg3);letter-spacing:.02em}
a.g-card:hover .go{color:var(--claude)}
.g-card .mins{font-family:var(--f-mono);font-size:10px;color:var(--fg4)}
.g-card.feat{background:var(--s2);border-color:var(--hair3)}
.g-card.feat h3{font-size:17px}

/* ── Article shell ── */
.g-hero h1{max-width:20ch}
.g-hero .hero-sub{max-width:62ch}
.g-byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.03em;color:var(--fg4)
}
.g-byline .sep{color:var(--hair3)}

.g-body-wrap{padding-top:0}
.g-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:52px;align-items:start}
/* Grid items default to min-width:auto, so a wide <pre> stretches the track
   and blows out the page instead of scrolling inside its own block. */
.g-layout > *{min-width:0}
@media(max-width:960px){.g-layout{grid-template-columns:minmax(0,1fr);gap:28px}}

.g-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px;min-width:0}
@media(max-width:960px){.g-side{position:static}}
.g-toc{border-left:1px solid var(--hair);padding-left:14px}
.g-toc .etch{display:block;margin-bottom:10px}
.g-toc nav{display:flex;flex-direction:column;gap:7px}
.g-toc a{
  font-size:12.5px;line-height:1.4;color:var(--fg3);
  border-bottom:0;transition:color .14s
}
.g-toc a:hover{color:var(--fg)}
.g-sidecta{
  background:var(--s1);border:1px solid var(--hair);border-radius:6px;padding:14px;
  display:flex;flex-direction:column;gap:9px;align-items:flex-start
}
.g-sidecta p{font-size:12px;line-height:1.5;color:var(--fg3);margin:0}
@media(max-width:960px){.g-sidecta{display:none}}

.g-article{max-width:70ch;min-width:0}

/* ── Callout blocks above the body ── */
.g-summary,.g-takeaways{
  background:var(--s1);border:1px solid var(--hair);border-radius:6px;padding:18px 20px;margin-bottom:14px
}
.g-summary .etch,.g-takeaways .etch{display:block;margin-bottom:9px}
.g-summary p{font-size:15px;line-height:1.65;color:var(--fg);margin:0}
.g-takeaways ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.g-takeaways li{font-size:13.5px;line-height:1.6;color:var(--fg2)}
.g-takeaways li::marker{color:var(--fg4)}

/* ── Body typography ── */
.g-sec{margin-top:44px;scroll-margin-top:84px}
.g-sec h2{
  font-family:var(--f-disp);font-size:26px;line-height:1.2;letter-spacing:-.02em;
  color:var(--fg);margin:0 0 14px;font-weight:600
}
.g-sec h3{
  font-size:17px;line-height:1.35;letter-spacing:-.01em;color:var(--fg);
  margin:30px 0 10px;font-weight:600
}
.g-sec h4{font-size:14px;color:var(--fg);margin:0 0 6px;font-weight:600}
.g-sec p{font-size:15px;line-height:1.72;color:var(--fg2);margin:0 0 14px}
.g-sec p strong{color:var(--fg);font-weight:600}
.g-sec a{color:var(--fg);border-bottom:1px solid var(--hair3);transition:border-color .14s}
.g-sec a:hover{border-color:var(--claude)}
.g-sec code{
  font-family:var(--f-mono);font-size:.87em;background:var(--s2);
  border:1px solid var(--hair2);border-radius:4px;padding:1.5px 5px;color:var(--fg)
}

.g-list,.g-olist{margin:0 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.g-list li,.g-olist li{font-size:15px;line-height:1.68;color:var(--fg2)}
.g-list li::marker,.g-olist li::marker{color:var(--fg4)}

/* ── Code ── */
.g-code{margin:0 0 18px;border:1px solid var(--hair);border-radius:6px;overflow:hidden;background:var(--s1);max-width:100%}
.g-code figcaption{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg4);padding:9px 14px;border-bottom:1px solid var(--hair2);background:var(--s2)
}
.g-code pre{margin:0;padding:14px;overflow-x:auto}
.g-code code{
  font-family:var(--f-mono);font-size:12.5px;line-height:1.65;color:var(--fg2);
  background:none;border:0;padding:0;white-space:pre
}

/* ── Tables ── */
.g-tablewrap{margin:0 0 18px;overflow-x:auto;max-width:100%}
.g-tcap{font-size:12.5px!important;color:var(--fg4)!important;margin-bottom:8px!important}
.g-table{width:100%;border-collapse:collapse;border:1px solid var(--hair);border-radius:6px;font-size:13px}
.g-table th{
  text-align:left;font-family:var(--f-mono);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg4);
  padding:11px 14px;background:var(--s1);border-bottom:1px solid var(--hair)
}
.g-table td{padding:11px 14px;border-top:1px solid var(--hair2);color:var(--fg2);line-height:1.55;vertical-align:top}
.g-table tr td:first-child{color:var(--fg);font-weight:600}
.g-table code{font-size:.85em}
@media(max-width:700px){
  .g-table,.g-table tbody,.g-table tr,.g-table td{display:block;width:100%}
  .g-table thead{display:none}
  .g-table tr{border-top:1px solid var(--hair);padding:6px 0}
  .g-table td{border:0;padding:5px 14px}
  .g-table td::before{
    content:attr(data-col);display:block;font-family:var(--f-mono);font-size:9.5px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--fg4);margin-bottom:3px
  }
}

/* ── Steps ── */
.g-steps{display:flex;flex-direction:column;gap:16px;margin:0 0 20px}
/* minmax(0,1fr): a code block in the step body must scroll inside itself,
   not widen the column and drag the step heading past the viewport. */
.g-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.g-step > *{min-width:0}
.g-step .n{
  font-family:var(--f-mono);font-size:11px;color:var(--fg4);
  border:1px solid var(--hair2);border-radius:5px;padding:4px 7px;font-variant-numeric:tabular-nums
}
.g-step p:last-child{margin-bottom:0}

/* ── Callouts ── */
.g-note{
  border:1px solid var(--hair);border-left-width:2px;border-radius:6px;
  background:var(--s1);padding:14px 16px;margin:0 0 18px
}
.g-note .etch{display:block;margin-bottom:6px}
.g-note p{font-size:14px;line-height:1.65;margin:0 0 8px;color:var(--fg2)}
.g-note p:last-child{margin-bottom:0}
.g-note.tip{border-left-color:var(--live)}
.g-note.warn{border-left-color:var(--warn)}
.g-note.key{border-left-color:var(--claude)}
.g-note.note{border-left-color:var(--hair3)}

/* ── In-body CTA ──
   The subscribe control, placed where the reader actually hits the wall rather
   than only in the footer. `.g-sec a` puts a hairline under every body link,
   which reads as a rendering fault on a filled button. */
.g-ctaline{margin:16px 0 8px!important}
.g-ctaline a{border-bottom:0!important}
.g-ctanote{font-size:12.5px!important;line-height:1.6!important;color:var(--fg4)!important;margin:0 0 16px!important}

.g-product{
  border:1px solid var(--hair);border-radius:6px;background:var(--s2);
  padding:16px 18px;margin:0 0 18px
}
.g-product .etch{display:block;margin-bottom:7px;color:var(--claude)}
.g-product p{font-size:14px;line-height:1.65;margin:0 0 8px;color:var(--fg2)}
.g-product p:last-of-type{margin-bottom:10px}
.g-plink{font-family:var(--f-mono);font-size:11px;color:var(--fg3);border-bottom:0!important}
.g-plink:hover{color:var(--claude)}

/* ── Related ── */
.g-relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:820px){.g-relgrid{grid-template-columns:1fr}}
.g-relcard{
  display:flex;flex-direction:column;gap:7px;background:var(--s1);
  border:1px solid var(--hair);border-radius:6px;padding:15px;
  transition:border-color .14s,background .14s;min-height:100%
}
a.g-relcard:hover{border-color:var(--hair3);background:var(--s2)}
.g-relcard .tag{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg4)}
.g-relcard h3{font-size:13.5px;line-height:1.35;color:var(--fg);margin:0;font-weight:600}
.g-relcard p{font-size:12px;line-height:1.5;color:var(--fg3);margin:0;flex:1}
.g-relcard .go{font-family:var(--f-mono);font-size:10.5px;color:var(--fg3)}
a.g-relcard:hover .go{color:var(--claude)}
.g-relcard h3,.g-relcard p,.g-relcard .go{border-bottom:0}
.g-sec .g-relcard a,.g-relcard a{border-bottom:0}

/* ── Figures ──
   Hand-drawn SVG diagrams, one per guide. They sit at the top of the section
   they explain and are allowed to bleed slightly wider than the text measure,
   because a diagram squeezed to 70ch stops being readable. */
.g-fig{
  margin:0 0 22px;padding:18px 18px 14px;
  background:var(--s1);border:1px solid var(--hair);border-radius:6px
}
.g-fig svg{display:block;width:100%;height:auto}
.g-fig figcaption{
  margin-top:12px;padding-top:11px;border-top:1px solid var(--hair2);
  font-size:12px;line-height:1.6;color:var(--fg4)
}
.g-fig figcaption strong{color:var(--fg3);font-weight:600}
@media(min-width:1180px){
  /* Reclaim the gutter on wide screens so diagrams breathe past the measure. */
  .g-fig{margin-left:-26px;margin-right:-52px;padding-left:26px;padding-right:26px}
}
@media(max-width:520px){
  .g-fig{padding:12px 12px 10px}
}

/* A figure directly under an h2 reads as that section's opener. */
.g-sec h2 + .g-fig{margin-top:2px}

/* ═══ Design pass: measure, lead, and article rhythm ═══ */

/* The 220px + article grid left the right third of a 1440px viewport empty,
   which reads as an unfinished page rather than a deliberate measure. Adding a
   right rail balances the block optically and gives the figures somewhere to
   bleed into. */
@media (min-width: 1180px) {
  .g-layout {
    grid-template-columns: 208px minmax(0, 1fr) 172px;
    column-gap: clamp(40px, 4.5vw, 68px);
  }
  .g-layout::after { content: ""; }
  .g-article { max-width: 72ch }
}

/* ── The lead ──
   Summary and takeaways were two identical boxes stacked back to back, so the
   article opened with the same shape twice. The summary becomes a genuine lead
   paragraph: larger, brighter, unboxed. Only the takeaways stays a panel. */
.g-summary {
  background: none; border: 0; border-left: 2px solid var(--claude);
  border-radius: 0; padding: 2px 0 2px 20px; margin-bottom: var(--e-4, 34px);
  box-shadow: none !important
}
.g-summary .etch { color: var(--claude); margin-bottom: 7px }
.g-summary p {
  font-size: clamp(17px, 1.9vw, 19.5px); line-height: 1.58; color: var(--fg);
  letter-spacing: -.014em; font-weight: 450
}
.g-takeaways { padding: 20px 22px }
.g-takeaways li { font-size: 14px }

/* ── Headings ──
   26px against 15px body is not enough separation to mark a new section over a
   3,000-word page. Scaled up, with a hairline above so a section start is
   visible while scanning. */
.g-sec { margin-top: clamp(46px, 5.2vw, 68px); padding-top: clamp(22px, 2.4vw, 30px);
         border-top: 1px solid var(--hair2) }
.g-sec:first-of-type { border-top: 0; padding-top: 0 }
.g-sec h2 {
  font-size: clamp(25px, 2.9vw, 33px); line-height: 1.12; letter-spacing: -.026em;
  margin-bottom: 18px; max-width: 22ch
}
.g-sec h3 { font-size: 18px; margin: 34px 0 11px; letter-spacing: -.015em }
.g-sec > p:first-of-type { color: var(--fg2) }

/* Opening paragraph of each section carries slightly more weight, so the eye
   lands somewhere after the heading. */
.g-sec h2 + p { font-size: 16px; color: var(--fg2) }

/* ── Sidebar ──
   The TOC was a flat list of equally-weighted links with no sense of where you
   are. A left rail plus a hover marker makes it read as navigation. */
.g-toc { border-left: 0; padding-left: 0 }
.g-toc nav { border-left: 1px solid var(--hair); }
.g-toc nav a {
  padding: 5px 0 5px 14px; margin-left: -1px;
  border-left: 1px solid transparent; transition: color .14s, border-color .14s
}
.g-toc nav a:hover { border-left-color: var(--claude); color: var(--fg) }
.g-sidecta { background: var(--s2) }
.g-sidecta p { color: var(--fg3) }

/* ── Byline ──
   Word count and read time are the trust signal on a long guide; they were the
   dimmest text on the page. */
.g-byline { color: var(--fg3) }
.g-byline span:first-child { color: var(--fg2) }

/* ── Hub cards ──
   A 3-up grid of identical cards is the definition of templated. The first card
   in each category spans two columns and carries the larger type, so the grid
   has a reading order instead of being wallpaper. */
@media (min-width: 961px) {
  .g-grid > .g-card:first-child { grid-column: span 2 }
  .g-grid > .g-card:first-child h3 { font-size: 18px; letter-spacing: -.015em }
  .g-grid > .g-card:first-child p { font-size: 13.5px; max-width: 52ch }
  .g-featgrid > .g-card:first-child { grid-column: span 2 }
  .g-featgrid > .g-card:first-child h3 { font-size: 21px; letter-spacing: -.02em }
}
.g-card { padding: 20px 20px 18px }
.g-card h3 { letter-spacing: -.012em }

/* ── Hub hero ──
   Was a left column beside an empty right half. The stat block fills it with
   the one thing a reader of a guide library actually wants to know: how much
   is here and how current it is. */
.g-hubhero { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: clamp(32px,5vw,72px); align-items: start }
@media (max-width: 900px) { .g-hubhero { grid-template-columns: 1fr } }
.g-hubstats {
  border: 1px solid var(--hair); border-radius: 6px; background: var(--s1);
  padding: 18px 20px; margin-top: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035)
}
.g-hubstats > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--hair2)
}
.g-hubstats > div:first-child { border-top: 0; padding-top: 0 }
.g-hubstats .k {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg4)
}
.g-hubstats .v { font-size: 19px; color: var(--fg); font-weight: 600; letter-spacing: -.02em }
.g-hubstats p {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--hair2);
  font-size: 11.5px; line-height: 1.6; color: var(--fg4)
}

/* ── Start-here strip ──
   These were full cards, which meant the three best guides appeared twice on
   one page: once featured, once in their own category directly below. As a
   compact shortcut row it reads as navigation instead of duplicated content. */
.g-startrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
@media (max-width: 860px) { .g-startrow { grid-template-columns: 1fr } }
.g-start {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; background: var(--s1); border: 1px solid var(--hair);
  border-radius: 6px; transition: border-color .14s, background .14s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035)
}
a.g-start:hover { border-color: var(--hair3); background: var(--s2) }
.g-start-t { font-size: 13.5px; line-height: 1.35; color: var(--fg); font-weight: 600; letter-spacing: -.012em }
.g-start-m { font-family: var(--f-mono); font-size: 10px; color: var(--fg4); flex: none }
a.g-start:hover .g-start-m { color: var(--claude) }

/* Category grids drop to two columns. With 2 and 4 guides per category, a
   three-column grid always left a ragged half-empty final row. */
@media (min-width: 961px) {
  .g-grid { grid-template-columns: repeat(2, 1fr) }
  .g-grid > .g-card:first-child { grid-column: auto }
  .g-grid > .g-card:first-child h3 { font-size: 16px }
  .g-grid > .g-card:first-child p { font-size: 12.5px; max-width: none }
}

/* ── TOC landmark ──
   site.css styles a BARE `nav` selector for the site header
   (position:fixed; height:60px; z-index:100). The table of contents is
   legitimately a nav landmark, so it inherited all of that and pinned itself
   across the top of the viewport over the real header. Keep the semantics,
   reset the inherited chrome. */
.g-toc nav {
  position: static; top: auto; left: auto; right: auto;
  height: auto; z-index: auto; padding: 0; gap: 0;
  background: none; backdrop-filter: none; border: 0;
  border-left: 1px solid var(--hair);
  display: flex; flex-direction: column; align-items: stretch
}

/* Step titles are h3 so the outline stays h1 > h2 > h3, but they are procedural
   labels rather than sub-sections, so they keep the tighter step typography. */
.g-sec .g-step-h {
  font-size: 14.5px; margin: 0 0 6px; font-weight: 600; letter-spacing: -.008em
}

/* Cross-cluster card: a comparison surfaced from inside a guide. */
.g-relcompare { background: var(--s2) }
.g-relcompare .tag { color: var(--claude) }
.g-relgrid { grid-template-columns: repeat(4, 1fr) }
@media (max-width: 1100px) { .g-relgrid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 620px) { .g-relgrid { grid-template-columns: 1fr } }

/* Author line: a named, checkable claim to expertise rather than an anonymous page. */
.g-author {
  margin: 14px 0 0; max-width: 62ch;
  font-size: 12.5px; line-height: 1.6; color: var(--fg4)
}
.g-author strong { color: var(--fg3); font-weight: 600 }

/* Sources: evidence for every figure asserted above. */
.g-sources p { font-size: 14px; color: var(--fg3) }
.g-srclist { margin: 14px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px }
.g-srclist li { font-size: 13.5px; line-height: 1.55; color: var(--fg3) }
.g-srclist li::marker { color: var(--fg4); font-family: var(--f-mono); font-size: 11px }
.g-srclist a { color: var(--fg2); border-bottom: 1px solid var(--hair3) }
.g-srclist a:hover { color: var(--fg); border-bottom-color: var(--claude) }
.g-srclist span { color: var(--fg4) }

/* ── Cluster hubs ──
   A 118-guide library needs a level between "all guides" and "one guide".
   Cards are for browsing (three across, blurb-led); rows are for scanning a
   known cluster end to end, where the reader wants density over presentation. */
.g-clusterhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 22px
}
.g-clusterhead .lead { margin: 0; max-width: 62ch }
.g-allink {
  font-size: 12.5px; color: var(--fg3); white-space: nowrap;
  border-bottom: 1px solid var(--hair); padding-bottom: 2px; transition: color .16s, border-color .16s
}
.g-allink:hover { color: var(--claude); border-bottom-color: var(--claude) }

.g-rows { display: flex; flex-direction: column; border-top: 1px solid var(--hair2) }
.g-row {
  display: grid; grid-template-columns: minmax(0, 22ch) 1fr auto;
  align-items: baseline; gap: 6px 24px;
  padding: 15px 14px; border-bottom: 1px solid var(--hair2);
  transition: background .16s, padding-left .16s
}
.g-row:hover { background: var(--s1); padding-left: 20px }
.g-row-t { font-size: 14px; font-weight: 600; color: var(--fg); letter-spacing: -.012em }
.g-row:hover .g-row-t { color: var(--claude) }
.g-row-b { font-size: 13px; line-height: 1.5; color: var(--fg3); min-width: 0 }
.g-row-m { font-size: 11px; color: var(--fg4); white-space: nowrap }
@media (max-width: 800px) {
  .g-row { grid-template-columns: 1fr auto; }
  .g-row-t { grid-column: 1 }
  .g-row-m { grid-column: 2; grid-row: 1 }
  .g-row-b { grid-column: 1 / -1 }
}

/* "N more in <cluster>" — the overflow affordance on the main hub. */
.g-more {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 12px; padding: 15px 18px;
  border: 1px solid var(--hair2); border-radius: 6px;
  font-size: 13px; color: var(--fg3);
  transition: border-color .16s, background .16s, color .16s
}
.g-more:hover { border-color: var(--hair3); background: var(--s1); color: var(--fg2) }
.g-more .go { font-size: 12px; color: var(--claude) }

/* Cross-cluster exits from a cluster hub, so a silo is not a cul-de-sac. */
.g-chips { display: flex; flex-wrap: wrap; gap: 8px }
.g-chip {
  padding: 8px 14px; border: 1px solid var(--hair); border-radius: 5px;
  font-size: 12.5px; color: var(--fg2); background: var(--s1);
  transition: border-color .16s, color .16s, background .16s
}
.g-chip:hover { border-color: var(--claude); color: var(--fg); background: var(--s2) }

/* ── Animated product demos ──
   Self-contained mock app windows built by guides-demos.js. The aspect ratio
   reserves the full frame before the lazy CDemo build runs, avoiding layout
   shift while a reader scrolls into a guide. */
.g-demo {
  margin: 4px 0 22px; max-width: 100%
}
.g-demo-stage {
  width: 100%; aspect-ratio: 16 / 9; min-width: 0;
  background: var(--bg); border: 1px solid var(--hair); border-radius: 8px;
  box-shadow: inset 0 1px 0 var(--hair2); isolation: isolate;
  container-type: inline-size
}
.g-demo figcaption {
  padding: 10px 2px 0; font-size: 12px; line-height: 1.6; color: var(--fg4)
}
.g-demo-embedded { margin: 10px 0 12px }
.g-product .g-demo figcaption { color: var(--fg3) }

.gd-scene {
  position: absolute; inset: 0; padding: clamp(8px, 2.4%, 18px);
  font-family: var(--f-ui); font-size: clamp(7px, 1.65cqw, 12px);
  color: var(--fg2); background: var(--bg)
}
.gd-scene button { font: inherit }
.gd-scene .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums }
.gd-scene .etch {
  font-family: var(--f-mono); font-size: .76em; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--fg4)
}
.gd-scene .macwin { height: 100%; display: flex; flex-direction: column }
.gd-scene .titlebar { height: clamp(26px, 6.2cqw, 44px); min-height: 0; padding-inline: 2.2cqw }
.gd-scene .tabs { margin-left: 1.6cqw; gap: .5cqw }
.gd-scene .tab {
  height: clamp(16px, 3.1cqw, 22px); padding-inline: 1.4cqw;
  font-size: clamp(6px, 1.3cqw, 11.5px)
}
.gd-scene .tl { width: clamp(6px, 1.4cqw, 11px); height: clamp(6px, 1.4cqw, 11px) }
.gd-scene .win-body {
  flex: 1; min-height: 0; padding: clamp(7px, 2cqw, 14px);
  gap: clamp(6px, 1.5cqw, 12px); overflow: hidden
}
.gd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5cqw }
.gd-toolbar-title { color: var(--fg); font-size: 1.05em; font-weight: 650 }
.gd-toolbar-meta { font-family: var(--f-mono); color: var(--fg4); font-size: .78em }
.gd-chip {
  display: inline-flex; align-items: center; gap: .55em; min-width: 0;
  padding: .34em .72em; border: 1px solid var(--hair); border-radius: 5px;
  background: var(--s2); color: var(--fg2); font-family: var(--f-mono); font-size: .78em
}
.gd-chip.live { color: var(--live) }
.gd-dot { width: .55em; height: .55em; border-radius: 50%; background: var(--live); flex: none }
.gd-dot.claude { background: var(--claude) }
.gd-dot.codex { background: var(--codex) }
.gd-dot.warn { background: var(--warn) }
.gd-dot.error { background: var(--err) }
.gd-primary,.gd-secondary {
  min-height: 2.1em; border-radius: 5px; padding: .45em .85em;
  font-weight: 700; cursor: pointer
}
.gd-primary { border: 0; color: var(--bg); background: var(--fg) }
.gd-secondary { border: 1px solid var(--hair); color: var(--fg2); background: transparent }

/* Usage gauge */
.gd-usage-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12em, .48fr); gap: 1.5cqw; flex: 1; min-height: 0 }
.gd-gauge-card,.gd-side-card,.gd-session-card,.gd-plan,.gd-lane {
  background: var(--s1); border: 1px solid var(--hair); border-radius: 6px
}
.gd-gauge-card { padding: 2cqw; display: flex; flex-direction: column; min-height: 0 }
.gd-gauge-head { display: flex; align-items: center; gap: .7em }
.gd-provider-mark { color: var(--fg); font-size: 1.25em; line-height: 1 }
.gd-provider-name { color: var(--fg); font-weight: 700 }
.gd-account { color: var(--fg4); font-family: var(--f-mono); font-size: .8em }
.gd-reset { margin-left: auto; color: var(--fg4); font-family: var(--f-mono); font-size: .8em }
.gd-gauge-main { display: flex; align-items: flex-end; gap: 1.4cqw; margin: auto 0 1.5cqw }
.gd-gauge-pct {
  color: var(--fg); font-family: var(--f-disp); font-size: clamp(24px, 7.4cqw, 54px);
  font-weight: 700; letter-spacing: -.03em; line-height: .9
}
.gd-gauge-pct small { color: var(--fg3); font-size: .48em }
.gd-gauge-window { display: flex; flex-direction: column; gap: .25em; padding-bottom: .25em }
.gd-meter-row { display: grid; grid-template-columns: 5em 1fr 3.5em; gap: .8em; align-items: center; margin-top: .75em }
.gd-meter-label,.gd-meter-value { font-family: var(--f-mono); font-size: .78em; color: var(--fg4) }
.gd-meter-value { text-align: right; color: var(--fg3) }
.gd-meter {
  position: relative; height: .62em; min-height: 4px; border-radius: 3px;
  background: var(--track); box-shadow: inset 0 0 0 1px var(--hair2); overflow: hidden
}
.gd-meter-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit;
  background: var(--g-claude); box-shadow: inset 0 1px 0 var(--hair3);
  transition: width .7s var(--overshoot)
}
.gd-meter.weekly .gd-meter-fill { opacity: .55 }
.gd-limit-tick { position: absolute; left: 80%; inset-block: 0; width: 1px; background: var(--fg3) }
.gd-side-card { padding: 1.6cqw; display: flex; flex-direction: column; justify-content: space-between; gap: 1cqw }
.gd-burn-number { color: var(--fg); font-family: var(--f-mono); font-size: clamp(13px, 2.9cqw, 23px); font-weight: 650 }
.gd-burn-trend { color: var(--claude); font-family: var(--f-mono); font-size: .82em }
.gd-headroom { padding-top: 1cqw; border-top: 1px solid var(--hair2) }
.gd-headroom strong { display: block; color: var(--fg); font-family: var(--f-mono); font-size: 1.12em }

/* Session handoff + remote-control device pair */
.gd-device-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7.8em, .34fr); gap: 2.2cqw; height: 100%; align-items: center }
.gd-device-mac { min-width: 0; height: 84% }
.gd-device-phone { display: flex; justify-content: center; height: 100%; min-width: 0 }
.gd-device-phone .iphone {
  width: min(100%, 13.8em); height: 100%; aspect-ratio: auto;
  border-radius: 2.2em; padding: .55em; opacity: .38; transform: translateY(1.2em) scale(.94);
  transition: opacity .35s var(--settle), transform .35s var(--settle)
}
.gd-device-phone .iphone.active { opacity: 1; transform: none }
.gd-device-phone .iphone .screen { border-radius: 1.75em }
.gd-device-phone .island { top: .58em; width: 4.7em; height: 1.18em }
.gd-device-phone .statusbar { padding: .85em 1.25em .3em; font-size: .66em }
.gd-device-phone .ph-head { padding: .45em .7em .55em; gap: .45em }
.gd-device-phone .ph-title { font-size: .9em }
.gd-device-phone .ph-sub { font-size: .58em }
.gd-device-phone .ph-body { padding: .7em; gap: .55em }
.gd-device-phone .ph-foot { padding: .55em .75em; font-size: .62em }
.g-demo-stage .pdot.live-pulse { animation: none }
.gd-session-list { display: flex; flex-direction: column; gap: 1cqw; flex: 1; justify-content: center }
.gd-session-card { padding: 1.5cqw; display: grid; grid-template-columns: auto 1fr auto; gap: 1.1cqw; align-items: center }
.gd-session-icon { width: 2.5em; height: 2.5em; display: grid; place-items: center; border-radius: 6px; background: var(--s2); color: var(--fg) }
.gd-session-title { color: var(--fg); font-weight: 650 }
.gd-session-sub { color: var(--fg4); font-family: var(--f-mono); font-size: .76em; margin-top: .25em }
.gd-handoff-flow { color: var(--fg4); font-family: var(--f-mono); font-size: .72em; text-align: center }
.gd-phone-session {
  padding: .75em; border: 1px solid var(--hair); border-radius: 6px; background: var(--s1);
  opacity: 0; transform: translateY(.5em); transition: opacity .25s var(--settle), transform .25s var(--settle)
}
.iphone.active .gd-phone-session { opacity: 1; transform: none }
.gd-phone-session strong { display: block; color: var(--fg); font-size: .84em }
.gd-phone-session span { display: block; color: var(--fg4); font-family: var(--f-mono); font-size: .64em; margin-top: .3em }

/* Cost analytics */
.gd-analytics-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1cqw }
.gd-total { color: var(--fg); font-family: var(--f-disp); font-size: clamp(20px, 4.9cqw, 38px); font-weight: 700; line-height: 1 }
.gd-analytics-grid { display: grid; grid-template-columns: 1.28fr .72fr; gap: 1.5cqw; flex: 1; min-height: 0 }
.gd-chart-card,.gd-repo-card { background: var(--s1); border: 1px solid var(--hair); border-radius: 6px; padding: 1.4cqw; min-height: 0 }
.gd-chart-label { display: flex; align-items: center; justify-content: space-between; gap: .8em }
.gd-mini-legend { display: flex; align-items: center; gap: .45em; color: var(--fg4); font-family: var(--f-mono); font-size: .66em }
.gd-chart { height: calc(100% - 2em); display: flex; align-items: end; justify-content: space-around; gap: 1cqw; border-bottom: 1px solid var(--hair2); padding-top: 1.2cqw }
.gd-day { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: stretch; gap: .45em; color: var(--fg4); font-family: var(--f-mono); font-size: .68em; text-align: center }
.gd-bar { height: 0; min-height: 0; border-radius: 3px 3px 0 0; box-shadow: inset 0 1px 0 var(--hair3); transition: height .65s var(--overshoot); overflow: hidden; display: flex; flex-direction: column-reverse }
.gd-bar i { display: block; width: 100% }
.gd-bar i.claude { height: 68%; background: var(--g-claude) }
.gd-bar i.codex { height: 32%; background: var(--g-codex) }
.gd-repo-list { display: flex; flex-direction: column; gap: .9em; margin-top: 1em }
.gd-repo { opacity: 0; transform: translateY(.45em); transition: opacity .25s var(--settle), transform .25s var(--settle) }
.gd-repo.show { opacity: 1; transform: none }
.gd-repo-line { display: flex; justify-content: space-between; gap: .8em; color: var(--fg2); font-size: .82em }
.gd-repo-line span:last-child { color: var(--fg); font-family: var(--f-mono) }
.gd-repo-rail { height: .34em; border-radius: 3px; background: var(--track); margin-top: .35em; overflow: hidden }
.gd-repo-rail i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--g-claude); transition: width .55s var(--overshoot) }

/* Multi-account */
.gd-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw }
.gd-account-card { padding: 1.3cqw; background: var(--s1); border: 1px solid var(--hair); border-radius: 6px }
.gd-account-card.selected { border-color: var(--fg3); background: var(--s2) }
.gd-account-top { display: flex; align-items: center; justify-content: space-between; gap: .8em }
.gd-account-name { color: var(--fg); font-weight: 650 }
.gd-account-pct { color: var(--fg); font-family: var(--f-disp); font-size: clamp(18px, 4.2cqw, 32px); font-weight: 700; margin: .35em 0 }
.gd-account-card.capped .gd-account-pct,.gd-account-card.capped .gd-account-state { color: var(--err) }
.gd-account-card.capped .gd-meter-fill { background: var(--g-err) }
.gd-account-state { font-family: var(--f-mono); color: var(--fg4); font-size: .72em }
.gd-active-session { margin-top: 1.2cqw; padding: 1.2cqw; border: 1px solid var(--hair); border-radius: 6px; background: var(--s1); display: flex; align-items: center; gap: 1em }
.gd-active-session .gd-primary { margin-left: auto }

/* Remote plan approval */
.gd-plan { padding: .75em }
.gd-plan-head { display: flex; justify-content: space-between; gap: .5em; color: var(--fg); font-weight: 650; margin-bottom: .55em }
.gd-plan-state { color: var(--warn); font-family: var(--f-mono); font-size: .68em; text-transform: uppercase }
.gd-plan-step { display: flex; gap: .55em; padding: .34em 0; color: var(--fg3); font-family: var(--f-mono); font-size: .68em }
.gd-check { width: 1.05em; height: 1.05em; border: 1px solid var(--hair3); border-radius: 3px; display: grid; place-items: center; color: transparent }
.gd-plan-step.done { color: var(--fg2) }
.gd-plan-step.done .gd-check { color: var(--live); border-color: var(--live) }
.gd-mac-run { display: flex; flex-direction: column; justify-content: center; flex: 1; gap: 1cqw }
.gd-run-row { display: flex; align-items: center; gap: .75em; padding: .75em; border-top: 1px solid var(--hair2); color: var(--fg3); font-family: var(--f-mono); font-size: .78em }
.gd-run-row:first-child { border-top: 0 }
.gd-run-row.done { color: var(--fg2) }

/* Parallel worktrees */
.gd-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1cqw; flex: 1; min-height: 0 }
.gd-lane { padding: 1.15cqw; display: flex; flex-direction: column; gap: .75em; min-width: 0 }
.gd-lane-head { display: flex; align-items: center; gap: .55em; color: var(--fg); font-weight: 650; min-width: 0 }
.gd-branch { margin-left: auto; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gd-lane-task { color: var(--fg2); line-height: 1.35; min-height: 2.7em }
.gd-progress { height: .46em; border-radius: 3px; background: var(--track); overflow: hidden; margin-top: auto }
.gd-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--g-claude); transition: width .55s var(--overshoot) }
.gd-lane-status { display: flex; align-items: center; gap: .55em; color: var(--fg4); font-family: var(--f-mono); font-size: .72em }

@media (max-width: 600px) {
  .g-demo-stage { aspect-ratio: 4 / 3 }
  .gd-scene { font-size: clamp(6px, 2.15cqw, 10px) }
  .gd-usage-layout { grid-template-columns: minmax(0, 1fr) 10em }
  .gd-device-grid { grid-template-columns: minmax(0, 1fr) minmax(7em, .38fr); gap: 1.4cqw }
  .gd-device-phone .iphone { width: min(100%, 12em) }
  .gd-account-grid,.gd-lanes { gap: .8cqw }
  .gd-toolbar-meta,.gd-session-sub { display: none }
}

/* Guides were the only page stylesheet without its own Reduce Motion guard.
   Keep the final state supplied by CDemo, but remove every CSS tween/loop on
   the guide surface just as site.css does for reveals, rails, and cursors. */
@media (prefers-reduced-motion: reduce) {
  body[data-page="guides"] *,
  body[data-page="guides"] *::before,
  body[data-page="guides"] *::after {
    animation: none !important;
    transition: none !important
  }
}