/* ==========================================================================
   Oasis: The Infinite Grid - styles
   Theme tokens by Nell (tokens.css, 2026-10-10). One layout, three themes:
   <html data-theme="dawn | paper-dark | bamboo-ink">, Dawn Glass is the default.
   Structure tokens are shared so a theme switch never moves layout.
   ========================================================================== */

/* Fonts: self-hosted variable woff2 (Google Fonts, SIL OFL), one file per family */
@font-face{font-family:'Quicksand';font-weight:300 700;font-display:swap;src:url(/fonts/quicksand-var.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:200 1000;font-display:swap;src:url(/fonts/nunito-var.woff2) format('woff2')}
@font-face{font-family:'Josefin Sans';font-weight:100 700;font-display:swap;src:url(/fonts/josefin-sans-var.woff2) format('woff2')}

/* Registered so the faint radial glow can cross-fade instead of snapping */
@property --glow-tint{syntax:'<color>';inherits:true;initial-value:transparent}

/* ---------- SHARED STRUCTURE (all themes) ---------- */
:root{
  --unit:8px;
  --content-w:1200px; --gutter-mobile:24px;
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:40px; --space-7:56px; --space-9:72px; --space-12:96px;

  /* board motif: game ratio, gap ≈ 11% of cell */
  --cell-size:62px; --cell-gap:7px; --grid-n:10;
  --grid-mask:radial-gradient(closest-side,#000 62%,transparent 100%);

  /* radii */
  --r-panel:28px; --r-card:24px; --r-image:16px; --r-thumb:14px; --r-badge:14px;
  --r-phone:54px; --r-screen:44px; --r-marker:3px;

  /* type scale + line heights (identical for every face, so no layout jump) */
  --fs-h1:152px; --lh-h1:.9;  --fs-h1-sub:20px; --tr-h1-sub:.42em;
  --fs-h2:52px;  --lh-h2:1.1; --fs-h3:38px; --lh-h3:1.15;
  --fs-lede:21px; --lh-lede:1.55; --fs-body:19px; --lh-body:1.6;
  --fs-label:13px; --tr-label:.32em; --fs-small:14px;

  /* motion */
  --t-theme:300ms; --ease-theme:cubic-bezier(.4,0,.2,1);
  --t-snap:120ms;  --ease-snap:cubic-bezier(.2,.9,.3,1.25);

  /* Dawn gradient is defined ONCE and only faded by opacity, so it can transition */
  --ground-gradient:linear-gradient(172deg,#E4EFF7 0%,#CFE4EF 22%,#BBDCE3 52%,#C6E6DE 78%,#DDF0EA 100%);
  --texture-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8  0 0 0 0 .78  0 0 0 0 .7  0 0 0 .55 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
}

/* ---------- 1. DAWN GLASS (default) ---------- */
:root, [data-theme="dawn"]{
  color-scheme:light;
  --font-display:'Quicksand',ui-rounded,system-ui,sans-serif; --fw-display:500; --fw-display-label:600;
  --font-text:'Nunito',ui-rounded,system-ui,sans-serif;

  --ground:#CFE4EF;                 /* solid fallback under the gradient */
  --ground-top:#E4EFF7;             /* colour at the nav (used for ring gaps) */
  --ground-gradient-opacity:1;
  --glow-dawn-opacity:1;            /* white/coral radial lights */
  --glow-tint:transparent;          /* dark-theme radial tint (off) */
  --texture-on:0; --texture-opacity:0; --texture-blend:normal;

  --surface:rgba(255,255,255,.30);
  --surface-strong:rgba(255,255,255,.40);
  --surface-border:rgba(255,255,255,.75);
  --surface-sheen-opacity:1;
  --glass-on:1; --glass-blur:24px; --glass-saturate:120%;
  --glass-fallback:rgba(255,255,255,.55);

  --phone-bezel:rgba(255,255,255,.35); --phone-border:rgba(255,255,255,.8);
  --image-border:rgba(255,255,255,0);
  --shadow-panel:0 30px 60px -36px rgba(30,51,70,.35);
  --shadow-image:0 18px 40px -20px rgba(30,51,70,.45);
  --shadow-phone:0 40px 80px -30px rgba(30,51,70,.35);

  --block-a:#E7838E; --block-b:#5E7AD0; --block-edge:rgba(255,255,255,.6);
  --line:rgba(30,51,70,.14);

  --headline:#1E3346; --body:#3A5266; --muted:#3F5669; --label:#375B72; --link:#2C55B8;
  --accent:#5E7AD0; --accent-2:#E7838E; --accent-strong:#2C55B8;
  --focus:#1E3346; --ring:#2C55B8;

  --cell-fill:rgba(255,255,255,.34); --cell-border:rgba(255,255,255,.8);
  --cell-dash:none; --cell-radius:8px; --tile-radius:3px;

  --star-line:#FFFFFF; --star-node:#FFFFFF; --star-opacity:0;
  --brush-wash:#2E2C34; --brush-rule:#C8B282; --brush-opacity:0;

  --marker-1-bg:#E7838E; --marker-1-border:transparent;
  --marker-2-bg:#5E7AD0; --marker-2-border:transparent;
  --marker-3-bg:rgba(255,255,255,.85); --marker-3-border:#9FC3D3;
  --badge-border:rgba(30,51,70,.45); --badge-bg:rgba(255,255,255,.4); --badge-fg:#1E3346; --badge-sub:#3F5669;
  --missing-border:rgba(30,51,70,.3); --missing-cell:rgba(30,51,70,.06); --missing-cell-line:rgba(30,51,70,.18);
}

/* ---------- 2. PAPER DARK ---------- */
[data-theme="paper-dark"]{
  color-scheme:dark;
  --font-display:'Josefin Sans',system-ui,sans-serif; --fw-display:300; --fw-display-label:400;
  --font-text:'Nunito',ui-rounded,system-ui,sans-serif;   /* shared text face: identical metrics in every theme */

  --ground:#19181C; --ground-top:#19181C;
  --ground-gradient-opacity:0; --glow-dawn-opacity:0;
  --glow-tint:rgba(200,178,130,.06);
  --texture-on:1; --texture-opacity:.09; --texture-blend:screen;

  --surface:#1E1D22; --surface-strong:rgba(255,255,255,.02);
  --surface-border:rgba(200,178,130,.16);
  --surface-sheen-opacity:0;
  --glass-on:0; --glass-blur:0px; --glass-saturate:100%; --glass-fallback:#1E1D22;

  --phone-bezel:#0F0E11; --phone-border:rgba(200,178,130,.35);
  --image-border:rgba(200,178,130,.2);
  --shadow-panel:none; --shadow-image:none;
  --shadow-phone:0 50px 90px -30px rgba(0,0,0,.8),0 0 0 6px rgba(200,178,130,.04);

  --block-a:#39383E; --block-b:#39383E; --block-edge:#C8B282;
  --line:rgba(200,178,130,.18);

  --headline:#F1EADB; --body:#C9C2B4; --muted:#A8A193; --label:#C8B282; --link:#E2C18F;
  --accent:#C8B282; --accent-2:#E2C18F; --accent-strong:#E2C18F;
  --focus:#F1EADB; --ring:#C8B282;

  --cell-fill:transparent; --cell-border:rgba(200,178,130,.26);
  --cell-dash:3 3; --cell-radius:3px; --tile-radius:2px;

  --star-line:#C8B282; --star-node:#E2C18F; --star-opacity:1;
  --brush-wash:#2E2C34; --brush-rule:#C8B282; --brush-opacity:1;

  --marker-1-bg:#39383E; --marker-1-border:#C8B282;
  --marker-2-bg:transparent; --marker-2-border:rgba(200,178,130,.75);
  --marker-3-bg:#C8B282; --marker-3-border:#C8B282;
  --badge-border:rgba(200,178,130,.6); --badge-bg:rgba(255,255,255,.02); --badge-fg:#F1EADB; --badge-sub:#A8A193;
  --missing-border:rgba(200,178,130,.35); --missing-cell:transparent; --missing-cell-line:rgba(200,178,130,.3);
}

/* ---------- 3. BAMBOO INK ("Paper Dark in muted greens") ---------- */
[data-theme="bamboo-ink"]{
  color-scheme:dark;
  --font-display:'Josefin Sans',system-ui,sans-serif; --fw-display:300; --fw-display-label:400;
  --font-text:'Nunito',ui-rounded,system-ui,sans-serif;   /* shared text face: identical metrics in every theme */

  --ground:#161C19; --ground-top:#161C19;
  --ground-gradient-opacity:0; --glow-dawn-opacity:0;
  --glow-tint:rgba(159,194,174,.06);
  --texture-on:1; --texture-opacity:.10; --texture-blend:screen;

  --surface:#1B231F; --surface-strong:rgba(255,255,255,.02);
  --surface-border:rgba(159,194,174,.16);
  --surface-sheen-opacity:0;
  --glass-on:0; --glass-blur:0px; --glass-saturate:100%; --glass-fallback:#1B231F;

  --phone-bezel:#0E1311; --phone-border:rgba(159,194,174,.32);
  --image-border:rgba(159,194,174,.2);
  --shadow-panel:none; --shadow-image:none;
  --shadow-phone:0 50px 90px -30px rgba(0,0,0,.8),0 0 0 6px rgba(159,194,174,.04);

  --block-a:#34433A; --block-b:#34433A; --block-edge:#9FC2AE;
  --line:rgba(159,194,174,.18);

  --headline:#E6EDE5; --body:#BCC8BE; --muted:#95A499; --label:#9FC2AE; --link:#B8D6C3;
  --accent:#9FC2AE; --accent-2:#B8D6C3; --accent-strong:#B8D6C3;
  --focus:#E6EDE5; --ring:#9FC2AE;

  --cell-fill:transparent; --cell-border:rgba(159,194,174,.24);
  --cell-dash:3 3; --cell-radius:3px; --tile-radius:2px;

  --star-line:#9FC2AE; --star-node:#B8D6C3; --star-opacity:1;
  --brush-wash:#24302A; --brush-rule:#9FC2AE; --brush-opacity:1;

  --marker-1-bg:#34433A; --marker-1-border:#9FC2AE;
  --marker-2-bg:transparent; --marker-2-border:rgba(159,194,174,.75);
  --marker-3-bg:#9FC2AE; --marker-3-border:#9FC2AE;
  --badge-border:rgba(159,194,174,.6); --badge-bg:rgba(255,255,255,.02); --badge-fg:#E6EDE5; --badge-sub:#95A499;
  --missing-border:rgba(159,194,174,.35); --missing-cell:transparent; --missing-cell-line:rgba(159,194,174,.3);
}

/* ---------- mobile type scale (shared) ---------- */
@media (max-width:600px){
  :root{ --fs-h1:84px; --fs-h1-sub:13px; --fs-h2:28px; --fs-h3:28px; --fs-lede:17px; --fs-body:17px; }
}

/* ---------- toggle tiles: each tile always shows ITS OWN theme ---------- */
:root{
  --tile-size:20px; --tile-gap:6px; --tile-hit:44px;
  --tile-dawn:linear-gradient(135deg,#E7838E 0 50%,#5E7AD0 50% 100%);
  --tile-dawn-edge:rgba(255,255,255,.7);
  --tile-paper:#39383E; --tile-paper-edge:#C8B282;
  --tile-bamboo:#34433A; --tile-bamboo-edge:#9FC2AE;
}

/* ---------- theme-change transition: colours only, ~300ms, never layout ---------- */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{
  transition-property:color,background-color,border-color,outline-color,fill,stroke,box-shadow,opacity,--glow-tint !important;
  transition-duration:var(--t-theme) !important;
  transition-timing-function:var(--ease-theme) !important;
}
@media (prefers-reduced-motion: reduce){
  :root{ --t-theme:0ms; --t-snap:0ms; }
  html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{ transition:none !important; }
  .theme-toggle .tile{ animation:none !important; transition:none !important; }
}

/* ==========================================================================
   Layout (uses only the tokens above)
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{width:100%}
body{position:relative;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--body);background-color:var(--ground)}
img{max-width:100%}
a{color:var(--link)}
a:focus-visible,summary:focus-visible,.button:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-80px;z-index:20;padding:10px 16px;border-radius:10px;font-weight:700;background:var(--headline);color:var(--ground-top);text-decoration:none}
.skip-link:focus{top:16px}

/* ground layers (opacity-faded so theme changes cross-fade) */
.bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg > i{position:absolute;inset:0;display:block}
.bg .l-gradient{background:var(--ground-gradient);opacity:var(--ground-gradient-opacity)}
.bg .l-glow-dawn{opacity:var(--glow-dawn-opacity);background:
  radial-gradient(900px 600px at 80% 8%,rgba(255,255,255,.55),transparent 70%),
  radial-gradient(700px 500px at 10% 40%,rgba(255,255,255,.35),transparent 70%),
  radial-gradient(800px 600px at 85% 70%,rgba(231,131,142,.10),transparent 70%)}
.bg .l-glow-dark{background:radial-gradient(1000px 700px at 72% 12%,var(--glow-tint),transparent 70%)}
.bg .l-texture{background-image:var(--texture-image);opacity:var(--texture-opacity);mix-blend-mode:var(--texture-blend)}
.bg .stars{position:absolute;top:0;left:50%;transform:translateX(-50%);opacity:var(--star-opacity)}
.stars .sl{stroke:var(--star-line)} .stars .sd{fill:var(--star-line)} .stars .sn{fill:var(--star-node)}

main{display:block;overflow-x:clip}
.wrap{position:relative;z-index:1;width:min(var(--content-w),calc(100% - 48px));margin:0 auto}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:36px;height:36px;border-radius:9px}
.brand span{font-family:var(--font-display);font-weight:var(--fw-display);font-size:24px;letter-spacing:.04em;color:var(--headline);line-height:1}
.nav-right{display:flex;align-items:center;gap:28px}
.nav-links{display:flex;gap:32px;list-style:none;font-size:15px;font-weight:600}
.nav-links a{color:var(--body);text-decoration:none}
.nav-links a:hover{color:var(--headline);text-decoration:underline}

/* ---------- theme toggle: native radios styled as three board cells ---------- */
.theme-toggle{display:flex;align-items:center;height:var(--tile-hit);padding:0 3px;margin:0 -12px 0 0;border:0;min-width:0}
.theme-toggle .radio{cursor:pointer;width:calc(var(--tile-size) + var(--tile-gap));height:var(--tile-hit);
  display:grid;place-items:center;position:relative;-webkit-tap-highlight-color:transparent}
.theme-toggle .radio:first-of-type{width:calc(var(--tile-size) + var(--tile-gap) + 9px);justify-items:end;padding-right:3px}
.theme-toggle .radio:last-of-type{width:calc(var(--tile-size) + var(--tile-gap) + 9px);justify-items:start;padding-left:3px}
.theme-toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.theme-toggle .tile{display:block;width:var(--tile-size);height:var(--tile-size);border-radius:var(--tile-radius);position:relative;pointer-events:none;
  transition:transform var(--t-snap) var(--ease-snap),box-shadow var(--t-snap) ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.28)}
.tile.t-dawn{background:var(--tile-dawn);box-shadow:inset 0 0 0 1px var(--tile-dawn-edge),inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(30,51,70,.3)}
.tile.t-paper{background:var(--tile-paper);box-shadow:inset 0 0 0 1.5px var(--tile-paper-edge),inset 0 2px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.35)}
.tile.t-bamboo{background:var(--tile-bamboo);box-shadow:inset 0 0 0 1.5px var(--tile-bamboo-edge),inset 0 2px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.35)}
@media (hover:hover){
  .radio:hover .tile{transform:translateY(-1px)}
  .radio:hover .tile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.14)}
}
/* checked: pressed into the board + thin accent ring */
.radio input:checked + .tile{transform:translateY(.5px) scale(.9)}
.radio input:checked + .tile::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--tile-radius) + 4px);border:1.5px solid var(--ring)}
.radio input:checked + .tile.t-dawn{box-shadow:inset 0 0 0 1px var(--tile-dawn-edge),inset 0 2px 3px rgba(30,51,70,.45)}
.radio input:checked + .tile.t-paper{box-shadow:inset 0 0 0 1.5px var(--tile-paper-edge),inset 0 2px 4px rgba(0,0,0,.7)}
.radio input:checked + .tile.t-bamboo{box-shadow:inset 0 0 0 1.5px var(--tile-bamboo-edge),inset 0 2px 4px rgba(0,0,0,.7)}
.radio input:active + .tile{transform:scale(.86)}
/* keyboard focus: 2px ring in --focus */
.radio input:focus-visible + .tile::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--tile-radius) + 4px);border:2px solid var(--focus)}
.radio.snap .tile{animation:tile-snap var(--t-snap) var(--ease-snap)}
@keyframes tile-snap{0%{transform:translateY(-3px) scale(1.06)}65%{transform:translateY(1px) scale(.86)}100%{transform:translateY(.5px) scale(.9)}}

