/* TheGenie.ai marketing site — stylesheet
   File: D:\Cursor\TheGenie.ai\Development\TheGenieWebsite\site\assets\site.css

   Modern, minimal, elegant, high-tech. Black ground, white type, and spot color only - blue, red,
   purple, green - never a color field, so the product imagery carries the page.
   Type: Inter for everything read, Bebas Neue for labels and numerals (PA-136 brand contract). */

:root{
  --bg:#000000;--bg-2:#0B0B0D;--surface:#141416;--surface-2:#1C1C1F;
  --line:rgba(255,255,255,.13);--line-strong:rgba(255,255,255,.24);
  --ink:#F5F5F7;--ink-2:#A1A1A6;--ink-3:#8A8A8F;
  /* spot colour, used sparingly and never as a field */
  --blue:#2997FF;--red:#FF453A;--purple:#BF5AF2;--green:#30D158;--amber:#FFD60A;--teal:#40C8E0;
  --good:#30D158;--good-lift:#30D158;
  --navy:#141416;--navy-deep:#000000;--navy-mid:#0B0B0D;--steel:#141416;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --mono:ui-monospace,'SF Mono',Consolas,Menlo,monospace;
  --max:1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;
  letter-spacing:-.014em;-webkit-font-smoothing:antialiased;text-wrap:pretty;font-feature-settings:'tnum'}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 30px}

/* ---------- labels ---------- */
.eyebrow{font-family:var(--display);font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);display:flex;align-items:center;gap:12px;line-height:1}
.eyebrow::before{content:'';width:28px;height:2px;background:currentColor;flex:none}
.eyebrow.comp{color:var(--red)}.eyebrow.insider{color:var(--purple)}.eyebrow.kit{color:var(--blue)}
.eyebrow.oh{color:var(--teal)}.eyebrow.price{color:var(--green)}.eyebrow.circle{color:var(--amber)}
.eyebrow.teal{color:var(--teal)}
em{font-style:normal;color:var(--blue)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.72);
  backdrop-filter:saturate(170%) blur(16px);-webkit-backdrop-filter:saturate(170%) blur(16px);
  border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 30px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{display:flex;align-items:baseline;gap:1px;text-decoration:none;flex:none}
.logo .a{font-size:20px;font-weight:700;letter-spacing:-.036em;color:var(--ink)}
.logo .b{font-size:20px;font-weight:300;letter-spacing:-.036em;color:var(--ink-3)}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding:7px 0;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink);border-bottom-color:var(--blue)}
.nav-cta{display:flex;gap:10px;align-items:center;flex:none}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:8px 12px;font:inherit;font-weight:600;cursor:pointer}

/* ---------- buttons: white on black; spot colour never fills a button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;
  border-radius:6px;font-family:var(--font);font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;
  border:1.5px solid var(--ink);background:var(--ink);color:#000;letter-spacing:-.006em;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.btn:hover{background:#fff;border-color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(255,255,255,.28)}
.btn.ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.06)}
.btn.sm{min-height:40px;padding:0 18px;font-size:14px;border-radius:5px}

/* ---------- hero ---------- */
.hero{padding:110px 0 92px;border-bottom:1px solid var(--line)}
.hero-in{max-width:var(--max);margin:0 auto;padding:0 30px;display:grid;grid-template-columns:1.06fr .94fr;gap:66px;align-items:center}
.hero h1{font-size:clamp(30px,7.4vw,72px);font-weight:700;letter-spacing:-.044em;line-height:1.05;text-wrap:balance;
  color:var(--ink);margin:28px 0 26px;text-wrap:balance}
.hero p.lede{font-size:clamp(17px,1.65vw,20px);color:var(--ink-2);max-width:52ch;line-height:1.6;margin-bottom:36px}
.hero p.lede b{color:var(--ink);font-weight:600}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;
  font-family:var(--mono);color:var(--ink-3);letter-spacing:.02em}

.art{position:relative}
.art figure{margin:0;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--surface);
  box-shadow:0 30px 70px -34px rgba(0,0,0,1)}
.art figure img{width:100%}
.herowheel{background:#fff;border-radius:10px;padding:26px;border:1px solid var(--line);
  box-shadow:0 30px 70px -34px rgba(0,0,0,1)}
.herowheel svg{width:100%;height:auto;display:block}
.art figcaption{padding:15px 2px 0;border:0}
.art .badge{position:absolute;left:-16px;bottom:38px;background:var(--surface-2);color:#fff;
  padding:20px 24px;border-left:3px solid var(--blue);border-radius:4px;
  box-shadow:0 26px 54px -20px rgba(0,0,0,1)}
.art .badge b{display:block;font-family:var(--display);font-size:44px;line-height:.88;letter-spacing:.01em}
.art .badge span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-top:9px;color:var(--ink-3)}
.art figcaption{padding:15px 19px;font-size:12.5px;color:var(--ink-3);line-height:1.5;border-top:1px solid var(--line)}

/* ---------- sections ---------- */
section{padding:100px 0}
section.bone{background:var(--bg-2)}
section.navy{background:var(--surface)}
.sec-h{max-width:64ch;margin-bottom:48px}
.sec-h .eyebrow{margin-bottom:22px}
.sec-h h2{font-size:clamp(32px,3.7vw,50px);font-weight:700;letter-spacing:-.04em;line-height:1.05;color:var(--ink);text-wrap:balance}
.sec-h p{margin-top:20px;color:var(--ink-2);font-size:18.5px;line-height:1.6;max-width:58ch}
.sec-h.center{margin-inline:auto;text-align:center}
.sec-h.center .eyebrow{justify-content:center}

/* ---------- moment ---------- */
.moment{display:grid;grid-template-columns:1fr 1.12fr;gap:68px;align-items:center}
.moment.flip .m-copy{order:2}
.moment .m-copy .eyebrow{margin-bottom:20px}
.moment .m-copy h2{font-size:clamp(30px,3.3vw,44px);font-weight:700;letter-spacing:-.038em;line-height:1.06;color:var(--ink);margin-bottom:22px;text-wrap:balance}
.moment .m-copy p{font-size:18px;color:var(--ink-2);line-height:1.62;margin-bottom:16px}
.moment .m-copy p b{color:var(--ink);font-weight:600}
.moment figure{margin:0;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--surface);
  box-shadow:0 30px 70px -38px rgba(0,0,0,1)}
