/* Playthru site — shared by the RU/EN landing and the legal pages.
   Everything here is built from the tokens in styles.css; the only web-specific
   decisions are documented inline. */

/* Dark blue is a fill colour in the dark palette (#1F4199); accent TEXT on the dark surface keeps the readable mid-blue. */
:root{--hero-accent:var(--gf-blue-accent)}
[data-theme="dark"]{--hero-accent:#5A7ACD}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--gf-surface-screen);color:var(--gf-text-body);
  font:var(--gf-font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3{text-wrap:balance}

.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gf-screen-inset)}

/* --- skip link (visible on focus only) --- */
.skip{position:absolute;left:var(--gf-space-md);top:-100px;z-index:3;padding:var(--gf-space-sm) var(--gf-space-md);
  border-radius:var(--gf-radius-md);background:var(--gf-surface-solid-button);color:var(--gf-text-on-solid-button);
  font:var(--gf-font-button);text-decoration:none}
.skip:focus{top:var(--gf-space-md)}

/* --- top bar — sticky, frosted once scrolled (echoes the app's translucent nav bar) --- */
.siteheader{position:sticky;top:0;z-index:2;border-bottom:1px solid transparent;
  transition:background .25s var(--gf-ease-out),border-color .25s var(--gf-ease-out),box-shadow .25s var(--gf-ease-out)}
.siteheader.scrolled{background:var(--gf-glass-fill);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--gf-border-hairline);box-shadow:var(--gf-shadow-base)}
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--gf-space-md);
  padding:var(--gf-space-smd) 0}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand .logo-mark{width:40px;height:40px;flex:none;border-radius:var(--gf-radius-md);
  border:1px solid var(--gf-border-hairline);box-shadow:var(--gf-shadow-base);
  background:url(/ds/assets/logo/app-icon-light-180.png) center/cover no-repeat}
[data-theme="dark"] .brand .logo-mark{background-image:url(/ds/assets/logo/app-icon-dark-180.png)}
.brand .word{font:var(--gf-font-title)}
.brand .word b{color:var(--gf-orange-accent);font-weight:var(--gf-weight-semibold)}
.controls{display:flex;align-items:center;gap:var(--gf-space-sm)}
.tbtn{width:44px;height:44px;flex:none;border:none;border-radius:var(--gf-radius-lg);
  background:var(--gf-element-background);box-shadow:var(--gf-shadow-base);color:var(--gf-icon-default);
  display:grid;place-items:center;cursor:pointer;
  transition:transform var(--gf-duration-press-out) var(--gf-ease-out),box-shadow var(--gf-duration-press-out) var(--gf-ease-out)}
.tbtn:active{transform:scale(var(--gf-press-scale));box-shadow:var(--gf-shadow-base-pressed)}
.tbtn svg{width:22px;height:22px}
.tbtn .ic-sun{display:none}
[data-theme="dark"] .tbtn .ic-moon{display:none}
[data-theme="dark"] .tbtn .ic-sun{display:block}
.lang{display:inline-flex;gap:2px;padding:3px;background:var(--gf-element-background);
  border-radius:var(--gf-radius-lg);box-shadow:var(--gf-shadow-base);font:var(--gf-font-caption);font-weight:var(--gf-weight-medium)}
.lang a,.lang span{display:inline-flex;align-items:center;min-height:38px;padding:0 var(--gf-space-smd);
  border-radius:var(--gf-radius-mdl);text-decoration:none;color:var(--gf-text-body)}
.lang [aria-current]{background:var(--gf-orange-accent);color:var(--gf-text-on-orange)}
.lang a{opacity:.7}
.lang a:hover{opacity:1}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--gf-space-sm);
  min-height:56px;padding:0 var(--gf-space-lg);border:none;border-radius:var(--gf-radius-xl);
  font:var(--gf-font-button);font-family:inherit;text-decoration:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:transform var(--gf-duration-press-out) var(--gf-ease-out),box-shadow var(--gf-duration-press-out) var(--gf-ease-out)}
