/* The Live site's styles: the prototype's 16 Oct version (prototype/eight-pages, #100 to #109), built from the Draft site's
   own CSS. First, the base styles claude.ai puts around the Draft site, kept so the pages look the same. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
  /* ============ v2 (16 Oct version): the Home page and the Retreat page to Hady's notes ============ */
  #main [id]{scroll-margin-top:76px;}   /* a jump to a section, as /contact#message, lands clear of the sticky header */
  /* the Founders: the Draft site's hover bio; on a phone the bio is a caption under the picture; a click opens the Founder page */
  .founder-photo{cursor:pointer;}
  .founder-bio-overlay{
    position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;padding:26px;
    background:linear-gradient(180deg,rgba(11,19,43,0) 30%,rgba(11,19,43,.94) 78%);
    opacity:0;transition:opacity .25s ease;pointer-events:none;
  }
  .founder-photo:hover .founder-bio-overlay,
  .founder-photo:focus-visible .founder-bio-overlay{opacity:1;}
  .founder-bio-overlay p{font-size:.88rem;line-height:1.55;color:rgba(244,245,250,.92);text-align:left;}
  .founder-hint{font-size:.74rem;color:var(--ink-40);font-family:'JetBrains Mono',monospace;letter-spacing:.03em;}
  .founder-caption{display:none;}
  @media (hover:none), (max-width:760px){
    .founder-bio-overlay, .founder-hint{display:none;}
    .founder-caption{display:block;}
  }
  /* #109, then #122: a page per Founder in the format of the Founder's biography PDF of 14 Oct, in the PDF's order: the
     sheet with its four-colour spine, the logo, the photo in its circle, the two columns, the handwritten line, the IN-PACT
     perspective and the footer. #122 sets it in the site's fonts and colours, and gives phones an easier read. The footer
     keeps only "Connect with": the PDF's motto and the site's address are for the PDF, and the reader is on the site.
     The developer chose this from three versions; prototype/founder-pages holds the other two.
     --pt is one PDF point (1.74px puts the sheet at the PDF's width). The sheet, the photo, the handwritten line and the
     arcs are measured in it, so that they keep the PDF's proportions; the words are set in the site's own sizes. */
  .bio-page{background:var(--mist);padding:40px 20px 56px;overflow-x:clip;}
  .bio-sheet{--pt:1.74px;--u:var(--pt);
    --spine:linear-gradient(var(--blue) 0 25%,var(--teal) 25% 50%,var(--emerald) 50% 75%,var(--orange) 75%);
    position:relative;isolation:isolate;max-width:calc(549.3 * var(--pt));margin-inline:auto;background:#fff;border-radius:0 var(--radius) var(--radius) 0;
    box-shadow:var(--shadow-sm);padding:52px 44px 18px 58px;color:var(--ink-75);}
  .bio-sheet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--spine);}
  .bio-sheet a{color:var(--blue);font-weight:600;}
  .bio-sheet a:hover{text-decoration:underline;text-underline-offset:3px;}
  .bio-sheet .nobr{white-space:nowrap;}   /* a hyphenated name or word stays on one line, as the PDF keeps it */
  .bio-logo{width:118px;height:auto;}
  .bio-id{max-width:56%;}   /* clear of the photo, which sits at the sheet's top right */
  .bio-name{font-size:clamp(2.1rem,3.4vw,2.6rem);line-height:1.08;color:var(--navy);margin-top:26px;}
  .bio-tag{font-size:1.06rem;line-height:1.4;font-weight:700;color:var(--ink);margin-top:14px;}
  .bio-cofounder{font-size:.92rem;line-height:1.4;font-weight:700;color:var(--teal);margin-top:12px;}
  .bio-role{font-size:.92rem;line-height:1.4;color:var(--ink-58);margin-top:4px;}
  /* the photo: a pale circle at the sheet's top right; Hady's photo stands in it, Annie-Mariel's is cut to it; at full strength, not faded as the PDFs fade them, on the developer's ask */
  .bio-photo{position:absolute;width:calc(var(--d) * var(--u));height:calc(var(--d) * var(--u));}
  .bio-photo::before{content:"";position:absolute;inset:0;border-radius:50%;background:color-mix(in srgb,var(--mist) 70%,transparent);}
  .bio-photo img{position:absolute;height:auto;}
  .bio-photo.is-standing{--d:186;top:calc(10 * var(--pt));right:calc(3.3 * var(--pt));}
  .bio-photo.is-standing img{width:calc(133.4 * var(--u));top:calc(-10 * var(--u));right:calc(24.8 * var(--u));mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(to right,transparent,#000 22%,#000 84%,transparent),linear-gradient(transparent,#000 5%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 22%,#000 84%,transparent),linear-gradient(transparent,#000 5%);mask-composite:intersect;}   /* inside the sheet, its light background melted into the white, now that it is not faded */
  .bio-photo.is-round{--d:210;top:calc(-8 * var(--pt));right:calc(-9.7 * var(--pt));}
  .bio-photo.is-round .bio-photo-clip{position:absolute;inset:calc(5 * var(--u));border-radius:50%;overflow:hidden;}
  .bio-photo.is-round img{position:static;width:100%;margin-top:calc(-3 * var(--u));}
  /* "Biography" is the site's eyebrow, with the PDF's rule after it */
  .bio-sheet .bio-h{display:flex;color:var(--blue);margin-top:44px;}   /* .bio-sheet: .eyebrow, later in the file, is inline-flex */
  .bio-h::after{content:"";flex:1;height:1px;background:var(--line);}
  .bio-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:44px;align-items:start;isolation:isolate;margin-top:22px;}
  .bio-col p{font-size:1rem;line-height:1.7;}
  .bio-col p + p{margin-top:14px;}
  /* the handwritten line: the Founder's own hand, cut from the PDF, with the PDF's faint loops behind it */
  .bio-hand{position:relative;margin:30px 0 0 20px;width:calc(224 * var(--pt));max-width:100%;}
  .bio-hand img{position:relative;width:100%;height:auto;opacity:.93;}
  .bio-hand-arcs{position:absolute;z-index:-1;left:-2.68%;top:-61%;width:118.3%;height:197.7%;overflow:visible;pointer-events:none;}
  .bio-panel{position:relative;margin-top:38px;background:var(--mist);border-radius:0 14px 14px 0;padding:24px 32px 30px 40px;}
  .bio-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--spine);}
  .bio-panel-label, .bio-foot-h{font-family:'JetBrains Mono',monospace;font-weight:600;letter-spacing:.16em;text-transform:uppercase;}
  .bio-panel-label{font-size:.72rem;color:var(--teal);}
  .bio-panel-text{font-size:1.18rem;line-height:1.5;font-weight:700;color:var(--navy);margin-top:14px;}
  .bio-foot{position:relative;margin-top:28px;border-top:1px solid var(--line);padding-top:16px;}
  .bio-connect{display:flex;align-items:center;gap:14px;}
  .bio-qr{width:42px;height:42px;image-rendering:pixelated;}
  .bio-foot p, .bio-foot a{display:block;font-size:.88rem;line-height:1.7;}
  .bio-foot .bio-foot-h{font-size:.68rem;color:var(--navy);}
  .bio-arcs-foot{position:absolute;z-index:-1;right:0;bottom:0;width:calc(272.3 * var(--pt));aspect-ratio:272.3 / 137;pointer-events:none;}
  @media (min-width:900px){
    .bio-sheet{--pt:min(1.74px, calc((100vw - 40px) / 549.3));}
  }
  /* below 900px the name no longer fits beside the photo: the logo and the photo share the top row, the name runs under them */
  @media (max-width:899.98px){
    .bio-page{padding:24px 12px 40px;}
    .bio-sheet{--u:calc(var(--pt) * .45);padding:24px 22px 14px 30px;}
    .bio-head{display:grid;grid-template-columns:1fr auto;align-items:start;column-gap:12px;}
    .bio-logo{width:92px;}
    .bio-photo{position:relative;top:auto;right:auto;}
    .bio-photo.is-standing{margin-top:calc(10 * var(--u));}
    .bio-id{grid-column:1 / -1;margin-top:16px;max-width:none;}
    .bio-name{font-size:clamp(1.9rem,7.6vw,2.5rem);margin-top:0;}
    .bio-sheet .bio-h{margin-top:32px;}
    .bio-hand{margin-left:auto;width:min(calc(224 * var(--pt)), 92%);}
    .bio-foot{padding-bottom:4px;}
    .bio-qr{display:none;}
    .bio-arcs-foot{width:80%;}
  }
  @media (min-width:600px) and (max-width:899.98px){   /* a tablet: room for the name beside a larger photo */
    .bio-sheet{--u:calc(var(--pt) * .6);}
    .bio-photo{grid-column:2;grid-row:1 / span 2;}
    .bio-id{grid-column:1;}
  }
  @media (max-width:699.98px){
    .bio-cols{grid-template-columns:1fr;}
    .bio-col + .bio-col{margin-top:18px;}   /* the columns run as one: the gap between paragraphs, on a phone */
  }
  /* A phone: the sheet fills the screen's width, as the site's sections do, and the biography is set larger. A card
     with a margin round it, and small close-set lines, are what made the page read as a PDF. */
  @media (max-width:760px){
    .bio-page{padding:0;}
    .bio-sheet{border-radius:0;box-shadow:none;padding:28px 20px 16px 26px;}
    .bio-sheet::before{width:6px;}
    .bio-col p{font-size:1.0625rem;line-height:1.75;}
    .bio-col p + p{margin-top:18px;}
    .bio-panel{padding:20px 18px 24px 24px;}
    .bio-panel-text{font-size:1.1rem;}
  }

  .founder-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;}
  .founder-foot-actions{display:flex;flex-wrap:wrap;gap:12px;}
  @media (max-width:760px){
    .founder-foot, .founder-foot-actions{flex-direction:column;align-items:stretch;}
    .founder-foot .btn{text-align:center;}
    .founder-foot .more{justify-content:center;}
  }
  /* the Retreat page: two actions side by side on a wide screen, stacked on a phone */
  .retreat-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;flex-shrink:0;text-align:center;}
  .retreat-actions .btn{line-height:normal;}   /* the leaflet's link as tall as the Register button above it: a link takes the page's line height, a button keeps the browser's (#238) */

  /* ============ FONTS: the site serves its own, the Landing page's two files ============ */
  @font-face{font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/montserrat-latin.woff2') format('woff2');}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');}

  /* ============ TOKENS (the Draft site's) ============ */
  :root{
    color-scheme: light;
    --paper:#FBFAF6;
    --paper-2:#F3F1EA;
    --mist:#EDF0F5;
    --mist-line: rgba(11,19,43,.10);
    --navy:#0B132B;
    --navy-2:#111A38;
    --navy-3:#182246;
    --blue:#0D47A1;
    --teal:#0097A7;
    --emerald:#2ECC71;
    --gold:#F5B041;
    --orange:#FF8A3D;
    --ink:#11162A;
    --ink-75: rgba(17,22,42,.75);
    --ink-58: rgba(17,22,42,.58);
    --ink-40: rgba(17,22,42,.40);
    --line: rgba(17,22,42,.13);
    --on-navy:#F4F5FA;
    --on-navy-75: rgba(244,245,250,.75);
    --on-navy-55: rgba(244,245,250,.55);
    --on-navy-35: rgba(244,245,250,.32);
    --line-navy: rgba(244,245,250,.16);
    --grad: linear-gradient(92deg, var(--blue) 0%, var(--teal) 32%, var(--emerald) 55%, var(--gold) 78%, var(--orange) 100%);
    --shadow-lg: 0 30px 60px -30px rgba(8,13,30,.45);
    --shadow-sm: 0 10px 24px -14px rgba(8,13,30,.30);
    --radius: 18px;
    --radius-sm: 10px;
    --container: 1160px;
  }

  /* ============ RESET / BASE ============ */
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Montserrat',ui-sans-serif,system-ui,sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;}
  h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:800;letter-spacing:-.01em;}
  p{margin:0;}
  [hidden]{display:none !important;}
  .mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
  .wrap{max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,48px);min-width:0;}
  section{position:relative;}
  .band-light{background:var(--paper);color:var(--ink);}
  .band-mist{background:var(--mist);color:var(--ink);}
  .band-navy{background:var(--navy);color:var(--on-navy);}
  .pad{padding-block:clamp(64px,9vw,116px);}
  .pad-tight{padding-block:clamp(44px,6vw,72px);}

  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:.6em;
  }
  .eyebrow::before{content:"";width:22px;height:2px;background:var(--grad);display:inline-block;border-radius:2px;flex:none;}
  .band-navy .eyebrow{color:var(--gold);}
  .band-light .eyebrow, .band-mist .eyebrow{color:var(--blue);}

  h2.h-title, h1.h-title{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.08;}
  h3.h-sub{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.2;}
  .lede{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--ink-75);max-width:60ch;}
  .band-navy .lede{color:var(--on-navy-75);}
  .body-text{font-size:1rem;color:var(--ink-58);max-width:64ch;}
  .band-navy .body-text{color:var(--on-navy-55);}

  .grad-text{
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .sup-a{font-size:.5em;font-weight:800;color:var(--gold);vertical-align:super;margin-left:.04em;}
  .band-light .sup-a, .band-mist .sup-a{color:var(--orange);}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.55em;
    padding:.85em 1.5em;border-radius:100px;font-weight:700;font-size:.92rem;
    border:1.5px solid transparent;cursor:pointer;white-space:nowrap;background:transparent;color:inherit;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn:disabled{opacity:.4;cursor:not-allowed;}
  /* A button that waits on Supabase says what for, with a turning ring (busy() in site.js, #193): an email takes a few
     seconds to send, and a button that only fades reads as broken. */
  .btn[aria-busy="true"]{opacity:.85;cursor:progress;}
  .btn[aria-busy="true"]::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;}
  .btn-primary{background:var(--orange);color:#1a0e02;box-shadow:var(--shadow-sm);}
  .btn-primary:hover:not(:disabled){background:var(--gold);box-shadow:var(--shadow-lg);transform:translateY(-2px);}
  .btn-ghost-navy{border-color:var(--line-navy);color:var(--on-navy);background:transparent;}
  .btn-ghost-navy:hover{border-color:var(--gold);color:var(--gold);}
  .btn-ghost-light{border-color:var(--line);color:var(--ink);background:transparent;}
  .btn-ghost-light:hover{border-color:var(--blue);color:var(--blue);}
  .btn-sm{padding:.6em 1.15em;font-size:.82rem;}
  .btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline:2px solid var(--teal);outline-offset:2px;
  }
  @media (max-width:480px){.btn{white-space:normal;text-align:center;}}
  .btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
  .linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
  .band-navy .linkbtn{color:var(--gold);}
  .more{font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:.4em;}
  .more::after{content:"→";}
  .band-navy .more{color:var(--gold);}

  /* ============ NAV ============ */
  #nav{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:100;
    background:rgba(251,250,246,.86);   /* the Draft site's: the page shows through as it scrolls, on the developer's ask of 16 Oct */
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--mist-line);
    transition:box-shadow .25s ease;
  }
  #nav.is-scrolled{box-shadow:var(--shadow-sm);}
  .nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px;}
  .nav-brand{display:flex;align-items:center;gap:10px;}
  .nav-brand img{height:44px;width:auto;}   /* v2: larger; the image is the logo with its white knocked out (img/logo-on-light.webp) */
  @media (max-width:600px){.nav-brand img{height:40px;}}
  .nav-links{display:flex;align-items:center;gap:clamp(28px,3.4vw,56px);font-size:clamp(.9rem,.5rem + .65vw,1.1rem);font-weight:600;color:var(--ink-75);}   /* #106: larger than the Draft site's .86rem, growing with the screen, on the developer's look */
  .nav-links a{padding:.3em 0;border-bottom:2px solid transparent;transition:border-color .18s ease,color .18s ease;}
  .nav-links a:hover, .nav-links a.is-current{color:var(--blue);border-color:var(--teal);}
  .nav-cta{display:flex;align-items:center;gap:16px;}
  .nav-signin{background:none;border:0;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-75);cursor:pointer;padding:.3em 0;}
  .nav-signin:hover{color:var(--blue);}
  /* A signed-in Member (#194): one button, so their name no longer reads as a second word beside Sign out */
  .member-drop{position:relative;}
  .member-chip{display:inline-flex;align-items:center;gap:8px;max-width:190px;padding:4px 8px 4px 4px;border:1px solid var(--line);border-radius:100px;background:#fff;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink);cursor:pointer;}
  .member-chip:hover, .member-chip[aria-expanded="true"]{border-color:var(--blue);color:var(--blue);}
  .member-chip i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--grad);display:inline-grid;place-items:center;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;color:#fff;}
  .member-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}   /* a long first name ends in "…" rather than crowding the logo on a phone */
  .member-chip svg{flex:none;width:16px;height:16px;transition:transform .15s ease;}
  .member-chip[aria-expanded="true"] svg{transform:rotate(180deg);}
  /* The contact button's menu, dropped from the header */
  .member-menu{
    position:absolute;right:0;top:calc(100% + 10px);display:flex;flex-direction:column;width:max-content;min-width:240px;max-width:min(320px,calc(100vw - 32px));
    padding:6px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  }
  .member-menu-who{padding:10px 14px 12px;margin-bottom:6px;border-bottom:1px solid var(--line);}
  .member-menu-who b{display:block;font-size:.92rem;color:var(--ink);}
  .member-menu-who span{display:block;font-size:.8rem;color:var(--ink-58);overflow-wrap:anywhere;}
  .member-choice{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-radius:12px;background:none;font:inherit;font-size:.92rem;font-weight:700;color:var(--ink);text-align:left;cursor:pointer;}
  .member-choice:hover{background:var(--mist);}
  .member-choice svg{flex:none;width:20px;height:20px;color:var(--teal);}
  .member-choice-out{position:relative;margin-top:6px;}
  .member-choice-out::before{content:"";position:absolute;left:14px;right:14px;top:-4px;height:1px;background:var(--line);}   /* Sign out stands apart from the two places to go */
  .member-choice-out svg{color:var(--ink-58);}

  /* ============ THE MENU ON PHONES (#106): a row of cells under the logo row ============
     Hady asked on 9 Oct for a menu bar on the phone; the Draft site hid it behind a three-line button. The developer chose the row
     from four designs (commit 0504358 on prototype/eight-pages holds the others): the four items as cells edge to edge, nothing hidden,
     the current one underlined; Sign in and Join the Community stay in the logo row, which has the room. Desktops are untouched. */
  @media (max-width:920px){
    .nav-row{flex-wrap:wrap;height:auto;gap:12px;row-gap:0;}
    .nav-brand, .nav-cta{height:60px;}
    .nav-cta{gap:12px;}
    .nav-cta .btn{white-space:nowrap;}
    .nav-links{order:3;flex:1 0 100%;margin-inline:calc(-1 * clamp(20px,5vw,48px));display:grid;grid-auto-flow:column;grid-auto-columns:auto;gap:0;font-size:clamp(.7rem,3.8vw - 2px,1rem);border-top:1px solid var(--mist-line);}   /* the size that nearly fills the width with the four items on one line. Auto columns share the room left over equally, so every label has the same air on both sides; 1fr columns gave it all to the short labels (#132) */
    .nav-links a{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;padding:8px 2px 7px;min-height:44px;}   /* 2px at the sides, not 6px, so the row has room where letters are drawn wider, as in Chromium on Linux (#132); the air around each label comes from the room left over instead */
    .nav-links a + a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:18px;background:var(--line);}   /* a short hairline between the cells, on the developer's look */
    #main [id]{scroll-margin-top:108px;}
  }

  /* ============ HERO (the Draft site's, cut to the hook and two buttons) ============ */
  .hero-section{
    background:var(--navy);
    color:var(--on-navy);
    position:relative;
    overflow:hidden;
    min-height:clamp(600px,86vh,760px);
    min-height:clamp(600px,86dvh,760px);
    display:flex;
    align-items:center;
  }
  .marquee-field{
    position:absolute;inset:0;z-index:0;
    display:flex;flex-direction:column;justify-content:space-evenly;
    padding-block:22px;
  }
  .mq-row{overflow:hidden;width:100%;}
  .mq-track{display:flex;align-items:center;gap:16px;width:max-content;will-change:transform;}
  .mq-left .mq-track{animation:mq-scroll-left var(--dur,46s) linear infinite;}
  .mq-right .mq-track{animation:mq-scroll-right var(--dur,46s) linear infinite;}
  @keyframes mq-scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @keyframes mq-scroll-right{from{transform:translateX(-50%);}to{transform:translateX(0);}}
  .mq-row:hover .mq-track{animation-play-state:paused;}
  .mq-chip{
    display:inline-flex;align-items:center;white-space:nowrap;
    padding:.7em 1.35em;border-radius:100px;font-weight:600;font-size:.92rem;
    border:1px solid transparent;
  }
  .mq-c1{background:var(--navy-2);border-color:var(--line-navy);color:var(--on-navy-75);}
  .mq-c2{background:color-mix(in srgb,var(--teal) 16%,transparent);border-color:color-mix(in srgb,var(--teal) 40%,transparent);color:color-mix(in srgb,var(--teal) 45%,#fff);}
  .mq-c3{background:color-mix(in srgb,var(--emerald) 14%,transparent);border-color:color-mix(in srgb,var(--emerald) 38%,transparent);color:color-mix(in srgb,var(--emerald) 50%,#fff);}
  .mq-c4{background:color-mix(in srgb,var(--gold) 16%,transparent);border-color:color-mix(in srgb,var(--gold) 40%,transparent);color:var(--gold);}
  .mq-c5{background:color-mix(in srgb,var(--orange) 16%,transparent);border-color:color-mix(in srgb,var(--orange) 40%,transparent);color:var(--orange);}
  .hero-scrim{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(180deg, var(--navy) 0%, color-mix(in srgb,var(--navy) 30%,transparent) 20%, color-mix(in srgb,var(--navy) 30%,transparent) 80%, var(--navy) 100%),
      linear-gradient(90deg, color-mix(in srgb,var(--navy) 60%,transparent) 0%, color-mix(in srgb,var(--navy) 10%,transparent) 44%, transparent 62%);
  }
  .hero-card-wrap{position:relative;z-index:2;width:100%;}
  .hero-card{
    position:relative;max-width:640px;
    background:color-mix(in srgb,var(--navy) 72%,transparent);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border:1px solid var(--line-navy);border-radius:24px;
    padding:clamp(30px,4vw,48px);
    box-shadow:var(--shadow-lg);
  }
  .hero-card-mark{position:absolute;top:-22px;right:-22px;width:76px;height:76px;}
  .hero-card-mark svg{width:100%;height:100%;display:block;}
  .hero-card-mark img{position:absolute;inset:0;margin:auto;width:44%;height:auto;}
  @media (max-width:600px){.hero-card-mark{top:-16px;right:-16px;width:54px;height:54px;}}
  .hero-kicker{
    font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold);margin-bottom:18px;display:block;
  }
  .hero-headline{
    font-size:clamp(2.1rem,4vw,3.2rem);line-height:1.08;font-weight:800;
  }
  /* On a wide screen each line of the title keeps its words together and the card grows to fit the longest, because at
     640px "have" fell alone on its own line from about 1100px up (the Founders' desktop, 2 Nov). Never narrower than before. */
  @media (min-width:1024px){
    .hero-headline{white-space:nowrap;}
    .hero-card{max-width:none;width:fit-content;min-width:640px;}
  }
  .hero-sub{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--on-navy-75);max-width:52ch;}
  .hero-ctas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;}
  .hero-ctas .btn{white-space:normal;text-align:center;width:100%;}
  .ring-rotate{animation:spin 90s linear infinite;transform-origin:center;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .dotring-blue{fill:var(--blue);} .dotring-teal{fill:var(--teal);} .dotring-emerald{fill:var(--emerald);} .dotring-gold{fill:var(--gold);} .dotring-orange{fill:var(--orange);}

  /* ============ SECTION HEADERS ============ */
  .s-head{max-width:760px;margin-bottom:44px;}
  .s-head.center{margin-inline:auto;text-align:center;}
  .s-head .eyebrow{margin-bottom:16px;}
  .s-head h2, .s-head h1{margin-bottom:14px;}
  .s-head.tight{margin-bottom:28px;}

  /* ============ CARD GRIDS ============ */
  .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
  .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
  .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
  @media (max-width:860px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media (max-width:600px){.grid-3,.grid-2,.grid-4{grid-template-columns:minmax(0,1fr);}}
  @media (max-width:560px){
    .hero-ctas{grid-template-columns:1fr;}
  }

  .card{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
    padding:28px;display:flex;flex-direction:column;gap:12px;min-width:0;
  }
  .band-mist .card{background:var(--paper);}
  .band-navy .card{background:var(--navy-2);border-color:var(--line-navy);}
  .card-num{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.85rem;color:var(--teal);}
  .card h4{font-size:1.08rem;}
  .card p{font-size:.93rem;color:var(--ink-58);}
  .band-navy .card p{color:var(--on-navy-55);}

  /* ============ POWER STATEMENT ============ */
  .power-quote{max-width:760px;margin:0 auto;text-align:center;}
  .power-quote p{
    font-size:clamp(1.35rem,2.6vw,2.1rem);font-weight:800;line-height:1.32;
    color:var(--ink);letter-spacing:-.01em;
  }
  .band-navy .power-quote p{color:var(--paper);}

  /* ============ OUTCOME ARROW + RESULT ============ */
  .outcome-arrow{
    width:2px;height:34px;background:var(--grad);border-radius:2px;
    margin:28px auto 0;position:relative;
  }
  .outcome-arrow::after{
    content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
    width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
    border-top:8px solid var(--orange);
  }
  .outcome-result{
    margin:22px auto 0;max-width:640px;text-align:center;border-radius:20px;
    padding:30px clamp(20px,4vw,40px);
    background:linear-gradient(var(--mist),var(--mist)) padding-box, var(--grad) border-box;
    border:1.5px solid transparent;
  }
  .outcome-result-label{
    font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-40);display:block;margin-bottom:10px;
  }
  .outcome-result-text{
    font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;line-height:1.3;color:var(--ink);letter-spacing:-.01em;
  }

  /* ============ PILLAR / FRAMEWORK STRIP ============ */
  .pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
  @media (max-width:920px){.pillars{grid-template-columns:repeat(3,1fr);}}
  @media (max-width:600px){.pillars{grid-template-columns:repeat(2,1fr);}}
  .pillar{
    border-radius:var(--radius-sm);padding:18px 14px;text-align:left;min-width:0;
    border:1px solid var(--line-navy);background:var(--navy-2);
  }
  .pillar .letter{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.5rem;margin-bottom:8px;display:block;}
  .pillar .label{font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--on-navy);display:block;margin-bottom:4px;}
  .pillar .desc{font-size:.78rem;color:var(--on-navy-55);}
  .pillar:nth-child(1) .letter{color:var(--blue);}
  .pillar:nth-child(2) .letter{color:var(--teal);}
  .pillar:nth-child(3) .letter{color:var(--emerald);}
  .pillar:nth-child(4) .letter{color:var(--gold);}
  .pillar:nth-child(5) .letter{color:var(--orange);}

  /* ============ FRAMEWORK PANELS ============ */
  .fw-panel{border-radius:22px;padding:32px clamp(16px,3vw,32px) 10px;}
  .fw-panel-chaos{background:color-mix(in srgb,var(--orange) 5%,transparent);border:1px solid color-mix(in srgb,var(--orange) 22%,transparent);}
  .fw-panel-inpact{background:rgba(244,245,250,.03);border:1px solid var(--line-navy);}
  .fw-kicker-bar{display:block;width:40px;height:3px;border-radius:3px;margin:0 auto 16px;}
  .fw-kicker-bar.chaos{background:var(--orange);}
  .fw-kicker-bar.inpact{background:var(--grad);}
  .pillars-chaos .pillar{border-color:color-mix(in srgb,var(--orange) 24%,transparent);}
  .pillars-chaos .pillar:nth-child(1) .letter,
  .pillars-chaos .pillar:nth-child(2) .letter,
  .pillars-chaos .pillar:nth-child(3) .letter,
  .pillars-chaos .pillar:nth-child(4) .letter,
  .pillars-chaos .pillar:nth-child(5) .letter{color:var(--orange);}
  .note-tag{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);}
  .divider-dots{display:flex;align-items:center;gap:6px;justify-content:center;margin-block:8px;}
  .divider-dots span{width:5px;height:5px;border-radius:50%;background:var(--grad);opacity:.7;}
  /* The Book page's two diagrams on a phone (#110, #123). The Draft site's five cards ran two to a row there, the fifth
     alone. Read AI CHAOS reads down the page as one word, its letters large beside a broken rule ("Word"); Lead with
     IN-PACT runs down five nodes on a line, as the transformation diagram does ("Spine"). Each is one of the four
     designs on prototype/book-page, shown side by side so the Founders can choose one for both at the 23 Oct review.
     Wider screens keep the cards. */
  @media (max-width:600px){
    #blueprint .fw-panel{padding:26px 18px 20px;}
    #blueprint .pillars{display:flex;flex-direction:column;}
    #blueprint .pillar{background:none;border:0;border-radius:0;}

    /* The rule sits in the middle of the 30px gap after the 52px letters: 52 + 15, less half its own width. */
    #blueprint .pillars-chaos{gap:18px;position:relative;}
    #blueprint .pillars-chaos::before{content:"";position:absolute;left:66px;top:6px;bottom:6px;width:2px;border-radius:2px;background:repeating-linear-gradient(180deg,var(--orange) 0 7px,transparent 7px 13px);opacity:.6;}
    #blueprint .pillars-chaos .pillar{display:grid;grid-template-columns:52px 1fr;column-gap:30px;align-items:center;padding:0;}
    #blueprint .pillars-chaos .letter{grid-row:1 / span 2;font-size:2.3rem;line-height:1;margin:0;text-align:center;letter-spacing:-.06em;}
    #blueprint .pillars-chaos .label{font-size:.98rem;margin:0 0 2px;align-self:end;}
    #blueprint .pillars-chaos .desc{font-size:.88rem;line-height:1.45;align-self:start;}

    /* Each node but the last draws the line down to the next one's centre, from its own colour to the next's. A node's
       centre is 33px below its row's top (10px of padding, half of 46px) and 23px in, so the 2.5px line starts 22px in. */
    #blueprint .fw-panel-inpact .pillars{gap:0;}
    #blueprint .fw-panel-inpact .pillar{display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:start;padding:10px 0;position:relative;}
    #blueprint .fw-panel-inpact .pillar:nth-child(-n+4)::before{content:"";position:absolute;left:22px;top:33px;bottom:-33px;width:2.5px;background:linear-gradient(var(--line-from),var(--line-to));opacity:.75;}
    #blueprint .fw-panel-inpact .pillar:nth-child(1){--line-from:var(--blue);--line-to:var(--teal);}
    #blueprint .fw-panel-inpact .pillar:nth-child(2){--line-from:var(--teal);--line-to:var(--emerald);}
    #blueprint .fw-panel-inpact .pillar:nth-child(3){--line-from:var(--emerald);--line-to:var(--gold);}
    #blueprint .fw-panel-inpact .pillar:nth-child(4){--line-from:var(--gold);--line-to:var(--orange);}
    #blueprint .fw-panel-inpact .letter{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;border:2.5px solid currentColor;background:var(--navy);display:grid;place-items:center;font-size:1rem;margin:0;grid-row:1 / span 2;}
    #blueprint .fw-panel-inpact .label{font-size:.95rem;margin:12px 0 2px;}
    #blueprint .fw-panel-inpact .desc{font-size:.86rem;}
  }

  /* ============ TRANSFORMATION BLUEPRINT DIAGRAM ============ */
  .bp-frame{
    border:1.5px solid var(--line);border-radius:28px;background:var(--paper);
    padding:clamp(20px,3vw,36px) clamp(14px,3vw,32px) clamp(26px,3.5vw,40px);
  }
  .bp-scroll{overflow-x:auto;}
  .bp-noderow{
    position:relative;display:grid;grid-template-columns:1.3fr repeat(5,1fr) 1.3fr;
    align-items:center;min-height:clamp(130px,17vw,190px);min-width:620px;
  }
  .bp-noderow canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;}
  .bp-spine{position:absolute;left:16%;right:16%;top:50%;height:2px;background:var(--line);z-index:1;transform:translateY(-50%);}
  .bp-chaos{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;}
  .bp-chaos-letters{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:clamp(1.2rem,2.2vw,1.7rem);letter-spacing:.14em;}
  .bp-node{
    position:relative;z-index:2;margin-inline:auto;border-radius:50%;
    width:clamp(58px,8vw,100px);height:clamp(58px,8vw,100px);
    display:flex;align-items:center;justify-content:center;
    font-family:'JetBrains Mono',monospace;font-weight:800;font-size:clamp(1rem,1.8vw,1.45rem);
  }
  .bp-node-in{background:var(--navy);color:#fff;box-shadow:0 0 0 6px rgba(11,19,43,.07),0 16px 30px -16px rgba(11,19,43,.55);}
  .bp-node-outline{background:var(--paper);border:2.5px solid var(--node-c,var(--blue));color:var(--node-c,var(--blue));}
  .bp-node-outline[data-c="blue"]{--node-c:var(--blue);}
  .bp-node-outline[data-c="teal"]{--node-c:var(--teal);}
  .bp-node-outline[data-c="emerald"]{--node-c:var(--emerald);}
  .bp-node-outline[data-c="orange"]{--node-c:var(--orange);}
  .bp-impact{position:relative;z-index:2;}
  .bp-labelrow{display:grid;grid-template-columns:1.3fr repeat(5,1fr) 1.3fr;margin-top:16px;column-gap:6px;min-width:620px;}
  .bp-label{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding-inline:4px;}
  .bp-rule{width:72%;height:2px;background:var(--ink-40);border-radius:2px;}
  .bp-rule-orange{background:var(--orange);}
  .bp-label span:last-child{
    font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;color:var(--ink-58);
  }
  .bp-orange-text{color:var(--orange) !important;}
  .bp-label-env{grid-column:1;}
  .bp-label-in{grid-column:2;}
  .bp-label-you{grid-column:3 / span 3;}
  .bp-label-lead{grid-column:6;}
  /* On a phone the diagram runs down the screen, so no one scrolls sideways to see it (#119, the 16 Oct review). The
     620px above is what a window just wider than 760px leaves it. The nodes and the labels are two grids with the same
     seven rows: CHAOS, IN, P, A, C, T, and the room the dots fan out into. The labels sit beside the nodes. */
  @media (max-width:760px){
    .bp-scroll{
      --bp-head:96px;--bp-foot:96px;
      overflow-x:visible;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:12px;
    }
    .bp-noderow,.bp-labelrow{
      min-width:0;min-height:0;margin-top:0;column-gap:0;
      grid-template-columns:minmax(0,1fr);grid-template-rows:var(--bp-head) repeat(5,64px) var(--bp-foot);
    }
    .bp-spine{left:50%;right:auto;top:var(--bp-head);bottom:var(--bp-foot);width:2px;height:auto;transform:translateX(-50%);}
    /* The script spreads the dots over these two boxes' height, so they fill their rows: CHAOS's letters alone are
       30px tall, and the room at the foot is empty. */
    .bp-chaos,.bp-impact{align-self:stretch;}
    .bp-node{width:50px;height:50px;font-size:1rem;}
    .bp-label{flex-direction:row;align-items:stretch;gap:12px;text-align:left;padding-inline:0;}
    .bp-rule{flex:none;width:2px;height:auto;margin-block:10px;}
    .bp-label span:last-child{align-self:center;}
    .bp-label-env,.bp-label-in,.bp-label-you,.bp-label-lead{grid-column:1;}
    .bp-label-env{grid-row:1;}
    .bp-label-in{grid-row:2;}
    .bp-label-you{grid-row:3 / span 3;}
    .bp-label-lead{grid-row:6;}
  }

  /* ============ CURRICULUM TIMELINE ============ */
  .timeline{display:flex;flex-direction:column;gap:0;}
  .t-step{display:grid;grid-template-columns:64px 1fr;gap:20px;padding-block:22px;border-top:1px solid var(--line);}
  .t-step:first-child{border-top:none;}
  .t-num{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.3rem;color:var(--teal);}
  .t-step h4{font-size:1.05rem;margin-bottom:6px;}
  .t-step p{font-size:.93rem;color:var(--ink-58);max-width:60ch;}
  .band-navy .t-step{border-top:1px solid var(--line-navy);}
  .band-navy .t-step p{color:var(--on-navy-55);}
  .band-navy .t-num{
    color:var(--navy);background:var(--gold);width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  }

  /* ============ RETREAT CTA BAND ============ */
  .retreat-cta-band{
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
    background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 12%,transparent),color-mix(in srgb,var(--gold) 3%,transparent));
    border:1px solid var(--gold);border-radius:var(--radius);
    padding:28px 32px;margin-bottom:48px;
  }
  .retreat-cta-band .btn{flex-shrink:0;}
  @media (max-width:640px){
    .retreat-cta-band{flex-direction:column;align-items:stretch;text-align:center;}
    .retreat-cta-band .btn{width:100%;}
  }

  /* ============ MODAL WINDOWS (the Retreat enquiry; join and sign in) ============ */
  .overlay{
    display:none;position:fixed;inset:0;z-index:300;background:rgba(10,14,28,.72);
    align-items:center;justify-content:center;padding:20px;
  }
  .overlay.is-open{display:flex;}
  .reg-modal{
    position:relative;width:100%;max-width:480px;max-height:90vh;max-height:90dvh;overflow-y:auto;
    border-radius:var(--radius);padding:36px 32px;box-shadow:var(--shadow-lg);
  }
  .reg-close{
    position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;
    border:1px solid var(--line);background:transparent;display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--ink-58);
  }
  .reg-close:hover{border-color:var(--blue);color:var(--blue);}

  /* ============ PINNED PAGE (behind a window) ============ */
  html.page-pinned{overflow:hidden;}
  html.page-pinned body{position:fixed;left:0;right:0;}

  /* ============ BOOK ============ */
  .byline{font-size:.85rem;color:var(--ink-75);}   /* the authors under the title: smaller than a lede, so both names fit on one line on a 320px phone (the 16 Oct review) */
  .book-layout{display:grid;grid-template-columns:.62fr 1fr;gap:56px;align-items:start;}
  @media (max-width:860px){.book-layout{grid-template-columns:1fr;}}
  .book-cover{
    aspect-ratio:5/7.4;border-radius:14px;background:var(--mist);
    box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
  }
  .book-cover img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}

  /* ============ FOUNDERS ============ */
  .founder-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;}
  .founder-photo{
    position:relative;width:100%;max-width:320px;aspect-ratio:4/5;border-radius:var(--radius);
    overflow:hidden;box-shadow:var(--shadow-sm);
  }
  .founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;}
  .founder-photo .li-badge{
    position:absolute;bottom:14px;right:14px;width:38px;height:38px;border-radius:50%;
    background:#0A66C2;color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 3px rgba(255,255,255,.85);transition:background .18s ease;z-index:2;
  }
  .founder-photo .li-badge:hover{background:var(--navy);}
  .founder-card h4{font-size:1.15rem;margin:0;}
  .founder-card h4 a{color:var(--blue);border-bottom:2px solid var(--teal);}
  .field-hint{font-size:.78rem;color:var(--ink-40);margin-top:6px;}
  .band-navy .field-hint{color:var(--on-navy-55);}

  /* ============ FAQ ============ */
  .faq-item{border-top:1px solid var(--line);}
  .faq-item:last-child{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;
    font-size:1.02rem;font-weight:700;color:var(--ink);
  }
  .faq-q .plus{font-family:'JetBrains Mono',monospace;font-size:1.2rem;color:var(--teal);transition:transform .25s ease;flex:none;}
  .faq-item[data-open="true"] .plus{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .faq-a-inner{padding-bottom:22px;font-size:.94rem;color:var(--ink-58);max-width:70ch;}

  /* ============ FORMS (the Draft site's fields) ============ */
  .field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;min-width:0;}
  .field label{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--on-navy-75);}
  .band-light .field label, .band-mist .field label{color:var(--ink-75);}
  .field input, .field textarea, .field select{
    padding:.85em 1em;border-radius:10px;border:1.5px solid var(--line-navy);background:var(--navy-2);color:var(--on-navy);
    font-family:inherit;font-size:.96rem;width:100%;min-width:0;
  }
  .band-light .field input, .band-light .field textarea, .band-light .field select,
  .band-mist .field input, .band-mist .field textarea, .band-mist .field select{
    border-color:var(--line);background:var(--paper);color:var(--ink);
  }
  .field textarea{resize:vertical;min-height:80px;}
  .choice{display:flex;flex-wrap:wrap;gap:10px;}
  .choice label{display:inline-flex;align-items:center;gap:.5em;border:1.5px solid var(--line);border-radius:100px;padding:.6em 1em;cursor:pointer;font-weight:600;font-size:.9rem;text-transform:none;letter-spacing:0;color:var(--ink);}
  .field .choice input, .choice input{appearance:auto;-webkit-appearance:auto;width:16px;height:16px;padding:0;border:0;background:none;margin:0;accent-color:var(--orange);flex:none;}
  .choice label:has(input:checked){border-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,transparent);color:var(--blue);}
  .band-navy .choice label{border-color:var(--line-navy);color:var(--on-navy);}
  .band-navy .choice label:has(input:checked){border-color:var(--gold);color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);}
  .consent{display:flex;gap:12px;align-items:flex-start;margin-top:4px;margin-bottom:18px;}
  .consent input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--orange);}
  .consent span{font-size:.85rem;color:var(--ink-58);line-height:1.55;}
  .band-navy .consent span{color:var(--on-navy-55);}
  /* The short note at a Lead flow (#202), under its button, and the link in a consent box's words. */
  .privacy-note{font-size:.82rem;line-height:1.55;color:var(--ink-58);margin-top:12px;}
  .privacy-note a, .consent a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}
  .privacy-note a{font-weight:600;}
  /* The line under a Lead flow's button that gives info@'s address when it can't send (#143). Empty until then, and
     takes no room, but stays shown, so a screen reader already knows it when the words come. */
  .form-fallback{font-size:.86rem;font-weight:600;line-height:1.55;color:#B3261E;margin-top:12px;}
  .form-fallback:empty{margin-top:0;}
  .form-fallback a{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
  .band-navy .form-fallback{color:var(--on-navy);}
  /* The field only a bot fills: off the screen, not display:none, which some bots know to leave empty. */
  .form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
  .band-navy .consent a{color:var(--gold);}
  .thanks{display:flex;flex-direction:column;gap:14px;max-width:560px;}
  .thanks .btn-row{margin-top:6px;}

  /* ============ CONTACT US (#120): the page, and the floating button on every other page ============ */
  /* The page: WhatsApp on the left, the form in a card on the right; one above the other on a phone. */
  .contact-wrap{max-width:1040px;}
  .contact-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:32px;align-items:start;}
  @media (max-width:760px){.contact-body{grid-template-columns:minmax(0,1fr);gap:28px;}}
  /* With no WhatsApp number (#203), the form alone: in the first column it would sit narrow beside an empty one, and
     across the whole width its two-field rows run long. So it takes the heading's 760px. */
  .contact-body:not(:has(.contact-aside)){grid-template-columns:minmax(0,1fr);max-width:760px;}
  .contact-whatsapp{
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:28px 26px;border:1.5px solid var(--line);
    border-radius:var(--radius);background:var(--paper);color:var(--ink);transition:border-color .18s ease, box-shadow .18s ease;
  }
  .contact-whatsapp:hover{border-color:var(--blue);box-shadow:var(--shadow-sm);}
  .contact-whatsapp img{width:48px;height:48px;margin-bottom:8px;}
  .contact-whatsapp b{font-size:1rem;}
  .contact-whatsapp-note{font-size:.88rem;color:var(--ink-58);}
  .contact-whatsapp-go{margin-top:8px;font-size:.9rem;font-weight:700;color:var(--blue);}
  .contact-form{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);padding:clamp(22px,4vw,40px);}
  .contact-member-hint{margin:-8px 0 14px;}
  .contact-send{width:100%;}
  .contact-thanks{margin-inline:auto;text-align:center;align-items:center;}
  .contact-thanks .btn-row{justify-content:center;}

  /* The floating button: a round icon that opens a small menu of the two ways. It sits above the menu bar (100), under
     the windows (300) and the toast (400). --fab-room is the height it takes from the foot of the screen on a phone:
     16px from the edge and 56px across. */
  :root{--fab-room:72px;}
  .fab{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:200;}
  /* Not on the Contact us page, which holds both ways in full, and not over a window. */
  body:has(.contact-page) .fab, html.page-pinned .fab{display:none;}
  /* Room under the footer's last line, which the button would cover. */
  body:not(:has(.contact-page)) #footer{padding-bottom:calc(32px + var(--fab-room) + env(safe-area-inset-bottom,0px));}
  /* A button the page scrolls to, or a field that takes the focus, stops clear of the floating button, not under it:
     on a phone 600px tall, the Readiness Score's Continue button ended under it. */
  html:not(:has(.contact-page)){scroll-padding-bottom:calc(var(--fab-room) + 16px + env(safe-area-inset-bottom,0px));}
  .fab-btn{
    display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;
    background:var(--blue);color:#fff;cursor:pointer;
    /* A light ring, so the button stands out on the navy sections and the footer too. */
    box-shadow:0 0 0 1.5px rgba(255,255,255,.6), var(--shadow-lg);
  }
  .fab-btn svg{width:26px;height:26px;}
  .fab-shut, .fab-btn[aria-expanded="true"] .fab-open{display:none;}
  .fab-btn[aria-expanded="true"] .fab-shut{display:block;}
  @media (min-width:761px){
    .fab-btn{width:48px;height:48px;}
    .fab-btn svg{width:22px;height:22px;}
  }
  .fab-menu{
    position:absolute;right:0;bottom:calc(100% + 10px);display:flex;flex-direction:column;width:max-content;min-width:230px;
    padding:6px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  }
  .fab-choice{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;color:var(--ink);font-size:.92rem;font-weight:700;}
  .fab-choice:hover{background:var(--mist);}
  .fab-mark{width:26px;height:26px;flex:none;}
  .fab-envelope{display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff;}
  .fab-envelope svg{width:58%;height:58%;}

  /* ============ FOOTER ============ */
  #footer{background:var(--navy);color:var(--on-navy);padding-block:64px 32px;}
  .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line-navy);}
  @media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
  .footer-grid h5{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-55);margin:0 0 16px;}
  .footer-grid a, .footer-grid p{display:block;font-size:.88rem;color:var(--on-navy-75);margin-bottom:10px;}
  .footer-grid a:hover{color:var(--gold);}
  .footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:28px;font-size:.78rem;color:var(--on-navy-35);}
  .socials{display:flex;gap:14px;}
  .socials a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-navy);display:flex;align-items:center;justify-content:center;margin:0;}
  .socials a:hover{border-color:var(--gold);color:var(--gold);}

  /* ============ TOAST ============ */
  #toast{
    position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(calc(100% + 40px + env(safe-area-inset-bottom,0px)));
    background:var(--navy);color:var(--on-navy);padding:14px 22px;border-radius:100px;font-size:.86rem;font-weight:600;
    box-shadow:var(--shadow-lg);z-index:400;transition:transform .3s ease;border:1px solid var(--line-navy);max-width:calc(100% - 32px);text-align:center;
  }
  #toast.is-shown{transform:translateX(-50%) translateY(0);}
  ::selection{background:var(--gold);color:var(--navy);}

  /* ============ THE READINESS SCORE (its own page's styles, as saved) ============ */
  .rd-view{display:none;}
  .rd-view.is-active{display:block;}
  .rd-hero{padding-block:clamp(56px,9vw,96px) clamp(40px,6vw,64px);position:relative;overflow:hidden;}
  .rd-hero-rings{position:absolute;top:-120px;right:-160px;width:560px;height:560px;opacity:.16;pointer-events:none;}
  .rd-hero-rings svg{width:100%;height:100%;}
  .rd-kicker{display:flex;flex-direction:column;gap:2px;margin-bottom:22px;}
  .rd-kicker span{font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);}
  .rd-kicker span:last-child{color:var(--orange);}
  .rd-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08;max-width:16ch;margin-bottom:22px;position:relative;z-index:1;}
  .rd-hero-sub{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--ink-75);max-width:56ch;margin-bottom:8px;position:relative;z-index:1;}
  .rd-hero-sub + .rd-hero-sub{margin-top:14px;margin-bottom:30px;}
  .rd-trust{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--ink-40);margin-top:18px;letter-spacing:.02em;}
  .rd-hero-ctas{position:relative;z-index:1;}
  .rd-framework{padding-block:clamp(48px,7vw,80px);background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .rd-flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
  .rd-flow-chaos{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:clamp(1rem,2vw,1.3rem);letter-spacing:.1em;color:var(--ink-58);padding:.5em .9em;border:1.5px dashed var(--line);border-radius:100px;}
  .rd-flow-arrow{color:var(--ink-40);font-size:1.1rem;}
  .rd-flow-node{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:1.05rem;color:#fff;flex:none;}
  .rd-grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
  @media (max-width:820px){.rd-grid5{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:480px){.rd-grid5{grid-template-columns:1fr;}}
  .rd-dim-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 18px;min-width:0;}
  .rd-dim-card .letter{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:1.3rem;display:block;margin-bottom:8px;}
  .rd-dim-card h4{font-size:.92rem;margin-bottom:6px;}
  .rd-dim-card p{font-size:.82rem;color:var(--ink-58);}
  .rd-framework-quote{max-width:56ch;margin:36px auto 0;text-align:center;font-size:1.1rem;font-weight:600;color:var(--ink-75);line-height:1.5;}
  .rd-assess-wrap{padding-block:clamp(40px,7vw,72px);display:flex;align-items:flex-start;justify-content:center;}
  .rd-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);padding:clamp(28px,4.5vw,52px);max-width:640px;width:100%;}
  .rd-progress-track{height:6px;border-radius:100px;background:var(--mist);overflow:hidden;margin-bottom:24px;}
  .rd-progress-bar{height:100%;background:var(--grad);border-radius:100px;transition:width .3s ease;width:0%;}
  .rd-progress-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;flex-wrap:wrap;gap:8px;}
  .rd-qnum{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;color:var(--ink-40);letter-spacing:.04em;}
  .rd-section-tag{font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.35em .85em;border-radius:100px;background:var(--mist);color:var(--blue);}
  .rd-question h2{font-size:clamp(1.2rem,2.4vw,1.55rem);line-height:1.35;margin-bottom:30px;}
  fieldset{border:none;padding:0;margin:0;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  .rd-likert{display:flex;flex-direction:column;gap:10px;}
  .rd-likert-opt{position:relative;}
  .rd-likert-opt input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;margin:0;cursor:pointer;}
  .rd-likert-opt label{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:14px;padding:14px 18px;cursor:pointer;transition:border-color .15s ease,background .15s ease;}
  .rd-likert-opt label .n{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:1.05rem;color:var(--ink-40);flex:none;width:20px;}
  .rd-likert-opt label .t{font-size:.94rem;font-weight:600;color:var(--ink-75);}
  .rd-likert-opt:hover label{border-color:var(--teal);}
  .rd-likert-opt input:checked + label{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 6%,transparent);}
  .rd-likert-opt input:checked + label .n, .rd-likert-opt input:checked + label .t{color:var(--ink);}
  .rd-likert-opt input:focus-visible + label{outline:2px solid var(--teal);outline-offset:2px;}
  .rd-nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:32px;gap:12px;}
  .rd-intro p{font-size:1.02rem;color:var(--ink-75);max-width:56ch;margin-bottom:16px;}
  .rd-intro .eyebrow{margin-bottom:18px;}
  .rd-gate h2{font-size:clamp(1.4rem,2.8vw,1.9rem);margin-bottom:10px;}
  .rd-gate .lede{font-size:1rem;color:var(--ink-58);max-width:52ch;margin-bottom:26px;}
  .rd-result-head{text-align:center;margin-bottom:44px;}
  .rd-result-head h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:28px;}
  .rd-ring-wrap{display:flex;justify-content:center;margin-bottom:8px;position:relative;}
  .rd-ring-score{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
  .rd-ring-score .num{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:2.3rem;color:var(--ink);line-height:1;}
  .rd-ring-score .of{font-size:.78rem;color:var(--ink-40);font-family:'JetBrains Mono',monospace;}
  .rd-level-badge{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);background:var(--mist);border:1px solid var(--line);padding:.5em 1.1em;border-radius:100px;margin-top:14px;}
  .rd-result-copy{max-width:62ch;margin:22px auto 0;text-align:center;font-size:1.05rem;color:var(--ink-75);line-height:1.6;}
  .rd-downgrade-box{max-width:62ch;margin:22px auto 0;background:var(--mist);border:1px solid var(--line);border-radius:14px;padding:20px 24px;text-align:left;}
  .rd-downgrade-box p{font-size:.92rem;color:var(--ink-58);line-height:1.6;}
  .rd-profile{margin-top:56px;}
  .rd-profile-head{text-align:center;margin-bottom:32px;}
  .rd-profile-head h3{font-size:1.3rem;margin-bottom:8px;}
  .rd-dim-row{border-top:1px solid var(--line);padding-block:22px;}
  .rd-dim-row:last-child{border-bottom:1px solid var(--line);}
  .rd-dim-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap;}
  .rd-dim-name{font-weight:700;font-size:1rem;}
  .rd-dim-score{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.92rem;color:var(--ink-40);}
  .rd-dim-bar-track{height:8px;border-radius:100px;background:var(--mist);overflow:hidden;margin-bottom:14px;}
  .rd-dim-bar{height:100%;border-radius:100px;transition:width .6s ease;}
  .rd-dim-msg{font-size:.92rem;color:var(--ink-58);margin-bottom:8px;}
  .rd-dim-reflect{font-size:.88rem;color:var(--ink-40);font-style:italic;}
  .rd-dim-reflect b{font-style:normal;color:var(--ink-58);}
  .rd-cta-block{margin-top:60px;text-align:center;}
  .rd-cta-primary{background:linear-gradient(135deg,color-mix(in srgb,var(--orange) 10%,transparent),color-mix(in srgb,var(--orange) 2%,transparent));border:1px solid var(--orange);border-radius:20px;padding:clamp(28px,4vw,40px);margin-bottom:20px;}
  .rd-cta-primary h3{font-size:1.25rem;margin-bottom:10px;}
  .rd-cta-primary p{font-size:.94rem;color:var(--ink-58);max-width:52ch;margin:0 auto 22px;}
  .rd-result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px;}
  .rd-last{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:28px;max-width:640px;}
  .rd-last .num{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:1.8rem;line-height:1;}
  .rd-last .num small{font-size:.5em;color:var(--ink-40);}

  /* ============ THE NEW SCREENS (what the Draft site does not have, in the mood board's language) ============ */
  .display{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.98;font-size:clamp(2.2rem,5.2vw,3.8rem);}
  .display .ai{color:var(--blue);} .display .you{color:var(--orange);}
  .band-navy .display .ai{color:color-mix(in srgb,var(--blue) 55%,#fff);}
  .spectrum-rule{position:relative;height:2px;background:var(--grad);border-radius:2px;max-width:220px;margin-block:22px 26px;}
  .spectrum-rule::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;border:2px solid var(--teal);background:var(--paper);transform:translate(-50%,-50%);}
  .band-mist .spectrum-rule::after{background:var(--mist);}
  .s-head.center .spectrum-rule{margin-inline:auto;}
  .arcs{position:absolute;pointer-events:none;opacity:.55;}
  .arcs svg{width:100%;height:100%;display:block;}
  .particles{position:absolute;pointer-events:none;opacity:.5;}
  .particles svg{width:100%;height:100%;display:block;}
  .screen{position:relative;overflow:hidden;}
  .screen .wrap{position:relative;z-index:1;}
  .two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center;}
  .two-col.rev{grid-template-columns:.9fr 1.1fr;}
  @media (max-width:760px){.two-col,.two-col.rev{grid-template-columns:1fr;}}
  .cover-sm{width:min(100%,320px);justify-self:center;}
  .date-pill{display:inline-flex;align-items:center;gap:.6em;font-family:'JetBrains Mono',monospace;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-navy);border-radius:100px;padding:.5em 1em;flex-wrap:wrap;}
  .band-light .date-pill, .band-mist .date-pill{border-color:var(--line);}
  .doors{display:flex;flex-direction:column;gap:10px;margin-block:8px 18px;}
  .door{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:12px;padding:.85em 1em;background:var(--paper);font-weight:700;cursor:pointer;text-align:left;font-size:.95rem;color:var(--ink);font-family:inherit;}
  .door:hover{border-color:var(--blue);color:var(--blue);}
  .door-mark{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.8rem;color:#fff;flex:none;}
  .door-mark.g{background:#1a73e8;} .door-mark.li{background:#0A66C2;} .door-mark.em{background:var(--navy);}
  .auth-new{font-size:.9rem;margin-top:18px;}

  /* ============ THE REGISTRATION FLOW (#121): Hady's three screens, in the Draft site's colours ============
     As he drew them: numbered cards for what you gain, the three doors with the email door the main button, four squares
     that turn navy when chosen, and the Founders' note on a white card. */
  .jf-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
  .jf-logo img{height:40px;width:auto;}
  .jf-badge{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);border:1.5px solid color-mix(in srgb,var(--teal) 45%,transparent);background:color-mix(in srgb,var(--teal) 8%,transparent);border-radius:100px;padding:.35em .9em;white-space:nowrap;}
  .jf-badge.is-member{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 40%,transparent);background:color-mix(in srgb,var(--blue) 7%,transparent);}
  .jf-skip{margin-left:auto;background:none;border:0;padding:.5em 0;font:inherit;font-size:.9rem;font-weight:700;color:var(--blue);cursor:pointer;}
  .jf-title{font-size:clamp(1.45rem,1.1rem + 1.6vw,1.9rem);line-height:1.12;color:var(--navy);}
  .jf-title:focus{outline:none;}
  .jf-sub{font-size:.95rem;color:var(--ink-58);margin:6px 0 16px;}
  .jf-notice, .jf-pill{font-weight:700;color:#17663A;background:color-mix(in srgb,var(--emerald) 16%,#fff);border-radius:100px;}
  .jf-notice{display:inline-block;font-size:.86rem;padding:.4em 1em;margin-bottom:12px;}
  .jf-gains{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:10px;}
  .jf-gain{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;}
  .jf-num{flex:none;width:26px;height:26px;margin-top:1px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:700;}
  .jf-gain-text{flex:1;min-width:0;}
  .jf-gain-text b{display:block;font-size:.95rem;line-height:1.3;color:var(--ink);}
  .jf-gain-text > span{display:block;font-size:.86rem;line-height:1.45;color:var(--ink-58);margin-top:2px;}
  .jf-tag{display:inline-block;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);border:1px solid color-mix(in srgb,var(--teal) 45%,transparent);border-radius:100px;padding:.1em .6em;margin-left:4px;vertical-align:2px;}
  .jf-gain.is-tick{cursor:pointer;}
  .jf-gain.is-tick input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--orange);}
  .jf-gain.is-tick:has(input:checked){border-color:var(--orange);background:color-mix(in srgb,var(--orange) 5%,#fff);}
  .jf-gain.is-tick:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px;}
  .jf-fields .field{margin-bottom:14px;}
  .jf-consent{margin:0 0 14px;}
  .jf-privacy{white-space:nowrap;}   /* its look is .consent a's, with the other consent boxes' links (#202) */
  .jf-error, .auth-error{font-size:.86rem;font-weight:600;color:#B3261E;margin:-4px 0 12px;}
  .jf-doors{display:flex;flex-direction:column;gap:10px;}
  .jf-doors .door{justify-content:center;background:#fff;}
  .jf-wide{width:100%;}
  .jf-back{align-self:center;margin-top:2px;text-decoration:none;font-size:.9rem;}
  .jf-small{font-size:.86rem;color:var(--ink-58);text-align:center;margin-top:4px;}
  .jf-pill{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;padding:.4em .95em;margin-bottom:14px;}
  .jf-pill svg{width:15px;height:15px;flex:none;}
  .jf-squares{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
  .jf-square{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;min-height:150px;padding:14px 12px;text-align:left;font:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;transition:background .15s ease,border-color .15s ease;}
  .jf-square::after{content:"";position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink-40);display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;}
  .jf-square[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy);}
  .jf-square[aria-pressed="true"]::after{content:"✓";background:var(--orange);border-color:var(--orange);}
  .jf-square:hover:not([aria-pressed="true"]){border-color:var(--teal);}
  .jf-square:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  .jf-square b{font-size:.92rem;line-height:1.25;padding-right:24px;}
  .jf-square > span{font-size:.8rem;line-height:1.4;color:var(--ink-58);}
  .jf-square[aria-pressed="true"] > span{color:var(--on-navy-75);}
  .jf-icon{width:26px;height:26px;color:var(--teal);}
  .jf-square[aria-pressed="true"] .jf-icon{color:var(--gold);}
  .jf-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line);}
  .jf-count{font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;color:var(--ink-58);}
  .jf-tick{width:44px;height:44px;border-radius:50%;background:var(--emerald);color:#fff;display:grid;place-items:center;margin-bottom:12px;}
  .jf-tick svg{width:24px;height:24px;}
  .jf-note{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;margin-bottom:12px;font-size:.92rem;line-height:1.6;color:var(--ink-75);}
  .jf-sign{display:flex;align-items:center;gap:12px;margin-top:4px;}
  .jf-initials{display:flex;flex:none;}
  .jf-initials i{width:34px;height:34px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;color:#fff;background:var(--navy);}
  .jf-initials i + i{margin-left:-8px;background:var(--teal);}
  .jf-sign b{display:block;font-size:.92rem;color:var(--ink);}
  .jf-sign > span:last-child > span{display:block;font-size:.8rem;line-height:1.4;color:var(--ink-58);}
  .jf-thanks .jf-small{margin-bottom:14px;}

  /* The flow's page, /join, as Hady drew it: no menu and no footer, the logo and the badge on top, and the Interests' bar
     held at the foot of the screen. The contact button would sit on that bar. On a desktop, the same screen as a card in
     the middle. */
  body:has(.join-page) #nav, body:has(.join-page) #footer, body:has(.join-page) .fab{display:none;}
  .join-page{min-height:100vh;min-height:100dvh;background:var(--paper);}
  .join-page .jf{max-width:460px;margin-inline:auto;padding:16px 20px 24px;}
  .join-page .jf-bar{position:sticky;bottom:0;margin-inline:-20px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));background:var(--paper);}
  @media (min-width:600px){
    .join-page{background:var(--mist);padding-block:40px;}
    .join-page .jf{background:var(--paper);border-radius:28px;box-shadow:var(--shadow-lg);padding:22px 28px 28px;}
    .join-page .jf-bar{margin-inline:0;padding-inline:0;}
  }

  /* ============ THE SIX-DIGIT CODE (#193): /join's code screen and Sign in's code step, one design ============
     "The letter", which the developer chose from three: everything centred under an envelope in a spectrum ring, the
     address on a pill, and one large box over a rule that fills with the site's spectrum as the digits come and turns
     red with a wrong code. In Sign in the step has its own heading, so the window's eyebrow and "Sign in" step aside. */
  .code-step{text-align:center;}
  .reg-modal:has(> .code-step:not([hidden])) > :is(.eyebrow,#authTitle){display:none;}
  .code-mark{position:relative;display:grid;place-items:center;width:64px;height:64px;margin:4px auto 16px;border-radius:50%;border:2px solid transparent;
    background:linear-gradient(var(--mist),var(--mist)) padding-box,var(--grad) border-box;color:var(--navy);}
  .code-mark svg{width:28px;height:28px;}
  .code-mark::after{content:"";position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;background:var(--orange);border:2.5px solid var(--paper);}
  .code-title{font-size:1.3rem;line-height:1.2;color:var(--navy);}
  .code-step .jf-sub, .code-step .body-text{margin:6px auto 8px;}
  .code-to{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-bottom:20px;}
  .code-to b{font-size:.92rem;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:100px;padding:.4em 1em;overflow-wrap:anywhere;}
  .code-to .linkbtn{font-size:.9rem;text-decoration:none;}
  .code-step .field{margin-bottom:12px;}
  .code-box{position:relative;}
  /* The letters' spacing is added after each digit, the last one too, so the same space before the first keeps six
     digits in the middle of the box. */
  .code-step .field .code-input{font-family:'JetBrains Mono',monospace;font-size:clamp(1.6rem,7.5vw,2.1rem);font-weight:700;letter-spacing:.42em;text-indent:.42em;text-align:center;
    padding:.5em .4em .7em;border:1.5px solid var(--line);border-radius:16px;background:#fff;color:var(--navy);}
  .code-step .field .code-input::placeholder{color:var(--ink);opacity:.14;}
  .code-step .field .code-input:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 16%,transparent);}
  .code-input::selection{background:color-mix(in srgb,var(--teal) 22%,transparent);color:inherit;}
  .code-rule{position:absolute;left:22px;right:22px;bottom:12px;height:3px;border-radius:3px;background:var(--line);overflow:hidden;pointer-events:none;}
  .code-rule::before{content:"";position:absolute;inset:0;background:var(--grad);clip-path:inset(0 calc(100% - var(--n,0) * 100% / 6) 0 0);transition:clip-path .2s ease;}
  .code-step.is-wrong .field .code-input{border-color:#B3261E;}
  .code-step.is-wrong .code-rule::before{background:#B3261E;}
  .code-step :is(.jf-error,.auth-error){margin-top:0;}
  .code-sent{display:inline-flex;align-items:flex-start;gap:6px;text-align:left;font-size:.86rem;font-weight:600;line-height:1.45;color:#17663A;
    background:color-mix(in srgb,var(--emerald) 16%,#fff);border-radius:18px;padding:.45em 1em;margin-bottom:12px;}
  .code-sent::before{content:"✓";font-weight:800;}
  .code-sent:empty{display:none;}
  .code-step .btn-row{display:block;}
  .code-step .btn-row .btn{width:100%;}
  .code-more{font-size:.9rem;color:var(--ink-58);border-top:1px solid var(--line);padding-top:14px;margin-top:16px;}
  .code-more .linkbtn{white-space:nowrap;}
  .code-more .linkbtn:disabled{color:var(--ink-40);text-decoration:none;cursor:progress;}
  .code-hint{font-size:.8rem;color:var(--ink-40);margin-top:4px;}

  /* ============ THE COMMUNITY PAGE (#134): the Member's own place, a panel on the left with their name on blue, and one
     section at a time on the right, My toolbox (cards) or Profile (grouped rows with switches) ============ */
  .cm-avatar{flex:none;width:44px;height:44px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:.85rem;font-weight:700;color:#fff;}
  .cm-h{font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.15;color:var(--navy);}
  .cm-small{font-size:.86rem;color:var(--ink-58);}
  .cm-nobr{white-space:nowrap;}

  .cm-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start;}
  .cm-side{position:sticky;top:96px;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:16px;}
  .cm-side-top{padding:24px 20px;background:linear-gradient(135deg,var(--blue),var(--navy));}   /* blue on top only, the rest white (Hady, 23 Oct) */
  .cm-side-top .eyebrow{color:var(--gold);}
  .cm-side-body{padding:0 20px 20px;}
  .cm-who{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
  .cm-who .cm-avatar{box-shadow:0 0 0 3px rgba(255,255,255,.85);}
  .cm-who b{display:block;font-size:.98rem;color:#fff;}
  .cm-who span{display:block;font-size:.8rem;color:var(--on-navy-75);}
  .cm-nav{display:flex;flex-direction:column;gap:4px;}
  .cm-nav [role="tab"]{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;font:inherit;font-size:.92rem;font-weight:600;color:var(--ink-75);text-align:left;cursor:pointer;}
  .cm-nav [role="tab"] svg{width:18px;height:18px;flex:none;}
  .cm-nav [role="tab"]:hover{background:var(--mist);}
  .cm-nav [role="tab"][aria-selected="true"]{background:color-mix(in srgb,var(--blue) 8%,#fff);color:var(--blue);}
  .cm-nav [role="tab"]:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  .cm-signout{margin:14px 0 0 12px;font-size:.88rem;text-decoration:none;}
  .cm-side-top.is-join, .cm-side-body.is-join{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
  .cm-side-top.is-join{margin-bottom:16px;}
  .cm-side-title{font-size:1.4rem;line-height:1.15;color:#fff;}
  .cm-side-body.is-join p{font-size:.9rem;color:var(--ink-58);}
  .cm-main-head{margin-bottom:20px;}
  .cm-main-head p{font-size:.95rem;color:var(--ink-58);margin-top:6px;}

  .cm-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
  .cm-card{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;}
  .cm-card h3{font-size:1.05rem;line-height:1.3;color:var(--ink);}
  .cm-card p{font-size:.9rem;line-height:1.5;color:var(--ink-58);}
  .cm-card-head{display:flex;gap:14px;align-items:flex-start;}
  .cm-card-head p{margin-top:3px;}
  .cm-icon{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--teal);background:color-mix(in srgb,var(--teal) 9%,#fff);}
  .cm-icon svg{width:22px;height:22px;}
  .cm-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:auto;}
  .cm-score{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .cm-score-num{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:2.2rem;line-height:1;color:var(--ink);}
  .cm-score-num small{font-size:.42em;color:var(--ink-40);}
  .cm-badge{margin:0;font-size:.74rem;}
  .cm-meter{display:block;height:6px;border-radius:6px;background:var(--mist);overflow:hidden;}
  .cm-meter i{display:block;width:0;height:100%;background:var(--grad);border-radius:6px;}
  .cm-card .cm-status{font-size:.86rem;font-weight:600;color:#17663A;background:color-mix(in srgb,var(--emerald) 12%,#fff);border-radius:10px;padding:.6em .9em;}
  .cm-card.is-shut{background:color-mix(in srgb,#fff 50%,transparent);border-style:dashed;}
  .cm-card.is-shut .cm-card-head{opacity:.6;}
  .cm-lock{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,#fff);border-radius:100px;padding:.35em .8em;}
  .cm-lock svg{width:12px;height:12px;}
  .cm-assoc{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:16px;}
  .cm-assoc > div{flex:1 1 280px;}
  .cm-assoc p{margin-top:3px;}

  .cm-settings{display:flex;flex-direction:column;gap:22px;}
  .cm-group > header{margin-bottom:10px;}
  .cm-group h3{font-size:.98rem;color:var(--ink);}
  .cm-group > header p{font-size:.86rem;color:var(--ink-58);margin-top:2px;}
  .cm-rows{background:#fff;border:1px solid var(--line);border-radius:14px;}
  .cm-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;}
  .cm-row + .cm-row{border-top:1px solid var(--line);}
  .cm-row > div:first-child{min-width:0;}
  .cm-row b{display:block;font-size:.93rem;color:var(--ink);}
  .cm-row span{display:block;font-size:.86rem;line-height:1.45;color:var(--ink-58);margin-top:2px;overflow-wrap:anywhere;}
  .cm-row a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
  .cm-row.is-confirm{background:color-mix(in srgb,var(--orange) 6%,#fff);border-radius:0 0 14px 14px;}
  .cm-switch{position:relative;flex:none;width:46px;height:28px;border:0;border-radius:100px;padding:0;cursor:pointer;background:color-mix(in srgb,var(--ink) 20%,#fff);transition:background .15s ease;}
  .cm-switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(8,13,30,.3);transition:transform .15s ease;}
  .cm-switch[aria-checked="true"]{background:var(--blue);}
  .cm-switch[aria-checked="true"]::after{transform:translateX(18px);}
  .cm-switch:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

  @media (max-width:860px){
    .cm-layout{grid-template-columns:1fr;gap:20px;}
    .cm-side{position:static;}
    .cm-nav{flex-direction:row;}
    .cm-nav [role="tab"]{justify-content:center;}
    .cm-signout{display:none;}
  }
  @media (max-width:640px){ .cm-tools{grid-template-columns:1fr;} }

  /* ============ THE CHAOS FILM (#165): Hady's film on the Home page, chapter by chapter, after Apple's "Get the highlights":
     a rounded stage, the chapter's words under it, and a dot for each chapter that stretches and fills while its chapter plays ============ */
  .film-stage{max-width:1040px;margin-inline:auto;border-radius:28px;overflow:hidden;background:#0C111E;touch-action:pan-y pinch-zoom;}   /* the film's own dark, read from its edges, until the poster comes; a sideways swipe is the film's */
  .film-stage video{display:block;width:100%;height:auto;aspect-ratio:16/9;}
  /* The chapters' words lie on top of each other, so the box is as tall as the longest, and the dots under it stay put
     when a chapter's words wrap to one more line than the last's. */
  .film-words{display:grid;max-width:1040px;margin:22px auto 0;}
  .film-words p{grid-area:1/1;display:flex;align-items:baseline;gap:14px;margin:0;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.45;color:var(--ink-58);}
  .film-words p:not(.is-on){visibility:hidden;}
  .film-words strong{color:var(--ink);}
  .film-letter{flex:none;font-size:1.7em;font-weight:800;line-height:1;}
  .film-letter[data-c="blue"]{color:var(--blue);}
  .film-letter[data-c="teal"]{color:var(--teal);}
  .film-letter[data-c="emerald"]{color:var(--emerald);}
  .film-letter[data-c="gold"]{color:var(--gold);}
  .film-letter[data-c="orange"]{color:var(--orange);}
  .film-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px;}
  .film-dots{display:flex;align-items:center;padding:4px 14px;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);}
  .film-dot{display:flex;align-items:center;justify-content:center;height:40px;padding:0 5px;border:0;background:none;cursor:pointer;}   /* the dot is drawn small, inside a button large enough for a finger */
  .film-dot i{position:relative;display:block;width:8px;height:8px;border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--ink) 32%,transparent);transition:width .35s ease;}
  .film-dot i::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0);}
  .film-dot.is-on i{width:44px;}
  .film-dot.is-on i::after{transform:scaleX(var(--fill,0));}
  .film-play{
    width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
    background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);
  }
  .film-play svg{width:20px;height:20px;}
  .film-play .film-icon-play, .film-play.is-paused .film-icon-pause{display:none;}
  .film-play.is-paused .film-icon-play{display:block;}
  @media (max-width:600px){
    .film-stage{border-radius:18px;}
    .film-dot{padding:0 4px;}
    .film-dot.is-on i{width:32px;}
  }

  /* ============ The testimonials (#179): a deck at the end of the Home page ============
     Each person keeps one of the transformation diagram's five colours, their tone, on the card and in the window. */
  [data-tone="blue"]{--tone:var(--blue);} [data-tone="teal"]{--tone:var(--teal);} [data-tone="emerald"]{--tone:var(--emerald);}
  [data-tone="gold"]{--tone:var(--gold);} [data-tone="orange"]{--tone:var(--orange);}
  #home-say{overflow-x:clip;}   /* a card on its way out passes the screen's edge */
  .say-deck{max-width:600px;margin-inline:auto;}
  /* The count and the buttons sit above the deck, since its height changes from card to card and would move them */
  .say-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
  .say-count{font:700 .8rem/1 'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--ink-58);}
  .say-steps{display:flex;gap:10px;}
  .say-step{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:border-color .18s ease;}
  .say-step:hover{border-color:var(--navy);}
  .say-step svg{width:18px;height:18px;}
  /* The deck is as tall as the card in front, so a short testimonial leaves no empty space; the script eases the height
     from one card to the next. The four behind fill the same box, each a little higher and smaller, so only their
     coloured edges show above it. */
  .say-pile{position:relative;margin-top:28px;touch-action:pan-y pinch-zoom;transition:height .4s cubic-bezier(.2,.7,.2,1);}   /* the margin is room for the four edges */
  .say-card{
    position:absolute;inset:0;display:flex;flex-direction:column;gap:22px;
    padding:30px 24px 24px;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
    box-shadow:0 18px 40px -28px rgba(8,13,30,.45);
    transform-origin:50% 0;transform:translateY(calc(var(--pos,0) * -7px)) scale(calc(1 - var(--pos,0) * .04));
    z-index:calc(9 - var(--pos,0));transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease;
  }
  .say-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--tone);}
  .say-card.is-front{position:relative;inset:auto;z-index:10;}   /* above the rest even before the script lays them out */
  .say-card:not(.is-front):not(.is-leaving) > *{visibility:hidden;}   /* behind, only the coloured edge shows */
  .say-card.is-leaving{bottom:auto;transform:translateX(-112%) rotate(-5deg);opacity:0;z-index:20;}   /* it keeps its own height on its way out */
  /* The sentence, its quote marks in the person's colour and hung in the margin; a short one larger, a long one smaller,
     so the cards' heights stay close */
  .say-line{font-size:clamp(1.12rem,1rem + .6vw,1.4rem);font-weight:800;line-height:1.34;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty;text-indent:-.42em;}
  .say-line.is-short{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);line-height:1.2;}
  .say-line.is-long{font-size:clamp(1rem,.92rem + .3vw,1.15rem);font-weight:700;line-height:1.45;}
  .say-q{color:var(--tone);}
  /* Read more sits under the name, not beside it, so a long role has the row to itself */
  .say-card-foot{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:12px;align-items:center;}
  .say-mono{grid-row:span 2;align-self:start;width:44px;height:44px;border-radius:50%;border:2px solid var(--tone);display:grid;place-items:center;font:800 .78rem/1 'JetBrains Mono',monospace;color:var(--navy);background:var(--paper);}
  .say-who{display:flex;flex-direction:column;gap:2px;}
  .say-who b{font-size:.95rem;line-height:1.3;color:var(--navy);}
  .say-who > span{font-size:.84rem;line-height:1.4;font-weight:500;color:var(--ink-58);}
  .say-more{grid-column:-2;justify-self:start;background:none;border:0;padding:10px 0;margin:-10px 0;font:inherit;font-size:.92rem;font-weight:700;color:var(--blue);cursor:pointer;}   /* the site's "more" link, a finger tall */
  .say-more:hover{color:var(--navy);}

  /* The window: the words scroll under the eyebrow, so the close button stays in reach. On a phone it rises from the
     foot of the screen, nearer the thumb. */
  .say-overlay{padding:24px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
  .say-sheet{display:flex;flex-direction:column;width:100%;max-width:620px;max-height:86vh;max-height:86dvh;background:#fff;border-radius:24px;box-shadow:var(--shadow-lg);overflow:hidden;}
  .say-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 20px 4px 32px;}
  .say-sheet-head .reg-close{position:static;flex:none;}
  .say-sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:0 32px 8px;}
  .say-sheet-one{padding-block:18px 30px;}
  .say-full p{font-size:1rem;line-height:1.7;color:var(--ink-75);text-indent:-.42em;}   /* each paragraph opens with a quote mark, hung in the margin so the words line up */
  .say-full p + p{margin-top:12px;}
  .say-sheet-one .say-who{margin-top:22px;}
  .say-sheet-one .say-who::before{content:"";display:block;width:28px;height:3px;border-radius:3px;background:var(--tone);margin-bottom:10px;}   /* a short rule in the person's colour over the name */
  @media (max-width:600px){
    .say-overlay{padding:0;align-items:flex-end;}
    .say-sheet{max-width:none;max-height:90vh;max-height:90dvh;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:say-rise .3s cubic-bezier(.2,.7,.2,1);}
    .say-sheet-head{padding:20px 14px 4px 22px;}
    .say-sheet-body{padding:0 22px 8px;}
  }
  @keyframes say-rise{from{transform:translateY(60px);opacity:0;}to{transform:none;opacity:1;}}

  /* ==================== THE PRIVACY PAGE (#202) ==================== */
  /* A long notice to read: one column, each section under a rule, the tables across it. On a phone each table row
     becomes a block, each cell under its column's name, since three columns cannot share 390px. */
  .notice-wrap{max-width:780px;}
  .notice-date{font-family:'JetBrains Mono',monospace;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-58);margin-top:18px;}
  .notice-contents{margin-bottom:44px;padding:20px 24px;background:var(--mist);border-radius:14px;}
  .notice-contents b{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-58);margin-bottom:10px;}
  .notice-contents ol{margin:0;padding-left:1.3em;columns:2;column-gap:32px;font-size:.92rem;line-height:1.6;}
  .notice-contents li{break-inside:avoid;}
  .notice-contents a{color:var(--blue);font-weight:600;}
  .notice-contents a:hover{text-decoration:underline;text-underline-offset:3px;}
  .notice{font-size:1rem;line-height:1.7;color:var(--ink-75);}
  .notice h2{font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.2;color:var(--navy);margin-top:48px;padding-top:28px;border-top:1px solid var(--line);}
  .notice h2:first-child{margin-top:0;padding-top:0;border-top:0;}
  .notice h3{font-size:1.05rem;line-height:1.3;color:var(--ink);margin-top:30px;}
  .notice p, .notice ul, .notice table, .notice-switch{margin-top:14px;}
  .notice ul{padding-left:1.2em;}
  .notice li + li{margin-top:8px;}
  .notice a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;}
  .notice b{color:var(--ink);}
  /* A storage key's name is one long word, which would push a phone's screen sideways (#242). */
  .notice code{font-family:'JetBrains Mono',monospace;font-size:.86em;overflow-wrap:anywhere;}
  .notice table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.55;}
  .notice th, .notice td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-top:1px solid var(--line);}
  .notice th{padding-top:0;border-top:0;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-58);}
  .notice th:last-child, .notice td:last-child{padding-right:0;}
  .notice td:first-child{font-weight:600;color:var(--ink);}
  @media (max-width:600px){
    .notice-contents ol{columns:1;}
    .notice table, .notice tbody, .notice tr, .notice td{display:block;}
    .notice thead{display:none;}
    .notice tr{padding:12px 0;border-top:1px solid var(--line);}
    .notice td{padding:0;border-top:0;}
    .notice td + td{margin-top:8px;}
    .notice td::before{content:attr(data-label);display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-58);margin-bottom:2px;}
  }