:root{
    --page:#E9F6FE; --white:#FFFFFF; --mist:#D6EEFB;
    --sky:#73CBFD; --sky-soft:#A2E2FB; --tq:#2FC4DC; --tq-deep:#10707F; --sea:#0E7FA8;
    --ink:#0E3A50; --ink-soft:#3E6B80; --ink-faint:#4E7484;
    --sun:#EE9932; --sun-deep:#BE741C; --sun-hi:#FFB55C;
    --coral:#D64A28; --coral-deep:#9E3319; --pink:#F8A0C0;
    --tileface:#FDFBF3;
    --line:rgba(14,58,80,.13); --line-soft:rgba(14,58,80,.07);
    /* reading surfaces: ~68 rendered characters, and a darker ink for long-form body copy */
    --measure:52ch; --ink-read:#2F5A6E;
    --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
    --body:"Outfit","Avenir Next",system-ui,-apple-system,sans-serif;
  }
  *{box-sizing:border-box;}
  body{margin:0; background:var(--page); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
  .shell{width:100%;}
  :root{--gutter:max(18px, (100% - 1260px) / 2);}
  .url{margin-left:8px; font:500 12px/1 var(--body); color:var(--ink-soft); background:#fff; border-radius:6px; padding:6px 12px;}

  /* ── hero ─────────────────────────────────── */
  .hero{position:relative; overflow:hidden; isolation:isolate; min-height:clamp(470px,54vw,660px); display:flex; flex-direction:column;}
  .hero img.art{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 62%; z-index:-2;}
  .nav{position:relative; padding:16px var(--gutter);}
  .navbar{
    display:flex; align-items:center; gap:clamp(8px,1.4vw,18px); flex-wrap:wrap;
    background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
    border:1px solid rgba(255,255,255,.85); border-radius:999px; padding:8px 8px 8px 14px;
    box-shadow:0 8px 26px rgba(14,58,80,.16);
  }
  .brand{text-decoration:none; color:inherit; display:flex; align-items:center; gap:9px;}
  .brand,.footbrand .fb{cursor:pointer; border-radius:12px; transition:transform .15s ease;}
  .brand img,.footbrand .fb img{transition:transform .18s ease, box-shadow .18s ease;}
  .brand:hover img,.footbrand .fb:hover img{transform:translateY(-2px) rotate(-4deg); box-shadow:0 6px 14px rgba(14,58,80,.22);}
  .brand:hover span,.footbrand .fb:hover strong{color:#0C6E92;}
  .brand:focus-visible,.footbrand .fb:focus-visible{outline:3px solid var(--tq); outline-offset:4px;}
  @media (prefers-reduced-motion:reduce){ .brand:hover img,.footbrand .fb:hover img{transform:none;} }
  .brand img{width:30px; height:30px; border-radius:9px; display:block;}
  .brand span{font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-.03em; color:var(--ink);}
  .navbar ul{display:flex; gap:clamp(4px,1vw,10px); list-style:none; margin:0; padding:0;}
  .navbar li a{color:inherit; text-decoration:none;}
  .navbar li{font-size:14px; font-weight:600; color:var(--ink-soft); padding:8px 12px; border-radius:999px;}
  .navbar li:first-child{color:var(--ink); background:rgba(14,58,80,.07);}
  .navbar .top{text-decoration:none; display:inline-block;
    margin-left:auto; font-family:var(--display); font-weight:800; font-size:14px; color:#fff;
    background:linear-gradient(180deg,#D64A28,#BE3F22); border:0; border-radius:999px; padding:12px 22px;
    box-shadow:0 4px 0 var(--coral-deep), 0 8px 16px rgba(201,69,38,.3); cursor:pointer;
  }

  .stage{position:relative; flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); align-items:center; gap:clamp(12px,3vw,36px); padding:clamp(6px,1.6vw,20px) var(--gutter) clamp(24px,3.6vw,48px);}
  @media(max-width:820px){ .stage{grid-template-columns:1fr; gap:22px;} }
  .copy{position:relative; isolation:isolate;}
  .copy::before{content:""; position:absolute; inset:-30px -44px; z-index:-1; border-radius:28px;
    background:radial-gradient(70% 76% at 34% 50%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.62) 46%, rgba(255,255,255,0) 100%);}
  .kicker{display:inline-flex; align-items:center; gap:8px; font:700 11px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--tq-deep); margin:0 0 12px;}
  .kicker s{display:block; width:20px; height:3px; border-radius:2px; background:var(--sun); text-decoration:none;}
  h1{font-family:var(--display); font-weight:800; font-size:clamp(36px,5.8vw,70px); line-height:.93; letter-spacing:-.04em; margin:0; color:var(--ink); text-wrap:balance;}
  h1 em{font-style:normal; color:var(--sea);}
  .copy > p{margin:15px 0 0; color:var(--ink-soft); font-size:clamp(14px,1.75vw,18px); max-width:38ch; font-weight:500;}
  .cta{display:flex; gap:11px; flex-wrap:wrap; margin-top:22px;}
  .btn{text-decoration:none;
    display:inline-flex; align-items:center; gap:10px; cursor:pointer; text-align:left;
    background:#000; color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:11px;
    padding:9px 18px 9px 15px; min-height:56px;
    box-shadow:0 8px 20px rgba(14,58,80,.28); transition:transform .12s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn:active{transform:translateY(1px);}
  .btn svg{width:26px; height:26px; flex:0 0 26px;}
  .btn i{font-style:normal; display:grid; gap:2px;}
  .btn small{font-family:var(--body); font-size:10.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#EDEDED; line-height:1.1;}
  .btn b{font-family:-apple-system,"Helvetica Neue",Arial,sans-serif; font-weight:600; font-size:20px; letter-spacing:-.01em; line-height:1.08; color:#fff;}
  .btn.two b{font-family:"Outfit",Arial,sans-serif; font-weight:600;}

  /* ── the crossword we draw ourselves ──────── */
  .board{position:relative; justify-self:center; display:grid; gap:clamp(6px,.9vw,10px); grid-template-columns:repeat(5,1fr); width:min(400px,84%);}
  .cell{aspect-ratio:1; border-radius:clamp(10px,1.7vw,18px);}
  .cell.f{
    position:relative; display:grid; place-items:center; color:#fff;
    font-family:var(--display); font-weight:800; letter-spacing:-.03em;
    font-size:clamp(24px,4.6vw,50px); line-height:1;
    background:linear-gradient(176deg,#E8973C 0%,#D07A18 55%,#BE6C13 100%);
    box-shadow:
      inset 0 clamp(2px,.35vw,4px) 0 rgba(255,255,255,.62),
      inset 0 clamp(-5px,-.7vw,-3px) 0 rgba(120,62,0,.22),
      inset 0 0 0 1px rgba(150,80,10,.2),
      0 clamp(5px,.8vw,8px) 0 var(--sun-deep),
      0 clamp(10px,1.5vw,16px) clamp(12px,1.8vw,22px) rgba(14,58,80,.26);
    text-shadow:0 clamp(2px,.3vw,3px) 0 rgba(140,72,0,.42);
  }
  .cell.f::after{
    content:""; position:absolute; left:8%; right:8%; top:6%; height:26%;
    border-radius:999px; background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0)); pointer-events:none;
  }
  .cell.e{
    background:linear-gradient(176deg,#FFFEF8,#EFEADB);
    box-shadow:
      inset 0 clamp(3px,.45vw,5px) clamp(4px,.7vw,8px) rgba(14,58,80,.20),
      inset 0 0 0 1px rgba(14,58,80,.10),
      0 clamp(2px,.35vw,4px) 0 rgba(255,255,255,.75);
  }
  .cell.blank{background:transparent; box-shadow:none;}
  .wheel{
    position:absolute; right:-6%; bottom:-14%; width:clamp(112px,17vw,168px); aspect-ratio:1; border-radius:50%;
    background:rgba(255,255,255,.93); box-shadow:0 10px 26px rgba(14,58,80,.22);
  }
  .wl{position:absolute; width:32%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
    font-family:var(--display); font-weight:800; font-size:clamp(14px,2.3vw,24px); color:#fff; line-height:1;
    background:linear-gradient(176deg,#E8973C,#D07A18 62%,#BE6C13);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 var(--sun-deep), 0 8px 14px rgba(14,58,80,.22);
    text-shadow:0 2px 0 rgba(120,62,0,.45);}
  .wl.off{background:linear-gradient(176deg,#FBFDFE,#E2EBEF); color:var(--ink-faint);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.9), 0 3px 0 rgba(14,58,80,.14), 0 6px 12px rgba(14,58,80,.14);
    text-shadow:none;}
  .wheel svg{position:absolute; inset:0; width:100%; height:100%;}
  .pill{
    position:absolute; top:-16%; left:50%; transform:translateX(-50%);
    background:var(--sun); color:#4A2200; font-family:var(--display); font-weight:800; font-size:clamp(11px,1.5vw,15px);
    padding:6px 14px; border-radius:999px; box-shadow:0 3px 0 var(--sun-deep); white-space:nowrap;
  }

  /* ── stat rail ────────────────────────────── */
  .rail{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(10px,1.5vw,16px);
    background:var(--white); border-block:1px solid var(--line); padding:clamp(16px,2.4vw,26px) var(--gutter);}
  .stat{
    padding:18px 14px; text-align:center; border-radius:16px; background:var(--page);
    box-shadow:inset 0 0 0 1px rgba(14,58,80,.06), 0 2px 0 rgba(255,255,255,.9);
  }
  .stat b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(20px,2.9vw,31px); color:var(--sea); letter-spacing:-.035em; font-variant-numeric:tabular-nums; line-height:1;}
  .stat span{display:block; margin-top:6px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:700;}

  /* ── showcase ─────────────────────────────── */
  .showcase{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr); gap:clamp(20px,4vw,54px); align-items:center; padding:clamp(32px,5vw,72px) var(--gutter); background:var(--page);}
  @media(max-width:780px){ .showcase{grid-template-columns:1fr;} }
  .phone{position:relative; justify-self:center; width:min(252px,68vw); aspect-ratio:9/19.5; background:#fff; border-radius:36px; padding:8px; box-shadow:0 0 0 2px rgba(14,58,80,.12), 0 26px 50px -18px rgba(14,58,80,.38);}
  .phone img{width:100%; height:100%; object-fit:cover; border-radius:29px; display:block;}
  .showcase h2{font-family:var(--display); font-weight:800; font-size:clamp(26px,4.2vw,48px); line-height:.98; letter-spacing:-.035em; margin:0 0 14px; color:var(--ink); text-wrap:balance;}
  .showcase h2 em{font-style:normal; color:#C06A12;}
  .showcase > div > p{margin:0 0 18px; color:var(--ink-soft); font-size:clamp(14px,1.7vw,18px); max-width:44ch;}
  .ticks{display:grid; gap:10px; margin:0; padding:0; list-style:none;}
  .ticks li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink); font-weight:500;}
  .ticks svg{width:15px; height:15px; flex:0 0 15px;}
  .ticks i{flex:0 0 26px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; margin-top:1px;
    background:linear-gradient(176deg,#7FE3F2,var(--tq));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 var(--tq-deep), 0 6px 10px rgba(14,58,80,.16);}

  /* ── band ─────────────────────────────────── */
  .bandcopy{padding:clamp(24px,4vw,56px); display:grid; align-content:center; gap:14px;}
  .bandcopy h2{font-family:var(--display); font-weight:800; font-size:clamp(24px,3.5vw,42px); letter-spacing:-.033em; margin:0; color:var(--ink); line-height:1;}
  .bandcopy p{margin:0; color:var(--ink-soft); max-width:44ch;}
  .worldchips{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
  .chip{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.02em;
    padding:8px 14px 8px 10px; border-radius:999px; background:var(--white); color:var(--ink);
    box-shadow:inset 0 0 0 1px rgba(14,58,80,.10), 0 2px 5px rgba(14,58,80,.07);}
  .chip s{display:block; width:9px; height:9px; border-radius:50%; text-decoration:none; box-shadow:inset 0 -1px 0 rgba(0,0,0,.18);}

  /* ── closer ───────────────────────────────── */
  .closer{padding:clamp(34px,5vw,76px) var(--gutter); text-align:center; display:grid; gap:15px; justify-items:center;
    background:linear-gradient(180deg,var(--sky-soft),var(--page));}
  .closer h2{font-family:var(--display); font-weight:800; font-size:clamp(26px,4.4vw,52px); letter-spacing:-.037em; margin:0; color:var(--ink); max-width:16ch; line-height:.98;}
  .closer p{margin:0; color:var(--ink-soft); max-width:46ch;}
  .foot{padding:24px 20px; text-align:center; font-size:13px; color:var(--ink-faint); background:var(--page); border-top:1px solid var(--line-soft);}
  .foot a{color:var(--ink-soft); text-decoration:none; margin:0 9px; font-weight:500;}

  /* ── notes ────────────────────────────────── */
  .sc b{font-family:var(--display); font-weight:800; font-size:12px;}

  /* ── section furniture ─────────────────────── */
  .sec{padding:clamp(34px,5vw,78px) var(--gutter);}
  .sec.alt{background:var(--white); border-block:1px solid var(--line);}
  .sechead{max-width:640px; margin:0 0 clamp(20px,3vw,34px);}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font:700 11px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--tq-deep); margin:0 0 12px;}
  .eyebrow s{display:block; width:20px; height:3px; border-radius:2px; background:var(--sun); text-decoration:none;}
  .sec h2{font-family:var(--display); font-weight:800; font-size:clamp(26px,4vw,46px); letter-spacing:-.035em; margin:0; color:var(--ink); line-height:1; text-wrap:balance;}
  .sec h2 em{font-style:normal; color:var(--sea);}
  .sec .lede{margin:12px 0 0; color:var(--ink-soft); font-size:clamp(15px,1.7vw,18px);}

  /* ── how it works ──────────────────────────── */
  .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(14px,2.2vw,24px);}
  .step{background:var(--page); border-radius:20px; padding:24px; display:grid; gap:12px; align-content:start;
    box-shadow:inset 0 0 0 1px rgba(14,58,80,.07);}
  .sec.alt .step{background:var(--page);}
  .stepnum{width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
    font-family:var(--display); font-weight:800; font-size:17px; color:#4A2200;
    background:linear-gradient(176deg,#FFC066,#EE9932 62%,#DE8117);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 var(--sun-deep);}
  .step h3{font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; margin:0; color:var(--ink);}
  .step p{margin:0; color:var(--ink-soft); font-size:15px;}
  .minirow{display:flex; gap:6px; margin-top:2px;}
  .mt{width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
    font-family:var(--display); font-weight:800; font-size:15px; color:#4A2200; line-height:1;
    background:linear-gradient(176deg,#FFC066,#EE9932 62%,#DE8117);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 var(--sun-deep);}
  .mt.e{background:linear-gradient(176deg,#FFFEF8,#EFEADB); box-shadow:inset 0 2px 4px rgba(14,58,80,.18), inset 0 0 0 1px rgba(14,58,80,.1);}

  /* ── worlds grid ───────────────────────────── */
  .wgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:clamp(12px,2vw,18px);}
  .wcard{position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/11; isolation:isolate;
    box-shadow:0 10px 24px rgba(14,58,80,.16);}
  .wcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;}
  .wcard::after{content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(0deg, rgba(4,32,46,.86) 4%, rgba(4,32,46,.12) 58%);}
  .wcard div{position:absolute; left:16px; right:16px; bottom:13px;}
  .wcard b{display:block; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; color:#fff;}
  .wcard span{font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.8); font-weight:600;}
  .wcard.more{display:grid; place-items:center; text-align:center; background:var(--mist); box-shadow:inset 0 0 0 1px rgba(14,58,80,.09);}
  .wcard.more::after{display:none;}
  .wcard.more p{margin:0; font-family:var(--display); font-weight:800; font-size:clamp(24px,3vw,32px); color:var(--sea); letter-spacing:-.03em;}
  .wcard.more small{display:block; margin-top:4px; font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:#3E6270; font-weight:700;}

  /* ── tool cards ────────────────────────────── */
  .tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(14px,2.2vw,22px);}
  .tool{background:var(--white); border-radius:20px; padding:26px 24px; display:grid; gap:11px; align-content:start;
    box-shadow:inset 0 0 0 1px rgba(14,58,80,.08), 0 6px 16px rgba(14,58,80,.07);}
  .sec.alt .tool{background:var(--page);}
  .toolicon{width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
    background:linear-gradient(176deg,#7FE3F2,var(--tq));
    box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 var(--tq-deep), 0 8px 14px rgba(14,58,80,.16);}
  .toolicon svg{width:22px; height:22px;}
  .tool h3{font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; margin:0; color:var(--ink);}
  .tool p{margin:0; color:var(--ink-soft); font-size:15px;}
  .tool a{margin-top:4px; font-family:var(--display); font-weight:800; font-size:14px; color:#0C6E92; text-decoration:none;}
  .soon{margin-top:4px; justify-self:start; font:700 11px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:#3E6270; background:var(--mist); padding:7px 11px; border-radius:999px;}

  /* ── answers panel ─────────────────────────── */
  .answers{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(20px,4vw,48px); align-items:center;}
  @media(max-width:780px){ .answers{grid-template-columns:1fr;} }
  .ansgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:7px; width:min(320px,82%); justify-self:center;}
  .ac{aspect-ratio:1; border-radius:11px;}
  .ac.f{display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:clamp(15px,2.3vw,24px); color:#06323A; line-height:1;
    background:linear-gradient(176deg,#7FE3F2,var(--tq) 62%,#1FAFC6);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 5px 0 var(--tq-deep); text-shadow:0 1px 0 rgba(255,255,255,.35);}
  .ac.e{background:linear-gradient(176deg,#FFFEF8,#EFEADB); box-shadow:inset 0 3px 5px rgba(14,58,80,.18), inset 0 0 0 1px rgba(14,58,80,.1);}
  .ac.blank{background:transparent;}

  /* ── daily band ────────────────────────────── */
  .daily{display:flex; align-items:center; gap:clamp(14px,3vw,30px); flex-wrap:wrap; justify-content:space-between;
    background:linear-gradient(120deg,var(--sky-soft),var(--mist)); border-radius:24px; padding:clamp(22px,3.4vw,38px);
    box-shadow:inset 0 0 0 1px rgba(14,58,80,.08);}
  .daily h3{font-family:var(--display); font-weight:800; font-size:clamp(21px,3vw,32px); letter-spacing:-.03em; margin:0 0 6px; color:var(--ink);}
  .daily p{margin:0; color:var(--ink-soft); max-width:46ch;}
  .daily .go{text-decoration:none; display:inline-block;font-family:var(--display); font-weight:800; font-size:15px; color:#fff; background:linear-gradient(180deg,#D64A28,#BE3F22);
    border:0; border-radius:999px; padding:14px 26px; cursor:pointer; box-shadow:0 4px 0 var(--coral-deep), 0 8px 16px rgba(201,69,38,.26);}

  /* ── footer ────────────────────────────────── */
  .sitefoot{background:var(--white); border-top:1px solid var(--line); padding:clamp(30px,4vw,54px) var(--gutter) 0;}
  .footcols{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:clamp(18px,3vw,34px); padding-bottom:30px;}
  .footcols .fh{font:700 11px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 13px;}
  .footcols ul{list-style:none; margin:0; padding:0; display:grid; gap:1px;}
  .footcols a{color:var(--ink-soft); text-decoration:none; font-size:14.5px; font-weight:500; display:inline-block; padding:7px 0;}
  .footbrand{display:grid; gap:10px;}
  .footbrand .fb{text-decoration:none; display:flex; align-items:center; gap:9px;}
  .footbrand img{width:34px; height:34px; border-radius:10px;}
  .footbrand strong{font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.03em; color:var(--ink);}
  .footbrand p{margin:0; color:var(--ink-faint); font-size:14px; max-width:30ch;}
  .footbase{border-top:1px solid var(--line-soft); padding:18px 0 26px; display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; color:var(--ink-faint); font-size:13px;}

  /* ── phones ─────────────────────────────────── */
  @media (max-width:600px){
    body{overflow-x:clip;}
    .navbar{gap:8px; padding:7px 7px 7px 11px;}
    .navbar ul{display:none;}
    .navbar .top{padding:10px 17px; font-size:13px;}
    .brand span{font-size:16px;}
    .hero{min-height:0;}
    .hero img.art{object-position:62% 64%;}
    .nav{padding-block:12px;}
    .stage{grid-template-columns:1fr; gap:10px; padding-bottom:22px; padding-top:4px;}
    .copy::before{inset:-18px -20px; border-radius:20px;}
    h1{font-size:clamp(33px,9.4vw,46px);}
    .copy > p{font-size:15px; max-width:34ch;}
    .cta{gap:8px; margin-top:18px;}
    .btn{padding:8px 15px 8px 12px; min-height:52px; gap:8px; border-radius:10px;}
    .btn svg{width:22px; height:22px; flex:0 0 22px;}
    .btn b{font-size:17px;}
    .btn small{font-size:9.5px;}

    .board{width:min(288px,86%); gap:6px; margin:6px auto 68px;}
    .cell{border-radius:10px;}
    .cell.f{font-size:27px;}
    .wheel{right:2%; left:auto; bottom:-64px; transform:none; width:126px;}
    .wl{font-size:19px;}
    .pill{top:-13%; font-size:12px;}

    .rail{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-block:16px;}
    .stat{padding:15px 10px; border-radius:14px;}
    .stat b{font-size:24px;}
    .stat span{font-size:10px; letter-spacing:.12em;}

    .sec{padding-block:38px;}
    .sec h2{font-size:clamp(25px,7.4vw,33px);}
    .steps,.tools,.wgrid{grid-template-columns:minmax(0,1fr);}
    .wcard{aspect-ratio:16/9;}
    .showcase{grid-template-columns:1fr; padding-block:38px; gap:26px;}
    .phone{width:min(228px,64vw);}
    .showcase h2{font-size:clamp(25px,7.4vw,34px);}
    .answers{grid-template-columns:1fr; gap:26px;}
    .ansgrid{width:min(268px,80%); gap:6px;}
    .ac{border-radius:9px;}
    .ac.f{font-size:19px;}
    .daily{flex-direction:column; align-items:flex-start; gap:16px; border-radius:20px;}
    .daily .go{width:100%; text-align:center;}
    .closer h2{font-size:clamp(26px,8vw,36px);}
    .closer .cta{justify-content:center;}
    .footcols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px;}
    .footbrand{grid-column:1 / -1;}
    .footbase{flex-direction:column; gap:6px; align-items:flex-start;}
  }
  @media (max-width:360px){
    .cta{flex-direction:column; align-items:stretch;}
    .btn{justify-content:center;}
    .rail{grid-template-columns:1fr;}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ── /unscramble/ pages ─────────────────────────────── */
.navstatic{position:static;}
.navstatic .navbar{background:var(--white); border-color:rgba(14,58,80,.08);}
.unwrap{max-width:1080px; margin:0 auto; padding:clamp(24px,4vw,52px) var(--gutter) 56px;}
.crumbs{font-size:13px; color:var(--ink-faint); margin:0 0 14px; font-weight:500;}
.crumbs a{color:var(--ink-soft); text-decoration:underline; text-decoration-color:rgba(14,58,80,.35);
  text-underline-offset:3px; display:inline-block; padding:4px 0;}
.unwrap h1{font-family:var(--display); font-weight:800; font-size:clamp(30px,5.4vw,50px);
  letter-spacing:-.038em; line-height:1; margin:0; color:var(--ink); text-wrap:balance;}
.unwrap .sub{margin:12px 0 0; color:var(--ink-soft); font-size:clamp(15px,1.8vw,18px); max-width:52ch;}
.panel{margin-top:26px; background:var(--white); border-radius:22px; padding:clamp(18px,3vw,28px);
  box-shadow:inset 0 0 0 1px rgba(14,58,80,.08), 0 8px 22px rgba(14,58,80,.08);}
.grp{margin-top:22px;}
.grp:first-child{margin-top:0;}
.grp h2{font-family:var(--display); font-weight:800; font-size:clamp(17px,2.4vw,21px); letter-spacing:-.02em;
  margin:0 0 12px; color:var(--ink); display:flex; align-items:baseline; gap:9px;}
.grp h2 span{font-family:var(--body); font-size:13px; font-weight:600; color:var(--ink-faint);}
.ws{display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none;}
.ws li{font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.11em; color:#5B3310;
  background:linear-gradient(180deg,#F6C98B,#E4A458); border-radius:9px; padding:9px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
.ws li.rare{background:var(--page); color:#4B6C7A; box-shadow:inset 0 0 0 1px rgba(14,58,80,.10);}
.ws li.top{background:linear-gradient(180deg,#5AD9EC,var(--tq)); color:#06323A;}
.best{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin:0; color:var(--ink-soft); font-size:15px;}
.best b{font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:.12em; color:var(--ink);}
.unprose{margin-top:40px; max-width:var(--measure);}
.unprose h2{font-family:var(--display); font-weight:800; font-size:clamp(19px,2.6vw,24px);
  letter-spacing:-.025em; margin:26px 0 9px; color:var(--ink);}
.unprose p{margin:0 0 13px; color:var(--ink-read); font-size:16px; line-height:1.68;}
.unprose a{color:#0C6E92; font-weight:600; text-decoration:underline; text-underline-offset:3px;}
.near{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; padding:0; list-style:none;}
.near a{display:inline-block; background:var(--white); border-radius:10px; padding:9px 13px;
  font-family:var(--display); font-weight:800; font-size:14px; letter-spacing:.09em; color:var(--ink);
  text-decoration:none; box-shadow:inset 0 0 0 1px rgba(14,58,80,.10);}
.near a:hover{box-shadow:inset 0 0 0 2px var(--tq);}
.backtool{display:inline-flex; margin-top:26px; font-family:var(--display); font-weight:800; font-size:15px;
  color:#fff; text-decoration:none; background:linear-gradient(180deg,#D64A28,#BE3F22); border-radius:999px;
  padding:14px 26px; box-shadow:0 4px 0 #9E3319;}
.hubletters{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:8px; margin:0; padding:0; list-style:none;}
.hubletters a{display:block; background:var(--white); border-radius:12px; padding:12px 14px; text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(14,58,80,.08);}
.hubletters a:hover{box-shadow:inset 0 0 0 2px var(--tq);}
.hubletters b{display:block; font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.1em; color:var(--ink);}
.hubletters span{display:block; margin-top:3px; font-size:12.5px; color:var(--ink-faint); font-weight:600;}
@media (max-width:600px){ .ws li{font-size:14px; padding:8px 11px;} }