.btn:active{transform:scale(var(--gf-press-scale))}
.btn-orange{background:var(--gf-gradient-orange);color:var(--gf-text-on-orange);box-shadow:var(--gf-shadow-accent)}
.btn-orange:active{box-shadow:var(--gf-shadow-accent-pressed)}
/* dark palette: the gradient's dark end (#A3621C) drops the ink to 3.3:1, so it stops three-quarters of the way */
[data-theme="dark"] .btn-orange{background:linear-gradient(135deg,var(--gf-orange-accent),color-mix(in oklab,var(--gf-orange-accent) 75%,var(--gf-orange-accent-dark-step)))}
.btn-base{background:var(--gf-surface-solid-button);color:var(--gf-text-on-solid-button);box-shadow:var(--gf-shadow-base)}
.btn-base:active{box-shadow:var(--gf-shadow-base-pressed)}
.btn-appstore .apple{width:18px;height:18px;flex:none}
/* muted until the app is live in the App Store: flat neutral fill, no lift, no shadow */
.btn[disabled]{background:var(--gf-element-background);color:var(--gf-text-caption);box-shadow:none;cursor:not-allowed}
.btn[disabled]:hover,.btn[disabled]:active{transform:none;box-shadow:none}

/* --- hero --- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(var(--gf-space-lg),5vw,64px);
  align-items:center;padding:clamp(2rem,6vw,5rem) 0 clamp(2.5rem,7vw,6rem)}
.hero h1{margin:0;font-weight:var(--gf-weight-bold);
  font-size:clamp(2.5rem,1.25rem + 3.2vw,3.85rem);line-height:1.03;
  font-family:var(--gf-font-family);letter-spacing:-.03em}
.hero h1 .b{color:var(--hero-accent)}
.hero .lead{margin:var(--gf-space-lg) 0 0;max-width:34ch;font-weight:var(--gf-weight-medium);
  font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);line-height:1.4;font-family:var(--gf-font-family);
  color:var(--gf-text-body);opacity:.82;text-wrap:pretty}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gf-space-smd);margin-top:var(--gf-space-lg)}
.note{margin:var(--gf-space-md) 0 0;font:var(--gf-font-caption);color:var(--gf-text-caption)}
.cta .note{margin:calc(-1 * var(--gf-space-xs)) 0 0}

/* --- app preview: game card on top, then result / mode / days / time --- */
.app-preview{width:100%;max-width:640px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--gf-space-smd);container-type:inline-size}
.ap-top{display:contents}
.ap-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gf-space-smd)}
.ap-game{align-self:flex-start;max-width:100%}
.ap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:var(--gf-space-smd)}

.result-card{background:var(--gf-surface-accent-card);border-radius:var(--gf-radius-xlm);
  padding:var(--gf-space-smd);box-shadow:var(--gf-shadow-accent);
  display:flex;flex-direction:column;justify-content:center;min-width:0}
/* the one uppercase label on the page: the app's own result-card title */
.result-card .eyebrow{font:var(--gf-font-caption);letter-spacing:var(--gf-tracking-eyebrow);
  text-transform:uppercase;color:var(--gf-text-on-orange-card)}
.result-card .value{font-weight:var(--gf-weight-bold);font-size:clamp(1.9rem,1.45rem + 1.6vw,2.5rem);
  line-height:1.05;margin-top:var(--gf-space-xs);color:var(--gf-text-on-orange-card);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}

.history-card{background:var(--gf-surface-card);border-radius:var(--gf-radius-lg);
  box-shadow:var(--gf-shadow-base);overflow:hidden}
.history-card .row{display:flex;gap:var(--gf-space-smd);padding:var(--gf-space-xs)}
.history-card .cover{width:84px;height:112px;flex:none;border-radius:var(--gf-radius-mdl);object-fit:cover;
  background:var(--gf-gray-element-background);transition:opacity .25s var(--gf-ease-out)}
.history-card .cover.swapping{opacity:0}
.history-card .meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--gf-space-xs);
  padding:var(--gf-space-sm) var(--gf-space-smd) var(--gf-space-smd) 0}