/* hero */
.hero{display:grid;grid-template-columns:560px 1fr;align-items:center;min-height:720px;padding:0 0 56px}
.eyebrow{font-family:var(--font-display);font-weight:var(--fw-display-label);font-size:14px;letter-spacing:.32em;text-transform:uppercase;margin-bottom:20px;color:var(--label);line-height:1.4}
.wordmark{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h1);line-height:var(--lh-h1);color:var(--headline)}
.wordmark span{display:block;font-weight:var(--fw-display-label);font-size:var(--fs-h1-sub);letter-spacing:var(--tr-h1-sub);text-transform:uppercase;margin-top:22px;line-height:1.2;color:var(--label)}
h1{font-family:var(--font-display);font-weight:var(--fw-display);font-size:40px;line-height:1.15;color:var(--headline);margin-top:40px}
.lede{font-size:var(--fs-lede);line-height:var(--lh-lede);max-width:440px;margin:20px 0 36px;color:var(--body)}
.badge-link{display:inline-block;border-radius:var(--r-badge);line-height:0}
.badge-link img{width:216px;height:72px;display:block}
/* Apple badge: black on Dawn (default, also with JS off), white on the dark themes */
.badge-link .badge-white{display:none}
[data-theme="paper-dark"] .badge-link .badge-black,[data-theme="bamboo-ink"] .badge-link .badge-black{display:none}
[data-theme="paper-dark"] .badge-link .badge-white,[data-theme="bamboo-ink"] .badge-link .badge-white{display:block}
.hero-visual{position:relative;height:720px;display:flex;align-items:center;justify-content:center}
.hero-grid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-mask-image:var(--grid-mask);mask-image:var(--grid-mask)}
.hero-grid rect{fill:var(--cell-fill);stroke:var(--cell-border);stroke-width:1;stroke-dasharray:var(--cell-dash);rx:var(--cell-radius)}
.brush{color:var(--brush-wash);opacity:var(--brush-opacity)}
.brush-hero{position:absolute;left:58%;top:60%;transform:translate(-50%,-50%) rotate(-10deg)}
.brush-rule{display:block;margin:-6px 0 22px -8px;color:var(--brush-rule);opacity:calc(var(--brush-opacity) * .7)}
.phone{position:relative;width:332px;padding:11px;border-radius:var(--r-phone);background:var(--phone-bezel);border:1px solid var(--phone-border);box-shadow:var(--shadow-phone);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate))}
.phone img,.mini-phone img{display:block;object-fit:cover;object-position:top}
.phone img{width:310px;height:646px;border-radius:var(--r-screen)}

