/* ======================================================================
   FluteGym home, v2 (2026-10 redesign): the dark-and-gold page
   Everything here is scoped to .g-home (the routed home view) or to
   body.g-dark (the shared nav and footer while the home view is showing),
   so the other views keep styles.css untouched. Class names carry a g-
   prefix because styles.css already owns .feat, .phone, .wrap, .store and
   friends; custom properties live on .g-home, not :root, for the same reason.
   Layout: one dark canvas with gold dust drifting behind every section;
   alternating bands are glass so the dust shows through, ivory bands come
   from the app's light theme, and the six "metals" are the app's category
   colors (apps/mobile/lib/core/theme/category_visuals.dart).
   ====================================================================== */
.g-home{
  --bg:#060606; --band:rgba(14,12,10,.62); --surface:#0E0D0B; --surface-2:#141210;
  --line:#2A2620; --line-gold:rgba(217,154,56,.28);
  --gold:#D99A38; --champagne:#F4C76B; --ink-on-gold:#231701;
  --fg:#FFFFFF; --body:#B8AFA2; --muted:#A59C8F; --faint:#8F877B;
  --sans:'Satoshi','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --wrap:1240px;
  color-scheme:dark;
  position:relative;z-index:1;overflow:hidden;color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.5;
}

.g-home *{box-sizing:border-box}
.g-home a{color:var(--champagne);text-decoration:none}
.g-home a:hover{color:#FFD27A}
.g-home a:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;border-radius:6px}
.g-home img{max-width:100%}
.g-wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.g-section{border-top:1px solid var(--line)}
.g-section.g-band{background:var(--band)}
.g-sec{padding-block:clamp(88px,11vw,160px)}
.g-eyebrow{margin:0 0 20px;font-size:17px;font-weight:500;color:var(--gold)}
.g-home h1,.g-home h2,.g-home h3{text-wrap:balance}
 .g-home h2{margin:0;font-size:clamp(36px,4.6vw,60px);line-height:1.03;font-weight:700;letter-spacing:-.035em}