.title-row{display:flex;align-items:center;gap:var(--gf-space-sm)}
.title-row .t{flex:1;min-width:0;font:var(--gf-font-body-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{width:15px;height:15px;flex:none;background:var(--gf-icon-muted);transition:background .2s var(--gf-ease-out);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.history-card .num{font:var(--gf-font-result-card);color:var(--gf-text-numeric);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.history-card .det{font:var(--gf-font-caption);color:var(--gf-text-caption);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress-wrap{padding:0 var(--gf-space-xs) var(--gf-space-xs)}
.progress-inset{background:var(--gf-surface-inset);border-radius:var(--gf-radius-mdl);padding:var(--gf-space-smd);
  display:flex;flex-direction:column;gap:var(--gf-space-sm)}
.progress-line{display:flex;align-items:center;gap:var(--gf-space-sm)}
.track{flex:1;height:4px;border-radius:2px;overflow:hidden;background:var(--gf-progress-track)}
/* full-width bar scaled by --p: a transform animation, not a layout one */
.fill{display:block;width:100%;height:100%;border-radius:2px;background:var(--gf-progress-fill);
  transform:scaleX(var(--p,0));transform-origin:left;transition:transform .8s var(--gf-ease-out)}
.pct{font:var(--gf-font-caption);color:var(--gf-text-body);font-variant-numeric:tabular-nums}

.setcard{background:var(--gf-surface-card);border-radius:var(--gf-radius-lg);box-shadow:var(--gf-shadow-base);
  padding:var(--gf-space-smd);display:flex;flex-direction:column;gap:var(--gf-space-sm);container-type:inline-size}
.setcard .hd{display:flex;align-items:center;gap:var(--gf-space-sm);font-weight:var(--gf-weight-semibold);
  font-size:15px;line-height:1.2;color:var(--gf-text-body)}
.setcard .hd img{width:38px;height:38px;flex:none;padding:6px;box-sizing:border-box;
  border-radius:var(--gf-radius-md);background:var(--gf-surface-inset)}
.tiles{display:flex;gap:6px}
.tile2{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--gf-space-sm);padding:var(--gf-space-smd) 3px;
  border-radius:var(--gf-radius-md);border:1.5px solid var(--gf-border-hairline);background:var(--gf-surface-inset)}
.tile2 .g{width:26px;height:26px;background:var(--gf-icon-muted);
  -webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat}
.tile2 .l{font-size:12px;line-height:1.15;text-align:center;color:var(--gf-text-caption)}
.tile2.sel{border-color:var(--gf-orange-accent)}
.tile2.sel .g{background:var(--gf-orange-accent)}
.tile2.sel .l{color:var(--gf-text-body)}
/* below ~290px viewports the rows scroll; min-height gives the slack overflow-x:auto needs
   (it forces overflow-y:auto, which otherwise clips the chips at sub-pixel row heights) */
.days,.presets{display:flex;flex-wrap:nowrap;align-items:center;min-height:48px;overflow-x:auto;
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.days{gap:4px}
.presets{gap:var(--gf-space-sm) 6px} /* row gap = card gap, so the two rows line up with the days card */
.days::-webkit-scrollbar,.presets::-webkit-scrollbar{display:none}
.dc{flex:1 0 42px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:var(--gf-space-sm) 2px;
  border-radius:var(--gf-radius-md);background:var(--gf-surface-inset);font-size:12px;font-weight:var(--gf-weight-medium);color:var(--gf-text-caption)}
.dc .ck{font-size:10px;line-height:1;visibility:hidden}
.dc.sel{background:var(--gf-selected-chip);color:var(--gf-text-on-orange)}
.dc.sel .ck{visibility:visible}
.pr{flex:none;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 var(--gf-space-sm);border-radius:var(--gf-radius-md);background:var(--gf-surface-inset);
  font-size:13px;color:var(--gf-text-body);white-space:nowrap}
.pr.sel{background:var(--gf-selected-preset);color:var(--gf-text-on-accent)}
/* quick day sets under the chips: mirrors the 3-column hour presets, so the two cards match */
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dq{min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 var(--gf-space-xs);border-radius:var(--gf-radius-md);background:var(--gf-surface-inset);
  font-size:13px;line-height:1.15;text-align:center;color:var(--gf-text-body)}
.dq.sel{background:var(--gf-selected-chip);color:var(--gf-text-on-orange)}
/* the tiles/chips/presets are real buttons */
.tile2,.dc,.pr,.dq{cursor:pointer;font-family:inherit;-webkit-appearance:none;appearance:none;
  transition:transform var(--gf-duration-press-out) var(--gf-ease-out),background .2s var(--gf-ease-out),color .2s var(--gf-ease-out)}
.dc,.pr,.dq{border:none}
.tile2:active,.dc:active,.pr:active,.dq:active{transform:scale(.95)}
/* once the card is wide enough (content ≥ 234px) the rows stop scrolling: 7 days in
   one row, 6 presets in a 3×2 grid, so the two cards share one height everywhere */
@container (min-width:234px){
  .days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible;min-height:0}
  .presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
}

/* single-column preview (phone): cards span the same width as the page text,
   so their side margins equal the 16px screen gutter */
@container (max-width:471px){
  .ap-game,.ap-actions{width:100%}
  .abtn{font-size:14px;gap:var(--gf-space-sm);padding-right:var(--gf-space-sm)}
  .abtn img,.abtn .ico{width:40px;height:40px;padding:9px}
  .result-card{min-height:120px}
  /* the card is wide here — the vw-based clamp under-sizes the value, so pin it large */
  .result-card .value{font-size:2.5rem}
}
/* game selection and reset are icon+label buttons: a 2-up row under the card
   on narrow previews, a column beside it (filling its height) from 472px */
@container (min-width:472px){
  .ap-top{display:flex;align-items:stretch;gap:var(--gf-space-smd)}
  .ap-top .ap-game{flex:0 1 360px;min-width:0;max-width:360px}
  .ap-actions{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
}
.abtn{flex:1 1 0;min-width:0;min-height:56px;display:flex;align-items:center;gap:var(--gf-space-smd);position:relative;
  padding:var(--gf-space-sm) var(--gf-space-smd) var(--gf-space-sm) var(--gf-space-sm);border:none;border-radius:var(--gf-radius-lg);
  background:var(--gf-surface-card);box-shadow:var(--gf-shadow-base);cursor:pointer;text-align:left;
  font-weight:var(--gf-weight-semibold);font-size:15px;line-height:1.2;color:var(--gf-text-body);font-family:inherit;
  transition:transform var(--gf-duration-press-out) var(--gf-ease-out),box-shadow .3s var(--gf-ease-out)}
.abtn img,.abtn .ico{width:48px;height:48px;flex:none;padding:11px;box-sizing:border-box;
  border-radius:var(--gf-radius-mdl);background:var(--gf-surface-inset)}
/* monochrome glyphs (refresh) are masked and filled with the icon colour, so they read in both themes */
.abtn .g{display:block;width:100%;height:100%;background:var(--gf-icon-default);
  -webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat}
.abtn .lbl{flex:1;min-width:0;display:inline-flex;align-items:center;gap:var(--gf-space-xs)}
.abtn:active{transform:scale(var(--gf-press-scale));box-shadow:var(--gf-shadow-base-pressed)}
/* real native <select> laid transparently over the button — a click opens
   the OS dropdown in every browser (no showPicker() needed) */
.game-select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  opacity:0;cursor:pointer;border:none}
@media (hover:hover){
  .abtn:hover{transform:translateY(-2px);box-shadow:var(--gf-shadow-accent)}
  .abtn:hover .chev{background:var(--gf-orange-accent)}
  .dq:not(.sel):hover{background:var(--gf-gray-element-background)}
}
/* desktop: views fill the full hero column; the grid goes two-up only when
   both cards can show every day and hour preset without scrolling */
@media (min-width:1000px){
  .app-preview{max-width:none;min-width:0}
}

/* --- sections --- */
section.block{padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:1px solid var(--gf-border-hairline)}
.h2{margin:0 0 var(--gf-space-lg);font:var(--gf-font-large-title);letter-spacing:-.01em}
#how,#support{scroll-margin-top:84px}

/* how it works — an ordered flow, so the numbers carry meaning */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gf-space-md)}
.step{background:var(--gf-surface-card);border-radius:var(--gf-radius-lg);box-shadow:var(--gf-shadow-base);
  padding:var(--gf-space-smd);display:flex;flex-direction:column;gap:var(--gf-space-smd)}
/* header row mirrors the preview cards: badge or icon tile on the left, title beside it */
.card-hd{display:flex;align-items:center;gap:var(--gf-space-sm);padding:var(--gf-space-xs) var(--gf-space-xs) 0}
.card-hd .n{width:36px;height:36px;flex:none;border-radius:var(--gf-radius-md);display:grid;place-items:center;
  background:var(--gf-orange-accent);color:var(--gf-text-on-orange);font:var(--gf-font-body-semibold)}
.card-hd img{width:36px;height:36px;flex:none;padding:6px;box-sizing:border-box;border-radius:var(--gf-radius-md);background:var(--gf-surface-inset)}
.card-hd h2,.card-hd h3{margin:0;font:var(--gf-font-title);font-size:19px}
/* body text sits on an inset panel (like the progress inset in the game card); flex:1 keeps
   sibling panels the same height so their edges line up across a row */
.inset{flex:1;background:var(--gf-surface-inset);border-radius:var(--gf-radius-mdl);padding:var(--gf-space-md)}
.step p{margin:0;font:var(--gf-font-body);color:var(--gf-text-body);opacity:.72}

/* features */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--gf-space-lg) var(--gf-space-xl)}
.feat{display:grid;grid-template-columns:auto 1fr;gap:var(--gf-space-md);align-items:start}
.feat .tile{width:48px;height:48px;flex:none;border-radius:var(--gf-radius-md);display:grid;place-items:center;
  background:var(--gf-element-background);box-shadow:var(--gf-shadow-base)}