/* themed images: one <img> per theme, only the active one renders (display:none + lazy = not fetched) */
.themed > img{display:none}
.themed > .for-dawn{display:block}
[data-theme="paper-dark"] .themed > .for-dawn,[data-theme="bamboo-ink"] .themed > .for-dawn{display:none}
[data-theme="paper-dark"] .themed > .for-paper-dark{display:block}
[data-theme="bamboo-ink"] .themed > .for-bamboo-ink{display:block}

/* sections */
.section{padding:56px 0}
h2{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:var(--lh-h2);margin-bottom:24px;color:var(--headline)}
h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h3);line-height:var(--lh-h3);margin-bottom:16px;color:var(--headline);letter-spacing:.01em}
.panel{border-radius:var(--r-panel);padding:48px;background:var(--surface);border:1px solid var(--surface-border);box-shadow:var(--shadow-panel);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));position:relative;overflow:hidden}
.panel::before,.media::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 40%);opacity:var(--surface-sheen-opacity);pointer-events:none}
.panel > *{position:relative}

/* features */
.row{display:grid;grid-template-columns:1fr 600px;gap:96px;align-items:center;margin-bottom:56px}
.row.flip{grid-template-columns:600px 1fr}
.row.flip .ftext{order:2}
.ftext{max-width:460px}
.ftext p,.fcard p{color:var(--body)}
.cell{display:block;width:16px;height:16px;border-radius:var(--r-marker);margin-bottom:28px;border:1.5px solid transparent}
.c1{background:var(--marker-1-bg);border-color:var(--marker-1-border)}
.c2{background:var(--marker-2-bg);border-color:var(--marker-2-border)}
[data-theme="paper-dark"] .c2,[data-theme="bamboo-ink"] .c2{border-style:dashed}
.c3{background:var(--marker-3-bg);border-color:var(--marker-3-border);border-width:1px}
.media{height:368px;border-radius:var(--r-panel);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
  background:var(--surface);border:1px solid var(--surface-border);box-shadow:var(--shadow-panel);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate))}
