:root{
    --ink:#0D1220; --ink-2:#121726; --sand:#F3ECE0; --paper:#F6F4EF; --paper-2:#FBFAF7;
    --text:#2A2E38; --muted:#4A4F5A; --muted-2:#5E6673; --line:#D8D0C4;
    --violet:#6728FD; --indigo:#3F00D4; --sun:#EAC601; --tangerine:#FF9D09; --rose:#F2477F;
    --wrap:min(1180px, 100% - 2 * clamp(20px,5vw,56px));
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0; background:var(--ink); color:var(--text); font-family:"Instrument Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:1.02rem; line-height:1.55; -webkit-font-smoothing:antialiased}
  a{color:inherit}
  .wrap{width:var(--wrap); margin-inline:auto}
  .skip{position:absolute; left:-999px; top:8px; background:var(--sun); color:var(--indigo); padding:10px 14px; border-radius:999px; font-weight:700; z-index:99}
  .skip:focus{left:12px}

  header{position:sticky; top:0; z-index:30; background:rgba(13,18,32,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(243,236,224,.12)}
  header .wrap{display:flex; align-items:center; gap:14px; min-height:66px}
  /* One nav, identical on every page, so the header never changes shape as you
     move between them. It scrolls sideways on a phone instead of disappearing. */
  .tabs{flex:1; min-width:0; display:flex; gap:14px; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; mask-image:linear-gradient(90deg,#000 92%,transparent)}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{flex:none; display:inline-flex; align-items:center; min-height:44px; white-space:nowrap;
    color:rgba(243,236,224,.66); text-decoration:none; font-weight:600; font-size:.92rem}
  .tabs a:hover{color:var(--sand)}
  .tabs a[aria-current="page"]{color:var(--sand); box-shadow:inset 0 -2px 0 var(--tangerine)}
  header .btn{flex:none}
  .brand{display:flex; align-items:center; gap:11px; min-height:44px; color:var(--sand); font-weight:700; letter-spacing:-.01em; font-size:1.02rem; text-decoration:none}
  .brand:hover{color:#fff}
  .brand img{width:26px; height:auto}
  header nav a:not(.btn){display:inline-flex; align-items:center; min-height:44px}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:11px 20px; border-radius:999px; font-weight:700; font-size:.95rem; line-height:1; text-decoration:none; transition:box-shadow .2s, transform .2s}
  .btn-sun{color:var(--indigo); background:linear-gradient(135deg,var(--sun),var(--tangerine)); box-shadow:0 8px 24px rgba(255,157,9,.28)}
  .btn-sun:hover{box-shadow:0 12px 30px rgba(255,157,9,.42); transform:translateY(-1px)}
  .btn-ghost{color:var(--sand); border:1px solid rgba(243,236,224,.28)}
  .btn-ghost:hover{border-color:rgba(243,236,224,.6)}

  .hero{position:relative; overflow:clip; background:var(--ink); color:var(--sand); padding-block:clamp(60px,9vw,120px) clamp(80px,11vw,140px)}
  .hero::before{content:""; position:absolute; inset:auto -20% -60% -20%; height:70%; background:radial-gradient(60% 60% at 30% 100%, rgba(103,40,253,.45), transparent 70%), radial-gradient(40% 50% at 80% 100%, rgba(242,71,127,.32), transparent 70%); pointer-events:none}
  .hero .wrap{position:relative}
  .eyebrow{margin:0 0 18px; font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tangerine)}
  h1{font-family:Inter,sans-serif; font-weight:900; letter-spacing:-.035em; line-height:.98; margin:0; font-size:clamp(2.6rem,6.4vw,4.7rem); max-width:15ch; text-wrap:balance}
  .lead{margin:22px 0 0; font-size:clamp(1.05rem,1.6vw,1.25rem); color:rgba(243,236,224,.78); max-width:54ch; text-wrap:pretty}
  .hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

  /* Hero goes two-up once there is room: words left, a real screen right.
     Below 900px the shot drops under the words rather than shrinking to a
     thumbnail nobody can read. */
  .hero-grid{display:grid; gap:clamp(32px,5vw,64px); align-items:center}
  @media (min-width:900px){
    .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
    .hero-grid h1{max-width:14ch}
  }
  .shot{justify-self:center; width:min(300px,78vw); max-width:100%}
  /* DIRECT child only. As `.shot img` this also hit every image inside a
     phone mock — avatar and photo grid alike — because a class+element
     selector out-specifies the plain classes on them. */
  .shot > img{display:block; width:100%; height:auto; border-radius:26px;
    box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(243,236,224,.10)}
  .shot figcaption{margin:14px 2px 0; font-size:.88rem; line-height:1.45;
    color:rgba(243,236,224,.55); text-wrap:pretty; text-align:center}
  @media (max-width:560px){ .shot{width:min(270px,80vw)} }

  /* ---- phone mocks -------------------------------------------------
     Built in HTML rather than photographed, for two reasons: some of these
     screens do not exist on a device yet (the estate-agent trail), and a
     real screenshot of the others would have to be retaken every time the
     app's chrome changes. Anything shown here is either real data out of
     the database or clearly labelled as an example in its caption. */
  .phone{position:relative; width:100%; border-radius:34px; padding:9px;
    background:linear-gradient(160deg,#2a3042,#0b0e16); overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(243,236,224,.10)}
  .screen{position:relative; border-radius:26px; overflow:hidden; aspect-ratio:390/720;
    display:flex; flex-direction:column; font-size:.72rem; line-height:1.35}
  .screen.light{background:#fff; color:#16181d}
  .screen.dark{background:#141824; color:#F3ECE0}
  .m-bar{display:flex; align-items:center; gap:8px; padding:12px 12px 10px; font-weight:800; font-size:.85rem; flex:none}
  .screen.light .m-bar{border-bottom:1px solid #EDE9E1}
  .m-bar .m-pill{margin-left:auto; font-size:.66rem; font-weight:700; border:1px solid currentColor; border-radius:999px; padding:4px 9px; opacity:.75}
  .m-cover{flex:none; height:27%; background-size:cover; background-position:center; background-color:#D8D0C4; overflow:hidden}
  .m-body{padding:11px 12px 0; overflow:hidden; display:flex; flex-direction:column; gap:6px}
  .m-title{margin:0; font-family:Inter,sans-serif; font-weight:900; font-size:.95rem; letter-spacing:-.02em; line-height:1.12}
  .m-desc{margin:0; opacity:.62}
  .m-by{margin:0; opacity:.55; font-size:.68rem}
  .m-cta{margin-top:2px; text-align:center; font-weight:800; font-size:.74rem; border-radius:9px; padding:8px}
  .screen.light .m-cta{background:#16181d; color:#fff}
  .screen.dark .m-cta{background:rgba(243,236,224,.09); color:#F3ECE0; text-align:left; padding:9px 11px}
  .m-label{margin:6px 0 0; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; opacity:.45; font-weight:700}
  .m-stops{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; overflow:hidden}
  .m-stops li{display:flex; align-items:center; gap:9px}
  .m-stops i{flex:none; width:15px; font-style:normal; font-size:.66rem; opacity:.45; text-align:right; font-weight:700}
  .m-stops .m-thumb{flex:none; width:30px; height:30px; border-radius:7px; background:#E4DED3; background-size:cover; background-position:center; display:grid; place-items:center; overflow:hidden}
  .m-stops .m-thumb svg{width:19px; height:19px}
  .m-stops span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .m-top{display:flex; align-items:flex-start; gap:12px}
  .m-avatar{flex:none; width:52px; height:52px; border-radius:50%; object-fit:cover; border:1px solid rgba(243,236,224,.25)}
  .m-bio{margin:0; opacity:.72; font-size:.68rem; line-height:1.4}
  .m-btns{display:flex; gap:8px}
  .m-btns span{flex:1; text-align:center; font-weight:700; font-size:.7rem; padding:7px; border-radius:999px; border:1px solid rgba(243,236,224,.22)}
  .m-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px}
  .m-grid img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:5px; background:rgba(243,236,224,.06)}
  .m-prof{padding:14px 13px 0; display:flex; flex-direction:column; gap:10px}
  .m-handle{margin:0; font-family:Inter,sans-serif; font-weight:900; font-size:1.05rem; letter-spacing:-.02em}
  .m-counts{display:flex; gap:20px}
  .m-counts b{display:block; font-family:Inter,sans-serif; font-weight:900; font-size:.95rem}
  .m-counts span{font-size:.62rem; opacity:.55}
  .m-tabs{display:flex; gap:13px; font-size:.7rem; opacity:.5; border-bottom:1px solid rgba(243,236,224,.14); padding-bottom:7px}
  .m-tabs b{opacity:1; font-weight:800; border-bottom:2px solid #FF9D09; padding-bottom:7px; margin-bottom:-8px}
  @media (max-width:560px){ .screen{font-size:.68rem} }

  /* a row of real crumb photos, used in the band on some pages */
  /* column count follows the number of tiles, so a row is never ragged.
     Three stay three even on a phone; four fall to two, which is still even. */
  .strip{display:grid; gap:10px; margin-top:28px; grid-template-columns:repeat(4,1fr)}
  .strip-3{grid-template-columns:repeat(3,1fr)}
  .strip-4{grid-template-columns:repeat(4,1fr)}
  /* height:auto is load-bearing — without it the height="320" attribute wins
     as a presentational hint and the tiles render as tall rectangles. */
  .strip img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover;
    border-radius:14px; border:1px solid var(--line); background:var(--paper)}
  .strip figcaption{grid-column:1/-1; margin-top:12px; font-size:.9rem; color:var(--muted-2)}
  @media (max-width:560px){ .strip-4{grid-template-columns:repeat(2,1fr)} }
  .hero-note{margin:16px 0 0; font-size:.92rem; color:rgba(243,236,224,.55); max-width:50ch}

  .sheet{position:relative; background:var(--paper); color:var(--text); border-radius:32px 32px 0 0; margin-top:-32px}
  .sheet .wrap{padding-block:clamp(56px,8vw,96px)}
  .kicker{margin:0 0 14px; font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--violet)}
  h2{font-family:Inter,sans-serif; font-weight:900; letter-spacing:-.032em; line-height:1.02; margin:0; font-size:clamp(1.9rem,4.2vw,3rem); max-width:19ch; text-wrap:balance}
  .sub{margin:16px 0 0; color:var(--muted-2); max-width:54ch; text-wrap:pretty}

  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px}
  @media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.grid{grid-template-columns:1fr}}
  .card{display:flex; flex-direction:column; gap:10px; background:var(--paper-2); border:1px solid var(--line); border-radius:22px; padding:22px 22px 20px; color:var(--text)}
  .ico{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff}
  .ico svg{width:22px; height:22px}
  .card h3{margin:6px 0 0; font-family:Inter,sans-serif; font-weight:800; letter-spacing:-.02em; font-size:1.15rem; line-height:1.15}
  .card p{margin:0; color:var(--muted); font-size:.97rem; text-wrap:pretty}
  .card p strong{color:var(--text)}

  .proof{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .proof .wrap{padding-block:clamp(40px,6vw,64px)}
  /* A grid, not a wrapping flex row. As flex, a long label pushed the third
     stat onto its own line and left a hole beside it — and it broke in a
     different place on every page, because it depended on label length. */
  .stats{display:grid; gap:clamp(24px,5vw,56px); margin-top:22px;
    grid-template-columns:repeat(3,1fr)}
  .stats-4{grid-template-columns:repeat(4,1fr)}
  @media (max-width:700px){
    .stats{grid-template-columns:1fr; gap:24px}
    .stats-4{grid-template-columns:repeat(2,1fr)}
  }
  .stat b{display:block; font-family:Inter,sans-serif; font-weight:900; font-size:clamp(2rem,4.4vw,3rem); letter-spacing:-.03em; line-height:1; color:var(--violet)}
  .stat span{display:block; margin-top:8px; color:var(--muted); font-size:.95rem; max-width:22ch}

  .topics{border-top:1px solid var(--line); margin-top:clamp(48px,7vw,80px)}
  details{border-bottom:1px solid var(--line); scroll-margin-top:90px}
  summary{cursor:pointer; list-style:none; padding:20px 0; font-weight:700; font-size:1.12rem; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:16px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; flex:none; width:30px; height:30px; border-radius:999px; border:1.5px solid var(--line); display:grid; place-items:center; font-weight:600; color:var(--violet); transition:transform .2s}
  details[open] summary::after{content:"–"; transform:rotate(180deg)}
  .body{padding:0 0 24px; color:var(--muted); max-width:66ch; text-wrap:pretty}
  .body p{margin:0 0 12px}
  .body strong{color:var(--text)}
  .body a{color:var(--violet); text-decoration-thickness:1px; text-underline-offset:3px}
  .callout{background:#FFF4E0; border:1px solid #F3D9A6; border-radius:16px; padding:14px 16px; margin:24px 0 0; color:#5A3D0A; max-width:66ch}
  .callout strong{color:#3E2A05}

  .close{background:var(--ink-2); color:var(--sand)}
  .close .wrap{padding-block:clamp(56px,8vw,92px)}
  .close h2{color:var(--sand); font-size:clamp(2rem,4.6vw,3.2rem)}
  .close p{margin:14px 0 0; color:rgba(243,236,224,.72); max-width:46ch}
  .close .hero-cta{margin-top:28px}

  .also{margin-top:clamp(40px,6vw,64px); border-top:1px solid rgba(243,236,224,.14); padding-top:28px}
  .also p{margin:0 0 14px; font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,236,224,.5); font-weight:600}
  .also nav{display:flex; flex-wrap:wrap; gap:12px}
  .also a{display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; border-radius:999px; border:1px solid rgba(243,236,224,.28); color:var(--sand); text-decoration:none; font-weight:600; font-size:.95rem}
  .also a:hover{border-color:rgba(243,236,224,.6)}

  .foot-for{background:var(--ink); border-top:1px solid rgba(243,236,224,.12)}
  .foot-for .wrap{padding-block:34px 30px}
  .foot-for p{margin:0 0 14px; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,236,224,.45); font-weight:600}
  .foot-for nav{display:grid; grid-template-columns:repeat(4,1fr); gap:10px 20px}
  @media (max-width:820px){ .foot-for nav{grid-template-columns:repeat(2,1fr)} }
  .foot-for a{display:inline-flex; align-items:center; min-height:44px; color:rgba(243,236,224,.78); text-decoration:none; font-weight:600}
  .foot-for a:hover{color:var(--sand)}
  .foot-for a[aria-current="page"]{color:var(--tangerine)}

  footer{background:var(--ink); border-top:1px solid rgba(243,236,224,.12); padding-block:32px 40px; font-size:.95rem; color:rgba(243,236,224,.5)}
  footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 28px; align-items:center}
  footer p{margin:0}
  footer nav{display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center}
  /* 44px tall so a thumb can hit them — the padding is invisible, the target is not */
  footer nav a{color:rgba(243,236,224,.72); text-decoration:none; display:inline-flex; align-items:center; min-height:44px}
  footer nav a:hover{color:var(--sand)}
  footer nav a.hot{color:var(--tangerine); font-weight:700}

  @media (max-width:640px){
    /* must out-specify `header nav a:not(.btn)` above, or the nav links
       stay visible on a phone and shove the wordmark onto two lines */
    .hide-sm, header nav a.hide-sm{display:none}
    .hero{padding-block:44px 72px}
    summary{font-size:1.04rem}
  }