.feat .tile img{width:28px;height:28px;object-fit:contain}
.feat h3{margin:2px 0 var(--gf-space-xs);font:var(--gf-font-body-semibold)}
.feat p{margin:0;font:var(--gf-font-body);color:var(--gf-text-body);opacity:.72}

/* support */
.support{background:var(--gf-surface-card);border-radius:var(--gf-radius-lg);box-shadow:var(--gf-shadow-base);
  padding:var(--gf-space-smd);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--gf-space-md) var(--gf-space-lg)}
.support-main{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:var(--gf-space-smd)}
.support p{margin:0;color:var(--gf-text-body);opacity:.72;font:var(--gf-font-body)}
.support .btn{max-width:100%;overflow-wrap:anywhere;margin-right:var(--gf-space-xs)}

/* --- legal pages: plain prose in the same type system --- */
.prose{max-width:68ch;padding-top:clamp(1.5rem,4vw,3rem);padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.prose h1{margin:0 0 var(--gf-space-sm);font:var(--gf-font-header);letter-spacing:-.02em}
.prose .updated{margin:0 0 var(--gf-space-xl);font:var(--gf-font-caption);color:var(--gf-text-caption)}
.prose h2{margin:var(--gf-space-xl) 0 var(--gf-space-sm);font:var(--gf-font-title)}
.prose p,.prose li{margin:0 0 var(--gf-space-smd);font:var(--gf-font-body);line-height:1.5;text-wrap:pretty}
.prose ul{margin:0 0 var(--gf-space-smd);padding-left:1.2em}
/* body-size links keep the body ink (mid-blue is 3.7:1 on the light ground); the orange underline marks them */
.prose a{color:inherit;text-decoration:underline;text-decoration-color:var(--gf-orange-accent);text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2.5px}
.prose strong{font-weight:var(--gf-weight-semibold)}

/* --- footer: a single centered vertical stack --- */
footer{padding:var(--gf-space-xl) 0;border-top:1px solid var(--gf-border-hairline);
  display:flex;flex-direction:column;align-items:center;gap:var(--gf-space-md);text-align:center}
footer a{text-decoration:none;font:var(--gf-font-body);opacity:.72}
footer a:hover{opacity:1}
footer .gh-btn{opacity:1}
footer .gh-mark{width:20px;height:20px;flex:none;background:currentColor;
  -webkit-mask:url(/ds/assets/logos/github.svg) center/contain no-repeat;
  mask:url(/ds/assets/logos/github.svg) center/contain no-repeat}
footer .legal-links{font:var(--gf-font-body)}
footer .legal-links a{opacity:.72}
footer .credits-row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;
  font:var(--gf-font-caption);color:var(--gf-text-caption)}