.shot{position:relative}
.shot img{border-radius:var(--r-image);box-shadow:var(--shadow-image);outline:1px solid var(--image-border);outline-offset:-1px}
.shot.sq img{width:300px;height:300px;object-fit:cover}
.shot.wide img{width:520px;height:256px;object-fit:cover;object-position:top}
.mini-phone{width:158px;padding:6px;border-radius:28px;background:var(--phone-bezel);border:1px solid var(--phone-border);box-shadow:var(--shadow-image)}
.mini-phone img{width:146px;height:304px;border-radius:24px}
.fcards{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:16px 0 32px}
.fcard{border-radius:var(--r-card);padding:32px;background:var(--surface);border:1px solid var(--surface-border);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate))}
.fcard h3{font-size:26px}
.touches{padding:40px 48px}
.touches h3{font-size:28px}
.ticks{list-style:none;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:var(--r-marker);background:var(--marker-3-bg);border:1px solid var(--marker-3-border)}
.ticks strong{color:var(--headline);font-weight:700}

/* themes strip */
.sub{max-width:720px;margin-bottom:40px;color:var(--body)}
.cards{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.card{border-radius:var(--r-card);padding:14px 14px 24px;overflow:hidden;background:var(--surface);border:1px solid var(--surface-border);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate))}
.thumb{height:340px;border-radius:var(--r-thumb);overflow:hidden;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}
.card h3{font-weight:var(--fw-display-label);font-size:22px;margin:18px 6px 6px}
.card p{font-size:16px;line-height:1.55;margin:0 6px;color:var(--body)}

