@font-face{
  font-family:"AwDisplay";
  src:url("/fraunces-latin-700-normal.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
:root{
  --ink:#0D1826;--deep:#17293E;--surface:#FFFFFF;--panel:#F6F7F9;
  --panel2:#EFF1F4;--line:#DFE3E8;--line2:#EAEDF1;
  --accent:#D6A044;--accent-dk:#8F6414;--accent-lt:#FCF4E6;
  --on-accent:#17202B;--body:#3F4B5B;--strong:#0D1826;
  --muted:#6B7787;--on-dark:#FFFFFF;--on-dark-2:#B9C4D2;
  --on-dark-3:#8595A8;--rule-dark:#27384C;
  --wa:#0F7A41;--danger:#A3312A;--danger-bg:#FDF0EF;--danger-line:#F0C9C5;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --disp:"AwDisplay",Georgia,"Times New Roman",serif;
  --pad:clamp(22px,5.6vw,34px);
  --sec:clamp(76px,9vw,104px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--body);background:var(--surface);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--accent-dk)}

.wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:720px}
.mid{max-width:880px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:var(--ink);
  border-bottom:1px solid var(--rule-dark)}
.head-in{max-width:1080px;margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:18px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand .mk{width:27px;height:27px;display:block}
.brand .wm{height:17px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{color:var(--on-dark-2);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:6px 0;border-bottom:1.5px solid transparent}
.nav a:hover{color:#fff}
.nav a[aria-current]{color:#fff;border-bottom-color:var(--accent)}
.navcta{background:var(--accent);color:var(--on-accent)!important;font-weight:700;
  font-size:14.5px;padding:9px 16px!important;border-radius:7px;text-decoration:none;
  border:none!important;white-space:nowrap}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule-dark);
  border-radius:7px;width:40px;height:36px;cursor:pointer;position:relative;padding:0}
.burger span{display:block;height:1.6px;width:17px;background:#E8EDF4;margin:3.4px auto;
  transition:transform .18s,opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:800px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--ink);
    border-bottom:1px solid var(--rule-dark);flex-direction:column;align-items:stretch;
    gap:0;padding:6px var(--pad) 18px;display:none}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--rule-dark);font-size:16px}
  .nav a[aria-current]{border-bottom-color:var(--rule-dark)}
  .navcta{margin-top:14px;text-align:center;padding:14px 16px!important;font-size:16px}
}

/* ---------- type ---------- */
.disp{font-family:var(--disp);font-weight:700}
h1{font-family:var(--disp);font-weight:700;
  font-size:clamp(30px,5.6vw,50px);line-height:1.1;letter-spacing:-.018em;
  color:var(--strong)}
h2{font-family:var(--disp);font-weight:700;
  font-size:clamp(23px,3.4vw,33px);line-height:1.2;letter-spacing:-.012em;
  color:var(--strong)}
h3{font-size:18px;font-weight:700;color:var(--strong);line-height:1.4}
.eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-dk);font-weight:800}
.eyebrow.on-dark{color:var(--accent)}
.lead{font-size:clamp(17.5px,2.1vw,20px);line-height:1.6;color:var(--body)}
p+p{margin-top:1em}
.sml{font-size:14.5px;color:var(--muted);line-height:1.6}
strong,b{color:var(--strong);font-weight:650}