.moment figcaption{padding:16px 20px;font-size:12.5px;color:var(--ink-3);line-height:1.5;border-top:1px solid var(--line)}
@media(max-width:960px){.moment{grid-template-columns:1fr;gap:38px}.moment.flip .m-copy{order:0}}

/* ---------- cards: ruled editorial columns ---------- */
.grid{display:grid;gap:30px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.card{background:transparent;border:0;border-top:3px solid var(--line-strong);padding:26px 0 0;display:flex;flex-direction:column}
.card.comp{border-top-color:var(--red)}.card.insider{border-top-color:var(--purple)}
.card.kit{border-top-color:var(--blue)}.card.oh{border-top-color:var(--teal)}
.card.price{border-top-color:var(--green)}.card.circle{border-top-color:var(--amber)}
.card.teal{border-top-color:var(--teal)}
.card h3{font-size:21px;font-weight:700;letter-spacing:-.028em;color:var(--ink);margin-bottom:13px;line-height:1.26}
.card p{font-size:16.5px;color:var(--ink-2);line-height:1.62;margin-bottom:14px}
.card ul{margin:0 0 0 18px;font-size:16px;color:var(--ink-2)}
.card li{margin-bottom:9px}
.card li b,.card p b{color:var(--ink);font-weight:600}

/* ---------- the wheel: drawn for a light ground, so it gets a white plate ---------- */
.wheelwrap{display:grid;grid-template-columns:minmax(300px,480px) 1fr;gap:66px;align-items:center}
.wheelwrap .wheel{background:#fff;border-radius:10px;padding:28px;box-shadow:0 30px 70px -38px rgba(0,0,0,1)}
.wheelwrap .wheel svg{width:100%;height:auto;display:block}
.wheel-notes{display:grid}
.wheel-note{padding:19px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:176px 1fr;gap:22px;align-items:baseline}
.wheel-note:last-child{border-bottom:0}
.wheel-note b{font-family:var(--display);font-size:20px;letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.wheel-note span{font-size:16.5px;color:var(--ink-2);line-height:1.58}
.wheel-note .out{display:block;font-style:normal;margin-top:7px;font-size:14px;color:var(--ink);font-weight:600}
.wheel-note .out::before{content:'';display:inline-block;width:14px;height:1px;background:currentColor;
  vertical-align:middle;margin-right:9px;opacity:.55}
.wn1 b{color:var(--amber)}.wn2 b{color:var(--purple)}.wn3 b{color:var(--blue)}
.wn4 b{color:var(--teal)}.wn5 b{color:var(--ink-2)}.wn6 b{color:var(--green)}
@media(max-width:900px){.wheelwrap{grid-template-columns:1fr;gap:38px}.wheel-note{grid-template-columns:1fr;gap:5px}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.stats div{border-top:1px solid var(--line);padding-top:22px}
.stats b{display:block;font-family:var(--display);font-size:clamp(48px,5.4vw,68px);line-height:.9;letter-spacing:.01em;color:var(--ink)}
.stats span{display:block;font-size:15px;color:var(--ink-3);margin-top:13px;line-height:1.5}

/* ---------- cta ---------- */
.cta{border-top:1px solid var(--line);padding:104px 0}
.cta .inner{max-width:var(--max);margin:0 auto;padding:0 30px;display:grid;grid-template-columns:1.2fr .8fr;gap:58px;align-items:center}
.cta h2{font-size:clamp(32px,3.8vw,50px);font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1.05;text-wrap:balance}
.cta p{font-size:18.5px;color:var(--ink-2);margin-top:20px;line-height:1.6}
.cta .btns{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:900px){.cta .inner{grid-template-columns:1fr;gap:32px}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:64px 0 56px;background:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:36px;margin-bottom:42px}
.foot-grid h3{font-family:var(--display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:17px}
.foot-grid a{display:block;font-size:14.5px;color:var(--ink-2);text-decoration:none;margin-bottom:11px}
.foot-grid a:hover{color:var(--ink)}
.foot-grid p{font-size:14.5px;color:var(--ink-3);max-width:34ch;margin-top:17px;line-height:1.6}
.foot-bar{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:26px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.foot-bar span{word-break:break-word}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
  .reveal.in{opacity:1;transform:translateY(0)}
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;left:0;right:0;top:100%;background:#000;
    isolation:isolate;max-height:calc(100vh - 72px);overflow-y:auto;
    flex-direction:column;align-items:flex-start;padding:22px 30px;gap:18px;border-bottom:1px solid var(--line)}
  .burger{display:inline-block}
  .hero{padding:76px 0 64px}
  .hero-in{grid-template-columns:1fr;gap:50px}
  .art .badge{left:0}
  .grid.two,.grid.three{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  section{padding:72px 0}
}
@media(max-width:600px){
  .stats{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .nav-cta .btn{display:inline-flex;min-height:40px;padding:0 14px;font-size:14px}
  .nav-cta .login{display:none}
  .cta{padding:68px 0}
  .wheelwrap .wheel{padding:16px}
}

/* ---------- v3: channels, subnav, steps ---------- */

/* Channel sub-navigation — the downline of whichever channel you are inside. */
.subnav{position:sticky;top:72px;z-index:55;background:rgba(0,0,0,.86);
  backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line)}
.subnav-in{max-width:var(--max);margin:0 auto;padding:0 30px;min-height:54px;display:flex;
  align-items:center;gap:26px;flex-wrap:wrap}
.subnav a.hub{font-family:var(--display);font-size:16px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;white-space:nowrap;flex:none}
.subnav a.hub:hover{color:var(--blue)}
.subnav-links{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto}
.subnav-links a{font-size:13.5px;font-weight:500;color:var(--ink-3);text-decoration:none;white-space:nowrap;
  padding:16px 0;border-bottom:2px solid transparent}
.subnav-links a:hover{color:var(--ink)}
.subnav-links a.on{color:var(--ink);border-bottom-color:var(--blue)}

/* Hero with no artwork sits full width rather than leaving a hole. */
.hero-in.wide{grid-template-columns:1fr}
.hero-in.wide h1{max-width:18ch}
.hero-in.wide p.lede{max-width:64ch}

/* The home page router: three doors, one per customer. */
.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.chan{display:flex;flex-direction:column;text-decoration:none;background:var(--surface);
  border:1px solid var(--line);border-radius:6px;padding:34px 32px 30px;
  transition:border-color .2s,background .2s,transform .2s}
.chan:hover{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-3px)}
.chan-ey{font-family:var(--display);font-size:13px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.chan-ey::before{content:'';width:24px;height:2px;background:currentColor;flex:none}
.chan.comp .chan-ey{color:var(--red)}.chan.kit .chan-ey{color:var(--blue)}
.chan.price .chan-ey{color:var(--green)}.chan.oh .chan-ey{color:var(--teal)}
.chan.insider .chan-ey{color:var(--purple)}.chan.circle .chan-ey{color:var(--amber)}
.chan h3{font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1.14;color:var(--ink);margin-bottom:14px}
.chan p{font-size:16.5px;color:var(--ink-2);line-height:1.6;margin-bottom:18px}
.chan ul{margin:0 0 22px 17px;padding:0;font-size:15.5px;color:var(--ink-2)}
.chan li{margin-bottom:8px;line-height:1.5}
.chan li b{color:var(--ink);font-weight:600}
.chan .go{margin-top:auto;font-size:14.5px;font-weight:600;color:var(--ink)}
.chan:hover .go{color:var(--blue)}

/* Cards that lead somewhere. */
a.card.link{text-decoration:none;transition:border-color .2s,transform .2s}
a.card.link:hover{border-top-color:var(--ink);transform:translateY(-2px)}
a.card.link .go{margin-top:auto;padding-top:8px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
a.card.link:hover .go{color:var(--blue)}

/* Numbered process. */
.steps{display:grid;gap:0;max-width:88ch}
.step{display:grid;grid-template-columns:76px 1fr;gap:26px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.step:last-child{border-bottom:0}
.step .n{font-family:var(--display);font-size:30px;letter-spacing:.05em;color:var(--ink-3);line-height:1}
.step b{display:block;font-size:20px;font-weight:700;letter-spacing:-.026em;color:var(--ink);margin-bottom:8px;line-height:1.24}
.step span{display:block;font-size:16.5px;color:var(--ink-2);line-height:1.62}
.step span b{display:inline;font-size:inherit;margin:0}

@media(max-width:1000px){
  .subnav{top:0;position:static}
  .subnav-in{min-height:0;padding:14px 30px;gap:12px}
  .subnav-links{margin-left:0;gap:16px}
  .subnav-links a{padding:4px 0}
  .channels{grid-template-columns:1fr}
  .step{grid-template-columns:52px 1fr;gap:16px}
}

/* ---------- v4: real wordmark, product shots on cards ---------- */

/* The production TheGenie.ai wordmark replaces the type-set logo. */
.logo{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.logo img{display:block;height:26px;width:auto}
footer .logo img{height:24px;margin-bottom:14px}

/* A card that carries a real product screen grab.
   Product cards carry a real screen grab: a card describing a product is a claim, with the shot it
   is evidence. */
.card.hasshot{border-top:0;padding-top:0}
.card .shot{margin:0 0 20px;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--surface);line-height:0;position:relative}
.card .shot::after{content:'';position:absolute;inset:0;box-shadow:inset 0 -40px 44px -30px rgba(0,0,0,.6);pointer-events:none}
.card .shot img{width:100%;height:186px;object-fit:cover;object-position:top center;display:block;
  transition:transform .35s ease}
a.card.link:hover .shot img{transform:scale(1.035)}
.card.hasshot h3{padding-top:0}
/* keep the accent as a rule under the shot rather than above the card */
.card.hasshot.comp .shot{border-bottom:3px solid var(--red)}
.card.hasshot.insider .shot{border-bottom:3px solid var(--purple)}
.card.hasshot.kit .shot{border-bottom:3px solid var(--blue)}
.card.hasshot.oh .shot,.card.hasshot.teal .shot{border-bottom:3px solid var(--teal)}
.card.hasshot.price .shot{border-bottom:3px solid var(--green)}
.card.hasshot.circle .shot{border-bottom:3px solid var(--amber)}
@media(max-width:1000px){.card .shot img{height:200px}}

/* ---------- v5: brand marks ---------- */

/* Nav lockup: genie mark + wordmark. */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo img{display:block;width:auto}
.logo .mark{height:26px}
.logo .word{height:22px}
@media(max-width:600px){.logo{gap:8px}.logo .mark{height:22px}.logo .word{height:19px}}

/* Footer: the 1ParkPlace knockout sits with the legal line. */
.foot-bar{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.foot-bar .pp{flex:none;display:inline-flex;align-items:center;text-decoration:none;opacity:.72;
  transition:opacity .18s}
.foot-bar .pp:hover{opacity:1}
.foot-bar .pp img{display:block;height:34px;width:auto}
footer .logo{margin-bottom:14px}
footer .logo .mark{height:24px}
footer .logo .word{height:20px}
@media(max-width:600px){.foot-bar{gap:14px}.foot-bar .pp img{height:28px}}

/* ---------- v6: inquiry form ---------- */
.inq{max-width:760px;margin:0 auto;display:grid;gap:20px}
.inq .who{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.whobtn{display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;font:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 18px;
  color:var(--ink-2);transition:border-color .16s,background .16s,transform .16s}
.whobtn:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.whobtn b{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.whobtn span{font-size:13.5px;line-height:1.45;color:var(--ink-3)}
.whobtn[aria-pressed="true"]{border-color:var(--green);background:rgba(48,209,88,.1)}
.whobtn[aria-pressed="true"] span{color:var(--ink-2)}
.inq .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.inq label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;color:var(--ink-2)}
.inq label.full{grid-column:1/-1}
.inq .req{font-weight:500;font-size:11.5px;color:var(--green);letter-spacing:.04em;text-transform:uppercase}
.inq .opt{font-weight:500;font-size:11.5px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.inq input,.inq textarea{font:inherit;font-size:16px;font-weight:400;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:13px 15px;width:100%}
.inq input::placeholder,.inq textarea::placeholder{color:var(--ink-3)}
.inq input:focus-visible,.inq textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue);box-shadow:none}
.inq input:user-invalid{border-color:var(--red)}
.inq textarea{resize:vertical;min-height:88px}
.inq .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.inq-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.inq-note{font-size:13.5px;color:var(--ink-3);margin:0}
.inq-error{margin:0;font-size:14.5px;color:var(--red);font-weight:600}
#inqSubmit[disabled]{opacity:.55;cursor:default}
.inq-done{max-width:620px;margin:0 auto;text-align:center;background:var(--surface);
  border:1px solid rgba(48,209,88,.4);border-radius:14px;padding:44px 36px}
.inq-done .tick{width:52px;height:52px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(48,209,88,.16);color:var(--green);font-size:26px;font-weight:700}
.inq-done h3{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--ink);margin-bottom:12px}
.inq-done p{font-size:16.5px;color:var(--ink-2);margin-bottom:10px}
.inq-done .book-line{margin-top:26px;color:var(--ink);font-weight:600}
.inq-done .btn{margin-top:8px}
.inq-done .inq-small{margin-top:16px;font-size:13px;color:var(--ink-3)}
@media(max-width:760px){.inq .who{grid-template-columns:1fr}.inq .grid2{grid-template-columns:1fr}}

/* ---------- v7: scheduler embed ---------- */
.sched{max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;box-shadow:0 30px 70px -40px rgba(0,0,0,1)}
.sched iframe{display:block;width:100%;height:min(86vh,820px);border:0}
@media(max-width:760px){.sched iframe{height:min(78vh,640px)}}

/* ---------- v8: login ---------- */
/* A returning customer looks top-right first. Quiet next to the primary action, always present. */
.nav-cta .login{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding:8px 4px;transition:color .16s}
.nav-cta .login:hover{color:var(--ink)}
@media(max-width:600px){.nav-cta .login{font-size:13.5px}}

/* ---------- v9: paint-safe reveal ---------- */
/* The reveal animation used to start from opacity:0 for EVERY element, so the hero painted as an
   empty rectangle until the observer fired - and stayed blank forever if JS failed. Now nothing is
   hidden by default; site.js adds .js-reveal to <html> and only then are below-fold blocks animated.
   Hero content is never animated, so it is visible on first paint. */
.reveal{opacity:1;transform:none}
.js-reveal .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js-reveal .reveal.in{opacity:1;transform:none}
.js-reveal .hero .reveal,.js-reveal .hero-in .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- v10: launch QA ---------- */

/* Anchor targets clear the sticky nav. */
html{scroll-padding-top:88px}

/* Reserve space for the big moment images so a slow one cannot shove the page down. */
.moment figure img{aspect-ratio:16/9;object-fit:cover;background:var(--surface)}

/* Footer had five children in a four-column grid, so the last column dropped to its own row. */
.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}
@media(max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr}}

/* Tap targets. 44px is the floor. */
.nav-links.open a{display:block;width:100%;padding:12px 0}
@media(max-width:1000px){.subnav-links a{padding:12px 0}}
.foot-grid a{display:block;padding:9px 0}

/* Booking embed: full-bleed on a phone so the Saturday column is reachable. */
@media(max-width:600px){
  /* -18px of the wrap's 30px padding: full-width enough for the seven-day calendar, while leaving a
     12px gutter on each side so a thumb still has somewhere to grab the page itself. */
  .sched{margin-inline:-18px;border-radius:0;border-left:0;border-right:0}
  .sched iframe{height:min(78vh,640px)}
}

/* The wheel's labels render at ~6px on a phone. Below 700px the notes list says the same thing. */
@media(max-width:700px){
  .wheelwrap .wheel,.herowheel{display:none}
  .art:has(.herowheel){display:none}
}

/* Visible, consistent focus ring on a dark ground. */
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

/* Sub-nav sat 1px above the nav's lower border, letting content bleed through. */
.subnav{top:73px}

.nav-links .only-mobile{display:none}
@media(max-width:1000px){.nav-links.open .only-mobile{display:block;color:var(--ink);font-weight:700}}

/* ---------- v11: the version bar ----------
   Four home page versions for review. The bar sits ABOVE the sticky nav
   and scrolls away with the page: it belongs to the review, never to the site. These pages carry
   robots:noindex and nothing on the live site links to them. */
.vbar{background:var(--surface-2);border-bottom:1px solid var(--line-strong)}
.vbar-in{max-width:1240px;margin:0 auto;padding:14px 30px 16px}
.vbar-tabs{display:flex;gap:8px;flex-wrap:wrap}
.vbar-tabs a{display:flex;flex-direction:column;gap:2px;text-decoration:none;padding:9px 15px;
  border:1px solid var(--line);border-radius:6px;background:var(--bg-2);min-height:44px;
  justify-content:center}
.vbar-tabs a b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.vbar-tabs a span{font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.vbar-tabs a.on{border-color:var(--blue);background:rgba(41,151,255,.10)}
.vbar-tabs a.on b{color:var(--blue)}
.vbar-tabs a.on span{color:var(--ink)}
.vbar-tabs a:hover span{color:var(--ink)}
.vbar-note{margin:13px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:96ch}
.vbar-note b{color:var(--ink-2)}
.vbar-note a{color:var(--blue)}
@media(max-width:700px){
  .vbar-in{padding:12px 20px 14px}
  .vbar-tabs a{flex:1 1 calc(50% - 8px)}
  .vbar-tabs a span{white-space:normal}
}

/* ---------- v12: the design review ----------
   Measured in a real browser at 320, 390 and 1440. Everything here is a number that came back wrong,
   never a matter of taste. */

/* The alternation the brand contract asks for was never visible: bone against the page ground
   measured 1.07:1 and navy 1.14:1, so products.html read as 8.2 unbroken screens. */
section.bone{background:#101014;box-shadow:inset 0 1px 0 var(--line)}
section.navy{background:#191920;box-shadow:inset 0 1px 0 var(--line)}

/* A multi-thousand-pixel animated scroll is the classic vestibular trigger, and it was the one place
   the motion discipline slipped. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Skip link: 22 pages had no way past a six-item nav for a keyboard user. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--surface-2);color:var(--ink);
  padding:12px 18px;border:1px solid var(--blue);border-radius:0 0 6px 0;font-weight:700}
.skip:focus{left:0}

/* The card shot box was a fixed 186px, growing to 200px on mobile - backwards - and it crushed
   sources ranging from 0.67:1 to 4.19:1 into one ratio, so ten cards showed ten different crops at
   render scales varying almost threefold. One ratio, and shorter on a phone rather than taller. */
.card .shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}
@media(max-width:1000px){.card .shot img{aspect-ratio:2/1}}

/* A 16:9 crop removed 58% of the width of the widest product shots - including the agent name the
   caption was pointing at. On a phone let a tall shot be tall. */
@media(max-width:760px){.moment figure img{aspect-ratio:auto}}

/* A thumb-flick outran the observer: five elements on screen, all marked in, all still at zero
   opacity - a black screen mid-scroll. Land faster everywhere, and skip the animation on phones. */
.js-reveal .reveal{transition:opacity .28s ease,transform .28s ease}
@media(max-width:760px){.js-reveal .reveal{opacity:1;transform:none;transition:none}}

/* Footer: the comment claimed a 44px floor and the padding delivered 41px. */
.foot-grid a{display:block;padding:11px 0;min-height:44px}

/* Ragged button stack at 390px, where the two labels differ by 25px. */
@media(max-width:520px){.hero-actions .btn,.cta .btns .btn{width:100%;justify-content:center}}

/* The logo and the nav CTA were both flex:none and together measured 262px into a 260px content box
   at 320px. It was surviving on sub-pixel luck. */
.logo{flex:0 1 auto;min-width:0}
@media(max-width:360px){.logo .word{height:16px;width:auto}}

/* mega-teams spent ~180px of a 320px-wide first screen on navigation chrome. */
@media(max-width:1000px){
  .subnav-in{padding:10px 20px;gap:8px}
  .subnav a.hub{font-size:14px;white-space:normal}
  .subnav-links{gap:14px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .subnav-links::-webkit-scrollbar{display:none}
}

/* The centred eyebrow centred the whole flex line, rule included, so the text sat 20px right of the
   h2 beneath it. */
.sec-h.center .eyebrow::before{display:none}
.sec-h.center .eyebrow{gap:0}

/* Five of the six lifecycle labels carried a spot colour and the sixth was grey, so "work the
   pending" read as switched off. And Bebas at 20px has a lower cap height than the 16.5px Inter it
   labels, so the label lost to the thing it labelled. */
.wheel-note.wn5 b{color:var(--teal)}
.wheel-note b{font-size:24px}

/* The hero stat badge computed to ~206px over a 260px-wide image at 320px, covering 79% of the
   product shot it was meant to annotate. Below 560px it sits under the figure instead. */
@media(max-width:560px){
  .art .badge{position:static;margin-top:14px;left:auto;bottom:auto;display:inline-block}
}

/* Tabular figures made running prose look mechanical, and negative tracking costs legibility on
   16.5px grey text held at arm's length. Keep both where they earn their place. */
@media(max-width:600px){body{letter-spacing:normal;font-feature-settings:normal}}
.stats b,.step .n,.art .badge b{font-feature-settings:'tnum'}

/* The scale had a hole between 32px and 21px, so five different structural roles shared one optical
   rank, and the closing call to action carried the same weight as the sixth section heading. */
.moment .m-copy h2{font-size:clamp(24px,3.3vw,44px)}
.cta h2{font-size:clamp(34px,3.8vw,50px)}

/* ---------- v13: the legal pages ----------
   One column, generous measure, nothing else on the screen. A privacy policy is read by somebody
   deciding whether to trust you, so it gets the same care as the sales copy. */
.legal{max-width:74ch;font-size:17px;line-height:1.72;color:var(--ink-2)}
.legal h2{font-family:var(--display);font-size:26px;letter-spacing:.01em;color:var(--ink);
  margin:52px 0 16px;padding-top:26px;border-top:1px solid var(--line)}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal p{margin-bottom:16px}
.legal b{color:var(--ink)}
.legal a{color:var(--blue)}
.inq-consent{margin-top:14px;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:62ch}
.inq-consent a{color:var(--blue)}

/* ---------- v14: verified in a 375px browser ----------
   The v12 nav fix let the logo shrink, and at 375px it shrank into an ellipsis: "TheGeni...".
   The mark alone is the recognisable half of the lockup, so below 430px the wordmark steps out. */
@media(max-width:430px){
  .logo .word{display:none}
  .logo{gap:0}
}

/* A phone saw no product imagery at all until screen six, because the hero art is the lifecycle
   wheel and the wheel is unreadable at that width. The wheel steps aside and a real screenshot
   takes its place, so the first screen carries a picture and a number. */
.phone-art{display:none}
@media(max-width:700px){
  .art:has(.herowheel-fig){display:block}
  .art:has(.herowheel-fig):not(:has(.phone-art)){display:none}
  .herowheel-fig{display:none}
  .phone-art{display:block;margin:0;border:1px solid var(--line);border-radius:5px;
    overflow:hidden;background:var(--surface)}
  .phone-art img{display:block;width:100%;height:auto}
  .phone-art figcaption{padding:14px 17px;font-size:12.5px;color:var(--ink-3);line-height:1.5;
    border-top:1px solid var(--line)}
  .hero{padding:96px 0 64px}
}

/* An SVG figure is drawn to its own frame, so cropping it to the photo aspect ratio cuts labels off
   the edges. The quadrant chart lost "HIGH VALUE" and "LOW VALUE" to a 16:9 cover crop. */
.moment figure img[src$=".svg"],.card .shot img[src$=".svg"]{aspect-ratio:auto;object-fit:contain;height:auto}

.vbar-link{display:none}

/* ---------- v15: the mobile re-test ----------
   The v12 pass closed horizontal overflow on all 23 pages and introduced two failures of its own.
   Both are here first. */

/* P1. The v12 rule let the logo shrink to solve a 2px overflow, and at 320px it absorbed the whole
   deficit: the mark measured 0.5px wide and the brand simply vanished from the header. The fix is to
   take the space out of the chrome around it instead. */
@media(max-width:400px){
  .nav-in{padding:0 16px;gap:10px}
  .nav-cta{gap:6px}
  .nav-cta .btn.sm{padding:0 12px;font-size:13px}
  .burger{padding:8px 10px;font-size:14px}
  .logo{flex:0 0 auto;min-width:44px}
  .logo .mark{height:24px;width:auto}
}
.logo{min-height:44px;align-items:center}

/* P1. [hidden] was losing to .inq{display:grid} - author sheet, equal specificity, declared later -
   so site.js set the attribute, the form stayed visible, and the booking page shipped the scheduler
   AND the five-field fallback stacked one above the other. A visitor booked a time and then scrolled
   into a second, competing booking form. */
[hidden]{display:none!important}

/* The v12 sub-nav scroller hid the page you were actually on: on mt-exclusive the active item's
   right edge sat 19px past a 414px viewport with scrollLeft at 0 and no visible scrollbar. Two
   readable rows are worth more than one hidden one. */
@media(max-width:1000px){
  .subnav-links{flex-wrap:wrap;overflow-x:visible;gap:8px 16px}
  .subnav-links a{padding:10px 0;min-width:44px;min-height:44px;display:inline-flex;align-items:center}
  .subnav a.hub{padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
}

/* The v8 block said the login is "always present" and never redeclared display, so the v1 rule
   hiding it below 600px still won. The header has no width budget for a third item at 320px, so the
   login moves into the burger menu where there is room for it. */
@media(max-width:1000px){.nav-links.open .only-mobile{display:block;color:var(--ink);font-weight:700}}

/* The review chrome outweighed the thing being reviewed: the version bar measured 327px of an 812px
   screen, pushing the hero call to action off the first screen on all four alternate home pages. */
@media(max-width:700px){
  .vbar-note{display:none}
  .vbar-in{padding:10px 16px 12px}
  .vbar-tabs{gap:6px;align-items:stretch}
  .vbar-tabs a{flex:1 1 calc(50% - 6px);padding:7px 10px;min-height:44px}
  .vbar-tabs a b{font-size:12px}
  .vbar-tabs a span{font-size:13px}
  .vbar-link{display:block;margin-top:9px;font-size:13px;color:var(--blue)}
}

/* The only sub-12px text left on the site, in the badge that carries the 3.47%. */
@media(max-width:560px){
  .art .badge span{font-size:12px;letter-spacing:.10em}
}

/* Tap targets the v12 pass missed. */
.btn.sm{min-height:44px}
.foot-bar .pp{min-height:44px;display:inline-flex;align-items:center}

/* On a phone the hero note - the patent and copyright line - sat between the buttons and the product
   image, pushing the image to 842px on an 812px screen. It is the least urgent thing in the hero,
   so below 700px it moves under the picture. */
@media(max-width:700px){
  /* display:contents promotes the copy column's children into the hero's own flex flow, so the
     product image can be ordered above the patent line without changing the desktop layout. */
  /* The two-column grid's 48px gap became a gap between EVERY hero element once display:contents
     promoted them into the flex flow - roughly 190px of dead space above the fold. */
  .hero-in{display:flex;flex-direction:column;gap:0}
  .hero-in>div:first-child{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero p.lede{order:3;margin-bottom:26px}
  .hero .hero-actions{order:4}
  .hero .art{order:5;margin-top:26px}
  .hero .hero-note{order:6;margin-top:22px}
}

/* v15b: measured at 320x568 and 375x812. The hero was carrying desktop breathing room on a phone -
   96px of padding directly beneath a 72px sticky header, then a 30px gap under the headline. On the
   shortest phone in use that alone pushed the call to action a screen and a half down. */
@media(max-width:700px){
  .hero{padding:52px 0 54px}
  .hero h1{margin:14px 0 16px}
  .hero p.lede{margin-bottom:24px;font-size:16.5px}
  .hero .eyebrow{font-size:12.5px}
}
.burger{min-height:44px}

/* Wrapping the sub-nav made the active page visible again and took the block to 167px. Tightening
   the hub line and the row gaps brings it back near 120px while keeping every item on screen. */
@media(max-width:1000px){
  .subnav-in{padding:8px 20px}
  .subnav a.hub{font-size:13px;letter-spacing:.08em;padding:9px 0;min-height:44px}
  .subnav-links{gap:0 15px}
  .subnav-links a{padding:11px 0;font-size:13.5px;min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- v16: the lifecycle, introduced ----------
   The wheel carried the central idea of the whole business with nothing above it but a headline
   about something else. It gets its own title and claim, sitting directly over the diagram. */
.art-head{margin-bottom:22px}
.art-head h2{font-family:var(--display);font-size:clamp(26px,2.5vw,34px);letter-spacing:.012em;
  font-weight:400;margin:12px 0 10px;color:var(--ink);line-height:1.06}
.art-head p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:46ch}
.art-head p b{color:var(--ink)}
@media(max-width:700px){
  .art-head{margin-bottom:16px}
  .art-head h2{font-size:24px;margin:10px 0 8px}
  .art-head p{font-size:15px}
}

/* The lifecycle notes standing on their own, once the hero carries the diagram. Three columns of
   verbs, so the six actions read as a sequence rather than a list. */
.wheel-notes.wide{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 34px;margin-top:8px}
@media(max-width:900px){.wheel-notes.wide{grid-template-columns:1fr 1fr;gap:22px 28px}}
@media(max-width:600px){.wheel-notes.wide{grid-template-columns:1fr;gap:20px}}

/* Five versions now, so the tab row needs a fifth column and the chooser a fifth card. */
@media(max-width:900px){.vbar-tabs a{flex:1 1 calc(33.333% - 6px)}}
@media(max-width:520px){.vbar-tabs a{flex:1 1 calc(50% - 6px)}}
.vcard.v5{border-top-color:var(--green)}
.vcard.v5 b{color:var(--green)}

/* ---------- v17: the footer bar ----------
   "Made with (heart) in San Diego" carried over from the platform footer, where it lives as a PNG.
   Set as live text with an inline heart so it scales, follows the theme, and reads as "love" to a
   screen reader rather than as an unnamed image. */
.foot-legal{display:inline-flex;gap:18px}
.foot-legal a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent}
.foot-legal a:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
.madelove{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.madelove svg{fill:var(--red);flex:none;position:relative;top:.5px}

/* ---------- v18: booking is Zoom only ----------
   The five-field fallback form is gone. What replaces it is a plain link to the same calendar, shown
   only when the embed is blocked by a company network or a browser extension. */
.sched-alt{max-width:620px;margin:0 auto;text-align:center;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:38px 30px}
.sched-alt h3{font-size:22px;margin:0 0 12px}
.sched-alt p{color:var(--ink-2);font-size:16.5px;line-height:1.62;margin:0 0 24px}
.sched-alt p b{color:var(--ink)}

/* ---------- v19: Top of Mind ----------
   The opt-in. It slides in once the visitor has read something, never on arrival, and a dismissal is
   remembered on that device. Bottom-left so it stays clear of the booking CTA. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tom{position:fixed;left:24px;bottom:24px;z-index:80;width:min(374px,calc(100vw - 32px));
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:12px;
  padding:24px 24px 20px;box-shadow:0 24px 60px rgba(0,0,0,.7);
  opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease}
.tom.in{opacity:1;transform:none}
.tom-ey{font-family:var(--display);font-size:13px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--amber);margin-bottom:9px}
.tom h3{font-size:19px;line-height:1.24;margin:0 0 9px}
.tom p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.tom-form{display:flex;gap:8px;flex-wrap:wrap}
.tom-form input{flex:1 1 170px;min-width:0;background:var(--bg);border:1px solid var(--line);
  border-radius:7px;padding:0 13px;height:44px;color:var(--ink);font:inherit;font-size:16px}
.tom-form input::placeholder{color:var(--ink-3)}
.tom-form input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.tom-form .btn{height:44px;min-height:44px;padding:0 16px;font-size:14.5px;flex:none}
.tom-fine{margin:13px 0 0!important;font-size:12.5px!important;color:var(--ink-3)!important}
.tom-fine a{color:var(--blue)}
.tom-x{position:absolute;top:9px;right:11px;background:none;border:0;color:var(--ink-3);
  font-size:24px;line-height:1;cursor:pointer;padding:6px 9px;border-radius:6px}
.tom-x:hover{color:var(--ink)}
.tom-x:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:600px){
  .tom{left:12px;right:12px;bottom:12px;width:auto;padding:20px 20px 17px}
  .tom h3{font-size:17.5px}
  .tom-form .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.tom{transition:none}}

/* ---------- v20: the rotating hero ----------
   Every headline ships in the markup and the first is visible before any script runs, so the hero
   never paints empty. The grid stack makes the h1 reserve the tallest variant, so nothing moves when
   it turns over. */
.rot{display:grid}
.rot-i{grid-area:1/1;opacity:0;transition:opacity .7s ease}
.rot-i.on{opacity:1}
@media (prefers-reduced-motion:reduce){.rot-i{transition:none}}

/* The version bar's own link was a 21px target. Review chrome, but the rule is the rule. */
.vbar-link{min-height:44px;display:none;align-items:center}
@media(max-width:700px){.vbar-link{display:inline-flex}}
.vbar-note a{display:inline-block;padding:6px 0;min-height:32px}

/* The two legal links I added to the footer bar came in at 21px. */
.foot-legal a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:600px){.foot-legal{gap:20px;flex-wrap:wrap}}

/* ---------- v21: the Competition Command band ----------
   Promoted as its own thing, in a box, above the footer on everything except the title channel and
   the exclusive page itself. Scarcity should look like scarcity. */
.ccband{padding:0 0 72px;border-bottom:0}
.cc{position:relative;border:1px solid rgba(255,69,58,.34);border-radius:12px;
  background:linear-gradient(135deg,rgba(255,69,58,.10) 0%,rgba(20,20,22,.6) 46%,var(--surface) 100%);
  padding:40px 44px 38px}
.cc-tag{display:inline-block;font-family:var(--display);font-size:12.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--red);border:1px solid rgba(255,69,58,.42);
  border-radius:100px;padding:6px 15px;margin-bottom:20px}
.cc-body{display:grid;grid-template-columns:1.05fr .95fr;gap:14px 48px;align-items:start}
.cc h2{font-family:var(--display);font-size:clamp(30px,3.3vw,42px);letter-spacing:.012em;
  font-weight:400;line-height:1.04;margin:0;grid-column:1}
.cc h2 em{font-style:normal;color:var(--red)}
.cc p{margin:0;color:var(--ink-2);font-size:16.5px;line-height:1.62;grid-column:2;grid-row:1/3}
.cc p b{color:var(--ink)}
.cc-acts{display:flex;gap:11px;flex-wrap:wrap;grid-column:1;margin-top:22px}
@media(max-width:900px){
  .cc{padding:30px 26px 28px}
  .cc-body{grid-template-columns:1fr}
  .cc p{grid-column:1;grid-row:auto}
  .cc-acts{margin-top:18px}
}
@media(max-width:520px){.cc-acts .btn{width:100%;justify-content:center}}

/* ---------- v22: the free account ----------
   The CEO's mass-acquisition path, promoted accordingly. Green where Competition Command is red:
   one is scarcity, this one is an open door. */
.freeband{padding:0 0 72px}
.free{border:1px solid rgba(48,209,88,.32);border-radius:12px;
  background:linear-gradient(135deg,rgba(48,209,88,.09) 0%,rgba(20,20,22,.6) 48%,var(--surface) 100%);
  padding:44px 46px 38px}
.free-tag{display:inline-block;font-family:var(--display);font-size:12.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--green);border:1px solid rgba(48,209,88,.4);
  border-radius:100px;padding:6px 15px;margin-bottom:22px}
.free h2{font-family:var(--display);font-size:clamp(31px,3.6vw,46px);letter-spacing:.012em;
  font-weight:400;line-height:1.04;margin:0 0 16px}
.free h2 em{font-style:normal;color:var(--green)}
.free-lede{margin:0 0 30px;color:var(--ink-2);font-size:17.5px;line-height:1.62;max-width:74ch}
.free-lede b{color:var(--ink)}
.free-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:32px}
.free-steps>div{border-top:2px solid rgba(48,209,88,.34);padding-top:16px}
.free-steps b{font-family:var(--display);font-size:26px;color:var(--green);display:block;
  line-height:1;margin-bottom:9px}
.free-steps span{font-size:15.5px;line-height:1.6;color:var(--ink-2);display:block}
.free-steps span b{display:inline;font-family:inherit;font-size:inherit;color:var(--ink)}
.free-acts{display:flex;gap:11px;flex-wrap:wrap}
.btn.free-cta{background:var(--green);border-color:var(--green);color:#04220d}
.btn.free-cta:hover{background:#4ae06e;border-color:#4ae06e}
.free-fine{margin:18px 0 0;font-size:13.5px;color:var(--ink-3)}
@media(max-width:820px){
  .free{padding:32px 26px 30px}
  .free-steps{grid-template-columns:1fr;gap:20px}
}
@media(max-width:520px){.free-acts .btn{width:100%;justify-content:center}}

/* The slide-in offers an account, so it takes the green the free-account band uses. */
.tom-ey{color:var(--green)}
.btn.tom-cta{background:var(--green);border-color:var(--green);color:#04220d;width:100%;
  justify-content:center;min-height:46px}
.btn.tom-cta:hover{background:#4ae06e;border-color:#4ae06e}
.tom{border-color:rgba(48,209,88,.34)}


/* ---------- v23: the free-account front door ---------- */
/* The header now carries two calls to action with two different meanings. The green one creates an
   account; the navy one asks about an exclusive ZIP code. They are deliberately different colours
   because they are deliberately different asks. Under 760px the green one steps back into the burger
   menu, which already carries it, so a 320px header keeps logo + qualify + menu. */
.nav-cta .btn.sm.free-cta{background:var(--green);border-color:var(--green);color:#04220d}
.nav-cta .btn.sm.free-cta:hover{background:#4ae06e;border-color:#4ae06e}
@media(max-width:760px){.nav-cta .btn.sm.free-cta{display:none}}

.rost{display:grid;gap:14px;max-width:900px;margin:0 auto}
.rost>div{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:baseline;
  padding:14px 18px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.rost b{font-family:var(--display);font-size:24px;letter-spacing:.02em;color:var(--green)}
.rost span{color:var(--ink-2);font-size:14.5px;line-height:1.6}
.rost-fine{max-width:900px;margin:18px auto 0;text-align:center;color:var(--ink-3);font-size:13.5px}
@media(max-width:600px){
  .rost>div{grid-template-columns:1fr;gap:6px}
  .rost b{font-size:20px}
}
.tom-fine a{color:var(--green);text-decoration:underline;text-underline-offset:2px}

/* ---------- v24: the build stamp on the review pages ---------- */
.vbar-build{margin:10px 0 0;font-size:12px;color:var(--ink-3);opacity:.75}
@media(max-width:760px){.vbar-build{display:none}}

/* ---------- v25: the slide-in must never take a click while it is transparent ----------
   requestAnimationFrame does not run in a background tab, so the panel could leave `hidden`
   and never reach `.in`. It was then invisible AND clickable, covering the bottom-left
   corner of every page. Tying pointer-events to `.in` rather than trusting opacity means an
   un-revealed panel is inert whatever the reason. */
.tom{pointer-events:none}
.tom.in{pointer-events:auto}


/* ---------- v26: the account, created on our own page ---------- */
.su{max-width:620px;margin:0 auto;background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:14px;padding:28px 30px 30px}
.su-f{display:block;margin-bottom:20px}
.su-f>span{display:block;font-weight:600;font-size:13.5px;letter-spacing:.02em;margin-bottom:8px;
  color:var(--ink-2)}
/* 16px is the floor, deliberately: iOS Safari zooms the whole page when a focused field is any
   smaller, which throws an agent out of the form on the first tap. */
.su select,.su input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:0 14px;height:50px;color:var(--ink);font:inherit;font-size:16px}
.su select:disabled{color:var(--ink-3)}
.su select:focus-visible,.su input:focus-visible{outline:2px solid var(--green);outline-offset:2px;
  border-color:var(--green)}
.su-hint{margin:8px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.55}
.su-results{margin-top:10px;display:grid;gap:6px;max-height:280px;overflow-y:auto}
.su-hit{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;color:var(--ink);font:inherit;font-size:14.5px;cursor:pointer;line-height:1.4}
.su-hit:hover{border-color:var(--green);background:rgba(48,209,88,.08)}
.su-hit:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.su-none{margin:10px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.6}
.su-esc{background:none;border:0;color:var(--green);font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.su-chosen{margin:0 0 10px;font-size:14px;color:var(--ink-2)}
.su-chosen b{color:var(--ink)}
.su-acts{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:16px}
.su-acts .btn{flex:none}
.su-msg{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.su-msg.warn{color:var(--amber)}
.su-msg.ok{color:var(--green)}
.su-inline{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.su-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.su-grid .su-wide{grid-column:1 / -1}
.su-hand h3,.su-done h3,.su-down h3{margin:0 0 8px;font-size:20px}
.su-hand>p,.su-done p,.su-down p{margin:0 0 16px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
@media(max-width:600px){
  .su{padding:22px 20px 24px}
  .su-grid{grid-template-columns:1fr}
  .su-acts .btn{width:100%}
}