/* premium + faq */
.narrow{max-width:820px}
.price{font-family:var(--font-display);font-weight:var(--fw-display-label);font-size:28px;color:var(--headline);margin:28px 0 20px}
.button{display:inline-block;padding:14px 26px;border-radius:999px;font-weight:700;font-size:17px;text-decoration:none;background:var(--headline);color:var(--ground-top)}
.button:hover{background:var(--accent-strong);color:var(--ground-top)}
.panel .ticks{margin-top:24px}
details{border-radius:var(--r-card);margin-bottom:12px;padding:0 24px;background:var(--surface);border:1px solid var(--surface-border);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate))}
summary{cursor:pointer;font-weight:700;color:var(--headline);padding:18px 0;list-style-position:outside}
details p{padding:0 0 20px;color:var(--body)}

/* footer */
.foot{display:grid;grid-template-columns:1fr auto;row-gap:24px;align-items:center;padding:48px 0 56px;border-top:1px solid var(--line);margin-top:40px}
.foot .brand span{font-size:17px;font-weight:var(--fw-display-label);letter-spacing:.03em}
.foot ul{display:flex;gap:32px;list-style:none;font-size:15px;font-weight:700}
.foot ul a{color:var(--link)}
.foot .copy{grid-column:1/-1;font-size:13px;line-height:1.5;color:var(--muted)}