footer .credits-row a{font:inherit;color:inherit;opacity:1;text-decoration:underline;text-underline-offset:2px}
footer .credits-row a:hover{color:var(--gf-orange-accent)}
footer .copyright{font:var(--gf-font-caption);color:var(--gf-text-caption)}

:focus-visible{outline:2px solid var(--gf-blue-accent);outline-offset:3px;border-radius:var(--gf-radius-sm)}
[data-theme="dark"] :focus-visible{outline-color:var(--hero-accent)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:clamp(var(--gf-space-lg),6vw,40px)}
  .app-preview{order:2}
}

/* --- motion --- */
/* hover feedback only where there is an action */
@media (hover:hover){
  .btn-orange:hover,.btn-base:hover{transform:translateY(-2px)}
  .btn-orange:hover{box-shadow:0 10px 24px -6px color-mix(in oklab,var(--gf-orange-accent) 55%,transparent)}
  .tbtn:hover{background:var(--gf-gray-element-background)}
  .dc:not(.sel):hover,.pr:not(.sel):hover{background:var(--gf-gray-element-background)}
  .tile2:not(.sel):hover{border-color:var(--gf-gray-element-background)}
}
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise var(--gf-duration-reveal) var(--gf-ease-out) both}
  .rise.d2{animation-delay:.06s}.rise.d3{animation-delay:.12s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  /* the app pops totals after they count up */
  .result-card .value.pop{animation:pop .42s var(--gf-ease-out)}
  @keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
  /* scroll reveals: hidden state is added by JS, so no-JS content stays visible */
  .js-reveal{opacity:0;transform:translateY(18px) scale(.98);
    transition:opacity .55s var(--gf-ease-out),transform .55s var(--gf-ease-out)}
  .js-reveal.in{opacity:1;transform:none}
}
/* smooth cross-fade when switching theme */
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}