/* ---------- sections ---------- */
section{padding:var(--sec) 0}
.band{background:var(--panel)}
.band-dark{background:var(--ink);color:var(--on-dark-2)}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark strong,.band-dark b{color:#fff}
.band-dark a{color:var(--accent)}
.band-dark a.btn{color:var(--on-accent)}
.shead{margin-bottom:clamp(34px,4.5vw,48px)}
.shead .eyebrow{display:block;margin-bottom:13px}
.shead h2+p{margin-top:14px;max-width:660px}
/* a short, firm line under a section lead — the position we take */
.shead .stance{margin-top:14px;max-width:660px;padding-left:14px;border-left:3px solid var(--accent);
  font-weight:650;color:var(--strong);font-size:16.5px;line-height:1.5}

/* ---------- page masthead ---------- */
.masthead{background:var(--ink);color:var(--on-dark-2);
  padding:clamp(42px,7vw,78px) 0 clamp(40px,6vw,66px)}
.masthead .eyebrow{display:block;color:var(--accent);margin-bottom:16px}
.masthead h1{color:#fff;max-width:17ch}
.masthead .lead{color:var(--on-dark-2);margin-top:18px;max-width:640px}
.masthead .lead strong{color:#fff}

/* ---------- hero (home) ---------- */
.hero{background:var(--ink);color:var(--on-dark-2);
  padding:clamp(44px,7vw,84px) 0 clamp(48px,7vw,86px)}
.hero .eyebrow{display:block;color:var(--accent);margin-bottom:18px}
.hero h1{color:#fff;max-width:18ch;font-size:clamp(31px,5.4vw,53px)}
.hero .lead{color:var(--on-dark-2);margin-top:20px;max-width:620px}
.hero .lead strong{color:#fff}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:32px}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);
  font-weight:750;font-size:16.5px;padding:15px 24px;border-radius:9px;
  text-decoration:none;border:none;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 20px rgba(214,160,68,.22)}
.btn:hover{filter:brightness(1.05)}
.btn:active{filter:brightness(.93)}
.btn-ghost{background:transparent;color:#fff;box-shadow:none;
  border:1px solid var(--rule-dark);font-weight:600}
.btn-ghost:hover{border-color:#4A5D75;filter:none}
.btn-dark{background:var(--ink);color:#fff;box-shadow:none}
.ctanote{font-size:14px;color:var(--on-dark-3)}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,24px)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media(min-width:700px){.g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:clamp(20px,2.6vw,28px)}
.card.tint{background:var(--panel);border-color:var(--line2)}
.card h3{margin-bottom:8px}
.card p{font-size:15.5px}

/* numbered list */
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:52px;
  padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
.steps li[data-n]:before{content:attr(data-n)}
.steps li:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--accent-dk);
  font-variant-numeric:tabular-nums}
.steps h3{margin-bottom:6px}

/* plain feature list */
.flist{list-style:none}
.flist li{padding:14px 0 14px 26px;position:relative;border-bottom:1px solid var(--line);
  font-size:16px}
.flist li:last-child{border-bottom:none}
.flist li:before{content:"";position:absolute;left:0;top:23px;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--accent-dk)}
.flist.tight li{padding-top:10px;padding-bottom:10px;font-size:15.5px}
.flist.check li:before{border:none;width:auto;height:auto;top:13px;
  content:"\2713";color:var(--accent-dk);font-weight:800;font-size:14px}
.flist.cross li:before{border:none;width:auto;height:auto;top:12px;
  content:"\00D7";color:var(--muted);font-weight:800;font-size:17px;line-height:1}

/* ---------- WhatsApp message specimen ---------- */
.msgwrap{max-width:430px}
.msg{background:var(--ink);border-radius:14px;padding:22px 22px 20px;color:var(--on-dark-2)}
.msg .mh{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  font-weight:800;padding-bottom:13px;margin-bottom:15px;border-bottom:1px solid var(--rule-dark)}
.msg .item{padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #1E2D40}
.msg .item:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
.msg .item b{display:block;color:#fff;font-size:15.5px;line-height:1.4;
  font-weight:650;margin-bottom:5px}
.msg .item span{display:block;font-size:14px;line-height:1.5;color:var(--on-dark-2)}
.msg .src{display:block;font-size:12.5px;color:var(--on-dark-3);margin-top:6px}

/* ---------- split layouts (breaks the one-shape-per-section rhythm) ---------- */
.split{display:grid;gap:clamp(30px,4.5vw,58px);grid-template-columns:1fr;
  align-items:center}
.split.top{align-items:start}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split.wide-text{grid-template-columns:1.12fr .88fr}
  .split.wide-fig{grid-template-columns:.9fr 1.1fr}
  .split.rev>*:first-child{order:2}
}
.hero .split{align-items:center}
/* desktop: keep the CTA and its note above the fold on a ~900px-tall window */
@media(min-width:900px){
  .hero{padding-top:40px}
  .hero .eyebrow{margin-bottom:14px}
  .hero h1{line-height:1.05}
  .hero .lead{margin-top:16px;line-height:1.55}
  .hero .cta-row{margin-top:24px}
}

.band-dark .lead{color:var(--on-dark-2)}
.flist.on-dark li{border-bottom-color:var(--rule-dark);color:#fff}
.flist.on-dark li:before{color:var(--accent)}
.g5{grid-template-columns:1fr 1fr}
@media(min-width:760px){.g5{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.g5{grid-template-columns:repeat(5,1fr)}}
.g4{grid-template-columns:1fr}
@media(min-width:620px){.g4{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.g4{grid-template-columns:repeat(4,1fr)}}

/* ---------- photos ---------- */
.face .art img{display:block;width:100%;height:100%;object-fit:cover}

/* statement band — a photo under an ink wash, so text contrast never depends on
   what the photo happens to show */
.statement{background:linear-gradient(color-mix(in srgb,var(--ink) 84%,transparent),
  color-mix(in srgb,var(--ink) 92%,transparent)),var(--ink);
  color:var(--on-dark-2);padding:clamp(64px,10vw,120px) 0}
.statement h2{color:#fff;font-size:clamp(30px,5.2vw,52px);line-height:1.08;max-width:16ch}
.statement .lead{color:var(--on-dark-2);margin-top:18px;max-width:600px}
.statement .lead strong{color:#fff}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;list-style:none}
.pills li{border:1px solid color-mix(in srgb,#fff 28%,transparent);color:#fff;border-radius:99px;
  padding:8px 16px;font-size:15px;font-weight:600}

/* ---------- floating WhatsApp button (every page) ---------- */
.wa-fab{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;align-items:center;gap:9px;
  background:var(--wa);color:#fff;text-decoration:none;font-weight:700;font-size:15px;
  padding:12px 18px 12px 14px;border-radius:99px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.wa-fab:hover{filter:brightness(1.08)}
.wa-fab svg{width:22px;height:22px;flex:none}
/* floating signup button — phones and tablets only (the header CTA is inside the burger
   there). It sits left of the WhatsApp button, which goes icon-only to make room. */
.cta-float{display:none}
@media(max-width:800px){
  .wa-fab{width:56px;height:56px;padding:0;justify-content:center}
  .wa-fab span{display:none}
  .cta-float{display:flex;align-items:center;justify-content:center;position:fixed;
    left:16px;right:84px;bottom:16px;z-index:50;height:56px;border-radius:14px;
    background:var(--accent);color:var(--on-accent);font-weight:750;font-size:16.5px;
    text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.3);
    transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;
    transition:transform .3s cubic-bezier(.3,.7,.3,1),opacity .3s}
  .cta-float.show{transform:none;opacity:1;pointer-events:auto}
  /* room at the end of the page, so the last footer lines are never under the buttons */
  body:has(.cta-float) .site-foot{padding-bottom:104px}
}
@media(max-width:800px) and (prefers-reduced-motion:reduce){.cta-float{transition:none}}

.ico{width:26px;height:26px;display:block;color:var(--accent-dk)}

/* ---------- flip cards (home: who it is for) ----------
   Hover flips on desktop; on a phone a tap focuses the card, which flips it too. */
.flip{perspective:1100px;outline:none;cursor:pointer}
/* both faces sit in the same grid cell, so the card is as tall as whichever side needs
   more room — the back can never overflow, whatever the phone width */
.flip-in{position:relative;display:grid;height:100%;transition:transform .6s cubic-bezier(.3,.7,.3,1);
  transform-style:preserve-3d}
/* tap (or Enter/Space) toggles .flipped; a mouse also flips on hover */
.flip.flipped .flip-in{transform:rotateY(180deg)}
@media(hover:hover){.flip:hover .flip-in{transform:rotateY(180deg)}}
.flip:focus-visible .face{box-shadow:0 0 0 3px var(--accent)}
.face{grid-area:1/1;position:relative;border-radius:14px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}
.face.front{min-height:300px}
.flips{grid-template-columns:1fr}
@media(min-width:620px) and (max-width:899px){.flips{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.flips{grid-template-columns:repeat(3,1fr)}}
.face .art{flex:1 1 auto;min-height:0;aspect-ratio:3/2;background:var(--panel2)}
.face .ft{flex:none}
.face .ft{padding:14px 20px 16px}
.face .ft h3{font-family:var(--disp);font-size:21px}
.face .hint{display:block;margin-top:2px;font-size:13px;color:var(--accent-dk);font-weight:700}
.hint .tap{display:none}
@media(hover:none){.hint .hov{display:none} .hint .tap{display:inline}}
.face.back{transform:rotateY(180deg);background:var(--ink);border-color:var(--ink);
  color:var(--on-dark-2);padding:22px 22px 24px;justify-content:center}
.face.back h3{font-family:var(--disp);font-size:20px;color:#fff;margin-bottom:8px}
.face.back ul{list-style:none}
.face.back li{position:relative;padding:7px 0 7px 22px;font-size:15px;line-height:1.4;
  border-bottom:1px solid var(--rule-dark);color:#fff}
.face.back li:last-child{border-bottom:none}
.face.back li:before{content:"\2713";position:absolute;left:0;top:8px;color:var(--accent);font-weight:800}
.face.back .bnote{font-size:13px;color:var(--on-dark-3);margin-top:10px;line-height:1.45}
@media(prefers-reduced-motion:reduce){.flip-in{transition:none}}

/* ---------- phone carousels (home) ----------
   Below 620px the three card rows scroll sideways and snap; the next card peeks in so
   it is obvious there is more. Dots and auto-advance come from CAROUSEL_JS. */
.dots{display:none}
/* the loop's copies exist only where the row scrolls; there they keep the exact layout of
   the card they copy (forcing display:block on them collapsed a flex card's spacing) */
@media(min-width:620px){.carousel>[data-clone]{display:none}}
@media(max-width:619px){
  .carousel{display:grid;list-style:none;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:0 calc(-1 * var(--pad));padding:4px var(--pad) 10px;scroll-padding:0 var(--pad);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:14px}
  .carousel::-webkit-scrollbar{display:none}
  .carousel>*{scroll-snap-align:start;grid-column:auto}
  .carousel.g5{grid-auto-columns:62%}
  /* numbered steps, as cards */
  .steps.carousel li{background:var(--surface);border:1px solid var(--line);
    border-radius:12px;padding:20px;margin:0}
  .steps.carousel li:before{position:static;display:block;margin-bottom:8px}
  .band .carousel>.card{background:var(--surface)}
  .dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
  .dots button{width:8px;height:8px;padding:0;border:0;border-radius:4px;
    background:var(--line);cursor:pointer;transition:width .25s,background .25s}
  .dots button.on{width:22px;background:var(--accent-dk)}
}

/* ---------- short-copy helpers ---------- */
.more{margin-top:30px}
.on-dark-note{color:var(--on-dark-3);margin-top:24px}
/* how it works: source chips, the four labels, the lead-list comparison */
.chips{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:760px){.chips{grid-template-columns:repeat(4,1fr);gap:14px}}
.chip{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:15px 16px;font-weight:650;font-size:15px;line-height:1.3;color:var(--strong)}
.chip .ico{flex:none;width:24px;height:24px}
.four{list-style:none;counter-reset:f;display:grid;gap:12px;margin-top:26px}
.four li{counter-increment:f;display:flex;align-items:center;gap:14px;font-weight:650;
  font-size:17px;color:var(--strong)}
.four li:before{content:counter(f);flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:var(--accent);display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800}
.versus{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.vs-row{display:grid;grid-template-columns:1fr 1fr}
.vs-row>div{padding:14px 16px;font-size:15px;line-height:1.4;border-top:1px solid var(--line)}
.vs-row>div:first-child{border-right:1px solid var(--line)}
.vs-head>div{border-top:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.vs-head>div:first-child{color:var(--accent-dk)}
.vs-head>div:last-child{color:var(--muted)}
.vs-yes{color:var(--strong);font-weight:650}
.vs-no{color:var(--muted)}
.vs-yes:before{content:"\2713\00A0\00A0";color:var(--accent-dk);font-weight:800}
.vs-no:before{content:"\00D7\00A0\00A0";font-weight:800}
.side-h{font-family:var(--disp);font-size:clamp(22px,2.8vw,27px);line-height:1.22}

/* why WhatsApp: three benefits, each with a solid brass badge */
.wa-points{list-style:none;display:grid;gap:16px;margin-top:28px}
.wa-points li{display:flex;align-items:center;gap:16px;font-size:18px;font-weight:650;color:#fff}
.wa-points .ic{flex:none;width:48px;height:48px;border-radius:14px;background:var(--accent);
  display:flex;align-items:center;justify-content:center}
.wa-points .ic .ico{width:24px;height:24px;color:var(--on-accent)}
.cta-band{padding:clamp(64px,9vw,96px) 0}
.band-dark .pills{margin-top:26px}

/* ---------- phones: room to breathe ----------
   Less text only helps if it has space around it. Bigger gaps between the parts of a
   section, bigger headlines, looser leads. */
@media(max-width:699px){
  h2{font-size:27px;line-height:1.18}
  .lead{font-size:17.5px;line-height:1.62}
  .shead .eyebrow,.eyebrow[style*="display:block"]{margin-bottom:16px!important}
  .shead h2+p,.shead .lead{margin-top:16px}
  .hero{padding:48px 0 64px}
  .hero h1{font-size:34px;line-height:1.1}
  .hero .lead{margin-top:20px}
  .hero .cta-row{margin-top:30px}
  .tile{padding:24px 22px}
  .tile h3{margin-top:16px;font-size:18px;line-height:1.3}
  .card{padding:24px 22px}
  .dots{margin-top:20px}
  .masthead{padding:52px 0 48px}
  .masthead h1{font-size:32px}
  .masthead .lead{margin-top:18px}
}

/* ---------- home: product UI ----------
   The phone feed, the sources flow, the opportunity cards, the two-question fit,
   the three steps and the pilot form. Phone first; the desktop layout is the split. */

/* phone feed (hero) */
.hero-feed{display:flex;justify-content:center}
.phone{width:100%;max-width:340px;border-radius:30px;border:8px solid #05090f;background:var(--panel2);
  overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.ph-top{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--wa);color:#fff}
.ph-top .mk{width:30px;height:30px;padding:4px;border-radius:50%;background:var(--ink)}
.ph-top b{display:block;font-size:15px;line-height:1.2}
.ph-top small{display:block;font-size:11.5px;opacity:.85}
.ph-body{padding:12px 10px 14px;display:flex;flex-direction:column;gap:8px}
.ph-day{align-self:center;font-size:11px;color:var(--muted);background:var(--surface);
  padding:3px 10px;border-radius:7px;letter-spacing:.03em}
.ph-msg{position:relative;background:var(--surface);border-radius:10px;border-top-left-radius:3px;
  padding:9px 11px 18px;font-size:13px;line-height:1.4;color:var(--body);max-width:94%}
.ph-msg b{display:block;color:var(--strong);font-size:14px;margin-top:5px}
.ph-msg .d{display:block;margin-top:2px}
.ph-msg .src{display:block;margin-top:4px;font-size:11.5px;color:var(--muted);font-style:italic}
.ph-msg .t{position:absolute;right:9px;bottom:4px;font-size:10.5px;color:var(--muted)}
.ph-intro{font-weight:650;color:var(--strong);padding-bottom:16px}

/* the type label used on the feed and the cards */
.kind{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;background:var(--accent-lt);color:var(--accent-dk)}
.kind-tender{background:var(--panel2);color:var(--strong)}
.kind-signal{background:var(--ink);color:var(--accent)}

/* sources → Awantar → opportunities */
.flow{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
.flow-in{width:100%}
.flow-label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}
.flow-src{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.flow-src li{font-size:13px;line-height:1.3;padding:5px 11px;border-radius:99px;border:1px solid var(--line);
  color:var(--body);background:var(--surface);white-space:nowrap;margin:0;height:auto}
.flow-src li.more{border-style:dashed;color:var(--muted)}
.flow-arrow{width:2px;height:26px;background:var(--line);position:relative;margin:8px 0}
.flow-arrow:after{content:"";position:absolute;left:-5px;bottom:-2px;border:6px solid transparent;
  border-top-color:var(--line);border-bottom:0}
.flow-mid{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:12px;
  padding:12px 20px;font-weight:800;letter-spacing:.16em;font-size:14px}
.flow-mid .mk{width:24px;height:24px}
.flow-out{background:var(--accent);color:var(--on-accent);border-radius:12px;padding:12px 22px}
.flow-out b{display:block;font-size:16px}
.flow-out span{font-size:13px}

/* opportunity cards */
.opp{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;
  display:flex;flex-direction:column;gap:8px}
.opp-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.opp-where{font-size:13px;font-weight:700;color:var(--muted)}
.opp h3{font-family:var(--disp);font-size:22px;line-height:1.2;margin-top:6px}
.opp p{font-size:15px;line-height:1.5}
.opp .opp-src{font-size:13px;color:var(--muted);font-style:italic}
.opp-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line2);display:flex;
  align-items:center;justify-content:space-between}
.opp-foot a{font-weight:700;font-size:15px;text-decoration:none}
.ex{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:2px 8px}
.trust{display:flex;align-items:center;gap:8px;margin-top:22px;font-weight:650;color:var(--strong)}
.tick{width:20px;height:20px;color:var(--accent-dk);flex:none}

/* could it help you? — two questions */
.fit{max-width:640px;margin:0 auto}
.fit form{margin-top:26px}
.fit label[for]{margin-top:0}
.fit input[type=text]{font-size:17px;padding:15px 16px;background:var(--surface)}
.want{border:0;margin-top:22px;padding:0}
.want legend{font-size:14.5px;font-weight:650;color:var(--strong);margin-bottom:10px;padding:0}
.want{display:flex;flex-wrap:wrap;gap:10px}
.want legend{width:100%}
.pick{position:relative;margin:0!important;cursor:pointer}
.pick input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.pick span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:99px;
  border:1px solid #CBD2DA;background:var(--surface);font-weight:650;font-size:15.5px;color:var(--body)}
.pick input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.pick input:focus-visible+span{box-shadow:0 0 0 3px var(--accent)}
.fit form .btn{margin-top:26px;width:100%;text-align:center}
@media(min-width:620px){.fit form .btn{width:auto}}
#fit-result{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.fit-for{font-size:17px;color:var(--strong)}
.fit-cards{display:grid;gap:10px;margin:16px 0 14px}
.fit-card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;padding:14px 16px}
.fit-card b{display:block;color:var(--strong)}
.fit-card span{font-size:15px}
#fit-result .btn{margin-top:18px}

/* the problem: the sources diagram. The image (Nikunj's) from 700px up, over a soft
   brass glow; on phones its labels would be ~5px, so the CSS flow shows instead. */
.problem{position:relative;overflow:hidden}
.problem-split{display:grid;gap:34px;align-items:center}
.flow-img{display:block;width:100%;height:auto}
/* phones: Nikunj's mobile illustration (its own dark panel), sized so the labels stay readable */
/* phones: the wide diagram gives way to a ~110px signature that closes the section and
   leads into See it in action; the section's bottom padding is trimmed to match */
.mech{display:none}
@media(max-width:699px){
  .problem{padding-bottom:30px}
  .problem-split{gap:26px}
  .problem-visual .flow-img{display:none}
  .mech{display:flex;flex-direction:column;align-items:center;gap:3px;max-width:340px;margin:0 auto}
}
.mech-src{display:block;width:100%;height:auto;overflow:visible}
.mech-lbl{fill:var(--muted);font-family:var(--sans);font-size:9.5px;font-weight:600;
  paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.mech-ln{fill:none;stroke:var(--accent);stroke-width:1;opacity:.7}
.mech-dot{fill:var(--accent)}
.mech-core{display:flex;align-items:center;gap:7px}
.mech-core .mk{width:20px;height:20px}
.mech-core img{display:block;height:13px;width:auto}
.mech-out{display:flex;flex-direction:column;align-items:center;gap:3px}
.mech-arrow{position:relative;width:1px;height:10px;background:var(--accent)}
.mech-arrow:after{content:"";position:absolute;left:-3.5px;bottom:-3px;border:4px solid transparent;
  border-top-color:var(--accent);border-bottom:0}
.mech-out b{font-size:12.5px;line-height:1.3;font-weight:700;color:var(--strong);letter-spacing:.02em}
.flow-res{list-style:none;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.flow-res li{background:var(--surface);border:1px solid var(--accent);border-radius:10px;
  padding:8px 12px;font-weight:700;font-size:13.5px;color:var(--strong);white-space:nowrap}
.flow-src li{box-shadow:0 2px 8px rgba(13,24,38,.06)}
.flow-mid{box-shadow:0 0 0 6px var(--accent-lt),0 10px 30px rgba(214,160,68,.35)}
@media(min-width:700px){
  /* copy leads, the illustration supports: wider text column, larger headline, a smaller
     image pushed to the right with white space around it */
  .problem-split{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px)}
  .problem h2{font-size:clamp(28px,3.6vw,40px);line-height:1.15}
  .problem .lead{margin-top:20px!important;max-width:520px}
  .problem-visual{position:relative;justify-self:end;width:100%;max-width:480px}
  .problem-visual:before{content:"";position:absolute;inset:8% 4%;border-radius:50%;
    background:radial-gradient(closest-side,var(--accent-lt),transparent);z-index:0}
  .flow-img{display:block;position:relative;z-index:1}
  .problem-visual .flow{display:none}
}

/* how it works (home): steps and WhatsApp on the left, the phone on the right — the
   whole section fits one laptop screen */
.how3.stack{grid-template-columns:1fr!important;gap:10px;margin-top:26px}
.wa-note{margin-top:22px;font-size:16px;line-height:1.55;max-width:460px}
.how-split{display:grid;gap:36px}
@media(min-width:900px){
  .how-sec{padding:36px 0;scroll-margin-top:62px}
  .how-split{grid-template-columns:1.05fr .95fr;align-items:center;gap:48px}
  .how-sec .side-phone{max-width:none;margin:0}
  .how-sec .side-phone img{width:auto;max-width:100%;height:min(540px,calc(100vh - 218px));
    margin:0 auto}
}

/* see it in action — structured opportunity previews (home #examples only) */
.icard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;
  display:flex;flex-direction:column;gap:10px}
.icard-top{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px}
/* the example tag stays on one line beside the type, so all three headings line up */
.icard-top .ex{white-space:nowrap;flex:none;font-size:9px;letter-spacing:.06em;padding:2px 7px}
.icard h3{font-family:var(--disp);font-size:21px;line-height:1.2;margin-top:4px}
.icard-where{font-size:13.5px;font-weight:700;color:var(--muted);margin-top:-6px}
.icard-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:12px 0;
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.icard-fields dt{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.icard-fields dd{font-size:14px;line-height:1.35;color:var(--strong);font-weight:600;margin-top:2px}
.icard-fields dd.nd{color:var(--muted);font-weight:500;font-style:italic}
.icard-note{font-size:14px;line-height:1.45;padding:9px 11px;border-radius:9px}
.icard-note b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.icard-note.why{background:var(--accent-lt);color:var(--strong)}
.icard-note.why b{color:var(--accent-dk)}
.icard-note.need{background:var(--panel);color:var(--body)}
.icard-note.need b{color:var(--muted)}
.icard-foot{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.icard-src{font-size:12.5px;color:var(--muted);font-style:italic}
.icard-foot a{font-weight:700;font-size:14.5px;text-decoration:none;white-space:nowrap}
.icard-foot .icard-cta{display:inline-flex;align-items:center;gap:12px;min-height:44px;
  padding:0 16px 0 18px;border-radius:9px;background:var(--accent);color:var(--on-accent);
  font-size:15px;font-weight:700;box-shadow:0 1px 2px rgba(13,24,38,.12);
  transition:background-color .15s,transform .15s,box-shadow .15s}
.icard-foot .icard-cta .arr{font-size:16px;line-height:1}
.icard-foot .icard-cta:hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink));
  transform:translateY(-1px);box-shadow:0 4px 10px rgba(13,24,38,.14)}
.icard-foot .icard-cta:active{transform:translateY(0);box-shadow:0 1px 2px rgba(13,24,38,.12);
  background:color-mix(in srgb,var(--accent) 80%,var(--ink))}
.icard-foot .icard-cta:focus-visible{outline:3px solid var(--accent-dk);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.icard-foot .icard-cta{transition:none}
  .icard-foot .icard-cta:hover{transform:none}}

/* could it help you — the three-step opportunity profile (home #fit only) */
.fit .fstep{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fit .fstep label{margin:0}
.fnum{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--ink);color:var(--accent);font-size:12.5px;font-weight:800;
  margin-right:10px}
.fit .fstep .fnum{margin-right:0}
.fit .want legend{display:flex;align-items:center}
.fit .want+.fielderr{margin-top:8px}
.oprofile{margin-top:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:24px;outline:none;box-shadow:0 10px 30px rgba(13,24,38,.06)}
.op-eyebrow{display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-dk)}
.op-list{margin:12px 0 22px;display:grid;gap:8px}
.op-list div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding-bottom:8px;
  border-bottom:1px solid var(--line2)}
.op-list dt{font-size:14px;color:var(--muted)}
.op-list dd{font-size:15.5px;font-weight:650;color:var(--strong)}
.op-prior{list-style:none;margin:12px 0 18px;display:grid;gap:8px}
.op-prior li{position:relative;padding-left:26px;font-weight:650;color:var(--strong)}
.op-prior li:before{content:"\2713";position:absolute;left:0;color:var(--accent-dk);font-weight:800}
.op-note{font-size:15px;color:var(--body)}
.op-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px}
.op-edit{background:none;border:0;padding:8px 0;font:inherit;font-size:15px;color:var(--accent-dk);
  text-decoration:underline;cursor:pointer}
@media(max-width:480px){.op-list div{grid-template-columns:1fr;gap:2px}}
/* the profile's final step: the pilot invitation, connected to the profile above */
.op-next{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.op-next-h{font-family:var(--disp);font-size:clamp(20px,2.4vw,23px);line-height:1.25;color:var(--strong)}
.op-next .op-note{margin-top:10px}
.op-next .op-actions .btn{flex:0 1 auto}
.op-free{margin-top:12px;font-size:13.5px;color:var(--muted)}
@media(max-width:480px){.op-next .op-actions .btn{flex:1 1 100%;text-align:center}}
/* ---------- the opportunity profile (home #fit only) ----------
   Same language as the Free Pilot section: a full-width navy section, editorial intro on
   the left, the funnel on the right in the same light form card as the pilot form. */
.fit-sec h2{color:var(--accent-lt)}
.fit-sec .fit{max-width:560px;margin:0;width:100%}
.fit-sec .fit form{margin-top:0}
.fit-sec .fit input[type=text]{background:var(--surface);border:1px solid #CBD2DA}
.fit-sec .fit input[type=text]:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.fit-sec .fnum{background:var(--accent);color:var(--on-accent)}
.fit-sec .want{margin-top:20px}
.fit-sec .pick span{background:var(--surface)}
.fit-sec .pick input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.fit-sec .fit form .btn{min-height:50px;font-size:17px}
/* the pilot form's card makes every button navy and full width; this one stays the gold CTA */
.fit-sec .formcard form .btn{background:var(--accent);color:var(--on-accent);width:auto;
  padding:14px 26px;box-shadow:0 6px 20px rgba(214,160,68,.22)}
@media(max-width:619px){.fit-sec .formcard form .btn{width:100%;font-size:16px;padding:14px 16px}}
/* the navy section's text rules must not reach into the white card */
.fit-sec .formcard .op-next-h{color:var(--strong)}
.fit-sec .formcard b,.fit-sec .formcard strong{color:var(--strong)}
.fit-sec .formcard .op-edit{width:auto;margin:0;padding:8px 2px;background:none;border:0;border-radius:0;
  font-size:15px;font-weight:600;color:var(--accent-dk);text-decoration:underline;box-shadow:none}
/* multi-select reads as checkboxes, single-select as radio buttons */
.fit-sec .want legend{flex-wrap:wrap;row-gap:2px}
.pick-hint{margin-left:10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.fit-sec .pick span:before{content:"";flex:none;width:16px;height:16px;margin-right:10px;
  border:1.5px solid #9AA5B3;background:var(--surface);box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;line-height:1;color:var(--on-accent)}
.fit-sec .pick input[type=checkbox]+span:before{border-radius:4px}
.fit-sec .pick input[type=radio]+span:before{border-radius:50%}
.fit-sec .pick input[type=checkbox]:checked+span:before{content:"\2713";background:var(--accent);
  border-color:var(--accent)}
.fit-sec .pick input[type=radio]:checked+span:before{background:var(--accent);border-color:var(--accent);
  box-shadow:inset 0 0 0 3.5px var(--ink)}
.fit-sec .pick span{padding:0 18px 0 14px}
/* the finished profile stays in the same card, laid flat — no card inside the card */
.fit-sec #fit-result{margin-top:0;padding-top:0;border-top:0}
.fit-sec .oprofile{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
@media(min-width:900px){
  .fit-split{grid-template-columns:.85fr 1.15fr;gap:clamp(40px,5vw,72px)}
  .fit-sec .fit{justify-self:end}
}
@media(max-width:699px){
  .fit-sec{padding:56px 0}
  .fit-split{gap:26px}
  .fit-sec h2{font-size:26px}
}

/* how it works: three steps */
.how3{list-style:none;display:grid;gap:12px}
@media(min-width:760px){.how3{grid-template-columns:repeat(3,1fr);gap:16px}}
.how3 li{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;font-weight:650;font-size:17px;color:var(--strong)}
.how3 span{flex:none;font-size:13px;font-weight:800;color:var(--accent);background:var(--ink);
  border-radius:8px;padding:6px 8px;letter-spacing:.04em}
.ask{margin-top:clamp(40px,6vw,64px)}

/* join the pilot */
.join .formcard{margin:0 auto}
.reassure{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--on-dark-2);font-weight:650;font-size:15px}
.reassure span{white-space:nowrap}
.reassure span:before{content:"\2713\00A0";color:var(--accent)}
.founder-note{padding:clamp(48px,7vw,72px) 0}
.founder-note p{font-size:16px}

@media(max-width:699px){
  /* the hero stays compact: the phone shows its first two items, fading out */
  .hero .split{gap:34px}
  .hero .cta-row{gap:12px}
  .hero .cta-row .btn{flex:1 1 auto;text-align:center}
  .hero-feed .phone{max-width:290px;max-height:330px;
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);
    mask-image:linear-gradient(to bottom,#000 72%,transparent)}
  .flow-src li{font-size:12.5px}
  .carousel.opps{grid-auto-columns:86%}
}
/* tablets: three cards do not fit side by side, so the row scrolls here too */
@media(min-width:620px) and (max-width:959px){
  .carousel.opps{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:44%;
    overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));
    padding:4px var(--pad) 10px;scroll-padding:0 var(--pad);scrollbar-width:none}
  .carousel.opps::-webkit-scrollbar{display:none}
  .carousel.opps>*{scroll-snap-align:start}
  .carousel.opps>[data-clone]{display:flex}
  .opps+.dots{display:flex;justify-content:center;gap:7px;margin-top:18px}
  .opps+.dots button{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:var(--line)}
  .opps+.dots button.on{width:22px;background:var(--accent-dk)}
}
.kind,.opp-foot a,.opp-where{white-space:nowrap}

/* ---------- about: mission / vision statements, founder card ---------- */
.mv .card{display:flex;flex-direction:column;gap:12px}
.mv-line{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.6vw,25px);
  line-height:1.3;color:var(--strong)}
.mv-dark{background:var(--ink);border-color:var(--ink)}
.mv-dark .mv-line{color:#fff}
.founder{display:grid;gap:18px}
@media(min-width:700px){.founder{grid-template-columns:1.6fr 1fr;align-items:end}}
.founder-contact{display:flex;flex-direction:column;gap:6px;font-size:15.5px}

/* ---------- tiles (what you get, why we exist) ---------- */
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;
  display:flex;flex-direction:column;align-items:flex-start}
.tile .tag{margin-top:auto} .tile p:has(+.tag){margin-bottom:14px}
@media(max-width:759px){.g5>:last-child{grid-column:span 2}}
.band .tile{background:var(--surface)}
.tile h3{margin:12px 0 4px;font-size:17px}
.tile p{font-size:15px;line-height:1.5}
.tag{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;padding:4px 9px;border-radius:99px}
.tag.now{background:var(--accent);color:var(--on-accent)}
.tag.later{border:1px solid var(--line);color:var(--muted)}
.tile.now{border-color:var(--accent-dk);box-shadow:inset 0 0 0 1px var(--accent-dk)}

/* ---------- WhatsApp phone mockups (cut-out WebPs, transparent round the phone) ---------- */
.side-phone{margin:0 auto;max-width:280px}
.side-phone img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
/* hero: the WhatsApp phone mockup (a cut-out WebP, transparent around the phone).
   Height-capped on desktop so the CTA beside it stays above the fold. */
.hero-phone{margin:0 auto;max-width:300px}
.hero-phone img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
/* phones and tablets (one column): the mockups show only their top — header and the
   first message — fading out, so the hero is not two screens tall. Tap to see it whole. */
.peek-more{display:none}
@media(max-width:899px){
  .hero-phone.peek,.side-phone.peek{max-width:230px;margin-top:26px}
  .peek:not(.open) .peek-img{height:235px;overflow:hidden;cursor:pointer;
    -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);
    mask-image:linear-gradient(to bottom,#000 62%,transparent)}
  .peek-more{display:flex;align-items:center;justify-content:center;position:relative;
    width:36px;height:36px;margin:-22px auto 0;padding:0;border-radius:50%;
    border:1px solid var(--rule-dark);background:var(--deep);color:#fff;cursor:pointer}
  .peek-more svg{width:18px;height:18px;transition:transform .25s}
  .peek-more::before{content:"";position:absolute;inset:-4px}   /* 44px tap area */
  .peek.open .peek-more{margin-top:14px}
  .peek.open .peek-more svg{transform:rotate(180deg)}
}
@media(min-width:900px){
  .hero .split{align-items:start}
  .hero-phone{max-width:none;width:min(100%,calc((100vh - 170px) * .513));min-width:280px}
}

/* ---------- figures ---------- */
.figure{margin:0;max-width:440px}
.figure.centre{margin-inline:auto}
.funnel{width:100%;height:auto;display:block;color:var(--strong)}
.band-dark .funnel,.hero .funnel{color:#fff}
.figure figcaption{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:18px;
  max-width:420px}
.band-dark .figure figcaption{color:var(--on-dark-3)}
.figure.centre figcaption{margin-inline:auto;text-align:center}

/* ---------- message specimen, dark-context variant ---------- */
.hero .msg,.band-dark .msg{background:var(--deep);border:1px solid var(--rule-dark)}
.msg .mnote{margin-top:16px;padding-top:14px;border-top:1px solid #23344A;
  font-size:13.5px;line-height:1.5;color:var(--accent)}
.msg.thin .mh{color:var(--on-dark-3)}
.band-dark .msg .item{border-bottom-color:#22334A}

/* ---------- quote / pull ---------- */
.pull{border-left:3px solid var(--accent);padding:4px 0 4px 22px;margin:28px 0}
.pull p{font-size:clamp(18px,2.3vw,21px);line-height:1.5;color:var(--strong);
  font-family:var(--disp);font-weight:700}
.band-dark .pull p{color:#fff}

/* ---------- source table ---------- */
.srctable{width:100%;border-collapse:collapse;font-size:15.5px}
.srctable th{text-align:left;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-dk);font-weight:800;padding:0 16px 12px 0;
  border-bottom:1px solid var(--line)}
.srctable th:last-child,.srctable td:last-child{padding-right:0}
.srctable td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.srctable td:first-child{color:var(--strong);font-weight:650;width:36%}
@media(max-width:640px){
  .srctable,.srctable tbody,.srctable tr,.srctable td{display:block;width:100%}
  .srctable thead{display:none}
  .srctable tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .srctable td{padding:0;border:none}
  .srctable td:first-child{width:auto;margin-bottom:5px}
}

/* ---------- form ---------- */
.formcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:clamp(22px,3vw,34px);max-width:560px}
label{display:block;font-size:14.5px;font-weight:650;color:var(--strong);margin:18px 0 7px}
label:first-of-type{margin-top:0}
input[type=text],input[type=tel],select{width:100%;padding:13px 14px;font-size:16px;
  font-family:inherit;color:var(--strong);background:#fff;border:1px solid #CBD2DA;
  border-radius:9px;appearance:none}
input:focus,select:focus{outline:none;border-color:var(--accent-dk);
  box-shadow:0 0 0 3px rgba(143,100,20,.15)}
.radios{display:flex;gap:9px;margin-top:5px}
.radios label{flex:1;margin:0;text-align:center;padding:13px 4px;background:#fff;
  border:1px solid #CBD2DA;border-radius:9px;cursor:pointer;font-weight:500;font-size:15px;
  position:relative}
.radios input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.radios input:checked+span{color:var(--accent-dk);font-weight:700}
.radios label:has(input:checked){border-color:var(--accent-dk);background:var(--accent-lt);
  box-shadow:inset 0 0 0 1px var(--accent-dk)}
.formcard button{width:100%;margin-top:28px;padding:16px;font-size:17px;font-weight:700;
  font-family:inherit;color:#fff;background:var(--ink);border:none;border-radius:9px;
  cursor:pointer}
.formcard button:active{background:var(--deep)}
.formcard button[disabled]{opacity:.6;cursor:default}
.fine{font-size:13.5px;color:var(--muted);margin-top:15px;line-height:1.55}
.err{font-size:14.5px;color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-line);
  border-radius:9px;padding:12px 14px;margin-top:15px}
/* signup page: the form comes first in the markup, so on a phone it is the first thing
   after the headline. On two columns it moves back to the right. */
@media(min-width:700px){.signup-grid .form-col{order:2}}
@media(max-width:699px){
  .masthead.compact{padding:26px 0 22px}
  .masthead.compact .eyebrow{margin-bottom:10px}
  .masthead.compact h1{font-size:28px}
  .masthead.compact .lead{margin-top:10px;font-size:16.5px}
  section.signup{padding-top:18px}
  .signup .formcard{padding:20px 18px}
}
/* per-field validation (get-access) */
.hint{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.fielderr{font-size:13.5px;color:var(--danger);margin-top:6px;line-height:1.45;font-weight:600}
input[aria-invalid=true]{border-color:var(--danger);background:var(--danger-bg)}
input[aria-invalid=true]:focus{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 18%,transparent)}
/* honeypot: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.optblock{margin-top:28px;padding-top:22px;border-top:1px dashed #C8CFD8}
.optblock .oh{font-size:13.5px;font-weight:700;color:var(--accent-dk)}
.optblock .os{font-size:14px;color:var(--muted)}

/* ---------- legal pages ---------- */
.legal h2{font-size:clamp(20px,2.6vw,25px);margin:40px 0 12px}
.legal h2:first-child{margin-top:0}
.legal h3{margin:24px 0 8px;font-size:16.5px}
.legal ul{margin:12px 0 0 20px}
.legal li{margin-bottom:8px}
.legal p{max-width:none}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--on-dark-3);padding:clamp(44px,6vw,64px) 0 36px;
  font-size:15px}
.foot-top{display:grid;gap:34px;grid-template-columns:1fr;
  padding-bottom:34px;border-bottom:1px solid var(--rule-dark)}
@media(min-width:760px){.foot-top{grid-template-columns:1.6fr 1fr 1fr}}
.site-foot .brand{margin-bottom:14px}
.site-foot .meaning{max-width:340px;font-size:14.5px;line-height:1.6;color:var(--on-dark-3)}
.site-foot .meaning i{color:var(--on-dark-2)}
.fcol h4{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  font-weight:800;margin-bottom:15px}
.fcol a,.fcol span{display:block;color:var(--on-dark-2);text-decoration:none;
  font-size:15px;margin-bottom:10px}
.fcol a:hover{color:#fff}
.foot-bot{padding-top:26px;display:flex;flex-wrap:wrap;gap:8px 22px;
  justify-content:space-between;font-size:13.5px}
.foot-bot a{color:var(--on-dark-3);text-decoration:none}
.foot-bot a:hover{color:var(--on-dark-2)}
.stage{display:inline-flex;align-items:center;gap:8px;background:rgba(214,160,68,.12);
  border:1px solid rgba(214,160,68,.3);color:var(--accent);border-radius:999px;
  padding:6px 14px;font-size:12.5px;font-weight:650;letter-spacing:.02em}
.stage:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}