/* ==========================================================================
   Gauge & Gear — Direction C "Modern Workshop" · feature / bespoke pages
   Loaded after style.css. Uses only style.css tokens. Each page is scoped by
   a structural hook it already has (no markup changes):
     About ........ main.enh-plain-main:has(>.enh-feature-hero)
     Green Light .. main:has(>.gl-hero)
     Jersey ....... main:has(.view-switch)
     Mood Meter ... main:has(>.signal-section)
     Android ...... body.android-page main
     Floppy ....... main:has(>.floppy-film)
     Privacy ...... main.policy:has(>section)       404 ... main.policy:not(:has(>section))
     Creator ...... main.maker-page
     Internal ..... html.gg-internal
   ========================================================================== */

/* --------------------------------------------------------------------------
   00 — Shared fixes for legacy page sheets
   -------------------------------------------------------------------------- */
/* mood-meter.css sets :root{background:cream} which beats html{} and shows below short pages */
:root:root{}
/* mood-meter.css / jersey-display.css style every <details> (border, padding) — keep them out of the header */
header.store-header details{border:0;padding:0;margin:0}
header.store-header .site-menu{border:0}

/* Page shell for bespoke mains that style.css doesn't already contain */
main:is(:has(>.gl-hero),:has(.view-switch),:has(>.signal-section)),
body.android-page main#main{
  max-width:none;margin:0;padding:0 var(--gg-gutter) 8px;box-sizing:border-box;counter-reset:gg-index
}
main:is(:has(>.gl-hero),:has(.view-switch),:has(>.signal-section))>:is(section,div):not(#gg),
body.android-page main>section:not(#gg){
  box-sizing:border-box;max-width:var(--gg-container);margin-left:auto;margin-right:auto
}

/* Brass index micro-labels ("01 — LABEL") on these pages too */
:is(main:has(>.gl-hero),main:has(.view-switch),main:has(>.signal-section),body.android-page main)>section>.eyebrow,
:is(main:has(>.gl-hero),main:has(.view-switch),main:has(>.signal-section),body.android-page main)>section>div>.eyebrow,
:is(main:has(>.gl-hero),main:has(.view-switch),main:has(>.signal-section),body.android-page main)>section>div>div>.eyebrow{counter-increment:gg-index}
:is(main:has(>.gl-hero),main:has(.view-switch),main:has(>.signal-section),body.android-page main)>section>.eyebrow::before,
:is(main:has(>.gl-hero),main:has(.view-switch),main:has(>.signal-section),body.android-page main)>section>div>.eyebrow::before,
:is(main:has(>.gl-hero),main:has(.view-switch),main:has(>.signal-section),body.android-page main)>section>div>div>.eyebrow::before{
  content:counter(gg-index,decimal-leading-zero) "\00a0\2014\00a0\00a0";color:var(--gg-brass-700);font-variant-numeric:tabular-nums;letter-spacing:.06em
}
/* eyebrow base on these pages (legacy sheets vary 10–13px, 700 weight) */
:is(main:has(>.gl-hero),main:has(.view-switch),main:has(>.signal-section),body.android-page main,main.maker-page,main.policy,main.enh-plain-main) .eyebrow:not(#gg){
  font:600 var(--gg-text-xs)/1.5 var(--gg-font-ui);letter-spacing:var(--gg-tracking-label);text-transform:uppercase
}

/* Shared dark-card helpers (navy / forest): text + index colours */
:is(.gl-hero,.gl-gallery,.gl-final,.download-hero,main:has(>.signal-section)>:is(.hero,.room-story,.craft,.finale),.room>div){color:var(--gg-cream)}
:is(.gl-hero,.gl-gallery,.gl-final,.download-hero,main:has(>.signal-section)>:is(.hero,.room-story,.craft,.finale),.room>div) .eyebrow{color:var(--gg-muted-on-dark)}
:is(.gl-hero,.gl-gallery,.gl-final,.download-hero,main:has(>.signal-section)>:is(.hero,.room-story,.craft,.finale),.room>div) .eyebrow::before{color:var(--gg-brass-on-dark)}
:is(.gl-hero,.gl-gallery,.gl-final,.download-hero,main:has(>.signal-section)>:is(.hero,.room-story,.craft,.finale),.room>div) :is(h1,h2,h3){color:var(--gg-cream)}
:is(.gl-hero,.gl-gallery,.gl-final,.download-hero,main:has(>.signal-section)>:is(.hero,.room-story,.craft,.finale),.room>div) :focus-visible{outline-color:var(--gg-brass-on-dark)}
/* Light pill on any dark card */
:is(.gl-hero>div:first-child>a,.gl-final,.download-hero,main:has(>.signal-section)>:is(.hero,.finale)) .button:not(#gg):not(.navy),
main .button.ivory:not(#gg){background:var(--gg-cream);color:var(--gg-navy);box-shadow:none}
:is(.gl-final,.download-hero,main:has(>.signal-section)>:is(.hero,.finale)) .button:not(#gg):not(.navy):hover,
main .button.ivory:not(#gg):hover{background:#fff}
main .button.navy:not(#gg){background:var(--gg-navy);color:var(--gg-cream)}
main .button.navy:not(#gg):hover{background:var(--gg-ink)}

/* Shared FAQ accordion (Green Light, Jersey, Mood Meter, Android) */
:is(.gl-faq,main:has(.view-switch) .faq,.questions .faq-list,.download-help) details:not(#gg){border:0;border-top:1px solid var(--gg-line);padding:0;margin:0}
:is(.gl-faq,main:has(.view-switch) .faq,.questions .faq-list,.download-help) details:last-of-type{}
:is(.gl-faq,main:has(.view-switch) .faq,.questions .faq-list,.download-help) summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;padding:14px 0;list-style:none;cursor:pointer;
  font:600 17px/1.4 var(--gg-font-ui);color:var(--gg-navy)
}
:is(.gl-faq,main:has(.view-switch) .faq,.download-help) summary::-webkit-details-marker{display:none}
:is(.gl-faq,main:has(.view-switch) .faq,.download-help) summary::after{
  content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--gg-surface-sunk);color:var(--gg-brass-700);font:700 16px/1 var(--gg-font-ui)
}
:is(.gl-faq,main:has(.view-switch) .faq,.download-help) details[open]>summary::after{content:"\2212"}
/* Mood Meter already renders its own <span> indicator: give it the same chip */
.questions .faq-list summary>span{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gg-surface-sunk);color:var(--gg-brass-700);font:600 18px/1 var(--gg-font-ui);transition:transform var(--gg-dur) var(--gg-ease)}
:is(.gl-faq,main:has(.view-switch) .faq,.questions .faq-list,.download-help) details>p:not(#gg){margin:0;padding:0 48px 22px 0;font-size:16px;line-height:1.65;color:var(--gg-muted)}

/* Generic cream card surface (zero-specificity list + one id-lift, so page rules below can refine it) */
:where(.gl-story,.gl-preview,.gl-faq,
    main:has(.view-switch)>:is(.story,.motion,.configure,.faq),
    main:has(>.signal-section)>:is(.signal-section,.permission,.digital,.availability,.questions,.maker-teaser),
    .widget-showcase,.install-guide,.download-help,
    main>.floppy-film,
    main.enh-plain-main>.enh-section:not(:has(>.enh-tiles))):not(#gg){
  background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);
  padding:var(--gg-card-pad);margin-top:var(--gg-gap);margin-bottom:var(--gg-gap);overflow:hidden
}

/* --------------------------------------------------------------------------
   01 — About
   -------------------------------------------------------------------------- */
main.enh-plain-main>.enh-feature-hero{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gg-gap);align-items:stretch;padding:24px 0 0;background:none
}
.enh-feature-hero>div:first-child{
  grid-column:span 7;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:clamp(28px,4.6vw,72px)
}
.enh-feature-hero>div:last-child{
  grid-column:span 5;display:flex;flex-direction:column;
  background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:10px
}
.enh-feature-hero h1{font-size:clamp(38px,4.2vw,60px);line-height:1.02;margin:16px 0 22px}
.enh-feature-hero>div:first-child>p:not(.eyebrow){font-size:17px;line-height:1.62;color:var(--gg-muted);max-width:36em;margin:0 0 14px}
.enh-feature-hero>div:first-child>p:nth-of-type(2){font-size:clamp(18px,1.4vw,20px);color:var(--gg-navy)}
.enh-feature-hero .button:not(#gg){margin-top:16px}
.enh-feature-hero img{
  display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;flex:1;
  border-radius:var(--gg-radius-inner)!important;border:0;box-shadow:none;transform:none;transition:none!important;background:var(--gg-surface-sunk)
}
.enh-feature-hero .enh-note:not(#gg){margin:12px 8px 4px;}

/* Two text cards: heading left, body right, short brass rule */
main.enh-plain-main>.enh-section:not(:has(>.enh-tiles)){
  position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(24px,5vw,80px);align-items:start;
  padding-top:calc(var(--gg-card-pad) + 22px)!important;color:var(--gg-navy)
}
main.enh-plain-main>.enh-section:not(:has(>.enh-tiles))::before{content:"";position:absolute;left:var(--gg-card-pad);top:var(--gg-card-pad);width:48px;height:3px;border-radius:3px;background:var(--gg-brass)}
main.enh-plain-main>.enh-section>h2:not(#gg){grid-column:1;grid-row:1 / span 4;font-size:clamp(28px,2.8vw,40px);margin:0}
main.enh-plain-main>.enh-section>:not(h2):not(figure){grid-column:2;margin:0 0 14px;font-size:17px;line-height:1.65}
main.enh-plain-main>.enh-section>p{color:var(--gg-navy)}
main.enh-plain-main>.enh-section>a:not(#gg){
  justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;margin-top:8px;border:1px solid var(--gg-line-strong);
  border-radius:var(--gg-pill);font:600 15px/1.2 var(--gg-font-ui);color:var(--gg-navy);text-decoration:none;transition:background-color var(--gg-dur),border-color var(--gg-dur)
}
main.enh-plain-main>.enh-section>a:hover{background:rgba(9,43,59,.05);}
/* Map card: text left, modest aerial right */
main.enh-plain-main>.enh-section:has(.about-aerial-frame)>p{grid-column:1;grid-row:2;margin-top:12px;color:var(--gg-muted);font-size:16px}
main.enh-plain-main>.enh-section:has(.about-aerial-frame){grid-template-rows:auto auto 1fr}
main.enh-plain-main>.enh-section:has(.about-aerial-frame)>h2:not(#gg){grid-row:1}
main.enh-plain-main .about-aerial-frame{
  grid-column:2;grid-row:1 / span 3;justify-self:end;width:100%;max-width:360px;margin:0;
  border:0;border-radius:var(--gg-radius-inner);box-shadow:none;background:var(--gg-surface-sunk)
}
main.enh-plain-main .about-aerial{border-radius:var(--gg-radius-inner)}

/* Optional Ko-fi tip card (style.css lays out a 2-column quiet-support; this one has more paragraphs) */
#support.quiet-support{grid-template-rows:auto auto auto 1fr}
#support.quiet-support>.eyebrow{grid-row:1;align-self:start}
#support.quiet-support>h2{grid-row:1 / span 4;align-self:start;margin:34px 0 0}
#support.quiet-support>p:not(.eyebrow){grid-column:2;align-self:start;margin:0 0 14px}
#support.quiet-support>p:nth-of-type(2){grid-row:1;font-size:18px;color:var(--gg-navy)}
#support.quiet-support>.support-link{grid-column:2;grid-row:2;margin:4px 0 18px;background:var(--gg-navy);color:var(--gg-cream);border-color:var(--gg-navy)}
#support.quiet-support>.support-link:hover{background:var(--gg-ink)}
#support.quiet-support>p.caption:not(#gg){font-size:14px;line-height:1.6;color:var(--gg-muted);max-width:52ch}
#support.quiet-support>#tip-status:not(#gg){grid-row:3}
#support.quiet-support>p.caption:last-of-type:not(#gg){grid-row:4}
/* --------------------------------------------------------------------------
   02 — Green Light (keeps its forest-green identity, as cards)
   -------------------------------------------------------------------------- */
main:has(>.gl-hero){--gl-forest:#102a24;--gl-leaf:#c8dd94}
main>.gl-hero{
  margin-top:24px;padding:clamp(28px,4.6vw,72px);gap:clamp(28px,4vw,64px);
  background:var(--gl-forest);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);overflow:hidden
}
.gl-hero h1{font-size:clamp(44px,5vw,76px);line-height:1.02;letter-spacing:var(--gg-tracking-display);margin:16px 0 22px}
.gl-hero h1 em{color:var(--gl-leaf)}
.gl-hero .eyebrow a{color:var(--gg-brass-on-dark)}
.gl-hero>div>p:not(.eyebrow){color:#dfe6dc;font-size:17px}
.gl-photo img{border-radius:var(--gg-radius-inner);box-shadow:none}
.gl-photo figcaption{color:#c9d3c6;font:400 13px/1.5 var(--gg-font-ui)}
.gl-config{background:var(--gg-surface);color:var(--gg-navy);border:0;border-radius:var(--gg-radius-inner);box-shadow:none;padding:24px;margin-top:28px}
.gl-config label{font:600 15px/1.5 var(--gg-font-ui)}
.gl-config select:not(#gg){min-height:48px;padding:12px 14px;font-size:16px;border:1px solid #c7bca5;border-radius:var(--gg-radius-sm);background:var(--gg-surface-raised);color:var(--gg-navy);box-shadow:none}
.gl-config select:focus{}
.gl-config p{font-size:15px;color:var(--gg-muted);max-width:none}
.gl-config .button:not(#gg){margin-top:10px;transform:none}
.gl-config .caption{font-size:13px}

/* Promise strip → three numbered tiles */
main>.gl-promise{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gg-gap);padding:var(--gg-gap) 0 0;background:none;border:0;
  counter-reset:gg-tile;font:500 15px/1.4 var(--gg-font-ui);color:var(--gg-navy)
}
.gl-promise span{
  counter-increment:gg-tile;display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 22px;
  background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow)
}
.gl-promise span::before{content:counter(gg-tile,decimal-leading-zero);font:600 12px/1 var(--gg-font-ui);letter-spacing:.06em;color:var(--gg-brass-700);padding:8px 14px 8px 0;border-right:1px solid var(--gg-line)}

/* Story (centred cream card with brass rule) */
main>.gl-story:not(#gg){position:relative;text-align:center;padding-top:calc(var(--gg-card-pad) + 22px)}
.gl-story::before{content:"";position:absolute;top:var(--gg-card-pad);left:50%;width:48px;height:3px;margin-left:-24px;border-radius:3px;background:var(--gg-brass)}
.gl-story h2{margin:12px auto 18px}
.gl-story p:not(.eyebrow){max-width:640px;margin:0 auto 14px;color:var(--gg-navy)}
.gl-story p.caption{font-size:14px;color:var(--gg-muted)}

/* Steps → three cards */
main:has(>.gl-hero)>section:has(>.gl-steps){padding:var(--gg-section) 0 calc(var(--gg-section) - 40px)}
.gl-steps{gap:var(--gg-gap);margin-top:28px}
.gl-steps article{background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:clamp(24px,2.6vw,36px)}
.gl-steps span{display:inline-flex;font:600 12px/1.4 var(--gg-font-ui);letter-spacing:var(--gg-tracking-label);color:var(--gg-brass-700);padding-bottom:16px;margin-bottom:6px;border-bottom:2px solid var(--gg-brass)}
.gl-steps h3{margin:14px 0 8px}
.gl-steps p{font-size:16px;color:var(--gg-muted);margin:0}

/* Gallery (forest card) */
main>.gl-gallery{background:var(--gl-forest);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:clamp(12px,1.4vw,20px) clamp(12px,1.4vw,20px) clamp(20px,2.4vw,32px);gap:var(--gg-gap);margin:var(--gg-gap) auto}
.gl-gallery img{border-radius:var(--gg-radius-inner);box-shadow:none}
.gl-gallery h3{margin:20px 12px 4px}
.gl-gallery p{margin:0 12px;color:#cfd8cc;font-size:16px}

/* Lamp demo (cream card, demo well keeps its night-time scene) */
main>.gl-preview{gap:clamp(24px,4vw,64px)}
.gl-preview p:not(.eyebrow):not(.gl-status){color:var(--gg-muted)}
.gl-lamp{border-radius:var(--gg-radius-inner);box-shadow:none;height:340px}
.gl-demo-btn{
  display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 26px;margin:8px 0 4px;border:0;border-radius:var(--gg-pill);
  background:var(--gg-navy);color:var(--gg-cream);box-shadow:none;transform:none;font:600 16px/1.2 var(--gg-font-ui);transition:background-color var(--gg-dur) var(--gg-ease)
}
.gl-demo-btn:hover{background:var(--gg-ink);}
.gl-demo-btn::before{content:"";width:10px;height:10px;border-radius:50%;background:#6c7d72;flex:none;transition:background-color var(--gg-dur)}
.gl-demo-btn[aria-pressed=true]{background:var(--gl-forest)}
.gl-demo-btn[aria-pressed=true]::before{background:var(--gl-leaf)}
.gl-status{font:500 16px/1.5 var(--gg-font-ui);color:#3f5a4b}
.gl-preview .caption{font-size:13px}

/* FAQ + final */
main>.gl-faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,5vw,80px);align-items:start}
.gl-faq>.eyebrow,.gl-faq>h2{grid-column:1}
.gl-faq>.eyebrow{grid-row:1;align-self:start}
.gl-faq>h2{grid-row:1 / span 8;align-self:start;margin:30px 0 0}
.gl-faq>details{grid-column:2}
.gl-faq>details:first-of-type{grid-row:1}
main>.gl-final{background:var(--gl-forest);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:var(--gg-card-pad);margin:var(--gg-gap) auto;text-align:center}
.gl-final .button:not(#gg){margin:8px 0 18px}
.gl-final .caption{color:#cfd8cc;font-size:14px}
.gl-final .caption a{color:var(--gg-cream)}
@media(hover:hover){.gl-config .button:not(#gg):hover,.gl-demo-btn:not(#gg):hover{transform:none}}

/* --------------------------------------------------------------------------
   03 — Jersey display (fully converted to the product language)
   -------------------------------------------------------------------------- */
main:has(.view-switch)>section.hero:not(#gg){
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gg-gap);align-items:stretch;padding:24px 0 0;max-width:var(--gg-container)
}
main:has(.view-switch) .hero-copy{
  grid-column:span 5;max-width:none;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:clamp(28px,4vw,60px)
}
main:has(.view-switch) .hero-copy h1{font-size:clamp(40px,4.4vw,64px);line-height:1.02;margin:14px 0 20px}
main:has(.view-switch) .hero-copy .intro{font:500 clamp(18px,1.4vw,20px)/1.5 var(--gg-font-ui);color:var(--gg-ink);margin:0 0 12px}
main:has(.view-switch) .hero-copy p:not(.eyebrow):not(.intro){font-size:16px;color:var(--gg-muted);margin:0 0 22px}
main:has(.view-switch) .hero-copy .eyebrow a{color:inherit}
main:has(.view-switch) .hero-copy .button span{font-size:14px}
main:has(.view-switch) .hero-copy small{font:400 13px/1.5 var(--gg-font-ui);color:var(--gg-muted);margin-top:16px}
main:has(.view-switch) .hero-art{grid-column:span 7;border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);background:var(--gg-surface-sunk)}
main:has(.view-switch) .hero-art>img{height:100%;border-radius:0}
.view-switch{background:rgba(252,248,237,.94);box-shadow:0 8px 24px -12px rgba(9,43,59,.35);padding:5px;gap:2px}
.view-switch button{min-height:44px;padding:0 20px;font:600 15px/1 var(--gg-font-ui);color:var(--gg-navy);border-radius:var(--gg-pill)}
.view-switch button[aria-pressed=true]{background:var(--gg-navy);color:var(--gg-cream)}

/* Feature strip → four numbered tiles */
main:has(.view-switch)>.feature-strip:not(#gg){
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gg-gap);padding:var(--gg-gap) 0 0;border:0;max-width:var(--gg-container);
  counter-reset:gg-tile;font:500 15px/1.4 var(--gg-font-ui);color:var(--gg-navy)
}
.feature-strip span{counter-increment:gg-tile;display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 22px;background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow)}
.feature-strip span::before{content:counter(gg-tile,decimal-leading-zero);font:600 12px/1 var(--gg-font-ui);letter-spacing:.06em;color:var(--gg-brass-700);padding:8px 14px 8px 0;border-right:1px solid var(--gg-line)}

main:has(.view-switch)>.section:not(#gg){padding:var(--gg-section) 0}
main:has(.view-switch) h2{font-size:var(--gg-h2);line-height:1.06;letter-spacing:var(--gg-tracking-display);margin:12px 0 18px}
main:has(.view-switch) h3{font:400 var(--gg-h3)/1.15 var(--gg-font-display);letter-spacing:var(--gg-tracking-display)}
main:has(.view-switch) .section p:not(.eyebrow):not(.material-note):not(.form-note){color:var(--gg-muted)}

/* Story: split card like the home "store-split" */
main:has(.view-switch)>.story{gap:clamp(24px,4vw,64px);padding:12px!important;padding-left:var(--gg-card-pad)!important}
main:has(.view-switch)>.story img{border-radius:var(--gg-radius-inner);aspect-ratio:4/3;object-fit:cover;width:100%;height:100%}

/* Motion: cream card */
main:has(.view-switch)>.motion:not(#gg){max-width:var(--gg-container)}
main:has(.view-switch) .motion-grid{gap:clamp(24px,4vw,64px)}
main:has(.view-switch) .motion img{border-radius:var(--gg-radius-inner)}
main:has(.view-switch) .motion li{border-bottom:1px solid var(--gg-line);padding:22px 0}
main:has(.view-switch) .motion li:first-child{border-top:1px solid var(--gg-line)}
main:has(.view-switch) .motion li>span{font:400 34px/1 var(--gg-font-display);color:var(--gg-brass-600);min-width:44px}
main:has(.view-switch) .motion li p{font-size:16px}

/* Room: rounded photo card with a navy caption card */
main:has(.view-switch)>.room:not(#gg){border-radius:var(--gg-radius);overflow:hidden;box-shadow:var(--gg-shadow);margin:var(--gg-gap) auto;background:var(--gg-navy-deep)}
main:has(.view-switch)>.room>img{max-height:760px}
main:has(.view-switch)>.room>div{background:var(--gg-navy);border-radius:var(--gg-radius-inner);padding:clamp(22px,2.6vw,36px);max-width:400px}
main:has(.view-switch)>.room h2{font-size:clamp(30px,3vw,44px)}
main:has(.view-switch)>.room em{color:var(--gg-brass-on-dark)}
main:has(.view-switch)>.room p:not(.eyebrow){color:var(--gg-muted-on-dark)}

/* Glazing options: cards with chip + row action */
main:has(.view-switch) .section-intro{font-size:17px}
main:has(.view-switch) .glazing-grid{gap:var(--gg-gap);margin-top:32px}
main:has(.view-switch) .glazing article{background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:24px 22px 10px}
main:has(.view-switch) .glazing .badge{align-self:flex-start;display:inline-flex;align-items:center;border-radius:var(--gg-pill);background:var(--gg-surface-sunk);color:var(--gg-brass-700);padding:5px 12px;font:600 11px/1.3 var(--gg-font-ui);letter-spacing:.08em}
main:has(.view-switch) .glazing h3{margin:14px 0 6px}
main:has(.view-switch) .glazing article p{font-size:15px;line-height:1.55}
main:has(.view-switch) .glazing article button:not(#gg){
  display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:10px 2px 0;margin-top:10px;
  border:0;border-top:1px solid var(--gg-line);background:none;font:600 15px/1.3 var(--gg-font-ui);color:var(--gg-navy);text-align:left
}
main:has(.view-switch) .glazing article button:hover{text-decoration:underline;text-underline-offset:4px}
main:has(.view-switch) .material-note{font-size:14px;color:var(--gg-muted);margin-top:24px}

/* Configure: card + inner form panel */
main:has(.view-switch)>.configure:not(#gg){gap:clamp(24px,4vw,64px);border:1px solid var(--gg-line);padding:var(--gg-card-pad)}
main:has(.view-switch) .configure dl>div{border-bottom:1px solid var(--gg-line);font-size:15px}
main:has(.view-switch) .configure dt{color:var(--gg-muted)}
main:has(.view-switch) .configure form{background:var(--gg-surface-raised);border:1px solid var(--gg-line);border-radius:var(--gg-radius-inner);padding:clamp(20px,2.6vw,32px)}
main:has(.view-switch) .configure label{font:600 15px/1.5 var(--gg-font-ui)}
main:has(.view-switch) .configure :is(select,textarea):not(#gg){min-height:48px;padding:12px 14px;font-size:16px;border:1px solid #c7bca5;border-radius:var(--gg-radius-sm);background:#fff;color:var(--gg-navy)}
main:has(.view-switch) .configure :is(select,textarea):focus{box-shadow:0 0 0 3px rgba(196,154,81,.25)}
main:has(.view-switch) .configure .button:not(#gg){width:100%;min-height:54px;margin-top:22px}
main:has(.view-switch) #glazing-summary,main:has(.view-switch) .form-note{color:var(--gg-muted)}
main:has(.view-switch) #email-fallback{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* FAQ card: heading left, list right */
main:has(.view-switch)>.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,5vw,80px);align-items:start}
main:has(.view-switch)>.faq>:is(.eyebrow,h2){grid-column:1}
main:has(.view-switch)>.faq>.eyebrow{grid-row:1;align-self:start}
main:has(.view-switch)>.faq>h2{grid-row:1 / span 8;align-self:start;margin:30px 0 0;font-size:clamp(28px,2.8vw,40px)}
main:has(.view-switch)>.faq>details{grid-column:2}
main:has(.view-switch)>.faq>details:first-of-type{grid-row:1}

/* --------------------------------------------------------------------------
   04 — Mood Meter (keeps the dark landing; sections become cards)
   -------------------------------------------------------------------------- */
main:has(>.signal-section) h2{letter-spacing:var(--gg-tracking-display)}
main:has(>.signal-section)>.section-pad{padding-left:0;padding-right:0;padding-top:var(--gg-section);padding-bottom:var(--gg-section)}
main:has(>.signal-section)>:is(.signal-section,.permission,.digital,.availability,.questions,.maker-teaser):not(#gg){padding:var(--gg-card-pad)}

/* Hero: navy card */
main:has(>.signal-section)>.hero:not(#gg){
  margin-top:24px;border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);background:var(--gg-navy-deep);max-width:var(--gg-container)
}
/* style.css §"main>section.hero" (bento cards for store pages) must not reach this cinematic hero */
main:has(>.signal-section)>section.hero{display:block;grid-template-columns:none;align-items:center}
main:has(>.signal-section)>section.hero>div{grid-column:auto;display:block;background:none;border:0;border-radius:0;box-shadow:none;padding:0 5%}
main:has(>.signal-section)>section.hero>div>p:not(.eyebrow){color:var(--gg-muted-on-dark);max-width:none}
main:has(>.signal-section)>section.hero>figure{grid-column:auto;position:relative;border-radius:0;overflow:visible;box-shadow:none;background:none;min-height:0}
main:has(>.signal-section)>section.hero>figure img{position:static;inset:auto;width:100%;height:auto;object-fit:fill}
main:has(>.signal-section)>section.hero>figure figcaption{position:absolute;padding:0;border-radius:0;background:none;color:var(--gg-brass-on-dark);font:500 12px/1.4 var(--gg-font-ui)!important;letter-spacing:.14em;max-width:none}
main:has(>.signal-section) .hero .button{margin-top:0!important}
main:has(>.signal-section) .hero h1{letter-spacing:var(--gg-tracking-display)}
main:has(>.signal-section) .hero h1 :is(em,span){color:var(--gg-brass-on-dark)}
main:has(>.signal-section) .hero-description:not(#gg){}
main:has(>.signal-section) .hero .text-button,main:has(>.signal-section) .scroll-note{color:var(--gg-cream)}
main:has(>.signal-section) .hero .text-button{white-space:nowrap;min-height:44px}
@media(min-width:1001px){
  main:has(>.signal-section)>.hero{height:auto;min-height:clamp(560px,calc(100svh - var(--gg-header-h) - 48px),760px);padding:56px clamp(32px,4.6vw,72px)}
  main:has(>.signal-section)>section.hero>div{padding:0;width:47%;position:relative;z-index:2}
  main:has(>.signal-section) .hero-actions{flex-wrap:wrap;row-gap:12px}
  main:has(>.signal-section)>section.hero>figure{position:absolute;margin:0}
  main:has(>.signal-section) .hero h1{font-size:clamp(48px,4.8vw,72px)}
  main:has(>.signal-section) .hero .button:not(#gg){font-size:15px;min-height:50px;padding:0 22px}
}

/* Opening: open editorial section on the page */
main:has(>.signal-section)>.opening h2{font-size:var(--gg-h2)}
main:has(>.signal-section)>.opening .muted{color:var(--gg-muted)}
main:has(>.signal-section) .asterisk{color:var(--gg-brass-600)}

/* Signal demo: cream card; the instrument becomes an inner panel */
main:has(>.signal-section) .interactive-instrument{background:var(--gg-surface-raised);border:1px solid var(--gg-line);border-radius:var(--gg-radius-inner);box-shadow:none}
main:has(>.signal-section) .presets button{min-height:44px;border-radius:var(--gg-pill);box-shadow:none;transform:none}
main:has(>.signal-section) .presets button[aria-pressed=true]{background:var(--gg-navy);color:var(--gg-cream);border-color:var(--gg-navy)}

/* Room story: rounded photo card */
main:has(>.signal-section)>.room-story:not(#gg){border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);margin:var(--gg-gap) auto}

/* Three things: three cards */
main:has(>.signal-section) .three-things .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gg-gap)}
main:has(>.signal-section) .three-things .steps article{background:var(--gg-surface);border:1px solid var(--gg-line);border-top:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:clamp(24px,2.6vw,36px)}

/* Permission: cream card, quiet ampersand */
main:has(>.signal-section)>.permission{gap:clamp(24px,5vw,80px)}
main:has(>.signal-section) .permission-symbol{color:var(--gg-surface-sunk);font-size:clamp(240px,26vw,380px)}
main:has(>.signal-section) .permission h2{font-size:clamp(40px,4.4vw,64px)}
main:has(>.signal-section) .permission-aside{color:var(--gg-brass-700)}

/* Craft: navy card */
main:has(>.signal-section)>.craft:not(#gg){border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:var(--gg-card-pad);margin:var(--gg-gap) auto}
main:has(>.signal-section) .craft .section-heading>p{color:var(--gg-muted-on-dark)}
main:has(>.signal-section) .craft-grid{gap:var(--gg-gap)}
main:has(>.signal-section) .craft-detail{border:0;border-radius:var(--gg-radius-inner);box-shadow:none;background:var(--gg-navy)}
main:has(>.signal-section) .craft-detail figcaption{background:var(--gg-navy)}
main:has(>.signal-section) .craft-detail figcaption>span{color:var(--gg-brass-on-dark)}
main:has(>.signal-section) .craft-detail p{color:var(--gg-muted-on-dark)}
main:has(>.signal-section) .craft .image-note{color:var(--gg-muted-on-dark)}

/* Digital / availability / questions / maker: cream cards */
main:has(>.signal-section)>.digital{gap:clamp(32px,5vw,80px)}
main:has(>.signal-section) .digital-copy>p.digital-small{color:var(--gg-muted)}
main:has(>.signal-section) .android-choice{display:inline-flex;align-items:center;min-height:44px}
main:has(>.signal-section)>.availability:not(#gg){position:relative;padding-top:calc(var(--gg-card-pad) + 22px)}
main:has(>.signal-section)>.availability::before{content:"";position:absolute;left:var(--gg-card-pad);top:var(--gg-card-pad);width:48px;height:3px;border-radius:3px;background:var(--gg-brass)}
main:has(>.signal-section)>.questions{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px)}
main:has(>.signal-section) .questions h2{font-size:clamp(30px,3vw,44px)}
main:has(>.signal-section)>.maker-teaser{gap:clamp(20px,3vw,40px)}
main:has(>.signal-section) .maker-teaser img{background:var(--gg-surface-sunk)}

/* Finale: navy card */
main:has(>.signal-section)>.finale:not(#gg){background:var(--gg-navy);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);margin:var(--gg-gap) auto;padding-top:var(--gg-card-pad);padding-left:var(--gg-card-pad);padding-right:var(--gg-card-pad)}
main:has(>.signal-section) .finale h2{font-size:clamp(42px,5.2vw,76px)}
main:has(>.signal-section) .finale>p:not(.eyebrow){color:var(--gg-muted-on-dark)}

/* No hover lifts */
main:has(>.signal-section) .button:not(#gg):hover,main:has(>.signal-section) .presets button:not(#gg):hover{transform:none}

/* --------------------------------------------------------------------------
   05 — Android
   -------------------------------------------------------------------------- */
body.android-page .download-hero{
  margin-top:24px;border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);background:var(--gg-navy-deep);
  min-height:0;padding:clamp(32px,4.6vw,72px);gap:clamp(32px,5vw,72px)
}
body.android-page .download-hero::before{right:-260px;top:-120px}
body.android-page .download-copy h1{font:400 clamp(44px,5vw,72px)/1.02 var(--gg-font-display);letter-spacing:var(--gg-tracking-display);margin:16px 0 20px}
body.android-page .download-copy h1 em{color:var(--gg-brass-on-dark)}
body.android-page .download-intro{color:var(--gg-muted-on-dark);font-size:18px;line-height:1.6;margin:0 0 20px}
body.android-page .download-features{color:var(--gg-cream);font-size:16px}
body.android-page .download-features li::before{color:var(--gg-brass-on-dark)}
body.android-page .download-apk:not(#gg){min-height:54px;border-radius:var(--gg-pill);font-size:16px}
body.android-page .download-apk:not(#gg):hover{}
body.android-page :is(.download-meta,.preview-note){color:var(--gg-muted-on-dark)}
body.android-page .browser-alternative{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:var(--gg-cream)}
body.android-page .app-frame{transform:none;box-shadow:0 24px 50px -20px rgba(0,0,0,.7)}
body.android-page .download-art figcaption{color:var(--gg-brass-on-dark)}
body.android-page .download-art figcaption span{color:var(--gg-muted-on-dark)}

/* Widgets: cream card, sunk "home screen" well */
body.android-page .widget-showcase:not(#gg){border-bottom:1px solid var(--gg-line);color:var(--gg-navy)}
body.android-page .widget-showcase h2{font:400 var(--gg-h2)/1.06 var(--gg-font-display);letter-spacing:var(--gg-tracking-display);margin:10px 0 0}
body.android-page .widget-showcase h2 em{color:var(--gg-brass-600)}
body.android-page .ws-lead,body.android-page .ws-howto{color:var(--gg-muted)}
body.android-page .ws-wall{background:var(--gg-surface-sunk);border:0;border-radius:var(--gg-radius-inner);box-shadow:none}
body.android-page .ws-wall::before{display:none}
body.android-page .ws-caption:not(#gg){}
body.android-page .ws-theme{border-color:var(--gg-line-strong);background:var(--gg-surface-raised);font:600 15px/1.2 var(--gg-font-ui)}
body.android-page .ws-theme[aria-pressed=true]{background:var(--gg-navy);border-color:var(--gg-navy);color:var(--gg-cream)}
body.android-page .ws-themes-label{font:600 12px/1.4 var(--gg-font-ui);letter-spacing:var(--gg-tracking-label);color:var(--gg-muted)}
@media(hover:hover){body.android-page .ws-item:hover img{}}

/* Welcome features: three cards on the page */
body.android-page .welcome-features{background:none;padding:var(--gg-section) 0 calc(var(--gg-section) - 40px)}
body.android-page .welcome-features h2{font:400 var(--gg-h2)/1.06 var(--gg-font-display);letter-spacing:var(--gg-tracking-display);margin:12px 0 28px}
body.android-page .welcome-features h2 em{color:var(--gg-brass-600)}
body.android-page .welcome-feature-grid{gap:var(--gg-gap)}
body.android-page .welcome-feature-grid article{background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:clamp(24px,2.6vw,36px)}
body.android-page .welcome-feature-grid article>span{display:inline-flex;font:600 12px/1.4 var(--gg-font-ui);letter-spacing:var(--gg-tracking-label);color:var(--gg-brass-700);padding-bottom:14px;border-bottom:2px solid var(--gg-brass)}
body.android-page .welcome-feature-grid h3{font:400 var(--gg-h3)/1.15 var(--gg-font-display);margin:16px 0 8px}
body.android-page .welcome-feature-grid p{color:var(--gg-muted)}

/* Install guide + help: cream cards */
body.android-page .install-guide:not(#gg){grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);border-top:1px solid var(--gg-line)}
body.android-page :is(.install-guide,.download-help) h2{font:400 clamp(30px,3vw,44px)/1.08 var(--gg-font-display);letter-spacing:var(--gg-tracking-display)}
body.android-page .install-guide h2 em{color:var(--gg-brass-600)}
body.android-page .install-guide>div>p:last-child{color:var(--gg-muted);font-size:17px}
body.android-page .install-guide li::before{border:0;background:var(--gg-surface-sunk);color:var(--gg-brass-700);font:600 14px/1 var(--gg-font-ui)}
body.android-page .install-guide h3{font:400 var(--gg-h3)/1.15 var(--gg-font-display);margin:0 0 8px}
body.android-page .install-guide li p{color:var(--gg-muted);font-size:16px}
body.android-page .download-help{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,5vw,80px);align-items:start}
body.android-page .download-help>h2{grid-column:1;grid-row:1 / span 20;margin:0}
body.android-page .download-help>details{grid-column:2}

/* --------------------------------------------------------------------------
   06 — Floppy disk (wall-art template + shutter film)
   -------------------------------------------------------------------------- */
main:has(>.floppy-film) .wp-thumbs{grid-template-columns:repeat(5,minmax(0,1fr))}
main:has(>.floppy-film) .wp-thumbs button{width:auto;max-width:none}
main:has(>.floppy-film) .wp-visual .wp-image img{aspect-ratio:4/3;object-fit:contain}
.wp-visual>.floppy-film-link:not(#gg){
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;margin:4px 8px 8px;border:1px solid var(--gg-line-strong);
  border-radius:var(--gg-pill);font:600 15px/1.2 var(--gg-font-ui);color:var(--gg-navy);text-decoration:none
}
.wp-visual>.floppy-film-link:hover{background:rgba(9,43,59,.05);}
main>.floppy-film{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px)}
.floppy-film>div>p:not(.eyebrow){font-size:16px;color:var(--gg-muted)}
.floppy-film video{border-radius:var(--gg-radius-inner);background:var(--gg-surface-sunk)}
.floppy-film figcaption{font:400 13px/1.5 var(--gg-font-ui);color:var(--gg-muted)}
main>.floppy-details{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px)}
.floppy-details dl>div{border-bottom:1px solid var(--gg-line);padding:18px 0}
.floppy-details dl>div:first-child{border-top:1px solid var(--gg-line)}
.floppy-details dt{font:600 15px/1.4 var(--gg-font-ui)}
.floppy-details dd{font-size:16px;color:var(--gg-muted)}

/* --------------------------------------------------------------------------
   07 — Privacy (document card) and 404
   -------------------------------------------------------------------------- */
main.policy:has(>section){
  box-sizing:border-box;width:calc(100% - 2 * var(--gg-gutter));max-width:900px;margin:24px auto var(--gg-section);
  padding:var(--gg-card-pad);background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);color:var(--gg-navy)
}
main.policy h1{font:400 var(--gg-h1)/1.03 var(--gg-font-display);letter-spacing:var(--gg-tracking-display);margin:14px 0 14px}
main.policy .updated:not(#gg){font:500 14px/1.5 var(--gg-font-ui);color:var(--gg-muted);padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--gg-line);position:relative}
main.policy .updated::after{content:"";position:absolute;left:0;bottom:-2px;width:48px;height:3px;border-radius:3px;background:var(--gg-brass)}
main.policy p:not(#gg){font-size:17px;line-height:1.7;margin:12px 0 0}
main.policy>p:nth-of-type(3){color:var(--gg-navy)}
main.policy>section{padding-top:28px;margin-top:28px;border-top:1px solid var(--gg-line)}
main.policy>section p{color:var(--gg-muted)}
main.policy h2{font:400 var(--gg-h3)/1.15 var(--gg-font-display);letter-spacing:var(--gg-tracking-display);margin:0}
main.policy>p:last-child:not(#gg){margin-top:36px}
main.policy:has(>section)>p:last-child a:not(#gg){
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--gg-line-strong);border-radius:var(--gg-pill);
  font:600 15px/1.2 var(--gg-font-ui);color:var(--gg-navy);text-decoration:none
}
main.policy:has(>section)>p:last-child a:hover{background:rgba(9,43,59,.05);}

/* 404: one centred card */
html:has(main.policy:not(:has(>section))) body{min-height:100vh;padding-bottom:var(--gg-gutter);box-sizing:border-box}
main.policy:not(:has(>section)){
  box-sizing:border-box;width:calc(100% - 2 * var(--gg-gutter));max-width:640px;margin:clamp(24px,14vh,160px) auto 0;padding:var(--gg-card-pad);
  background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow)
}
main.policy:not(:has(>section)) .brand{margin-bottom:12px}
main.policy:not(:has(>section)) h1{font-size:clamp(36px,4.4vw,52px);margin:12px 0 12px}
main.policy:not(:has(>section))>p:not(:last-child){color:var(--gg-muted)}
main.policy:not(:has(>section))>p:last-child:not(#gg){display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;font-size:0}
main.policy:not(:has(>section))>p:last-child a:not(#gg){
  display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:var(--gg-pill);font:600 16px/1.2 var(--gg-font-ui);text-decoration:none;
  border:1px solid var(--gg-line-strong);color:var(--gg-navy)
}
main.policy:not(:has(>section))>p:last-child a:first-child:not(#gg){background:var(--gg-navy);border-color:var(--gg-navy);color:var(--gg-cream)}
main.policy:not(:has(>section))>p:last-child a:first-child:not(#gg):hover{background:var(--gg-ink)}
main.policy:not(:has(>section))>p:last-child a:last-child:hover{background:rgba(9,43,59,.05);}

/* --------------------------------------------------------------------------
   08 — Creator (canonical → /about; kept minimal: portrait card + copy card)
   -------------------------------------------------------------------------- */
main.maker-page{
  max-width:var(--gg-container);box-sizing:border-box;padding:24px var(--gg-gutter) 0;margin:0 auto;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gg-gap);align-items:start
}
main.maker-page .maker-portrait{top:calc(var(--gg-header-h) + 16px);background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:10px}
main.maker-page .maker-portrait img{border-radius:var(--gg-radius-inner);background:var(--gg-surface-sunk)}
main.maker-page .maker-portrait figcaption{font:600 12px/1.4 var(--gg-font-ui);letter-spacing:var(--gg-tracking-label);color:var(--gg-muted);margin:14px 8px 6px}
main.maker-page .maker-copy{background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:var(--gg-card-pad)}
main.maker-page .maker-copy h1{font:400 clamp(40px,4.4vw,64px)/1.03 var(--gg-font-display);letter-spacing:var(--gg-tracking-display);margin:14px 0 18px}
main.maker-page .maker-copy h1 em{color:var(--gg-brass-600)}
main.maker-page .maker-lead{font:500 clamp(19px,1.5vw,22px)/1.45 var(--gg-font-ui);color:var(--gg-ink)}
main.maker-page .maker-copy>p:not(.eyebrow):not(.maker-lead){font-size:17px;color:var(--gg-muted);margin:0 0 14px}
main.maker-page .maker-lead{margin:0 0 18px}
main.maker-page .maker-support>*{margin:0 0 12px}
main.maker-page .maker-support>:last-child{margin-bottom:0}
main.maker-page .maker-support .button:not(#gg){margin:6px 0 16px}
main.maker-page .maker-support{background:var(--gg-surface-sunk);border:0;border-radius:var(--gg-radius-inner);padding:clamp(20px,2.4vw,32px);margin:28px 0}
main.maker-page .maker-support h2{font:400 var(--gg-h3)/1.15 var(--gg-font-display);margin:0 0 8px}
main.maker-page .maker-support p{font-size:16px}
main.maker-page .maker-status{border-left:3px solid var(--gg-brass);color:var(--gg-navy)}
main.maker-page .maker-fine{color:var(--gg-muted)}
main.maker-page .maker-back:not(#gg){
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--gg-line-strong);border-radius:var(--gg-pill);
  font:600 15px/1.2 var(--gg-font-ui);color:var(--gg-navy);text-decoration:none
}
main.maker-page .maker-back:hover{background:rgba(9,43,59,.05);}

/* --------------------------------------------------------------------------
   09 — Internal Mood Meter commercial / draft pages (designed dark; keep them dark)
   -------------------------------------------------------------------------- */
html.gg-internal,
html.gg-internal body{background:var(--gg-navy-deep)!important;color:var(--gg-cream)}
html.gg-internal :is(h1,h2,h3){color:var(--gg-cream)}
html.gg-internal :is(.eyebrow,.brand,summary){color:var(--gg-brass-on-dark)}
html.gg-internal p{color:var(--gg-muted-on-dark)}
html.gg-internal a{color:var(--gg-brass-on-dark)}
html.gg-internal video{border-radius:var(--gg-radius-inner)}
html.gg-internal :focus-visible{outline-color:var(--gg-brass-on-dark)}

/* --------------------------------------------------------------------------
   10 — Responsive
   -------------------------------------------------------------------------- */
@media(max-width:1000px){
  main:has(.view-switch) .glazing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  main:has(.view-switch)>.feature-strip:not(#gg){grid-template-columns:repeat(2,minmax(0,1fr))}
  main:has(>.signal-section)>.hero{padding:48px 0 24px}
}
@media(max-width:900px){
  main.enh-plain-main>.enh-feature-hero>div{grid-column:1/-1}
  main.enh-plain-main>.enh-feature-hero>div:last-child{max-width:520px}
  main:has(.view-switch)>section.hero>*{grid-column:1/-1}
  main:has(.view-switch)>.story,main:has(.view-switch)>.configure,main:has(.view-switch) .motion-grid{grid-template-columns:1fr}
  main:has(.view-switch)>.story{padding:10px 10px 28px!important}
  main:has(.view-switch)>.story>div{padding:14px 14px 0;grid-row:2}
  main:has(.view-switch)>.faq,main>.gl-faq,body.android-page .download-help,
  main>.floppy-film,main>.floppy-details,body.android-page .install-guide,main:has(>.signal-section)>.questions{display:block}
  main.enh-plain-main>.enh-section:not(:has(>.enh-tiles)){display:block}
  main.enh-plain-main>.enh-section>h2:not(#gg){margin-bottom:16px}
  main.enh-plain-main .about-aerial-frame{margin:20px 0 0;max-width:420px}
  main>.gl-hero,main>.gl-preview,main>.gl-gallery,main:has(>.gl-hero) .gl-steps{grid-template-columns:1fr}
  main:has(>.signal-section) .three-things .steps{grid-template-columns:1fr}
  main.maker-page{grid-template-columns:1fr}
  main.maker-page .maker-portrait{position:static;max-width:420px;width:100%;margin:0}
  main:has(>.gl-hero) .gl-faq>details:first-of-type{}
}
@media(max-width:760px){
  main:is(:has(>.gl-hero),:has(.view-switch),:has(>.signal-section)),body.android-page main#main{padding:0 var(--gg-gutter) 8px}
  main.enh-plain-main>.enh-feature-hero{padding-top:12px}
  .enh-feature-hero>div:first-child{padding:28px 24px 26px}
  .enh-feature-hero h1{font-size:clamp(36px,10vw,46px)}
  .enh-feature-hero .button{width:100%}
  main.enh-plain-main>.enh-section:not(:has(>.enh-tiles)){padding:24px!important;padding-top:44px!important}
  main.enh-plain-main>.enh-section:not(:has(>.enh-tiles))::before{left:24px;top:24px}
  #support.quiet-support>.support-link{width:100%;justify-content:center;margin:8px 0 16px}
  #support.quiet-support>h2{margin:10px 0 0}
  #support.quiet-support>p:nth-of-type(2){margin-top:16px}

  main>.gl-hero{margin-top:12px;padding:28px 20px}
  .gl-hero h1{font-size:clamp(40px,11vw,52px)}
  .gl-config{padding:20px}
  .gl-config .button{width:100%}
  main>.gl-promise:not(#gg),main:has(.view-switch)>.feature-strip:not(#gg){grid-template-columns:1fr;gap:8px}
  .gl-promise span,.feature-strip span{min-height:52px;padding:8px 18px}
  :where(.gl-story,.gl-preview,.gl-faq,main:has(.view-switch)>:is(.motion,.configure,.faq),main:has(>.signal-section)>:is(.signal-section,.permission,.digital,.availability,.questions,.maker-teaser,.craft),.widget-showcase,.install-guide,.download-help,main>.floppy-film){padding:24px 18px!important}
  main>.gl-story:not(#gg){padding-top:44px!important;text-align:left}
  .gl-story::before{left:18px;margin-left:0;top:24px}
  .gl-story p:not(.eyebrow){margin-left:0}
  .gl-lamp{height:280px}
  .gl-demo-btn{width:100%;justify-content:center}
  main>.gl-final{padding:32px 20px;text-align:left}
  .gl-final .button{width:100%}

  main:has(.view-switch) .hero-copy{padding:28px 24px 26px}
  main:has(.view-switch) .hero-copy .button{width:100%}
  main:has(.view-switch) .hero-art>img{aspect-ratio:1.05}
  .view-switch{bottom:12px}
  .view-switch button{padding:0 16px}
  main:has(.view-switch) .glazing-grid{grid-template-columns:1fr}
  main:has(.view-switch)>.room>div{position:static;max-width:none;border-radius:0;padding:24px}
  main:has(.view-switch)>.configure form{padding:18px}

  main:has(>.signal-section)>.hero:not(#gg){margin-top:12px;padding:36px 0 18px}
  main:has(>.signal-section)>.finale:not(#gg){padding-left:18px;padding-right:18px;padding-top:44px}
  main:has(>.signal-section)>.availability::before{left:18px;top:24px}
  main:has(>.signal-section)>.availability{padding-top:44px!important}
  main:has(>.signal-section) .permission-symbol{font-size:300px;right:-10px;opacity:1}
  main:has(>.signal-section) .permission h2{font-size:44px}
  main:has(>.signal-section) .maker-teaser .button{width:100%}
  main:has(>.signal-section) .hero-actions .button{width:100%;max-width:340px}

  body.android-page .download-hero{margin-top:12px;padding:32px 22px;grid-template-columns:1fr}
  body.android-page .download-apk{width:100%}
  body.android-page .download-hero::before{width:520px;height:520px;right:-300px;top:auto;bottom:-120px}

  main>.floppy-film:not(#gg){}
  main.policy:has(>section){margin-top:12px;padding:28px 22px}
  main.policy p:not(#gg){font-size:16px}
  main.policy:not(:has(>section))>p:last-child a{flex:1 1 100%;justify-content:center}
  main.maker-page{padding-top:12px}
  main.maker-page .maker-copy{padding:26px 22px}
}

/* --------------------------------------------------------------------------
   11 — Motion
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .gl-lamp,.gl-lamp *,.gl-demo-btn::before{transition:none!important}
  body.android-page .app-frame{transform:none}
}

/* ==========================================================================
   Gauge & Gear — Direction C "Modern Workshop" · How gauges work
   Loaded after style.css (to be appended to design-pages.css). Uses only
   style.css tokens and components (.button, .store-text-link, .store-badge,
   .store-steps, .store-small, .eyebrow).
     How gauges work page ... body.how-gauges-page main.hgw
     Patched sections ....... .hgw-strip (index + gauges), .hgw-new-here (gauges hero),
                              .hgw-facts (mood-meter-product availability)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 — Page shell (store-template container, numbered eyebrows)
   -------------------------------------------------------------------------- */
body.how-gauges-page main.hgw:not(#gg){max-width:none;margin:0;padding:0 var(--gg-gutter) 8px;box-sizing:border-box;counter-reset:gg-index}
.hgw>section:not(#gg){box-sizing:border-box;max-width:var(--gg-container);margin-left:auto;margin-right:auto;padding:var(--gg-section) 0;border:0;background:none;scroll-margin-top:calc(var(--gg-header-h) + 12px)}
.hgw .eyebrow:not(#gg){font-size:var(--gg-text-xs);letter-spacing:var(--gg-tracking-label);line-height:1.4;color:var(--gg-muted)}
.hgw>section>.eyebrow,.hgw>section>div>.eyebrow,.hgw .gg-demo-kicker{
  counter-increment:gg-index;
  &::before{content:counter(gg-index,decimal-leading-zero) "\00a0\2014\00a0\00a0";color:var(--gg-brass-700);font-variant-numeric:tabular-nums;letter-spacing:.06em}
}
.hgw-section-head{max-width:760px;margin-bottom:clamp(24px,3vw,40px)}
.hgw-section-head h2{margin:12px 0 14px}
.hgw-section-head>p:not(.eyebrow){color:var(--gg-muted);font-size:var(--gg-text-lg);margin:0}
.hgw :is(ul,ol)[role=list]{list-style:none;margin:0;padding:0}
.hgw>section:not(.gg-demo):not(.hgw-cta) a:not(.button):not(.store-text-link){color:var(--gg-navy)}
.hgw .hgw-plan-dark a:not(.button){color:var(--gg-cream)}

/* --------------------------------------------------------------------------
   02 — Hero: copy card (7 cols) + render tile (5 cols)
   -------------------------------------------------------------------------- */
.hgw>.hgw-hero:not(#gg){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gg-gap);align-items:stretch;padding-top:24px;padding-bottom:0}
.hgw-hero-copy{
  grid-column:span 7;display:flex;flex-direction:column;justify-content:center;min-width:0;
  background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:clamp(28px,4.4vw,64px)
}
.hgw-hero h1:not(#gg){font-size:clamp(42px,5vw,72px);line-height:1;margin:16px 0 22px}
.hgw-lead{font:500 clamp(19px,1.6vw,23px)/1.45 var(--gg-font-ui);color:var(--gg-navy);max-width:30em;margin:0 0 14px}
.hgw-sub{font-size:var(--gg-text-md);color:var(--gg-muted);max-width:36em;margin:0}
.hgw-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:28px 0 18px}
.hgw-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px!important}
.hgw-chips li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--gg-pill);background:var(--gg-surface-sunk);color:var(--gg-brass-700);font:600 13px/1.3 var(--gg-font-ui)}
.hgw-chips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gg-brass)}
.hgw-hero .store-small:not(#gg){margin:0}
.hgw-hero-figure{grid-column:span 5;position:relative;margin:0;min-height:100%;border-radius:var(--gg-radius);overflow:hidden;box-shadow:var(--gg-shadow);background:var(--gg-navy-deep)}
.hgw-hero-figure img{position:absolute;left:0;top:50%;width:100%;height:auto;transform:translateY(-50%);display:block;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
.hgw-hero-figure:not(#gg){background:radial-gradient(ellipse 70% 45% at 50% 50%,#0a2536 0%,#031623 70%)}
.hgw-hero-figure figcaption{
  position:absolute;left:16px;bottom:16px;max-width:calc(100% - 32px);margin:0;padding:8px 14px;border-radius:var(--gg-pill);
  background:rgba(252,248,237,.92);color:var(--gg-navy);font:600 12px/1.3 var(--gg-font-ui)!important;letter-spacing:.12em
}

/* --------------------------------------------------------------------------
   03 — How it works: animated phone ⇄ Wi-Fi ⇄ desk meter
   -------------------------------------------------------------------------- */
.hgw-diagram{
  position:relative;margin:0 0 var(--gg-gap);background:var(--gg-navy);color:var(--gg-cream);border-radius:var(--gg-radius);
  box-shadow:var(--gg-shadow);padding:clamp(20px,3.4vw,48px) clamp(12px,3vw,48px) clamp(22px,3vw,40px);overflow:hidden
}
.hgw-diagram :focus-visible{outline-color:var(--gg-brass-on-dark)!important}
.hgw-defs{position:absolute;width:0;height:0;overflow:hidden}
.hgw-scene{display:block;width:100%;height:auto;max-width:980px;margin:0 auto;overflow:visible}
.hgw-scene-tall{display:none;max-width:420px}
@media(max-width:640px){
  .hgw-scene-wide{display:none}
  .hgw-scene-tall{display:block}
}
.hgw-pause{
  position:absolute;top:14px;right:14px;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid rgba(252,248,237,.35);border-radius:var(--gg-pill);background:rgba(7,29,41,.6);color:var(--gg-cream);
  font:600 14px/1 var(--gg-font-ui);cursor:pointer;transition:background-color var(--gg-dur) var(--gg-ease),border-color var(--gg-dur) var(--gg-ease)
}
.hgw-pause[hidden]{display:none}
.hgw-pause:hover{background:rgba(252,248,237,.1);border-color:var(--gg-cream)}
.hgw-pause-icon{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.hgw-pause[aria-pressed=true] .hgw-pause-icon{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}

/* SVG text + strokes */
.hgw-scene text{font-family:var(--gg-font-ui)}
.hgw-svg-brand{font-size:9px;font-weight:600;letter-spacing:2px;fill:#6f5424}
.hgw-svg-title{font-family:var(--gg-font-display)!important;font-size:21px;fill:#092b3b}
.hgw-svg-small{font-size:10px;fill:#52666a}
.hgw-svg-label{font-size:12px;font-weight:600;letter-spacing:2.5px;fill:#dfbd7c}
.hgw-svg-note{font-size:14px;font-weight:500;fill:#c3cfcf}
.hgw-svg-caption{font-size:12px;font-weight:600;letter-spacing:2.4px;fill:#dfbd7c}
.hgw-status{font-size:12px;font-weight:600;fill:#092b3b;opacity:0}
.hgw-status-sync{opacity:1;fill:#2f4a3a}
.hgw-wire-base{fill:none;stroke:rgba(252,248,237,.22);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.hgw-comet{fill:none;stroke:#dfbd7c;stroke-width:5;stroke-linecap:round;stroke-dasharray:14 100;stroke-dashoffset:14;opacity:0}
.hgw-arrowhead{fill:none;stroke:rgba(223,189,124,.55);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hgw-wifi-arc{fill:none;stroke:#dfbd7c;stroke-width:5;stroke-linecap:round;opacity:.5}
.hgw-wifi-dot{fill:#dfbd7c}
.hgw-leg{stroke:#5a3219;stroke-width:12;stroke-linecap:round;fill:none}
.hgw-leg-back{stroke:#3e2210;stroke-width:9}

/* Moving parts rotate around their local (0,0) pivot */
.hgw-needle,.hgw-knob{transform-box:view-box;transform-origin:0 0}
.hgw-needle{transform:rotate(-52deg)}
.hgw-thumb{transform:translateX(27px)}
.hgw-knob-ring{opacity:0}

/* One 12-second story: app → meter, then knob → app */
.hgw-diagram{--hgw-loop:12s}
.hgw-needle-phone{animation:hgw-phone var(--hgw-loop) var(--gg-ease) infinite both}
.hgw-thumb{animation:hgw-thumb var(--hgw-loop) var(--gg-ease) infinite both}
.hgw-needle-meter{animation:hgw-meter var(--hgw-loop) var(--gg-ease) infinite both}
.hgw-knob{animation:hgw-knob var(--hgw-loop) var(--gg-ease) infinite both}
.hgw-knob-ring{animation:hgw-ring var(--hgw-loop) linear infinite both}
.hgw-comet-out{animation:hgw-out var(--hgw-loop) linear infinite both}
.hgw-comet-in{animation:hgw-in var(--hgw-loop) linear infinite both}
.hgw-comet-late{animation-delay:.45s}
.hgw-wifi-arc{animation:hgw-wifi var(--hgw-loop) linear infinite both}
.hgw-wifi-2{animation-delay:.15s}.hgw-wifi-3{animation-delay:.3s}
.hgw-status-sync{animation:hgw-st-sync var(--hgw-loop) linear infinite both}
.hgw-status-out{animation:hgw-st-out var(--hgw-loop) linear infinite both}
.hgw-status-in{animation:hgw-st-in var(--hgw-loop) linear infinite both}
.hgw-legend-out{animation:hgw-leg-out var(--hgw-loop) linear infinite both}
.hgw-legend-in{animation:hgw-leg-in var(--hgw-loop) linear infinite both}
.hgw-diagram[data-paused=true] *,.hgw-diagram[data-paused=true] *::before{animation-play-state:paused!important}

@keyframes hgw-phone{0%,8%{transform:rotate(-52deg)}22%,70%{transform:rotate(46deg)}84%,100%{transform:rotate(-52deg)}}
@keyframes hgw-thumb{0%,8%{transform:translateX(27px)}22%,70%{transform:translateX(97px)}84%,100%{transform:translateX(27px)}}
@keyframes hgw-meter{0%,30%{transform:rotate(-52deg)}42%,52%{transform:rotate(46deg)}62%,100%{transform:rotate(-52deg)}}
@keyframes hgw-knob{0%,50%{transform:rotate(0deg)}62%,100%{transform:rotate(-120deg)}}
@keyframes hgw-ring{0%,46%{opacity:0}50%,60%{opacity:.9}66%,100%{opacity:0}}
@keyframes hgw-out{0%,17%{stroke-dashoffset:14;opacity:0}18%{stroke-dashoffset:14;opacity:1}33%{stroke-dashoffset:-100;opacity:1}34%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes hgw-in{0%,59%{stroke-dashoffset:14;opacity:0}60%{stroke-dashoffset:14;opacity:1}74%{stroke-dashoffset:-100;opacity:1}75%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes hgw-wifi{0%,16%{opacity:.5}20%,32%{opacity:1}36%,58%{opacity:.5}62%,72%{opacity:1}76%,100%{opacity:.5}}
@keyframes hgw-st-sync{0%,17%{opacity:1}18%,42%{opacity:0}43%,51%{opacity:1}52%,84%{opacity:0}85%,100%{opacity:1}}
@keyframes hgw-st-out{0%,17%{opacity:0}18%,42%{opacity:1}43%,100%{opacity:0}}
@keyframes hgw-st-in{0%,51%{opacity:0}52%,84%{opacity:1}85%,100%{opacity:0}}
@keyframes hgw-leg-out{0%,6%{color:var(--gg-muted-on-dark);--hgw-dot:transparent}8%,46%{color:var(--gg-cream);--hgw-dot:var(--gg-brass-on-dark)}48%,100%{color:var(--gg-muted-on-dark);--hgw-dot:transparent}}
@keyframes hgw-leg-in{0%,48%{color:var(--gg-muted-on-dark);--hgw-dot:transparent}50%,88%{color:var(--gg-cream);--hgw-dot:var(--gg-brass-on-dark)}90%,100%{color:var(--gg-muted-on-dark);--hgw-dot:transparent}}
@property --hgw-dot{syntax:"<color>";inherits:true;initial-value:transparent}

/* Legend under the illustration (also the text alternative of the story) */
.hgw-diagram figcaption{max-width:980px;margin:clamp(14px,2vw,24px) auto 0}
.hgw-legend{display:grid;grid-template-columns:1fr 1fr;gap:12px clamp(16px,3vw,40px)}
.hgw-legend li{position:relative;padding-left:24px;font-size:16px;line-height:1.5;color:var(--gg-muted-on-dark)}
.hgw-legend li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;border-radius:50%;border:2px solid var(--gg-brass-on-dark);background:var(--hgw-dot,transparent);box-sizing:border-box}
.hgw-legend strong{color:inherit;font-weight:600}
.hgw-diagram-note{margin:14px 0 0;font-size:13px;color:var(--gg-muted-on-dark);text-align:center}
.hgw-steps>li{display:flex}
.hgw-steps>li>article{flex:1}

/* --------------------------------------------------------------------------
   04 — Demo (existing app-demo component) keeps its own card
   -------------------------------------------------------------------------- */
.hgw>.gg-demo:not(#gg){max-width:var(--gg-container)}

/* --------------------------------------------------------------------------
   05 — Ideas: six use-case cards
   -------------------------------------------------------------------------- */
.hgw-use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gg-gap)}
.hgw-use{
  display:flex;flex-direction:column;align-items:flex-start;min-width:0;background:var(--gg-surface);border:1px solid var(--gg-line);
  border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:12px 12px 8px;transition:box-shadow var(--gg-dur) var(--gg-ease)
}
.hgw-use:hover{box-shadow:var(--gg-shadow-hover)}
.hgw-use-dial{align-self:stretch;display:flex;justify-content:center;align-items:flex-end;gap:12px;padding:22px 16px 18px;border-radius:var(--gg-radius-inner);background:var(--gg-surface-sunk)}
.hgw-use-dial svg{width:min(42%,150px);height:auto;display:block}
.hgw-use-dial svg:only-child{width:min(52%,170px)}
.hgw-use>:not(.hgw-use-dial){margin-left:12px;margin-right:12px}
.hgw-use .store-badge:not(#gg){margin-top:18px;margin-bottom:0}
.hgw-use h3{margin:12px 0 6px}
.hgw-use>p:not(.store-badge):not(.hgw-use-needs){font-size:15px;line-height:1.55;color:var(--gg-muted);margin:0 0 14px}
.hgw-use-needs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:auto 0 0;padding-top:4px;font:500 13px/1.4 var(--gg-font-ui);color:var(--gg-muted)}
.hgw-free{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--gg-pill);background:#e3eadf;color:#2f4a3a;font-weight:600}
.hgw-use-link{
  align-self:stretch;display:flex;justify-content:space-between;align-items:center;min-height:48px;margin-top:12px;padding:10px 4px 0;
  border-top:1px solid var(--gg-line);font:600 15px/1.3 var(--gg-font-ui);text-decoration:none
}
.hgw-use-link:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   06 — App today / desk meter in January
   -------------------------------------------------------------------------- */
.hgw-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gg-gap);align-items:stretch}
.hgw-plan{
  display:flex;flex-direction:column;min-width:0;background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);
  box-shadow:var(--gg-shadow);padding:clamp(24px,3.4vw,48px)
}
.hgw-plan-label{margin:0;font:600 var(--gg-text-xs)/1.4 var(--gg-font-ui);letter-spacing:var(--gg-tracking-label);text-transform:uppercase;color:var(--gg-brass-700)}
.hgw-plan h3{font-size:clamp(26px,2.3vw,32px);margin:12px 0 4px}
.hgw-price{margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--gg-line);font:400 clamp(44px,4.6vw,64px)/1 var(--gg-font-display)!important;letter-spacing:var(--gg-tracking-display);color:var(--gg-navy)}
.hgw-ticks{display:grid;gap:10px;margin:0 0 26px!important}
.hgw-ticks li{position:relative;padding-left:30px;font-size:16px;line-height:1.5}
.hgw-ticks li::before{content:"";position:absolute;left:2px;top:.3em;width:16px;height:9px;border-left:2px solid var(--gg-brass-600);border-bottom:2px solid var(--gg-brass-600);transform:rotate(-45deg) scale(.8);transform-origin:40% 60%}
.hgw-plan-start{margin:auto 0 10px;font:600 var(--gg-text-xs)/1.4 var(--gg-font-ui);letter-spacing:var(--gg-tracking-label);text-transform:uppercase;color:var(--gg-muted)}
.hgw-plan-actions{display:flex;flex-wrap:wrap;gap:12px}
.hgw-plan-fine{margin:14px 0 0;font-size:14px;line-height:1.55}
.hgw-plan-dark:not(#gg){background:var(--gg-navy);border-color:transparent;color:var(--gg-cream)}
.hgw-plan-dark h3,.hgw-plan-dark .hgw-price{color:var(--gg-cream)}
.hgw-plan-dark .hgw-price{border-bottom-color:rgba(252,248,237,.16)}
.hgw-plan-dark .hgw-plan-label{color:var(--gg-brass-on-dark)}
.hgw-plan-dark :is(.hgw-plan-start,.hgw-plan-fine){color:var(--gg-muted-on-dark)}
.hgw-plan-dark .hgw-ticks li::before{border-color:var(--gg-brass-on-dark)}
.hgw-plan-dark .button:not(#gg){background:var(--gg-cream);color:var(--gg-navy)}
.hgw-plan-dark .button:not(#gg):hover{background:#fff}
.hgw-plan-dark :focus-visible{outline-color:var(--gg-brass-on-dark)!important}
.hgw-compare-note{margin:22px 0 0;font-size:15px;color:var(--gg-muted)}
.hgw-compare-note a{font-weight:600;white-space:nowrap}

/* --------------------------------------------------------------------------
   07 — Film (byte-range mp4, preload=metadata)
   -------------------------------------------------------------------------- */
.hgw>.hgw-film:not(#gg){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;
  background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:12px clamp(12px,1vw,12px) 12px clamp(24px,4vw,56px);margin:var(--gg-gap) auto}
.hgw-film-copy h2{margin:12px 0 14px}
.hgw-film-copy>p:not(.eyebrow){color:var(--gg-muted);margin:0}
.hgw-film-media{margin:0;border-radius:var(--gg-radius-inner);overflow:hidden;background:var(--gg-navy-deep)}
.hgw-film-media video{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--gg-navy-deep)}
.hgw-film-media figcaption{padding:10px 16px;font:500 13px/1.4 var(--gg-font-ui);color:var(--gg-muted-on-dark)}

/* --------------------------------------------------------------------------
   08 — FAQ accordions
   -------------------------------------------------------------------------- */
.hgw>.hgw-faq:not(#gg){display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:start}
.hgw-faq .hgw-section-head{position:sticky;top:calc(var(--gg-header-h) + 24px)}
.hgw-faq-list{background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:8px clamp(18px,3vw,36px)}
.hgw-faq-list details{border-bottom:1px solid var(--gg-line)}
.hgw-faq-list details:last-child{border-bottom:0}
.hgw-faq-list summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:12px 0;cursor:pointer;list-style:none;
  font:600 17px/1.4 var(--gg-font-ui);color:var(--gg-navy)
}
.hgw-faq-list summary::-webkit-details-marker{display:none}
.hgw-faq-list summary::after{
  content:"";flex:none;width:32px;height:32px;border-radius:50%;background:var(--gg-surface-sunk) no-repeat center/12px 12px;
  background-image:linear-gradient(var(--gg-navy),var(--gg-navy)),linear-gradient(var(--gg-navy),var(--gg-navy));
  background-size:12px 2px,2px 12px;transition:transform var(--gg-dur) var(--gg-ease)
}
.hgw-faq-list details[open]>summary::after{transform:rotate(45deg)}
.hgw-faq-list summary:hover{color:var(--gg-ink)}
.hgw-faq-list details>div{padding:0 48px 20px 0}
.hgw-faq-list details p{margin:0;font-size:16px;line-height:1.62;color:var(--gg-muted)}
.hgw-faq-list details a{font-weight:600}

/* --------------------------------------------------------------------------
   09 — Closing CTA band (navy)
   -------------------------------------------------------------------------- */
.hgw>.hgw-cta:not(#gg){
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;margin:var(--gg-gap) auto 0;
  background:var(--gg-navy);color:var(--gg-cream);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);
  padding:calc(var(--gg-card-pad) + 22px) var(--gg-card-pad) var(--gg-card-pad)
}
.hgw-cta::before{content:"";position:absolute;top:var(--gg-card-pad);left:50%;width:48px;height:3px;margin-left:-24px;border-radius:3px;background:var(--gg-brass)}
.hgw-cta h2{color:var(--gg-cream);margin:12px 0 16px}
.hgw-cta h2 em{color:var(--gg-brass-on-dark)}
.hgw-cta .eyebrow:not(#gg){color:var(--gg-muted-on-dark)}
.hgw-cta .eyebrow::before{color:var(--gg-brass-on-dark)!important}
.hgw-cta>p:not(.eyebrow){max-width:560px;margin:0 auto;color:var(--gg-muted-on-dark)}
.hgw-cta .hgw-actions{justify-content:center;margin-bottom:0}
.hgw-cta .button:not(#gg){background:var(--gg-cream);color:var(--gg-navy)}
.hgw-cta .button:not(#gg):hover{background:#fff}
.hgw-cta .store-text-link:not(#gg){color:var(--gg-cream);border-color:rgba(252,248,237,.35)}
.hgw-cta .store-text-link:not(#gg):hover{background:rgba(252,248,237,.08);border-color:var(--gg-cream)}
.hgw-cta :focus-visible{outline-color:var(--gg-brass-on-dark)!important}

/* --------------------------------------------------------------------------
   10 — Patched sections on other pages (see gauges-story/apply-patch.mjs)
   -------------------------------------------------------------------------- */
/* Strip under the gauge demo on index + gauges: one plain promise + link */
main>section.hgw-strip:not(#gg){
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;
  margin-top:0;margin-bottom:var(--gg-gap);padding:18px 18px 18px clamp(20px,3vw,32px);
  background:var(--gg-surface);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow)
}
.hgw-strip>p{margin:0;max-width:52em;font-size:16px;line-height:1.55;color:var(--gg-muted)}
.hgw-strip>p strong{color:var(--gg-navy);font-weight:600}
.hgw-strip-link:not(#gg),.hgw-new-here:not(#gg){
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid var(--gg-line-strong);border-radius:var(--gg-pill);
  font:600 15px/1.2 var(--gg-font-ui);color:var(--gg-navy);text-decoration:none;background:transparent;white-space:nowrap;
  transition:background-color var(--gg-dur) var(--gg-ease),border-color var(--gg-dur) var(--gg-ease)
}
.hgw-strip-link:hover,.hgw-new-here:hover{background:rgba(9,43,59,.05);border-color:var(--gg-navy)}
.hgw-new-here:not(#gg){margin:14px 0 18px 6px;vertical-align:top;white-space:normal}
/* Header nav gains "How gauges work" + "Ordering" (8 links): keep labels on one line on laptops */
@media(min-width:761px){.store-header nav>a:not(#gg){white-space:nowrap}}
@media(min-width:1181px) and (max-width:1340px){
  .store-header nav>a:not(#gg),.store-header .catalog-browse>summary:not(#gg){padding:0 9px;font-size:14px}
  html body .store-header a.brand.brand-transparent{--brand-unit:38px}
}
@media(min-width:761px) and (max-width:900px){
  .store-header nav>a:not(#gg),.store-header .catalog-browse>summary:not(#gg){padding:0 7px;font-size:14px}
}
/* Mood Meter product page: facts list in the availability section */
.hgw-facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin:18px 0 24px;padding:0;max-width:760px}
.hgw-facts li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--gg-pill);background:var(--gg-surface-sunk);color:var(--gg-brass-700);font:600 13px/1.3 var(--gg-font-ui)}
.hgw-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gg-brass)}

/* --------------------------------------------------------------------------
   11 — Responsive
   -------------------------------------------------------------------------- */
@media(max-width:1100px){
  .hgw-use-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .hgw>.hgw-hero:not(#gg){grid-template-columns:1fr}
  .hgw-hero-copy,.hgw-hero-figure{grid-column:1/-1}
  .hgw-hero-figure{aspect-ratio:3/2;min-height:0}
  .hgw-compare-grid{grid-template-columns:1fr}
  .hgw>.hgw-film:not(#gg){grid-template-columns:1fr;padding:10px 10px 10px}
  .hgw-film-copy{padding:18px 14px 4px}
  .hgw>.hgw-faq:not(#gg){grid-template-columns:1fr}
  .hgw-faq .hgw-section-head{position:static;margin-bottom:0}
}
@media(max-width:760px){
  .hgw>.hgw-hero:not(#gg){padding-top:12px}
  .hgw-hero-copy{padding:28px 22px 24px}
  .hgw-hero h1:not(#gg){font-size:clamp(38px,11vw,48px);margin:14px 0 16px}
  .hgw-actions{margin:22px 0 16px}
  .hgw-actions>a{flex:1 1 100%;justify-content:center;text-align:center;white-space:normal}
  .hgw-hero-figure figcaption{border-radius:var(--gg-radius-sm)}
  .hgw-diagram{padding:64px 12px 20px}
  .hgw-pause{top:10px;right:10px}
  .hgw-legend{grid-template-columns:1fr;padding:0 10px}
  .hgw-diagram-note{padding:0 10px}
  .hgw-use-grid{grid-template-columns:1fr}
  .hgw-plan{padding:24px 22px}
  .hgw-plan-actions>a{flex:1 1 100%}
  .hgw-faq-list{padding:4px 18px}
  .hgw-faq-list details>div{padding-right:0}
  .hgw>.hgw-cta:not(#gg){align-items:flex-start;text-align:left;padding:calc(28px + 22px) 22px 26px}
  .hgw-cta::before{top:28px;left:22px;margin-left:0}
  .hgw-cta>p:not(.eyebrow){margin:0}
  main>section.hgw-strip:not(#gg){padding:18px}
  .hgw-strip-link:not(#gg){flex:1 1 100%;justify-content:center}
}
@media(max-width:380px){
  .hgw-svg-note{font-size:16px}
  .hgw-chips li{font-size:12px}
}

/* --------------------------------------------------------------------------
   12 — Motion preferences: static, fully-synced illustration
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .hgw-diagram :is(.hgw-needle,.hgw-thumb,.hgw-knob,.hgw-knob-ring,.hgw-comet,.hgw-wifi-arc,.hgw-status,.hgw-legend li){animation:none!important}
  .hgw-needle{transform:rotate(40deg)}
  .hgw-thumb{transform:translateX(91px)}
  .hgw-comet:not(.hgw-comet-late){opacity:1;stroke-dashoffset:-60}
  .hgw-wifi-arc{opacity:1}
  .hgw-status-sync{opacity:1}
  .hgw-status-out,.hgw-status-in{opacity:0}
  .hgw-legend li{color:var(--gg-cream);--hgw-dot:var(--gg-brass-on-dark)}
  .hgw-pause{display:none!important}
}

/* Gauge demo: Mood Meter DESK meter (tabletop, two half-round dials, brass knobs, four legs).
   Markup comes from website/launch/public/app-demo.js (classes prefixed gg-desk-).
   The old wall-plaque markup (.gg-demo-meter, .gg-demo-wood, .gg-demo-screw) is no longer rendered. */

.gg-desk-group{flex:0 1 300px;min-width:0;max-width:300px;margin:0}
.gg-desk{position:relative}
.gg-desk-svg{display:block;width:100%;height:auto;overflow:visible}

/* Needle + knob rotate with CSS transforms around their pivots (also set inline as a fallback). */
.gg-desk-needle,.gg-desk-knob{transform-box:view-box}

/* Readings under each dial, aligned to the dial centres (110/340 and 230/340 of the drawing). */
.gg-desk-legend{position:relative;height:1.5em;margin-top:2px;font:600 11px/1.5 var(--gg-font-ui,system-ui,sans-serif);color:var(--demo-muted,#5b6b6b);letter-spacing:.02em}
.gg-desk-legend span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.gg-desk-legend span:first-child{left:32.35%}
.gg-desk-legend span:last-child{left:67.65%}
.gg-desk-legend b{font-weight:700;color:var(--gg-navy,#164a60);font-variant-numeric:tabular-nums}
.gg-demo .gg-desk-group figcaption{margin-top:12px}

/* Arrival: the left dial briefly warms when the desk meter settles on the new reading. */
.gg-desk-glow{opacity:0;transition:opacity .6s ease}
.gg-demo[data-arrived=true] .gg-desk-glow{opacity:.45;transition-duration:.15s}

@media (max-width:950px){.gg-desk-group{flex-basis:260px}}
@media (max-width:700px){
  .gg-demo .gg-desk-group{flex:1 1 0;max-width:260px}
  .gg-desk-legend{font-size:10px}
}
/* Phones: a landscape desk meter beside a tall phone gets too small, so stack them
   (phone, a downward signal arrow, then the desk meter at a readable width). */
@media (max-width:520px){
  .gg-demo .gg-demo-scene{flex-direction:column;align-items:center;gap:6px;min-height:0}
  .gg-demo .gg-demo-phone-group{width:min(150px,56%);max-width:none}
  .gg-demo .gg-demo-bridge{flex:0 0 26px;width:34px;height:26px;transform:rotate(90deg)}
  .gg-demo .gg-desk-group{flex:0 0 auto;width:min(250px,100%);max-width:none}
  .gg-demo .gg-desk-group figcaption,.gg-demo .gg-demo-phone-group figcaption{margin-top:10px}
}

@media (prefers-reduced-motion:reduce){.gg-desk-glow{transition:none}.gg-demo[data-arrived=true] .gg-desk-glow{opacity:0}}
.gg-demo[data-simple=true] .gg-desk-glow,.gg-demo[data-offscreen=true] .gg-desk-glow{opacity:0;transition:none}

/* Neutralise any leftover plaque rules should old markup be cached somewhere. */
.gg-demo .gg-demo-wood,.gg-demo .gg-demo-screw{display:none}


/* 2026-10-19: demo footer links were 12px text with 19px-tall targets; give them readable text and 44px touch targets. */
.gg-demo-footer .gg-demo-link{display:inline-flex;align-items:center;min-height:44px;font-size:15px}

/* ==========================================================================
   Gauge & Gear — Direction C "Modern Workshop" · Home
   Loaded after style.css + pages-gauges.css (appended to design-pages.css).
   Uses only style.css tokens/components; the phone ⇄ Wi-Fi ⇄ desk meter loop
   reuses .hgw-diagram (+ /assets/how-gauges-work/diagram.js) from pages-gauges.css.
     01 — Two paths (wall art / connected gauges) .... main > .home-paths
     02 — Connected gauges: promise + desk render ..... main > .home-gauges
     03 — "How it works in 12 seconds" loop ........... .hgw-diagram.home-loop
     04 — Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 — Two paths
   -------------------------------------------------------------------------- */
main>section.home-paths:not(#gg){padding-top:clamp(40px,5vw,72px);padding-bottom:0}
.home-paths-head{margin-bottom:clamp(18px,2.4vw,28px)}
.home-paths-head h2:not(#gg){margin:10px 0 0}
.home-paths-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gg-gap);align-items:stretch}
.home-path{
  display:flex;flex-direction:column;min-width:0;background:var(--gg-surface);border:1px solid var(--gg-line);
  border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:10px;overflow:hidden;
  transition:box-shadow var(--gg-dur) var(--gg-ease)
}
.home-path:hover{box-shadow:var(--gg-shadow-hover)}
.home-path-media{margin:0;aspect-ratio:3/2;border-radius:var(--gg-radius-inner);overflow:hidden;background:var(--gg-surface-sunk)}
.home-path-media img:not(#gg){display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%;border:0;border-radius:0;box-shadow:none}
.home-path-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:clamp(20px,2.4vw,32px) clamp(14px,2vw,26px) clamp(14px,1.6vw,20px)}
.home-path-kicker{margin:0;font:600 var(--gg-text-xs)/1.4 var(--gg-font-ui);letter-spacing:var(--gg-tracking-label);text-transform:uppercase;color:var(--gg-brass-700)}
.home-path h3:not(#gg){font-size:clamp(30px,2.8vw,42px);line-height:1.04;margin:10px 0 10px}
.home-path-line{margin:0 0 18px;max-width:30em;font-size:var(--gg-text-lg);line-height:1.5;color:var(--gg-muted)}
.home-path-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.home-path-facts li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--gg-pill);background:var(--gg-surface-sunk);color:var(--gg-brass-700);font:600 13px/1.3 var(--gg-font-ui)}
.home-path-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gg-brass)}
.home-path-note{margin:16px 0 0;font:500 15px/1.5 var(--gg-font-ui);color:var(--gg-navy)}
.home-path-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:auto;padding-top:24px}
.home-path-link:not(#gg){
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font:600 15px/1.2 var(--gg-font-ui);color:var(--gg-navy);
  text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:5px
}
.home-path-link:hover{text-decoration-color:currentColor}

/* Navy emphasis card: connected gauges (the render sits on navy already) */
.home-path-gauges:not(#gg){background:var(--gg-navy);border-color:transparent;color:var(--gg-cream)}
.home-path-gauges .home-path-media{background:var(--gg-navy-deep)}
.home-path-gauges h3:not(#gg){color:var(--gg-cream)}
.home-path-gauges .home-path-kicker{color:var(--gg-brass-on-dark)}
.home-path-gauges .home-path-line{color:var(--gg-muted-on-dark)}
.home-path-gauges .home-path-facts li{background:rgba(252,248,237,.08);color:var(--gg-brass-on-dark)}
.home-path-gauges .home-path-note{color:var(--gg-cream)}
.home-path-gauges .button:not(#gg){background:var(--gg-cream);color:var(--gg-navy)}
.home-path-gauges .button:not(#gg):hover{background:#fff}
.home-path-gauges .home-path-link:not(#gg){color:var(--gg-cream)}
.home-path-gauges :focus-visible{outline-color:var(--gg-brass-on-dark)!important}

/* --------------------------------------------------------------------------
   02 — Connected gauges: the one-sentence promise + desk render
   -------------------------------------------------------------------------- */
main>section.home-gauges:not(#gg){padding-top:clamp(48px,6vw,88px);padding-bottom:0}
.home-gauges-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gg-gap);align-items:stretch;margin-bottom:var(--gg-gap)}
.home-gauges-copy{
  display:flex;flex-direction:column;justify-content:center;min-width:0;background:var(--gg-surface);border:1px solid var(--gg-line);
  border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);padding:var(--gg-card-pad)
}
.home-promise:not(#gg){font-size:clamp(28px,2.6vw,40px);line-height:1.12;margin:14px 0 18px}
.home-gauges-copy>p:not(.eyebrow):not(.store-small):not(.home-price){margin:0;font-size:17px;line-height:1.6;color:var(--gg-muted);max-width:34em}
.home-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:22px 0 10px;padding:14px 0;border-top:1px solid var(--gg-line);border-bottom:1px solid var(--gg-line)}
.home-price strong{font:600 var(--gg-text-xs)/1.4 var(--gg-font-ui);letter-spacing:var(--gg-tracking-label);text-transform:uppercase;color:var(--gg-brass-700)}
.home-price span{font:600 17px/1.4 var(--gg-font-ui);color:var(--gg-navy)}
.home-price:has(+.home-size){margin-bottom:0}
/* Confirmed size + to-scale cue (meter 12 × 6 in vs a ~6 in phone, 10 units = 1 in) */
.home-size{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;margin:0 0 10px;padding:12px 0;border-bottom:1px solid var(--gg-line)}
.home-size .home-price{margin:0;padding:0;border:0}
.home-scale{margin:0;color:var(--gg-navy);display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.home-scale svg{display:block;width:150px;height:auto}
.home-scale figcaption{font:600 12px/1.3 var(--gg-font-ui)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--gg-brass-700)}
.home-gauges-copy .store-small:not(#gg){margin:0}
.home-gauges-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.home-desk{position:relative;min-width:0;min-height:100%;margin:0;border-radius:var(--gg-radius);overflow:hidden;box-shadow:var(--gg-shadow);background:var(--gg-navy-deep)}
.home-desk img:not(#gg){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 62%;border:0;border-radius:0;box-shadow:none}
.home-desk figcaption{
  position:absolute;left:16px;bottom:16px;max-width:calc(100% - 32px);margin:0;padding:8px 14px;border-radius:var(--gg-pill);
  background:rgba(252,248,237,.92);color:var(--gg-navy);font:600 12px/1.3 var(--gg-font-ui)!important;letter-spacing:.12em;text-transform:uppercase
}

/* --------------------------------------------------------------------------
   03 — Loop: header row (title, caption, pause, full-explanation link)
   -------------------------------------------------------------------------- */
.hgw-diagram.home-loop:not(#gg){margin:0}
.home-loop .hgw-legend:not(#gg){list-style:none;margin:0;padding:0}
.home-loop-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;max-width:980px;margin:0 auto clamp(18px,2.6vw,32px)}
.home-loop-head h3:not(#gg){color:var(--gg-cream);font-size:clamp(26px,2.3vw,34px);margin:0 0 8px}
.home-loop-head p{margin:0;max-width:36em;font-size:16px;line-height:1.55;color:var(--gg-muted-on-dark)}
.home-loop-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.home-loop .hgw-pause:not(#gg){position:static}
.home-loop-link:not(#gg){
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid rgba(252,248,237,.35);border-radius:var(--gg-pill);
  font:600 15px/1.2 var(--gg-font-ui);color:var(--gg-cream);text-decoration:none;white-space:nowrap;
  transition:background-color var(--gg-dur) var(--gg-ease),border-color var(--gg-dur) var(--gg-ease)
}
.home-loop-link:hover{background:rgba(252,248,237,.08);border-color:var(--gg-cream)}

/* --------------------------------------------------------------------------
   04 — Responsive
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .home-gauges-intro{grid-template-columns:1fr}
  .home-desk{aspect-ratio:3/2;min-height:0}
}
@media(max-width:760px){
  .home-paths-grid{grid-template-columns:1fr}
  .home-path-actions>.button{flex:1 1 100%;white-space:normal;text-align:center}
  .home-gauges-copy{padding:28px 22px 24px}
  .home-gauges-actions>a{flex:1 1 100%;justify-content:center;text-align:center;white-space:normal}
  .home-desk figcaption{border-radius:var(--gg-radius-sm)}
  .hgw-diagram.home-loop:not(#gg){padding:24px 12px 20px}
  .home-loop-head{padding:0 10px;align-items:flex-start}
  .home-loop-tools,.home-loop-tools>*{flex:1 1 auto;justify-content:center}
}
.home-nowrap{white-space:nowrap}

/* ==========================================================================
   Commerce extras (2026-10-18)
   - Gift options in the checkout request, the receipt's gift summary and a
     print-only gift card (html.gg-print-gift switches print output to it).
   - Launch-list sign-up blocks ("Notify me"), /updates and /unsubscribe.
   Uses the Modern Workshop tokens from c-workshop-fold/style.css.
   ========================================================================== */

/* ---- Gift options (checkout form) --------------------------------------- */
.gift-options{min-width:0;margin:24px 0 0;padding:0;border:0}
.gift-options>legend{padding:0;margin:0 0 10px;font:600 var(--gg-text-xs)/1.4 var(--gg-font-ui);letter-spacing:var(--gg-tracking-label);text-transform:uppercase;color:var(--gg-brass-700)}
.gift-options>legend span{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--gg-muted)}
.checkout-layout .gift-check{margin:0 0 12px;cursor:pointer}
.checkout-layout .gift-check>span{color:var(--gg-muted)}
.checkout-layout .gift-check strong{display:block;margin:0 0 2px;font:600 15px/1.4 var(--gg-font-ui);color:var(--gg-navy)}
.gift-details{min-width:0;margin:0 0 12px;padding:20px clamp(16px,2.4vw,24px) 8px;background:var(--gg-surface-raised);border:1px solid var(--gg-line);border-radius:var(--gg-radius-inner)}
.gift-details[hidden],.gift-recipient[hidden],.gift-hint[hidden]{display:none}
.gift-details textarea{box-sizing:border-box;width:100%}
.gift-details>label{margin-bottom:6px}
.gift-details>.store-small{margin:0 0 18px}
.gift-recipient{min-width:0;margin:4px 0 16px;padding:16px 0 0;border:0;border-top:1px solid var(--gg-line)}
.gift-recipient>legend{float:left;width:100%;padding:0;margin:0 0 12px;font:600 15px/1.4 var(--gg-font-ui);color:var(--gg-navy)}
.gift-recipient>legend+*{clear:both}
.gift-recipient>.store-small{margin:0 0 4px}
.gift-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gift-hint{margin-top:6px}
.store-config-form .gift-hint{margin:10px 0 0}

/* ---- Receipt: gift summary ---------------------------------------------- */
.receipt-gift{margin:8px 0 4px;padding:20px 22px 18px;background:var(--gg-surface-raised);border:1px solid var(--gg-line);border-radius:var(--gg-radius-inner)}
.receipt-gift h3{margin:0;font-size:22px}
.receipt-gift .cart-details{margin:12px 0 0;padding-bottom:0;border-bottom:0}
.receipt-gift .store-small{margin:12px 0 0}
.gift-note-text{white-space:pre-line;overflow-wrap:anywhere}
.receipt .store-actions>a{display:inline-flex;align-items:center;min-height:44px}

/* ---- Printable gift card (never shown on screen) ------------------------ */
.gift-card-print{display:none}
@media print{
  #checkout-success:focus{outline:0}
  html.gg-print-gift body>*:not(main),
  html.gg-print-gift main>*:not(.store-intro),
  html.gg-print-gift .store-intro>*:not(#checkout-success),
  html.gg-print-gift #checkout-success>*:not(.gift-card-print){display:none!important}
  html.gg-print-gift .store-intro::before{display:none}
  html.gg-print-gift,html.gg-print-gift :is(body,main,.store-intro,#checkout-success){max-width:none!important;margin:0!important;padding:0!important;background:#fff!important;box-shadow:none!important;border:0!important;outline:0!important}
  html.gg-print-gift .gift-card-print{display:block;padding-top:.35in;break-inside:avoid}
  .gift-card{box-sizing:border-box;width:5.5in;max-width:100%;min-height:4.25in;margin:0 auto;padding:.42in .5in .36in;border:1px solid #b7a988;color:#092b3b;background:#fff;text-align:center;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .gift-card-mark{display:block;width:.5in;height:.5in;margin:0 auto 12px}
  .gift-card .gift-card-kicker,.gift-card .gift-card-label{margin:0 0 6px;font:600 8pt/1.4 var(--gg-font-ui);letter-spacing:.2em;text-transform:uppercase;color:#6f5424}
  .gift-card .gift-card-title{margin:0 0 16px;font:400 25pt/1.06 var(--gg-font-display);letter-spacing:-.01em;color:#092b3b}
  .gift-card .gift-card-title em{color:#987337}
  .gift-card-designs{margin:0 0 4px;padding:0;list-style:none}
  .gift-card .gift-card-designs li{margin:0;font:600 11.5pt/1.45 var(--gg-font-ui);color:#092b3b}
  .gift-card-note{max-width:4.1in;margin:14px auto 0;padding:12px 0 0;border-top:1px solid #c49a51;font:italic 400 13pt/1.45 var(--gg-font-display);color:#092b3b;white-space:pre-line;overflow-wrap:anywhere}
  .gift-card .gift-card-brand{margin:18px 0 0;font:600 7.5pt/1 var(--gg-font-ui);letter-spacing:.26em;color:#092b3b}
  .gift-card-print .gift-card-cut{margin:10px 0 0;font:400 8.5pt/1.4 var(--gg-font-ui);color:#52666a;text-align:center}
}

/* ---- Launch list: sign-up block ----------------------------------------- */
.notify-signup{position:relative;box-sizing:border-box;max-width:640px;margin:28px 0 0;padding:clamp(22px,3vw,32px);background:var(--gg-surface);color:var(--gg-navy);border:1px solid var(--gg-line);border-radius:var(--gg-radius);box-shadow:var(--gg-shadow);text-align:left}
.notify-signup .notify-kicker{margin:0 0 6px;font:600 var(--gg-text-xs)/1.4 var(--gg-font-ui);letter-spacing:var(--gg-tracking-label);text-transform:uppercase;color:var(--gg-brass-700)}
.notify-signup .notify-title{margin:0 0 8px;font:400 clamp(24px,2.2vw,30px)/1.12 var(--gg-font-display);letter-spacing:var(--gg-tracking-display);color:var(--gg-navy)}
.notify-signup .notify-lede{margin:0 0 18px;font:400 16px/1.55 var(--gg-font-ui);color:var(--gg-muted);max-width:none}
.notify-form[hidden],.notify-fallback[hidden],.unsubscribe-missing[hidden],.notify-signup [hidden]{display:none!important}
.notify-interests{display:flex;flex-wrap:wrap;gap:10px;min-width:0;margin:0 0 16px;padding:0;border:0}
.notify-interests legend{padding:0;margin:0 0 10px;font:600 14px/1.4 var(--gg-font-ui);color:var(--gg-navy)}
.notify-signup .notify-chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:0 18px 0 14px;background:var(--gg-surface-raised);border:1px solid var(--gg-line-strong);border-radius:var(--gg-pill);font:600 15px/1.2 var(--gg-font-ui);color:var(--gg-navy);cursor:pointer}
.notify-chip input{flex-shrink:0;width:20px;height:20px;margin:0;accent-color:var(--gg-navy)}
.notify-signup .notify-chip:has(input:checked){background:var(--gg-surface-sunk);border-color:var(--gg-navy)}
.notify-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.notify-signup .notify-field{display:grid;flex:1 1 240px;gap:6px;min-width:0;margin:0;font:600 14px/1.4 var(--gg-font-ui);color:var(--gg-navy)}
.notify-signup .notify-field input{box-sizing:border-box;width:100%;min-height:50px;margin:0;padding:12px 18px;background:var(--gg-surface-raised);color:var(--gg-navy);border:1px solid #9c8f74;border-radius:var(--gg-pill);font:400 16px/1.2 var(--gg-font-ui);box-shadow:none}
.notify-signup .notify-field input:focus{border-color:var(--gg-brass-600);box-shadow:0 0 0 3px rgba(196,154,81,.25)}
.notify-signup .notify-field input[aria-invalid=true]{border-color:var(--gg-error);background:var(--gg-error-bg)}
.notify-row .button{flex:0 0 auto}
.notify-row .button:disabled{opacity:.65;cursor:progress}
.notify-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.notify-signup .notify-consent{margin:12px 0 0;font:400 14px/1.5 var(--gg-font-ui);color:var(--gg-muted);max-width:none}
.notify-signup .notify-consent a,.notify-signup .notify-fallback a,.notify-signup .unsubscribe-missing a{color:var(--gg-navy);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.notify-signup .notify-status{margin:14px 0 0;padding:12px 16px;background:var(--gg-surface-sunk);border-left:3px solid var(--gg-brass);border-radius:var(--gg-radius-sm);font:500 15px/1.5 var(--gg-font-ui);color:var(--gg-navy);max-width:none}
.notify-signup .notify-status:empty{display:none}
.notify-signup .notify-status[data-state=success]{border-left-color:var(--gg-navy)}
.notify-signup .notify-status[data-state=success]::before{content:"\2713\00a0\00a0";font-weight:700}
.notify-signup .notify-status[data-state=error]{background:var(--gg-error-bg);border-left-color:var(--gg-error);color:var(--gg-error)}
.notify-signup :is(.notify-fallback,.unsubscribe-missing){margin:0;font:400 15px/1.55 var(--gg-font-ui);color:var(--gg-navy);max-width:none}
@media(max-width:480px){.notify-row .button{flex:1 1 100%}}

/* Host contexts */
.availability .notify-signup{margin:32px 0 0}
.hgw-compare .notify-signup{margin:32px auto 0}
.home-gauges-copy .notify-signup{margin:28px 0 0}

/* ---- /updates and /unsubscribe ------------------------------------------ */
.updates-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--gg-gap);align-items:start;margin-top:28px}
.updates-layout:has(.unsubscribe-panel){grid-template-columns:minmax(0,640px)}
.updates-layout .notify-signup{max-width:none;margin:0}
.updates-facts{padding:clamp(22px,3vw,32px);border:1px dashed var(--gg-line-strong);border-radius:var(--gg-radius)}
.updates-facts h2{margin:0 0 8px;font-size:clamp(24px,2.2vw,30px)}
.updates-facts ul{margin:0 0 14px;padding:0;list-style:none}
.updates-facts li{position:relative;padding:10px 0 10px 24px;border-bottom:1px solid var(--gg-line);font:400 16px/1.55 var(--gg-font-ui)}
.updates-facts li::before{content:"";position:absolute;left:4px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--gg-brass)}
.updates-facts li strong{font-weight:600}
.updates-facts a,.updates-again a{font-weight:600}
.unsubscribe-panel .notify-form .button{min-width:200px}
.updates-again{margin:0}
@media(max-width:860px){.updates-layout{grid-template-columns:minmax(0,1fr)}}