/* mid widths: keep the layout inside the viewport */
@media (max-width:1180px){
 .hero{grid-template-columns:1fr 1fr}
 .row,.row.flip{grid-template-columns:1fr 1fr;gap:48px}
 .media{height:340px}
 .shot.wide img{width:100%;height:auto;max-width:520px}
 .fcards{grid-template-columns:1fr}
}
@media (max-width:860px){
 .hero{display:block;min-height:0;padding:16px 0 48px}
 .row,.row.flip{grid-template-columns:1fr;gap:24px}
 .row.flip .ftext{order:0}
 .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
 .wrap{width:auto;margin:0 var(--gutter-mobile)}
 .nav{height:64px}
 .nav-right{gap:10px}
 .nav-links li:not(:last-child){display:none}
 .nav-links{font-size:14px}
 .brand span{font-size:20px}
 .theme-toggle{margin-right:-9px}
 .hero{padding:8px 0 40px}
 .eyebrow{font-size:11px;letter-spacing:.26em;margin-bottom:12px}
 .wordmark span{margin-top:12px}
 h1{font-size:30px;margin-top:28px}
 .lede{font-size:17px;margin:16px 0 24px}
 .badge-link img{width:180px;height:60px}
 .hero-visual{height:520px;margin-top:20px}
 .hero-grid{width:440px;height:440px}
 .phone{width:236px;padding:8px;border-radius:40px}
 .phone img{width:220px;height:458px;border-radius:32px}
 .brush-hero{width:520px;height:140px}
 .bg .stars{left:0;transform:none}
 .section{padding:40px 0}
 .row,.row.flip{margin-bottom:40px}
 .cell{margin-bottom:18px}
 .media{height:300px}
 .shot.sq img{width:240px;height:240px}
 .shot.wide img{width:300px;height:148px}
 .fcard{padding:24px}
 .fcard h3{font-size:24px}
 .panel,.touches{padding:28px 24px}
 .cards{grid-template-columns:1fr;gap:20px}
 .thumb{height:300px}
 .price{font-size:24px}
 details{padding:0 18px}
 .foot{grid-template-columns:1fr}
 .foot ul{gap:24px;flex-wrap:wrap}
}
@media (prefers-reduced-motion: reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
}