.g-lead{margin:28px 0 0;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--body);text-wrap:pretty;max-width:62ch}
.g-card{background:var(--surface);border:1px solid var(--line-gold);border-radius:24px}
.g-label{margin:0;font-family:var(--mono);font-size:13px;color:var(--gold)}
.g-phone{border-radius:50px;padding:10px;background:#000;box-shadow:0 0 0 1px #3A342B,0 0 0 2px #000,0 60px 120px -30px rgba(0,0,0,.95),0 0 140px -36px rgba(217,154,56,.32)}
.g-phone img{display:block;width:100%;height:auto;border-radius:41px;background:var(--surface)}

/* store buttons: gold leaf with the store's own mark */
.g-stores{display:flex;flex-wrap:wrap;gap:14px}
.g-store{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:14px;min-height:64px;padding:0 26px 0 20px;border-radius:16px;
  color:var(--fg);background:var(--surface);border:1px solid rgba(217,154,56,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 36px -18px rgba(217,154,56,.45);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.g-store::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(244,199,107,.12) 48%,transparent 62%);transform:translateX(-120%);transition:transform .7s ease;pointer-events:none}
.g-store:hover{color:var(--fg);transform:translateY(-1px);border-color:rgba(244,199,107,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 44px -18px rgba(217,154,56,.6)}
.g-store:hover::after{transform:translateX(120%)}
.g-mark{width:32px;height:32px;flex:none;background:#C08A35 url(/images/gold-leaf.jpg) center/180% auto;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.g-mark.g-apple{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M12.152%206.896c-.948%200-2.415-1.078-3.96-1.04-2.04.027-3.91%201.183-4.961%203.014-2.117%203.675-.546%209.103%201.519%2012.09%201.013%201.454%202.208%203.09%203.792%203.039%201.52-.065%202.09-.987%203.935-.987%201.831%200%202.35.987%203.96.948%201.637-.026%202.676-1.48%203.676-2.948%201.156-1.688%201.636-3.325%201.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04%202.48-4.494%202.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675%201.09-4.61%201.09zM15.53%203.83c.843-1.012%201.4-2.427%201.245-3.83-1.207.052-2.662.805-3.532%201.818-.78.896-1.454%202.338-1.273%203.714%201.338.104%202.715-.688%203.559-1.701%22/%3E%3C/svg%3E")}
.g-mark.g-play{--m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M22.018%2013.298l-3.919%202.218-3.515-3.493%203.543-3.521%203.891%202.202a1.49%201.49%200%200%201%200%202.594zM1.337.924a1.486%201.486%200%200%200-.112.568v21.017c0%20.217.045.419.124.6l11.155-11.087L1.337.924zm12.207%2010.065l3.258-3.238L3.45.195a1.466%201.466%200%200%200-.946-.179l11.04%2010.973zm0%202.067l-11%2010.933c.298.036.612-.016.906-.183l13.324-7.54-3.23-3.21z%22/%3E%3C/svg%3E")}
.g-store span{display:flex;flex-direction:column;line-height:1.1}
.g-store small{font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--body)}
.g-store b{font-size:21px;font-weight:700;letter-spacing:-.01em}
.g-platforms{margin:18px 0 0;font-size:15px;color:var(--faint)}

/* hero */
.g-hero{position:relative}
.g-hero .g-glow{position:absolute;right:-200px;top:80px;width:900px;height:900px;border-radius:50%;background:radial-gradient(closest-side,rgba(217,154,56,.16),rgba(217,154,56,0) 70%);pointer-events:none}
.g-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start;padding-top:48px}
.g-hero-copy{padding-top:56px;padding-bottom:120px;min-width:0}
.g-hero h1{margin:0;font-size:clamp(46px,6.2vw,84px);line-height:.98;font-weight:700;letter-spacing:-.045em}
.g-hero .g-lead{font-size:clamp(18px,1.7vw,21px);max-width:520px;margin-top:32px}
.g-hero .g-stores{margin-top:40px}
.g-hero-phones{position:relative;height:720px}
.g-hero-phones .g-back{position:absolute;left:10px;top:120px;width:280px;transform:rotate(-4deg);opacity:.9}
.g-hero-phones .g-front{position:absolute;right:10px;top:20px;width:320px}

/* memory */
.g-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:center}
.g-split.g-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.g-chart-card{padding:24px;overflow:hidden}
.g-chart-card img{display:block;width:100%;height:auto;border-radius:14px}
.g-caption{margin:14px 10px 0;font-size:14px;line-height:1.5;color:var(--faint)}

/* gym */
.g-gym-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:80px;align-items:end;margin-bottom:64px}
.g-gym-head .g-lead{margin:0}
.g-gym-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start}
.g-gym-phone{position:sticky;top:24px}
.g-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.g-area{padding:28px}
.g-area h3{margin:14px 0 10px;font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.g-area p.g-body{margin:0;font-size:16px;line-height:1.6;color:var(--body)}
.g-gym-row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px;margin-top:20px}
.g-clean{padding:28px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:center}
.g-clean img{display:block;width:100%;height:auto;border-radius:12px}
.g-streak{padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.g-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.g-week span{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--faint)}
.g-week i{width:100%;aspect-ratio:1;border-radius:8px;background:linear-gradient(180deg,#FFD27A,#E0862C)}
.g-week i.g-off{background:var(--line)}

/* tools */
.g-tools-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:80px;align-items:start}
.g-tools-copy{position:sticky;top:32px}
.g-tool-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.g-tool{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px}
.g-tool .g-val{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;font-weight:500;color:var(--champagne)}
.g-tool h3{margin:18px 0 6px;font-size:19px;font-weight:700}
.g-tool p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.g-long-phone{width:320px;margin:0 auto}

/* tempo */
.g-tempo-card{padding:40px}
.g-tempo-card .g-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.bpm{margin-top:44px;display:flex;align-items:baseline;gap:14px}
.bpm b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(80px,9vw,120px);line-height:.9;font-weight:500;letter-spacing:-.04em}
.bpm span{font-family:var(--mono);font-size:22px;color:var(--gold)}
.history{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;color:var(--faint)}
.g-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--muted)}
.g-legend span{display:flex;align-items:center;gap:8px}
.g-legend i{width:16px;height:2px;border-radius:2px}
.g-tempo-chart{position:relative;margin-top:22px}
.g-tempo-chart svg{display:block;width:100%;height:auto;overflow:visible}
.g-tempo-chart text{font-family:var(--mono);font-size:12px;fill:var(--faint)}
.g-tempo-chart .g-end{font-family:var(--sans);font-size:13px;font-weight:700;fill:var(--fg)}
.g-tip{position:absolute;pointer-events:none;background:#1B1814;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;color:var(--fg);white-space:nowrap;box-shadow:0 12px 30px -10px rgba(0,0,0,.8)}
.g-tip b{display:block;font-family:var(--mono);font-weight:500;color:var(--muted);margin-bottom:4px}
.g-tip span{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.g-tip i{width:8px;height:8px;border-radius:50%}
.btn-gold{margin-top:32px;display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:14px;background:linear-gradient(180deg,#F4C76B 0%,#D99A38 55%,#A8701F 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.25);color:var(--ink-on-gold);font-size:18px;font-weight:700}
.btn-gold:hover{color:var(--ink-on-gold)}

/* more */
.g-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:64px}
.g-shot{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:32px 28px 28px;display:flex;flex-direction:column;align-items:center;gap:22px}
.g-shot .g-phone{width:100%;max-width:300px;border-radius:44px;padding:8px}
.g-shot .g-phone img{border-radius:37px}
.g-shot p{margin:0;font-size:16px;font-weight:700;text-align:center}
.g-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.g-feat{position:relative;min-width:0;padding:28px;border-radius:22px;background:linear-gradient(180deg,rgba(26,22,16,.78),rgba(12,11,9,.78));border:1px solid rgba(217,154,56,.18);backdrop-filter:blur(2px);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.g-feat:hover{border-color:rgba(244,199,107,.55);transform:translateY(-2px);box-shadow:0 18px 40px -20px rgba(217,154,56,.45)}
.g-feat .g-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:rgba(217,154,56,.14);color:var(--champagne);box-shadow:inset 0 0 0 1px rgba(217,154,56,.25)}
.g-feat .g-ico svg{width:24px;height:24px}
.g-feat h3{margin:20px 0 8px;font-size:20px;font-weight:700;letter-spacing:-.01em}
.g-feat p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.g-feat.g-wide{grid-column:span 2;background:radial-gradient(ellipse at 100% 0%,rgba(217,154,56,.22),transparent 60%),linear-gradient(180deg,rgba(30,24,14,.85),rgba(12,11,9,.85));border-color:rgba(217,154,56,.4)}
.g-feat.g-wide .g-ico{background:linear-gradient(180deg,#F4C76B,#D99A38 55%,#A8701F);color:var(--ink-on-gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.g-feat.g-wide h3{font-size:26px;letter-spacing:-.02em}
.g-feat.g-wide p{font-size:16px;max-width:46ch;color:var(--body)}

/* final */
.g-final{position:relative}
.g-final .g-glow{position:absolute;left:50%;top:45%;width:1100px;height:700px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(217,154,56,.14),rgba(217,154,56,0) 70%);pointer-events:none}
.g-final .g-inner{position:relative;padding-block:clamp(110px,13vw,180px);display:flex;flex-direction:column;align-items:center;text-align:center}
.g-final h2{font-size:clamp(46px,6.4vw,88px);letter-spacing:-.045em}
.g-final .g-stores{margin-top:44px;justify-content:center}

@media (max-width:1080px){
  .g-hero-grid,.g-split,.g-split.g-even,.g-gym-head,.g-tools-grid{grid-template-columns:1fr;gap:48px}
  .g-hero-copy{padding:24px 0 0}
  .g-hero-phones{height:620px;max-width:560px;width:100%;margin:0 auto}
  .g-gym-grid{grid-template-columns:1fr}
  .g-gym-phone{position:static;width:300px;margin:0 auto}
  .g-areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-gym-row{grid-template-columns:1fr}
  .g-tools-copy{position:static}
  .g-shots{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .g-shot{padding:18px 14px}
  .g-features{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .g-wrap{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
  .g-hero-phones{height:auto}
  .g-hero-phones .g-back{display:none}
  .g-hero-phones .g-front{position:static;width:270px;margin:0 auto}
  .g-stores{flex-direction:column}
  .g-store{justify-content:center}
  .g-areas,.g-tool-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .g-areas{grid-template-columns:1fr}
  .g-area,.g-tool{padding:20px}
  .g-clean{grid-template-columns:1fr}
  .g-tempo-card{padding:24px}
  .g-shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-18px;padding-inline:18px}
  .g-shot{flex:none;width:240px;scroll-snap-align:start}
  .g-features{gap:10px}
  .g-feat{padding:18px 16px}
  .g-feat h3{font-size:17px}
  .g-feat p{font-size:14px}
  .g-feat.g-wide h3{font-size:21px}
  .g-long-phone{width:280px}
}

/* .g-section treatments: dark canvas, warm ivory from the app's light theme, a metallic-gold strip */
.g-section.g-light{--fg:#232323;--body:#4A4237;--muted:#6B6256;--faint:#7A7064;--gold:#94651C;--line:#E2D6BF;
  color:var(--fg);border-top:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22320%22%20height%3D%22320%22%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22155%22%20r%3D%220.8%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.55%22/%3E%3Ccircle%20cx%3D%22245%22%20cy%3D%2279%22%20r%3D%220.8%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.25%22/%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%22205%22%20r%3D%221.2%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.25%22/%3E%3Ccircle%20cx%3D%22113%22%20cy%3D%22266%22%20r%3D%221.2%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%2254%22%20r%3D%221.2%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.35%22/%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%22133%22%20r%3D%221.2%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.35%22/%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%22158%22%20r%3D%221.2%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%22310%22%20r%3D%221.2%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.55%22/%3E%3Ccircle%20cx%3D%22259%22%20cy%3D%22127%22%20r%3D%221%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.35%22/%3E%3Ccircle%20cx%3D%22242%22%20cy%3D%22143%22%20r%3D%220.8%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%223%22%20cy%3D%22149%22%20r%3D%221.2%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.35%22/%3E%3Ccircle%20cx%3D%22211%22%20cy%3D%22216%22%20r%3D%221.2%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.55%22/%3E%3Ccircle%20cx%3D%22231%22%20cy%3D%2282%22%20r%3D%221%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22132%22%20cy%3D%2222%22%20r%3D%220.8%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.25%22/%3E%3Ccircle%20cx%3D%22236%22%20cy%3D%22320%22%20r%3D%221.2%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.55%22/%3E%3Ccircle%20cx%3D%22175%22%20cy%3D%2274%22%20r%3D%221%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.25%22/%3E%3Ccircle%20cx%3D%22211%22%20cy%3D%22103%22%20r%3D%221.6%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2294%22%20cy%3D%22182%22%20r%3D%221.6%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22285%22%20cy%3D%22101%22%20r%3D%221.2%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.25%22/%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%22117%22%20r%3D%221.2%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.35%22/%3E%3Ccircle%20cx%3D%2262%22%20cy%3D%22169%22%20r%3D%221%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22235%22%20cy%3D%2213%22%20r%3D%220.8%22%20fill%3D%22%23B9862F%22%20fill-opacity%3D%220.45%22/%3E%3C/svg%3E") 0 0/320px 320px,radial-gradient(ellipse at 15% 0%,#FBF7EE,transparent 60%),#F3ECDD}
.g-section.g-light .g-card{--fg:#FFFFFF;--body:#B8AFA2;--muted:#A59C8F;--faint:#8F877B;--gold:#D99A38;--line:#2A2620;color:var(--fg);box-shadow:0 30px 60px -30px rgba(60,40,10,.45)}
.g-section.g-light .g-card .btn-gold{color:var(--ink-on-gold)}
.g-section.g-warm{background:radial-gradient(ellipse at 85% 0%,rgba(217,154,56,.16),transparent 55%),linear-gradient(180deg,rgba(28,19,8,.88),rgba(10,8,6,.88))}
.g-section.g-goldstrip{border-top:0;color:var(--ink-on-gold);background:linear-gradient(180deg,#F4C76B 0%,#D99A38 55%,#A8701F 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.25)}
.g-section.g-goldstrip .g-wrap{padding-block:clamp(56px,7vw,88px);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"big btn" "sub btn";gap:8px 40px;align-items:center}
.g-section.g-goldstrip .g-big{grid-area:big;margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:900;letter-spacing:-.035em;line-height:1}
.g-section.g-goldstrip .g-sub{grid-area:sub;margin:0;font-size:clamp(17px,1.5vw,20px);font-weight:500;color:rgba(35,23,1,.78)}
.g-section.g-goldstrip .g-dark-btn{grid-area:btn;display:inline-flex;align-items:center;min-height:56px;padding:0 28px;border-radius:14px;background:#0E0D0B;color:var(--champagne);font-size:17px;font-weight:700;box-shadow:0 14px 30px -12px rgba(40,25,0,.6)}
.g-section.g-goldstrip .g-dark-btn:hover{color:#FFD27A;background:#16130F}
.g-section.g-goldstrip .g-dark-btn:focus-visible{outline-color:#231701}
.g-section.g-light + .g-section,.g-section.g-goldstrip + .g-section{border-top:0}
@media (max-width:680px){.g-section.g-goldstrip .g-wrap{grid-template-columns:1fr;grid-template-areas:"big" "sub" "btn";gap:12px}.g-section.g-goldstrip .g-dark-btn{justify-self:start;margin-top:12px}}

/* pain points answered */
.g-answers-head{max-width:760px}
.g-fixes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.g-fix{padding:28px;display:flex;flex-direction:column;gap:18px}
.g-fix .g-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(180deg,#F4C76B,#D99A38 55%,#A8701F);color:var(--ink-on-gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.g-fix .g-ico svg{width:24px;height:24px}
.g-fix p{margin:0}
.g-fix .g-tag{display:block;margin-bottom:6px;font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.g-fix .g-was{font-size:15px;line-height:1.55;color:var(--muted)}
.g-fix .g-was .g-tag{color:var(--faint)}
.g-fix .g-now{padding-top:18px;border-top:1px solid var(--line);font-size:18px;line-height:1.45;font-weight:700;color:var(--fg)}
.g-fix .g-now .g-tag{color:var(--gold);font-weight:400}
@media (max-width:1080px){.g-fixes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.g-fixes{grid-template-columns:1fr;gap:12px;margin-top:36px}.g-fix{padding:22px}}

/* ── Metals: the app's six category colors, used as shiny accents ── */
.g-home{--m-gold:#D99A38;--m-gold-hi:#F4C76B;--m-ember:#F0954A;--m-ember-hi:#FFC48F;--m-emerald:#43C892;--m-emerald-hi:#9BEBC6;
  --m-amethyst:#A98CE8;--m-amethyst-hi:#D9CBFF;--m-sapphire:#5FA8E8;--m-sapphire-hi:#B5DBFF;--m-rose:#EC7C9A;--m-rose-hi:#FFC0D0}
.g-m-gold{--c:var(--m-gold);--hi:var(--m-gold-hi)} .g-m-ember{--c:var(--m-ember);--hi:var(--m-ember-hi)}
.g-m-emerald{--c:var(--m-emerald);--hi:var(--m-emerald-hi)} .g-m-amethyst{--c:var(--m-amethyst);--hi:var(--m-amethyst-hi)}
.g-m-sapphire{--c:var(--m-sapphire);--hi:var(--m-sapphire-hi)} .g-m-rose{--c:var(--m-rose);--hi:var(--m-rose-hi)}
.g-medal{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--hi),var(--c) 35%,color-mix(in srgb,var(--c),#000 40%) 58%,var(--c) 80%,var(--hi));
  box-shadow:0 0 22px color-mix(in srgb,var(--c),transparent 50%),inset 0 0 0 3px color-mix(in srgb,var(--hi),transparent 35%);
  color:color-mix(in srgb,var(--c),#000 65%)}
.g-medal svg{width:52%;height:52%}

/* hero: colored light behind the gold, and a shine on the key phrase */
.g-hero .g-glow{right:auto;left:-10%;top:-10%;width:120%;height:120%;border-radius:0;opacity:.24;filter:blur(50px);
  background:radial-gradient(circle at 78% 32%,var(--m-gold),transparent 30%),radial-gradient(circle at 62% 70%,var(--m-amethyst),transparent 24%),
  radial-gradient(circle at 92% 78%,var(--m-rose),transparent 22%),radial-gradient(circle at 18% 12%,var(--m-sapphire),transparent 22%),
  radial-gradient(circle at 30% 88%,var(--m-emerald),transparent 20%)}
.g-shine{background:linear-gradient(100deg,var(--m-gold-hi),var(--m-ember),var(--m-rose),var(--m-amethyst),var(--m-sapphire),var(--m-emerald),var(--m-gold-hi));
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 9s ease-in-out infinite alternate}
@keyframes shine{from{background-position:0% 50%}to{background-position:100% 50%}}
.g-new{display:inline-block;margin-left:8px;vertical-align:3px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:999px;
  background:linear-gradient(90deg,var(--m-gold),var(--m-rose),var(--m-amethyst));color:#1b1206}

/* gym areas: tinted by their category */
.g-area{background:linear-gradient(150deg,color-mix(in srgb,var(--c),transparent 80%),var(--surface) 62%);border-color:color-mix(in srgb,var(--c),transparent 50%)}
.g-area-top{display:flex;align-items:center;gap:14px}
.g-area .g-label{color:var(--hi)}
.g-area h3{margin-top:18px}

/* tools: each value in its own metal */
.g-tool{background:linear-gradient(160deg,color-mix(in srgb,var(--c),transparent 86%),var(--surface) 55%);border-color:color-mix(in srgb,var(--c),transparent 65%)}
.g-tool .g-val{color:var(--hi);text-shadow:0 0 18px color-mix(in srgb,var(--c),transparent 55%)}

/* feature tiles: metal icon chips */
.g-feat .g-ico{position:relative;overflow:hidden;width:54px;height:54px;border-radius:50%}
.g-feat .g-ico svg{width:26px;height:26px;stroke-width:2.2}
.g-feat:not(.g-wide) .g-ico{background:linear-gradient(135deg,var(--hi),var(--c) 35%,color-mix(in srgb,var(--c),#000 40%) 58%,var(--c) 80%,var(--hi));color:color-mix(in srgb,var(--c),#000 68%);
  box-shadow:0 0 26px color-mix(in srgb,var(--c),transparent 40%),inset 0 0 0 3px color-mix(in srgb,var(--hi),transparent 30%)}
.g-feat.g-wide .g-ico{box-shadow:0 0 30px rgba(217,154,56,.55),inset 0 0 0 3px rgba(255,236,190,.55)}
.g-feat .g-ico::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 62%);transform:translateX(-130%);transition:transform .8s ease}
.g-feat:hover .g-ico::after{transform:translateX(130%)}
.g-feat:hover .g-ico{box-shadow:0 0 38px color-mix(in srgb,var(--c,#D99A38),transparent 25%),inset 0 0 0 3px color-mix(in srgb,var(--hi,#F4C76B),transparent 20%)}
.g-feat:not(.g-wide):hover{border-color:color-mix(in srgb,var(--c),transparent 35%);box-shadow:0 18px 40px -20px color-mix(in srgb,var(--c),transparent 40%)}

/* pain-point cards: medal icons, a hint of their color */
.g-fix .g-ico.g-medal{border-radius:50%;background:linear-gradient(135deg,var(--hi),var(--c) 35%,color-mix(in srgb,var(--c),#000 40%) 58%,var(--c) 80%,var(--hi));color:color-mix(in srgb,var(--c),#000 65%);box-shadow:0 0 22px color-mix(in srgb,var(--c),transparent 50%),inset 0 0 0 3px color-mix(in srgb,var(--hi),transparent 35%)}
.g-fix .g-now .g-tag{color:var(--hi)}
.g-fix{border-color:color-mix(in srgb,var(--c),transparent 60%)}

/* gold strip: a band of light crosses now and then */
.g-section.g-goldstrip{position:relative;overflow:hidden}
.g-section.g-goldstrip::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,250,232,.55) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 7s ease-in-out infinite}
@keyframes sweep{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.g-shine{animation:none}.g-section.g-goldstrip::after{animation:none;display:none}}
@media (prefers-reduced-motion:reduce){.g-store,.g-store::after{transition:none}}

/* ── The shared chrome (index.html's nav and footer) on the home view ── */
body.g-dark { background: #060606; color: #FFFFFF; }
body.g-dark .bg { display: none; }
body.g-dark .nav { background: rgba(6, 6, 6, 0.82); border-bottom-color: #2A2620; box-shadow: none; }
body.g-dark .nav-links a { color: #C9C0B3; }
body.g-dark .nav-links a:hover, body.g-dark .nav-links a.active { color: #FFFFFF; }
body.g-dark .nav-links a::after { background: #D99A38; box-shadow: 0 0 8px #D99A38; }
body.g-dark .brand-name { color: #FFFFFF; }
body.g-dark .icon-btn { color: #FFFFFF; border-color: #2A2620; }
body.g-dark .mobile-menu.open { background: rgba(14, 13, 11, 0.97); border-top-color: #2A2620; }
body.g-dark .mobile-menu a { color: #FFFFFF; border-bottom-color: #2A2620; }
body.g-dark :focus-visible { outline-color: #F4C76B; }
body.g-dark footer { background: #060606; border-top-color: #2A2620; }
body.g-dark .foot-brand p, body.g-dark .foot-col a, body.g-dark .foot-col button { color: #B8AFA2; }
body.g-dark .foot-col a:hover, body.g-dark .foot-col button:hover { color: #FFFFFF; }
body.g-dark .foot-col h2 { color: #D99A38; }
body.g-dark .foot-bottom { border-top-color: #2A2620; }
body.g-dark .foot-bottom p, body.g-dark .foot-legal a { color: #A59C8F; }

/* The gold dust (js/home.js) is drawn on one fixed canvas behind the page,
   and only while the home view is showing. */
#g-dust { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; display: none; }
body.g-dark #g-dust { display: block; }

/* The mock's nav type: Satoshi, sentence case, in place of the light pages'
   uppercase Rajdhani. */
body.g-dark .nav-links a, body.g-dark .mobile-menu a, body.g-dark .brand-name {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  text-transform: none; letter-spacing: 0;
}
body.g-dark .nav-links a { font-size: 16px; font-weight: 500; }
body.g-dark .brand-name { font-weight: 700; font-size: 21px; letter-spacing: -0.02em; }