/* klickie.me v2. Deck keys only: one glowing card, cream Satoshi, one green italic line per screen, tracked eyebrows, city lights, cream portraits, low green hairlines. */
@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-Black.woff2) format('woff2');font-weight:900;font-display:swap}
/* the ツ lives in the type stack: one glyph, Noto Sans JP (open font licence), only for U+30C4 */
@font-face{font-family:Tsu;src:url(../fonts/tsu-Bold.woff2) format('woff2');unicode-range:U+30C4;font-weight:400 900}
@font-face{font-family:Gambetta;src:url(../fonts/Gambetta-Italic.woff2) format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:Gambetta;src:url(../fonts/Gambetta-MediumItalic.woff2) format('woff2');font-style:italic;font-weight:500;font-display:swap}

:root{
 --frame:#0A1F15;            /* near black green */
 --card0:#05301D;--card1:#0D6438;--card2:#17A257;  /* deep to bright, deck page 1 */
 --ink:#FAFAF8;--ink2:rgba(250,250,248,.62);--ink3:rgba(250,250,248,.42);
 --green:#1CD987;            /* the human line */
 --line:rgba(28,217,135,.14);
 --free:#4FD8CF;--paid:#B49CFF;   /* your page: teal is free, purple is paid, plain is data (Rory, 1 Nov) */
 --u:8px;
 --sans:Satoshi,Tsu,system-ui,sans-serif;--serif:Gambetta,Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--frame);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px}
h1,h2,h3,h4,p{margin:0}
.top,main>section{max-width:440px;margin:0 auto;padding:0 16px}
.top{display:flex;justify-content:space-between;align-items:center;height:56px}
.logo{text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-.01em}
.lang{background:none;border:1px solid var(--line);border-radius:999px;color:var(--ink2);padding:5px 12px;font:500 12px/1 var(--sans);letter-spacing:.08em}
.tsu{margin-right:.04em}
.human{font:italic 400 22px/1.25 var(--serif);color:var(--green)}
.eyebrow{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}

/* hero: the only card on the site, and the only decoration */
.hero{padding-top:8px;padding-bottom:calc(var(--u)*5)}
.glow{position:relative;isolation:isolate;border-radius:22px;padding:28px 22px 24px;min-height:calc(100svh - 150px);
 display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
 background:radial-gradient(120% 90% at 100% 100%,var(--card2) 0%,var(--card1) 38%,transparent 75%),linear-gradient(150deg,var(--card0) 0%,var(--card1) 100%)}
.glow::before{content:"";position:absolute;inset:-6px;z-index:-1;border-radius:28px;
 background:radial-gradient(70% 60% at 80% 85%,rgba(28,217,135,.55),rgba(23,162,87,.25) 45%,transparent 75%);
 filter:blur(28px);animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.985)}50%{opacity:1;transform:scale(1.035)}}
.glow h1{font:700 46px/.98 var(--sans);letter-spacing:-.03em;text-wrap:balance}
.glow .human{margin-top:2px}
.btn{display:block;text-align:center;padding:17px 24px;border-radius:999px;text-decoration:none;font:700 17px/1 var(--sans);letter-spacing:-.005em}
.btn.ask{background:var(--ink);color:var(--frame);margin-top:14px}

/* feed */
main>section.feed{padding-top:calc(var(--u)*5);padding-bottom:calc(var(--u)*6);border-top:1px solid var(--line)}
.feed .eyebrow{margin-bottom:24px}
.cityhead{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.cityhead img{width:56px;height:56px;border-radius:10px;display:block}
.cityhead{font:700 20px/1.2 var(--sans);letter-spacing:-.01em}
.comm{padding:22px 0;border-bottom:1px solid var(--line)}
.comm h4{font:700 28px/1.05 var(--sans);letter-spacing:-.02em}
.full{color:var(--ink2);font-size:15px;margin:6px 0 18px}
.leader{display:flex;gap:14px;align-items:center}
.leader img{width:64px;height:64px;display:block;border-radius:12px}
.leader b{display:block;font:700 15px/1.3 var(--sans)}
.leader span{font-size:14px;color:var(--ink2)}
.week{margin-top:18px;font-size:15px;color:var(--ink2)}
.week b{color:var(--ink);font-weight:700}


/* city chips: the city lights, one tile per city */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px;margin-bottom:32px}
.chip{display:flex;flex-direction:column;gap:8px;background:none;border:0;padding:0;color:var(--ink2);font:500 14px/1.2 var(--sans);text-align:left;cursor:pointer}
.chip img{width:100%;height:auto;aspect-ratio:1;border-radius:12px;display:block;opacity:.72}
.chip[aria-pressed="true"]{color:var(--ink)}
.chip[aria-pressed="true"] img{opacity:1;outline:1px solid var(--green);outline-offset:2px}
.city{padding-top:8px}
.city+.city{margin-top:32px}
.city[hidden]{display:none}
.comm:last-child{border-bottom:0}
.ph{color:var(--ink3);font-style:normal}
.nums.ph b{color:var(--ink3)}

/* the business and closing blocks: no boxes, hairlines only */
main>section.how,main>section.biz,main>section.numbers,main>section.close{padding-top:calc(var(--u)*7);padding-bottom:calc(var(--u)*7);border-top:1px solid var(--line)}
.how .big{font:700 32px/1.08 var(--sans);letter-spacing:-.025em}
.villain{font-size:17px;color:var(--ink2);margin-bottom:20px;max-width:34ch}
.biz h2,.close h2{font:700 32px/1.08 var(--sans);letter-spacing:-.025em;text-wrap:balance}
.biz .human,.close .human{margin-top:10px}
.door{margin-top:28px}
.btn.line{border:1px solid rgba(250,250,248,.5);color:var(--ink)}
.talk{display:block;text-align:center;font-size:14px;color:var(--ink2);margin-top:12px;text-underline-offset:3px}
.firstlook{margin:28px 0 0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* numbers: big cream figure, tiny caps label under it (deck page 11) */
.nums{display:grid;grid-template-columns:1fr 1fr;gap:32px 16px}
.nums.three{grid-template-columns:repeat(3,1fr)}
.nums.one{grid-template-columns:1fr}
.num b{display:block;font:700 40px/1 var(--sans);letter-spacing:-.03em}
.nums.three .num b{font-size:30px}
.num span{display:block;margin-top:8px;font:500 10px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.close .btn.ask{margin-top:28px}

/* flow screens: one question per screen */
.flowpage main>section{border-top:0}
.flow{min-height:calc(100svh - 56px);display:flex;flex-direction:column;gap:28px;padding-top:32px!important;padding-bottom:40px!important}
.flow h1{font:700 34px/1.05 var(--sans);letter-spacing:-.025em}
.choices{display:grid;border-top:1px solid var(--line)}
.choice{display:flex;align-items:center;gap:14px;padding:22px 0;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:700 20px/1.2 var(--sans);text-align:left;cursor:pointer}
.choice::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink2)}
.choice[aria-checked="true"]::before{border-color:var(--green);background:radial-gradient(circle,var(--green) 0 40%,transparent 45%)}
.leader.big img{width:88px;height:88px;border-radius:16px}
.leader.big b{font-size:22px}
.field .eyebrow{margin-bottom:14px}
.where{display:flex;gap:14px;align-items:center}
.where img{width:96px;height:96px;border-radius:12px}
.asks{margin:0;padding:0;list-style:none;counter-reset:a;border-top:1px solid var(--line)}
.asks li{counter-increment:a;padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:14px}
.asks li::before{content:counter(a);font:500 12px/1.6 var(--sans);color:var(--ink3)}
.locked{font-size:14px;color:var(--ink3);text-align:center;padding-top:20px;border-top:1px solid var(--line)}

/* desktop: the same column widened, the feed in two columns */
@media (min-width:900px){
 .top,main>section{max-width:960px}
 .glow{min-height:56svh;padding:48px 52px}
 .glow h1{font-size:80px}
 .glow .human{font-size:30px}
 .glow .btn{align-self:flex-start}
 .glow .btn,.close .btn,.door .btn{display:inline-block;padding:18px 44px}
 .talk{text-align:left;margin-left:4px}
 .chips{grid-template-columns:repeat(6,1fr)}
 .cities{columns:2;column-gap:56px}
 .city+.city{margin-top:0}
 .city{break-inside:avoid;padding-bottom:40px}
 .how .big,.biz h2,.close h2{font-size:52px;max-width:20ch}
 .nums{grid-template-columns:repeat(4,1fr)}
 .num b{font-size:48px}
 .nums.three .num b{font-size:44px}
 .flowpage main>section{max-width:560px}
}
@media (prefers-reduced-motion:reduce){.glow::before{animation:none;opacity:.8}}
.comm h4+.leader{margin-top:16px}
.how .big{text-wrap:balance}
.keys .asks li::before{display:none}.keys .asks p{font-size:15px;color:var(--ink2)}.keys .asks b{color:var(--ink);font-size:17px}

/* review variants. hero a: the headline fills the card. hero b: plus one real line from this week */
.hero-a .glow h1,.hero-b .glow h1{font-size:min(58px,14.8vw);line-height:.95}
.heard{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(250,250,248,.18)}
.heard blockquote{margin:0;font:500 18px/1.35 var(--sans);color:var(--ink);text-wrap:pretty}
.heard figcaption{margin-top:8px;font-size:14px;color:var(--ink2)}
/* list rows: one short row per community, the city tiles above do the grouping */
.row{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.row img{width:48px;height:48px;border-radius:10px;display:block}
.row h4{font:700 20px/1.15 var(--sans);letter-spacing:-.015em}
.row .who{font-size:14px;color:var(--ink2);margin-top:2px}
.row .week{margin-top:8px;font-size:14px}
.city .row:first-child{border-top:1px solid var(--line)}
.city+.city .row:first-child{border-top:0}
.cities:has(.row) .city+.city{margin-top:0}
.cities:has(.row) .city{padding-top:0}
@media (min-width:900px){
 .hero-a .glow h1,.hero-b .glow h1{font-size:96px}
 .heard{max-width:36ch}
 .heard blockquote{font-size:22px}
 .chips:has(.chip:nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}
 .cities:has(.row){columns:2;column-gap:56px}
 .cities:has(.row) .city{padding-bottom:0}
 .row{break-inside:avoid}
}
/* review variants: the card is sized by its content, headline at the top, button at the bottom, the feed peeks in under it */
.hero-a .glow,.hero-b .glow{min-height:clamp(400px,58svh,520px);justify-content:flex-start;padding:32px 22px 24px}
.hero-a .glow .btn.ask,.hero-b .glow .btn.ask{margin-top:auto}
.hero-b .heard{margin-top:auto}
.hero-b .heard+.btn.ask{margin-top:24px}
.hero-a .glow{min-height:clamp(360px,46svh,420px)}
@media (min-width:900px){.hero-a .glow,.hero-b .glow{min-height:56svh;padding:48px 52px}}
/* review variants: the folded list, the next community peeks in faded under the second */
.peek{max-height:64px;overflow:hidden;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);pointer-events:none;border-bottom:0!important}
.showall{display:inline-block;margin-top:8px;background:none;border:0;padding:0;color:var(--ink);font:500 16px/1.5 var(--sans);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:rgba(250,250,248,.45);cursor:pointer}
.showall[hidden]{display:none}
a.showall{text-decoration:underline}
main>section.feed.allc{border-top:0;padding-top:24px}
/* review version D: the city maps as one small row */
.chips.small{grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:24px}
.chips.small .chip{font-size:12px;gap:6px}
.chips.small img{border-radius:8px}
@media (min-width:900px){.chips.small{grid-template-columns:repeat(5,96px);gap:16px}}
.feed .showall{margin-top:20px}
/* version E: one story, one button */
.hero-e .glow{min-height:clamp(340px,44svh,400px);justify-content:flex-start;padding:32px 22px 24px}
.hero-e .glow h1{font-size:min(44px,11.4vw);line-height:1}
.hero-e .glow .btn.ask{margin-top:auto}
.seenlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.seenlist li{padding:18px 0;border-bottom:1px solid var(--line)}
.seenlist li>p:first-child{font:500 20px/1.3 var(--sans);letter-spacing:-.01em;text-wrap:pretty}
.seenlist .src{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;color:var(--ink2)}
.seenlist .src img{width:24px;height:24px;border-radius:6px}
.biz h2+.villain{margin-top:14px;margin-bottom:0}
.biz .btn.ask,.close .btn.ask{margin-top:28px}
@media (min-width:900px){
 .hero-e .glow{min-height:56svh;padding:48px 52px}
 .hero-e .glow h1{font-size:72px;max-width:16ch}
 .seenlist{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
 .biz .btn.ask,.close .btn.ask{display:inline-block;padding:18px 44px}
}

/* v3: one buyer per page */
.topr{display:flex;align-items:center;gap:16px}
.navlink{font-size:14px;color:var(--ink2);text-decoration:none}
a.row{text-decoration:none;color:inherit}
.hero-long .glow h1{font-size:min(38px,9.8vw);line-height:1.05}
.how .villain{margin-bottom:24px}
.close h2+.btn.ask{margin-top:28px}
.close>.btn.ask:first-child{margin-top:0}
.btn[disabled]{opacity:.45;cursor:default;border:0}
.signin h1{margin-top:24px}
.signin .next{font-size:16px}
.signin .btn{margin-top:auto}
.keys .asks a{color:var(--ink)}
@media (min-width:900px){
 .hero-long .glow h1{font-size:64px;max-width:18ch}
 .signin .btn{margin-top:16px;align-self:flex-start;display:inline-block;padding:18px 44px}
}
a.row[hidden]{display:none}
.chips.small{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.chips.small .chip{letter-spacing:-.01em;white-space:nowrap}
@media (min-width:900px){.chips.small,.chips.small:has(.chip:nth-child(5):last-child){grid-template-columns:repeat(6,96px);gap:16px}}
/* city tiles on the phone: two rows of three wide strips, every name fits */
.chips.small{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
.chips.small img{aspect-ratio:2/1;object-fit:cover}
.chips.small .chip{font-size:14px;letter-spacing:0}
@media (min-width:900px){.chips.small,.chips.small:has(.chip:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.chips.small img{aspect-ratio:1}}
/* city tiles: one line that scrolls sideways on its own, the page never does */
.chips.small{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;margin-left:-16px;margin-right:-16px;padding:2px 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips.small::-webkit-scrollbar{display:none}
.chips.small .chip{flex:0 0 96px;scroll-snap-align:start}
.chips.small img{aspect-ratio:1}
@media (min-width:900px){.chips.small,.chips.small:has(.chip:nth-child(5):last-child){display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;overflow:visible;margin:0 0 32px;padding:0}.chips.small .chip{flex:none}}

/* ---------- the two doors: three steps, then the view (31 Oct) ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.prog{display:flex;gap:6px;max-width:440px;margin:0 auto;padding:0 16px}
.prog i{flex:1;height:3px;border-radius:2px;background:var(--line)}
.prog i.on{background:var(--green)}
.steps .flow{min-height:calc(100svh - 62px);gap:20px;padding-top:40px!important}
.steps .flow[hidden]{display:none}
.steps .flow h1{font-size:36px;text-wrap:balance}
.bigin input{width:100%;background:none;border:0;border-bottom:1.5px solid var(--ink3);border-radius:0;color:var(--ink);font:700 28px/1.2 var(--sans);letter-spacing:-.02em;padding:10px 0}
.bigin input::placeholder{color:var(--ink3)}
.bigin input:focus{outline:0;border-color:var(--green)}
.near{font-size:15px;color:var(--ink2);margin-top:-8px}
.near select{background:none;border:0;border-bottom:1px dotted var(--ink2);color:var(--ink);font:500 15px var(--sans);padding:2px 0}
.near select option,.seen select option{background:var(--frame)}
.sugg{display:grid;border-top:1px solid var(--line)}
.sugg:empty{display:none}
.hit{display:flex;align-items:center;gap:14px;padding:14px 0;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.hit img{width:48px;height:48px;border-radius:10px;flex:none}
.hit span{flex:1;min-width:0}
.hit b{display:block;font:700 17px/1.25 var(--sans)}
.hit small{display:block;font-size:14px;color:var(--ink2);margin-top:2px}
.hit em{font:italic 400 16px/1.2 var(--serif);color:var(--green);flex:none}
.hit.add b{font-weight:500;color:var(--ink2)}
.hint{font-size:18px}
.seen{font:500 26px/1.35 var(--sans);letter-spacing:-.015em;color:var(--ink2)}
.seen b{color:var(--ink);font-weight:700}
.tok{color:var(--ink);border-bottom:1.5px dashed var(--green);outline:0;padding:0 1px}
.tok:focus{background:rgba(28,217,135,.12);border-bottom-style:solid}
select.tok{background:none;border-top:0;border-left:0;border-right:0;border-radius:0;font:inherit;letter-spacing:inherit;max-width:100%;padding:0;-webkit-appearance:none;appearance:none;cursor:pointer}
.from{display:block;margin-top:14px;font:500 13px/1 var(--sans);letter-spacing:.04em;color:var(--ink3)}
.ask2 .btn.ask{margin-top:auto}
.textbtn{background:none;border:0;color:var(--ink2);font:500 15px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:center;padding:8px}

/* the view: who they are first, then one picture of the counts */
.steps main>section.sheet{padding-top:28px;padding-bottom:24px}
.sheet .who{display:flex;gap:14px;align-items:center}
.sheet .who img{width:64px;height:64px;border-radius:12px;flex:none}
.sheet .who h1{font:700 30px/1.05 var(--sans);letter-spacing:-.025em;overflow-wrap:anywhere}
.sheet .who p{font-size:15px;color:var(--ink2);margin-top:4px}
.sheet .line{margin-top:18px;font-size:17px;color:var(--ink2);max-width:36ch}
.facts{display:flex;gap:28px;margin-top:18px}
.facts b{display:block;font:700 24px/1 var(--sans);letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.facts p{font-size:13px;color:var(--ink2)}
.tag{display:inline-block;margin-top:16px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font:500 13px/1 var(--sans);color:var(--ink2)}
.hero.vis{padding-bottom:calc(var(--u)*4)}
.glow.panel{min-height:0;justify-content:flex-start;gap:20px;padding:24px 20px}
.glow.panel .eyebrow{color:rgba(250,250,248,.75)}
.cap{font-size:14px;color:rgba(250,250,248,.72);max-width:40ch}
/* community: the index, like yours against yours */
.idx .sub{margin:0 0 12px;color:rgba(250,250,248,.75)}
.idx .sub+.fogbox{margin-bottom:4px}
.idx .fogbox{margin-top:0}
.idx .num i{display:block;height:5px;border-radius:3px;width:var(--w);min-width:5px;background:var(--ink);margin-top:10px}
.idx .nums+.sub{margin-top:24px;padding-top:20px;border-top:1px solid rgba(250,250,248,.18)}
.fog{filter:blur(7px);opacity:.7;user-select:none;pointer-events:none}
/* brand: one dot per ask, lit when klickie introduced someone */
.dots{display:grid;grid-template-columns:repeat(auto-fill,minmax(7px,1fr));gap:4px}
.dots i{aspect-ratio:1;border-radius:50%;background:rgba(250,250,248,.22)}
.dots i.in{background:var(--ink)}
.glow.panel .nums.three .num b{font-size:30px}
.num.you b{color:var(--ink)}
.glow.panel .num span{color:rgba(250,250,248,.75)}
.steps main>section.board,.steps main>section.vault,.steps main>section.plans,.steps main>section.claim{padding-top:calc(var(--u)*5);padding-bottom:calc(var(--u)*5);border-top:1px solid var(--line)}
.board .eyebrow,.vault .eyebrow,.plans .eyebrow{margin-bottom:20px}
.bar{display:grid;grid-template-columns:1fr 40px;gap:6px 12px;align-items:center;padding:10px 0}
.bar span{font-size:14px;color:var(--ink2)}
.bar i{grid-column:1;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--green) var(--w),var(--line) var(--w))}
.bar b{grid-row:1/3;grid-column:2;text-align:right;font:700 20px/1 var(--sans)}
.bar.mine span{color:var(--ink);font-weight:700}
.sub{font:500 13px/1.3 var(--sans);color:var(--ink2);margin:18px 0 4px}
.fogbox{position:relative;overflow:clip;overflow-clip-margin:12px}
.fogbox .btn.onfog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 8px);padding:16px 28px;margin:0}
.plans h2,.claim h2{font:700 30px/1.08 var(--sans);letter-spacing:-.025em;margin-bottom:22px;overflow-wrap:anywhere}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg button{background:none;border:1px solid var(--line);border-radius:14px;padding:12px 6px;color:var(--ink2);font:700 15px/1.2 var(--sans);cursor:pointer}
.seg button small{display:block;font:500 13px/1.2 var(--sans);margin-top:4px}
.seg button[aria-pressed="true"]{border-color:var(--green);color:var(--ink);background:rgba(28,217,135,.08)}
.tier[hidden]{display:none}
.for{margin:18px 0 8px;font:italic 400 18px/1.3 var(--serif);color:var(--green)}
.tier dl{margin:0}
.tier dl div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.tier dt{color:var(--ink2)}
.tier dd{margin:0;font-weight:700;text-align:right}
.price{margin:22px 0 14px;font-size:14px;color:var(--ink2)}
.price b{font:700 40px/1 var(--sans);letter-spacing:-.03em;color:var(--ink);margin-right:6px}
.plans .sub{margin-top:32px}
.pack{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);transition:opacity .2s}
.pack b{display:block;font:700 17px/1.2 var(--sans)}
.pack small{display:block;font-size:13px;color:var(--green);margin-top:4px}
.pack .pp{text-align:right}.pack .pp small{color:var(--ink2)}
.pack.off{opacity:.35}
.claim .human{margin:-12px 0 24px}
.src{max-width:440px;margin:0 auto;padding:24px 16px 48px;font-size:13px;color:var(--ink3);border-top:1px solid var(--line)}
.donep .human{font-size:24px}
.donep .textbtn{align-self:flex-start;padding:0;margin-top:auto}
.donep .note{font-size:14px}
@media (min-width:900px){
 .prog,.src{max-width:560px}
 .steps .flow h1{font-size:48px}
 .glow.panel{min-height:0;padding:32px 36px}
 .claim .btn.ask,.tier .btn.ask{display:inline-block;padding:18px 44px}
}
.sheet .who h1.long{font-size:22px;overflow-wrap:anywhere}
.claim h2:has(.tsu){text-wrap:balance}
/* what to do: the first line in the open, the rest locked */
.todo{list-style:none;margin:0;padding:0;counter-reset:t}
.todo[start="2"]{counter-reset:t 1}
.todo li{counter-increment:t;display:grid;grid-template-columns:28px 1fr;gap:4px 0;padding:16px 0;border-bottom:1px solid var(--line)}
.todo li::before{content:counter(t);grid-row:1/3;font:700 15px/1.4 var(--sans);color:var(--green)}
.todo b{font:700 19px/1.3 var(--sans);letter-spacing:-.01em}
.todo span{font-size:15px;color:var(--ink2)}
.vault>.todo{margin-bottom:8px}
/* sign in and card */
.signin2 .gbtn{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.or{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink3)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
#mail{display:grid;gap:16px}
.bigin.small input{font-size:20px}
#mail .btn.line{background:none;font-family:var(--sans);cursor:pointer;width:100%}
.fine{font-size:13px;color:var(--ink3)}.fine a{color:var(--ink2)}
.sum{margin:0;border-top:1px solid var(--line)}
.sum div{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.sum dt{color:var(--ink2)}.sum dd{margin:0;font-weight:700;text-align:right}
.cardp .btn.ask{margin-top:auto}
.manualp{min-height:0!important;padding-top:8px!important}
.manualp h2{font:700 30px/1.08 var(--sans);letter-spacing:-.025em}
.row[hidden]{display:none}
.row.off{opacity:.45}
/* footer: company facts, two lines */
.foot{max-width:440px;margin:0 auto;padding:28px 16px 40px;border-top:1px solid var(--line);font-size:13px;color:var(--ink3);display:grid;gap:10px}
.foot b{color:var(--ink2);font-weight:500}
.foot a{color:var(--ink2);text-underline-offset:3px}
.foot p+p,.foot .flinks{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot .about{display:grid;gap:8px;padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.foot .about p{display:block;font-size:14px;line-height:1.55;color:var(--ink2);max-width:52ch}
.foot .about h2{font:italic 500 22px/1.2 var(--serif);color:var(--green);margin-bottom:2px}
.src+.foot{border-top:0;padding-top:0}
/* legal pages and the page nobody knows */
.legal h1{font:700 36px/1.05 var(--sans);letter-spacing:-.025em;margin-bottom:8px}
.legal h2{font:700 19px/1.3 var(--sans);margin:28px 0 8px}
.legal p,.legal li{font-size:16px;color:var(--ink2);max-width:62ch}
.legal ul{padding-left:20px;margin:0}
.legal li+li{margin-top:6px}
.legal .upd{font-size:13px;color:var(--ink3)}
.lost .glow h1{font-size:min(56px,14vw)}
@media (min-width:900px){.foot{max-width:960px}.flowpage .foot,.steps .foot{max-width:560px}}
.nb{white-space:nowrap}
/* a long ツname never runs off the screen: titles shrink to fit (js/view.js and the flow pages fit them), and wrap as a last resort */
h1,h2,.bignum{min-width:0;max-width:100%;overflow-wrap:anywhere}
.steps .flow h1{overflow-wrap:anywhere}
.flow.legal{display:block;min-height:0;padding-bottom:56px!important}
.legal h2{margin:32px 0 8px}
.idx .fogbox{overflow-clip-margin:0}
/* billing: the country picker reads like the other fields */
.bigsel{width:100%;background:none;border:0;border-bottom:1.5px solid var(--ink3);border-radius:0;color:var(--ink);font:700 20px/1.2 var(--sans);padding:10px 0;-webkit-appearance:none;appearance:none}
.bigsel option{background:var(--frame)}
#bill{display:grid;gap:14px}
#vatl[hidden]{display:none}
.plans .line{font-size:16px;color:var(--ink2);margin-bottom:16px}
.plans .btn.line{background:none;font-family:var(--sans);cursor:pointer;width:100%;margin-top:4px}
.plans dl a{color:var(--ink)}
.price small{display:block;margin-top:6px;font-size:14px;color:var(--green)}
.offer{display:grid;gap:10px;margin:18px 0}
#stopflow .choices{margin-bottom:12px}
#stopflow .choice{font-size:17px;padding:16px 0}
.plans .btn.ask{margin-top:4px}
.cardp .seg.cyc{margin-top:4px}
.seg.cyc{grid-template-columns:1fr 1fr}
.btn[hidden]{display:none}
.plans dl{margin:0}
.plans dl div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.plans dl dd{margin:0;color:var(--ink2);text-align:right}
#stopflow .btn.ask,.plans>.btn.ask{width:100%;display:block}

/* ---------- 1 Nov, after Rory: the home for leaders, the index for businesses ---------- */
.navlink[aria-current="page"]{color:var(--ink)}
.hero-r .glow{min-height:clamp(380px,54svh,540px);justify-content:flex-start;padding:32px 22px 24px}
.hero-r .glow h1{font-size:min(50px,12.6vw);line-height:.98}
.hero-r .lede{font:400 18px/1.45 var(--sans);color:rgba(250,250,248,.82);max-width:34ch;text-wrap:pretty}
.hero-r .glow .btn.ask{margin-top:auto}
main>section.block,main>section.trust{padding-top:calc(var(--u)*7);padding-bottom:calc(var(--u)*7);border-top:1px solid var(--line)}
.block h2{font:700 32px/1.08 var(--sans);letter-spacing:-.025em;text-wrap:balance}
.block .body{margin-top:16px;font-size:18px;line-height:1.5;color:var(--ink2);max-width:40ch;text-wrap:pretty}
.block .human{margin-top:24px}
.block>.fine{margin-top:16px}
/* heard this week: the asks themselves are the type */
.heardlist{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.heardlist li{padding:18px 0;border-bottom:1px solid var(--line)}
.heardlist p{font:500 22px/1.25 var(--sans);letter-spacing:-.015em;text-wrap:pretty}
.heardlist li>span{display:block;margin-top:6px;font-size:14px;color:var(--ink2)}
/* the quiet way: one conversation, the member on the left, klickie set in */
.chat{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.chat li{display:grid;gap:4px;max-width:30ch}
.chat b{font:500 13px/1 var(--sans);color:var(--ink3)}
.chat p{font:500 22px/1.3 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.chat li.k{margin-left:clamp(24px,10vw,72px);padding-left:16px;border-left:2px solid var(--green)}
.chat li.k b{color:var(--green)}
/* community leaders: faces, names, city */
.faces{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:24px 16px}
.faces img{width:100%;height:auto;aspect-ratio:1;border-radius:14px;display:block;margin-bottom:10px}
.faces b{display:block;font:700 16px/1.25 var(--sans)}
.faces span{font-size:14px;color:var(--ink2)}
/* trust lines: quiet, last before the footer */
.trust ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.trust li{font-size:15px;line-height:1.5;color:var(--ink2);max-width:60ch;padding-left:18px;position:relative}
.trust li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--green)}
/* the index: one table per city that has counts */
.tbls{display:grid;gap:32px;margin-top:24px}
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl caption{text-align:left;font:700 20px/1.2 var(--sans);letter-spacing:-.01em;padding-bottom:12px}
.tbl th,.tbl td{padding:12px 0;border-bottom:1px solid var(--line);text-align:right;font-size:16px}
.tbl thead th{font:500 13px/1.2 var(--sans);color:var(--ink3);border-bottom-color:rgba(250,250,248,.22)}
.tbl th:first-child{text-align:left;font-weight:500}
.tbl tbody th{color:var(--ink)}
.tbl td{width:5.5em;font-weight:700}
.tbl td.few{font-weight:400;font-size:14px;color:var(--ink3)}
.sting{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.sting li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:16px 0;border-bottom:1px solid var(--line)}
.sting b{font:700 20px/1.25 var(--sans);letter-spacing:-.01em}
.sting span{grid-row:2;font-size:14px;color:var(--ink2)}
.sting em{grid-row:1/3;align-self:center;font:italic 400 18px/1.2 var(--serif);color:var(--green);text-align:right}
.check .btn.ask{margin-top:24px}
.check .fine{margin-top:12px}
.three{list-style:none;margin:24px 0 0;padding:0;counter-reset:t;border-top:1px solid var(--line)}
.three li{counter-increment:t;display:grid;grid-template-columns:28px 1fr;gap:4px 0;padding:16px 0;border-bottom:1px solid var(--line)}
.three li::before{content:counter(t);grid-row:1/3;font:700 15px/1.45 var(--sans);color:var(--green)}
.three b{font:700 19px/1.3 var(--sans);letter-spacing:-.01em}
.three span{font-size:16px;color:var(--ink2)}
.answer .three+.body{margin-top:24px}
.answer .price{margin:28px 0 0;font-size:16px}
.answer .btn.ask{margin-top:20px}
.answer .talk{text-align:left;margin-top:16px;font-size:15px}
.answer .talk a{color:var(--ink);text-underline-offset:3px}
#asked,#pack{scroll-margin-top:16px}
#asked:focus,#pack:focus{outline:0}
/* the check window */
.win{width:min(560px,100vw);height:min(860px,100svh);max-width:100vw;max-height:100svh;margin:auto;padding:0;border:1px solid var(--line);border-radius:22px;background:var(--frame);color:var(--ink);overflow:hidden}
.win::backdrop{background:rgba(5,16,11,.78)}
.win iframe{width:100%;height:100%;border:0;display:block}
.win .x{position:absolute;top:12px;right:12px;z-index:1;background:var(--frame);border:1px solid var(--line);border-radius:999px;color:var(--ink2);padding:7px 14px;font:500 13px/1 var(--sans);cursor:pointer}
@media (max-width:600px){.win{width:100vw;height:100svh;border-radius:0;border:0}}
/* inside the window: no logo bar, the window has its own close */
.inwin .top{display:none}
.inwin .prog{padding-top:20px;padding-right:96px}
.inwin .foot{display:none}
@media (min-width:900px){
 .hero-r .glow{min-height:60svh;padding:48px 52px}
 .hero-r .glow h1{font-size:84px;max-width:15ch}
 .hero-r .lede{font-size:22px;max-width:38ch}
 .block h2{font-size:52px;max-width:20ch}
 .block .body{font-size:20px}
 .heardlist{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
 .chat p{font-size:28px}
 .chat li{max-width:34ch}
 .faces{grid-template-columns:repeat(5,1fr)}
 .tbls{grid-template-columns:repeat(auto-fit,minmax(380px,1fr));column-gap:56px}
 .tbl{max-width:560px}
 .sting{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
 .three{max-width:640px}
 .check .btn.ask,.answer .btn.ask{display:inline-block;padding:18px 44px}
 .trust ul{grid-template-columns:1fr 1fr;column-gap:56px}
}
/* the card as in the deck (1 Nov): uneven light, a mint haze top right, the bright green low right, a pale corner low left,
   one soft diagonal streak, a little grain, and a halo all round instead of one glow */
.glow{background:
 radial-gradient(50% 64% at 97% 2%,rgba(132,206,168,.5),rgba(90,170,130,.22) 42%,transparent 74%),
 radial-gradient(62% 72% at 88% 100%,#16A456 0%,rgba(22,164,86,.62) 34%,transparent 72%),
 radial-gradient(22% 34% at 0% 100%,rgba(120,196,158,.38),transparent 72%),
 linear-gradient(118deg,transparent 38%,rgba(190,255,220,.045) 47%,transparent 55%,transparent 63%,rgba(190,255,220,.03) 70%,transparent 78%),
 linear-gradient(162deg,#07502F 0%,#05472A 46%,#0A6238 100%);
 box-shadow:0 0 56px 6px rgba(28,217,135,.13),0 0 120px 20px rgba(23,162,87,.08),inset 0 0 0 1px rgba(170,255,210,.05)}
.glow::before{inset:0;border-radius:inherit;filter:none;opacity:.5;
 background:radial-gradient(48% 40% at 70% 92%,rgba(28,217,135,.22),transparent 70%);animation:drift 14s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-3%,-2%)}}
.glow::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.glow::before{animation:none}}
/* community leaders: every community by its name, a face only where the leader said yes */
.leaders{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.leaders li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;padding:16px 0;border-bottom:1px solid var(--line)}
.leaders b{font:700 20px/1.2 var(--sans);letter-spacing:-.01em}
.leaders span{font-size:14px;color:var(--ink2)}
.leaders li.named{grid-template-columns:64px 1fr;align-items:center}
.leaders li.named img{grid-row:1/3;width:64px;height:64px;border-radius:12px}
.leaders li.named span{grid-column:2}
.sub3{margin-top:48px;font:700 22px/1.2 var(--sans);letter-spacing:-.015em}
.sub3+.faces{margin-top:20px}
@media (min-width:900px){.leaders{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}.sub3{font-size:28px}}
.tbl tr.grp th{padding:22px 0 8px;font:500 13px/1.2 var(--sans);color:var(--green);text-align:left;border-bottom-color:rgba(250,250,248,.22)}
.tbl tbody:first-of-type tr.grp th{padding-top:12px}
.num b.bare{display:block;width:2.2em;height:.8em;margin-bottom:.2em;border-radius:6px;background:rgba(250,250,248,.55)}
/* your page (Rory, 1 Nov): free blocks carry a teal edge, paid blocks a purple one, data stays plain */
.steps main>section.near,.steps main>section.free,.steps main>section.paid{padding-top:calc(var(--u)*5);padding-bottom:calc(var(--u)*5);border-top:1px solid var(--line)}
.near .eyebrow,.free .eyebrow,.paid .eyebrow,.mkt .eyebrow{margin-bottom:14px}
.near .ask,.board .ask,.mkt .ask{font:700 22px/1.25 var(--sans);letter-spacing:-.015em;max-width:30ch}
.near .miss{margin-top:10px;font:italic 500 19px/1.3 var(--serif);color:var(--green)}
.free{box-shadow:inset 3px 0 0 var(--free)}
.paid{box-shadow:inset 3px 0 0 var(--paid)}
.free .eyebrow{color:var(--free)}.paid .eyebrow{color:var(--paid)}
.free h2{font:700 30px/1.08 var(--sans);letter-spacing:-.025em;margin-bottom:12px}
.free .line,.mkt .line{font-size:16px;color:var(--ink2);margin:10px 0 4px;max-width:38ch}
.addnum{margin-top:22px}
.addnum label{display:block;font-size:14px;color:var(--ink2);margin-bottom:8px}
.addnum div{display:flex;gap:8px}
.addnum input,.calc input{flex:1;min-width:0;background:none;border:1px solid rgba(250,250,248,.3);border-radius:12px;padding:12px 14px;color:var(--ink);font:500 16px/1.2 var(--sans)}
.addnum button{background:none;border:1px solid var(--free);color:var(--ink);border-radius:12px;padding:0 18px;font:700 15px/1 var(--sans);cursor:pointer}
.addnum .fine{margin-top:8px}
.fix{font-size:13px;color:var(--ink3);margin-left:10px}
.paid .cap{margin-top:12px}.paid .cap a,.cap a{color:var(--paid)}
.paid>.fog{margin:0}
.since{font:italic 500 18px/1.3 var(--serif);color:var(--ink)}
.rule{margin-top:18px;font:italic 500 19px/1.35 var(--serif);color:var(--green)}
.plans .fine{margin-top:10px}
.room{margin:0 0 20px}
.room div{padding:14px 0;border-bottom:1px solid var(--line)}
.room dt{display:flex;justify-content:space-between;gap:12px;font:700 19px/1.3 var(--sans)}
.room dd{margin:6px 0 0;font-size:15px;color:var(--ink2);max-width:40ch}
.yeses{list-style:none;margin:16px 0 0;padding:0}
.yeses li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.yeses span{font-size:14px;color:var(--ink2)}.yeses b{display:block;color:var(--ink);font-weight:500}
.yeses button{flex:none;background:none;border:1px solid rgba(250,250,248,.3);border-radius:999px;padding:8px 14px;color:var(--ink2);font:500 13px/1 var(--sans);cursor:pointer}
.yeses button[aria-pressed="true"]{border-color:var(--green);color:var(--ink);background:rgba(28,217,135,.08)}
.calc{display:grid;gap:14px;margin-top:16px}
.calc label{display:grid;gap:8px;font-size:14px;color:var(--ink2)}
.calc span{display:flex;align-items:center;gap:8px}.calc i{font-style:normal;color:var(--ink2)}
.cpc{margin-top:16px;font:700 18px/1.35 var(--sans);min-height:1.35em}
.rulebox{color:var(--ink2);font-size:14px}
.topin{font:500 14px/1 var(--sans);text-decoration:none;color:var(--ink);margin-right:12px}
.topr{display:flex;align-items:center}
.plans .room div{display:block;padding:14px 0;font-size:inherit}
.plans .room dd{text-align:left;margin-top:6px}
.paid .bar{grid-template-columns:1fr 64px}
/* your page, one story one ask (Fer, 1 Nov): the miss as a message, one sentence of counts, one button */
.steps main>section.yp-who{padding-top:28px}
.yp-who h1{font:700 26px/1.1 var(--sans);letter-spacing:-.02em}
.yp-who p{margin-top:4px;font-size:15px;color:var(--ink2)}
.yp-who .fix{margin-left:6px}
.steps main>section.yp-miss{padding-top:28px;padding-bottom:calc(var(--u)*6)}
.msg{margin:0;max-width:34ch;padding:18px 20px 14px;background:var(--card0);border:1px solid rgba(28,217,135,.22);border-radius:20px 20px 20px 6px;box-shadow:0 0 0 6px rgba(28,217,135,.04),0 18px 40px -18px rgba(28,217,135,.35)}
.msg blockquote{margin:0;font:500 22px/1.3 var(--sans);letter-spacing:-.01em}
.msg figcaption{margin-top:10px;font-size:13px;color:var(--ink2)}
.yp-miss .miss{margin:14px 0 0 4px;font:italic 500 24px/1.2 var(--serif);color:var(--green)}
.count{margin-top:32px;font-size:19px;line-height:1.5;color:var(--ink2);max-width:32ch}
.count b{color:var(--ink);font-weight:700}
.count b.z{color:var(--green)}
.yp-miss .btn.ask{margin-top:28px}
.yp-miss .fine,.yp-pack .fine{margin-top:12px;text-align:center}
.yp-miss .since{margin-top:24px;font:italic 500 20px/1.3 var(--serif);color:var(--green)}
.steps main>section.yp-pack,.steps main>section.yp-mkt,.steps main>section.yp-also{padding-top:calc(var(--u)*5);padding-bottom:calc(var(--u)*5);border-top:1px solid var(--line)}
.yp-pack h2,.yp-mkt h2{font:700 28px/1.1 var(--sans);letter-spacing:-.025em;margin-bottom:18px}
.yp-pack .bar{grid-template-columns:1fr 64px}
.yp-pack .cap{margin-top:8px}
.yp-pack h3{font:500 14px/1.3 var(--sans);color:var(--ink2);margin:28px 0 0}
.yp-pack .todo.fog{margin:0}
.yp-pack .tie{margin:28px 0 24px;font:italic 500 20px/1.35 var(--serif);color:var(--green);max-width:30ch}
.yp-pack .price{margin:20px 0 4px}
.yp-mkt .line{font-size:16px;color:var(--ink2);max-width:38ch}
.yp-also p{font-size:15px;color:var(--ink2);margin:0 0 12px;max-width:40ch}
.yp-also a,.lnk{color:var(--ink)}
.lnk{background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer}
.yp-also .addnum{margin:0 0 16px}
/* back to the plain page (Fer, 1 Nov): the first tip carries the city klickie and the number */
.vault .todo li .btn.line{grid-column:2;margin-top:14px;padding:13px 20px;font-size:15px}
.vault .todo li .addnum{grid-column:2;margin-top:16px}
.vault .bar{grid-template-columns:1fr 64px}
.board .line{font-size:15px;color:var(--ink2);margin-bottom:8px;max-width:40ch}
/* your page, data first (Fer, 1 Nov). A bar a week in the card, and a blur that fades in: the clear copy is masked out
   downwards while a blurred copy underneath is masked in, so the list visibly goes on instead of stopping like a bug */
.weeks{display:grid;grid-template-columns:repeat(13,1fr);gap:5px;align-items:end;height:72px}
.weeks i{position:relative;height:var(--a);min-height:4px;border-radius:3px;background:rgba(250,250,248,.24);overflow:hidden}
.weeks i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--n);background:var(--ink)}
.fade{position:relative}
.fa{-webkit-mask-image:linear-gradient(#000 0,#000 24px,transparent 120px);mask-image:linear-gradient(#000 0,#000 24px,transparent 120px)}
.fb{position:absolute;inset:0;filter:blur(6px);opacity:.75;pointer-events:none;user-select:none;-webkit-mask-image:linear-gradient(transparent 16px,#000 104px);mask-image:linear-gradient(transparent 16px,#000 104px)}
.fa{user-select:none}
.lock{margin-top:14px;font-size:14px;color:var(--ink2)}
.lock a{color:var(--ink);text-underline-offset:3px}
.vault .todo+.fade .todo{border-top:0}
.vault .fade .sub{margin-top:24px}
.vault .btn.ask{margin-top:20px}
.none .big{font:700 24px/1.25 var(--sans);letter-spacing:-.015em}
.none .big b{font-size:44px;letter-spacing:-.03em;display:block;line-height:1;margin-bottom:6px}
.none .line{margin-top:10px;font-size:16px;color:var(--ink2);max-width:36ch}
.board .fade .bar:first-child{padding-top:10px}
/* the button sits on the blurred part, low enough that the clear start of the list stays readable */
.fogwrap{position:relative}
.fogwrap .btn.onblur{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 8px);padding:16px 32px;margin:0}
/* the plans open on top from Compare plans: a sheet from the bottom on a phone, a centred window on a wide screen */
.packs{width:min(480px,100vw);max-width:100vw;max-height:92svh;margin:auto auto 0;padding:8px 0 24px;border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;background:var(--frame);color:var(--ink);overflow:auto}
.packs::backdrop{background:rgba(5,20,13,.72);backdrop-filter:blur(3px)}
.packs .plans{max-width:440px;margin:0 auto;padding:16px 16px 0}
.packs .x{position:sticky;top:0;margin-left:auto;display:block;margin-right:12px;background:none;border:1px solid var(--line);border-radius:999px;color:var(--ink2);padding:8px 14px;font:500 13px/1 var(--sans);cursor:pointer}
@media (min-width:700px){.packs{margin:auto;border-radius:22px;border-bottom:1px solid var(--line)}}
@media (prefers-reduced-motion:no-preference){.packs[open]{animation:up .28s ease-out}@keyframes up{from{transform:translateY(24px);opacity:0}}}
/* the wave (Fer, 1 Nov): an svg band of light drawn into the page behind everything, so it moves exactly with the scroll */
.wave{position:absolute;left:0;top:0;width:100%;z-index:-1;pointer-events:none;overflow:hidden}
.wave svg{display:block}
/* a leader's settings: the welcome, then the packs as chips that save on a tap */
/* the leader's settings (Fer, 1 Nov: the first one was gloomy). One question a screen, big and light: the welcome as the
   message itself in green, yes or no as two wide answers that fill cream when chosen, switches that glow green. */
.flowpage:has(.setf) .prog{display:none}
.setf{max-width:560px;margin:0 auto;padding:40px 16px 96px;display:flex;flex-direction:column;gap:22px}
.setf h1{font:700 36px/1.05 var(--sans);letter-spacing:-.03em;text-wrap:balance}
.setf .line{font-size:17px;line-height:1.5;color:var(--ink2);max-width:42ch}
.setprog{display:flex;gap:6px}.setprog i{flex:1;height:3px;border-radius:2px;background:rgba(250,250,248,.16)}.setprog i.on{background:var(--green)}
.bub{align-self:flex-start;max-width:92%;background:var(--green);color:#06301B;border-radius:20px 20px 20px 6px;padding:12px 16px 14px;box-shadow:0 10px 40px rgba(28,217,135,.25)}
.bub b{display:block;font:700 13px/1.2 var(--sans);opacity:.75;margin-bottom:4px}.bub b .tsu{color:inherit}
.bub p{margin:0;font:500 17px/1.4 var(--sans);white-space:pre-wrap;overflow-wrap:anywhere}
.setf textarea{width:100%;background:rgba(250,250,248,.06);border:1px solid rgba(250,250,248,.22);border-radius:16px;padding:14px 16px;color:var(--ink);font:400 16px/1.5 var(--sans);resize:vertical}
.setf textarea:focus{border-color:var(--green);outline:none;background:rgba(250,250,248,.09)}
.yn{display:grid;gap:10px}
.yn button{display:flex;align-items:center;gap:14px;width:100%;padding:18px 20px;border-radius:18px;border:1px solid rgba(250,250,248,.25);background:rgba(250,250,248,.04);color:var(--ink);font:600 18px/1.2 var(--sans);text-align:left;cursor:pointer}
.yn button::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid rgba(250,250,248,.45)}
.yn button[aria-checked="true"]{background:var(--ink);color:#06301B;border-color:var(--ink)}
.yn button[aria-checked="true"]::before{border-color:var(--green);background:radial-gradient(circle,var(--green) 0 45%,transparent 50%)}
.trustl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.trustl li{position:relative;padding-left:28px;font-size:17px;line-height:1.45}
.trustl li::before{content:"";position:absolute;left:2px;top:.35em;width:12px;height:7px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.bizpick{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.niche{padding:18px 0;border-top:1px solid var(--line)}
.niche h3{font:700 19px/1.3 var(--sans);margin-bottom:12px}
.niche .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.niche .chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid rgba(250,250,248,.25);border-radius:14px;padding:10px 14px;background:rgba(250,250,248,.04);color:var(--ink);font:500 14px/1.2 var(--sans);cursor:pointer;text-align:left}
.niche .chip b{font-weight:700}
.niche .chip em,.people em{font:600 13px/1.2 var(--sans);font-style:normal;color:var(--green)}
.niche .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#06301B}
.niche .chip[aria-pressed="true"] em{color:#0B7A47}
.niche .lnk,.orow .lnk{margin-top:12px;background:none;border:0;padding:0;font:500 14px/1.2 var(--sans);color:var(--ink2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.people{list-style:none;margin:0;padding:0}
.people li{padding:10px 0;border-bottom:1px solid var(--line)}
.people label{display:flex;align-items:center;gap:12px;font-size:16px;cursor:pointer}
.people label span{display:flex;flex-direction:column}
.people small{color:var(--ink3);font-size:13px}
.people em{margin-left:auto}
.people input{width:20px;height:20px;accent-color:var(--green);flex:none}
.setnav{display:flex;align-items:center;gap:20px;margin-top:10px}
.setnav .btn.ask{margin:0;min-width:160px}
.setnav .textbtn{background:none;border:0;color:var(--ink2);font:500 15px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ov .orows{display:flex;flex-direction:column}
.orow{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.orow>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.orow h3{font:700 19px/1.25 var(--sans)}
.orow p{margin:0;font-size:15px;color:var(--ink2)}
.orow .bub{margin-top:8px}.orow .bub p{font-size:15px}
.orow>.lnk{margin-top:2px}.orow>div>.lnk{align-self:flex-start;margin-top:4px}
.sw{flex:none;position:relative;width:52px;height:30px;border-radius:999px;border:0;background:rgba(250,250,248,.18);cursor:pointer;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--ink);transition:transform .2s}
.sw[aria-checked="true"]{background:var(--green);box-shadow:0 0 24px rgba(28,217,135,.35)}
.sw[aria-checked="true"]::after{transform:translateX(22px)}
.saved{position:fixed;right:16px;bottom:16px;margin:0;padding:8px 14px;border-radius:999px;background:rgba(6,48,27,.9);border:1px solid rgba(28,217,135,.4);color:var(--ink);font-size:13px;opacity:0;transition:opacity .3s;pointer-events:none}
.saved.on{opacity:1}
@media (prefers-reduced-motion:reduce){.sw,.sw::after,.saved{transition:none}}
@media (min-width:900px){.setf{padding-top:64px}.setf h1{font-size:44px}}
/* the index: a line that could be you opens the check on it */
.rowbtn{background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(250,250,248,.25);text-underline-offset:4px}
.rowbtn:hover{text-decoration-color:var(--green)}
.soon{list-style:none;margin:20px 0 0;padding:0}
.soon li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.soon span{color:var(--ink2)}
/* the index, one city at a time (Fer, 1 Nov): the city is a picker inside the heading */
.ixh{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .3em}
.cysel{position:relative;display:inline-flex}
.cysel select{appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:2px solid var(--green);color:var(--green);font:inherit;letter-spacing:inherit;padding:0 1.1em 2px 0;cursor:pointer;border-radius:0}
.cysel::after{content:"";position:absolute;right:.15em;top:50%;width:.32em;height:.32em;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:translateY(-75%) rotate(45deg);pointer-events:none}
.cysel select option{color:#0B1A12;background:#FAFAF8}
.tbls.one{display:block;max-width:640px}
.tbl[hidden],.sting li[hidden]{display:none}
.soonone{margin:24px 0;font-size:18px;color:var(--ink2)}

/* second round (Fer, 1 Nov): change it later, the easy business choice, their own businesses, the kickoff, their person */
.later{margin:-6px 0 0;font-size:14px;color:var(--ink3)}
.yn button>span{display:flex;flex-direction:column;gap:4px}
.yn button small{font:400 14px/1.4 var(--sans);color:var(--ink2)}
.yn button[aria-checked="true"] small{color:#2E5A43}
.yn button[aria-checked="true"] .tsu{color:inherit}
.modes button,.kick button{align-items:flex-start}.modes button::before,.kick button::before{margin-top:2px}
.nchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.nchip{display:inline-flex;align-items:baseline;gap:8px;border:1px solid rgba(250,250,248,.25);border-radius:999px;padding:9px 14px;background:rgba(250,250,248,.04);color:var(--ink);font:500 14px/1.2 var(--sans);cursor:pointer}
.nchip em{font:600 12px/1 var(--sans);font-style:normal;color:var(--green)}
.nchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#06301B}.nchip[aria-pressed="true"] em{color:#0B7A47}
.favs{margin-top:18px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.favs h3{font:700 19px/1.3 var(--sans)}
.upl{align-self:flex-start;position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:var(--green);color:#06301B;font:600 15px/1 var(--sans);cursor:pointer}
.upl::before{content:"";width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/2px 100% no-repeat,linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
.upl input{position:absolute;inset:0;opacity:0;cursor:pointer}
.upl:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.venue{margin:0;display:grid;grid-template-columns:3fr 2fr;gap:8px}
.venue img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;display:block}
.venue img+img{aspect-ratio:auto}
.person{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:20px;background:rgba(28,217,135,.1);border:1px solid rgba(28,217,135,.35);margin:6px 0 10px}
.person img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.person>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.person h3{font:700 19px/1.25 var(--sans)}
.person p{margin:0;font-size:15px;color:var(--ink2)}
.person .reach{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px}
.person .reach a{color:var(--ink);font-weight:600;font-size:15px;text-underline-offset:3px;overflow-wrap:anywhere}
.person .reach a:first-child{color:var(--green)}

/* Rory's round (1 Nov): what it costs under the claim, the trust lines at the sign in, the community page as proof, the
   businesses by name, the kickoff with a date, and the handoff. One loud thing per screen: the number once it is live;
   while waiting, their own message to members, set as the message it will be (cream, sent from their side). */
.free{margin-top:10px;font-size:14px;color:var(--ink2)}
.quiet .isnum{margin-top:14px;font-size:17px;color:var(--ink)}
.trustl.short{margin:4px 0 6px;gap:8px}.trustl.short li{font-size:15px;color:var(--ink2)}
.sheet .online{margin-top:10px;font-size:15px;color:var(--ink2)}
.cmp{font:700 24px/1.2 var(--sans);letter-spacing:-.015em;margin:4px 0 18px;text-wrap:balance}
.cityasks .cap,.bench .line{margin-top:12px}
.cityasks .fogwrap .btn.onblur{top:50%}
.fogrows{filter:blur(7px);opacity:.7;user-select:none;pointer-events:none}
.cmp+.nums.three{grid-template-columns:repeat(2,1fr)}
.blist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.brow{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;padding:14px 4px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);text-align:left;cursor:pointer}
.brow>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.brow b{font:600 16px/1.25 var(--sans)}
.brow small{font-size:13px;color:var(--ink3)}
.brow em{flex:none;max-width:48%;font:400 13px/1.35 var(--sans);font-style:normal;color:var(--ink2);text-align:right}
.brow em b{display:block;font:700 17px/1.2 var(--sans);color:var(--green)}
.brow::before{content:"";flex:none;order:-1;width:20px;height:20px;border-radius:6px;border:2px solid rgba(250,250,248,.4)}
.brow[aria-pressed="true"]::before{border-color:var(--green);background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%2306301B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.brow[aria-pressed="false"] b,.brow[aria-pressed="false"] em b{color:var(--ink3)}
.bmore summary{padding:14px 4px;font:500 15px/1.2 var(--sans);color:var(--ink2);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.venue.one{display:block}.venue.one img{aspect-ratio:16/9}
.setf h3{font:700 19px/1.3 var(--sans);margin-top:6px}
.dates{grid-template-columns:1fr}
.hand h2{font:700 22px/1.2 var(--sans);letter-spacing:-.01em;margin-top:14px}
.bignum{margin:0;font:700 clamp(34px,9vw,48px)/1 var(--sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--green);text-shadow:0 0 40px rgba(28,217,135,.3)}
#msg{background:var(--ink);color:#0B1A12;border:0;border-radius:20px 20px 6px 20px;padding:16px 18px;font:500 16px/1.5 var(--sans);box-shadow:0 10px 40px rgba(250,250,248,.08)}
#msg:focus{background:#fff;color:#0B1A12;outline:2px solid var(--green);outline-offset:2px}
.setnav{flex-wrap:wrap;gap:12px 14px}
.setnav .btn.line{margin:0}
.setnav .btn[disabled]{opacity:.45;cursor:default}
.livebox{display:flex;flex-direction:column;gap:12px;padding:20px 0 6px}
.livebox .nums{margin-top:6px}
.setf .btn.line{background:none;font-family:var(--sans);cursor:pointer;padding:14px 22px}
.setnav .btn[disabled]{opacity:.6;border:1px dashed rgba(250,250,248,.35);color:var(--ink2)}

/* one page for the leader (Fer, 1 Nov). The conversation carries it: klickie speaks green (the welcome), the leader
   speaks cream (their message to members). The bubble keeps its dark text everywhere, rows included. */
.bub p,.orow .bub p{color:#06301B}
.ov{gap:0}
.ovh{display:flex;flex-direction:column;gap:14px;padding-bottom:22px}
.pchip{display:flex;align-items:center;gap:12px}
.pchip img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.pchip p{margin:0;font-size:15px;line-height:1.4;color:var(--ink2)}
.pchip p b{color:var(--ink);font-weight:600}
.pchip span{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:2px}
.pchip a{color:var(--ink);font-weight:600;text-underline-offset:3px}
.pchip a:first-child{color:var(--green)}
.now{display:flex;flex-direction:column;gap:14px;padding:24px 0 26px;border-top:1px solid var(--line)}
.now .state{margin:0;font:700 24px/1.2 var(--sans);letter-spacing:-.015em;text-wrap:balance}
.now .setnav{margin-top:2px}
.now .textbtn{color:var(--ink2);font:500 15px var(--sans);text-underline-offset:3px}
.tally{display:grid;grid-template-columns:repeat(3,auto) 1fr;align-items:baseline;gap:4px 22px;padding:0 0 24px}
.tally p{margin:0;display:flex;flex-direction:column;font-size:13px;color:var(--ink2)}
.tally b{font:700 26px/1.1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.tally span{grid-column:1/-1;font-size:12px;color:var(--ink3)}
.vtabs{position:sticky;top:0;z-index:2;display:flex;gap:6px;padding:10px 0;margin:0 -16px;padding-left:16px;padding-right:16px;background:linear-gradient(var(--frame,#0A1F15) 70%,transparent);border-top:1px solid var(--line)}
.vtabs button{border:1px solid rgba(250,250,248,.22);background:none;color:var(--ink2);border-radius:999px;padding:10px 18px;font:600 15px/1 var(--sans);cursor:pointer}
.vtabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#06301B}
.ov [role=tabpanel]{padding-top:6px}
.ov .orows .orow:first-child{border-top:0}
.ov .later{margin-top:14px}
.yours{display:flex;flex-direction:column;gap:12px;padding-top:18px!important}
.yours h3{font:700 19px/1.3 var(--sans);margin-top:18px}
.yours .facts{margin:0}
.yours .bar{padding:8px 0}

.yours[hidden],.ov [role=tabpanel][hidden]{display:none}
.who>div{min-width:0;flex:1}
.bignum{white-space:nowrap}
/* what their klickie knows: plain fields, the event switch as a row, documents as a short list */
.kfield{display:flex;flex-direction:column;gap:8px}
.kfield>span{font:600 15px/1.3 var(--sans);color:var(--ink)}
.kfield input{width:100%;box-sizing:border-box;background:rgba(250,250,248,.06);border:1px solid rgba(250,250,248,.22);border-radius:14px;padding:13px 16px;color:var(--ink);font:400 16px/1.4 var(--sans)}
.kfield input:focus{border-color:var(--green);outline:none;background:rgba(250,250,248,.09)}
.kfield .lnk{align-self:flex-start;font-size:14px;color:var(--ink2);text-underline-offset:3px}
.kauto{border-top:1px solid var(--line)}
.dlist{list-style:none;margin:0;padding:0}
.dlist li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.dlist li span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.dlist small{color:var(--ink3);font-size:12px}
.dlist .lnk{font-size:14px;color:var(--ink2)}

/* ---- seats (Rory, 1 Nov, second round): the reservation, the wait, the offer, the letter. One bold thing: the letter is
   a cream sheet on the dark page, the only light surface besides the button, because a leader's yes is the moment. ---- */
.reach{display:block;padding-left:17px;position:relative;margin-top:16px;font:500 14px/1.45 var(--sans);color:var(--ink2)}
.reach::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.reach.first{margin:4px 0 20px}
.ixh+.reach,#reach{margin:6px 0 14px}
.steps main>section.wait,.steps main>section.offer,.steps main>section.letter{padding-top:calc(var(--u)*4);padding-bottom:calc(var(--u)*4)}
.wait h2,.offer h2{font:700 28px/1.15 var(--sans);letter-spacing:-.02em;text-wrap:balance}
.wait .line,.offer .line{margin-top:10px;color:var(--ink2);font-size:17px}
.next3{list-style:none;margin:18px 0 14px;padding:0;display:grid;gap:10px}
.next3 li{position:relative;padding-left:20px;font-size:16px;color:var(--ink)}
.next3 li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1.5px;background:var(--green)}
.next3 a{color:var(--green);text-underline-offset:3px}
.offer{border-top:1px solid var(--line)}
.offer .offeryn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.offer .offeryn .btn{margin:0;border:0;cursor:pointer}
.offer .offeryn .btn.no{border:1px solid rgba(250,250,248,.5);background:none;color:var(--ink)}
.room{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer}
.room input{accent-color:var(--green);width:20px;height:20px;margin-top:2px;flex:none}
.room b{display:block;font-weight:700}.room small{display:block;color:var(--ink2);font-size:14px;margin-top:2px}
.warm .btn{border:0;cursor:pointer}
.steps main>section.letter{margin:20px auto;max-width:408px;background:var(--ink);color:var(--frame);border-radius:6px;padding:28px 24px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),0 0 0 1px rgba(28,217,135,.25)}
.letter .eyebrow{color:#2F6B4D}
.letter h2{margin-top:10px;font:italic 500 26px/1.2 var(--serif);color:var(--frame)}
.letter .line{margin-top:10px;font-size:15px;line-height:1.5;color:#22392D}
.letter .lnk{display:block;margin-top:16px;color:var(--frame);font-size:14px}
.letter .lnk.quiet{color:#5E7468;font-size:13px}
.letter .fine{color:#5E7468}
.example{margin:20px 0 6px;padding:16px 0 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:10px}
.example .eyebrow{margin-bottom:2px}
.example p{font:500 17px/1.35 var(--sans);max-width:32ch}
.example b{display:block;font:500 12px/1 var(--sans);color:var(--ink3);margin-bottom:4px}
.example .k{margin-left:24px;padding-left:14px;border-left:2px solid var(--green)}
.example .k b{color:var(--green)}
.seat .seg{margin-bottom:6px}
.seat .seg+.fine{margin:6px 0 4px}
.seat .price{margin-top:22px;font-size:15px;color:var(--ink2)}.seat .price b{color:var(--ink);font-size:20px}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.calc label{display:grid;gap:6px;font-size:13px;color:var(--ink2)}
.calc input{background:none;border:0;border-bottom:1.5px solid var(--ink3);color:var(--ink);font:700 22px/1.2 var(--sans);padding:6px 0;width:100%;border-radius:0}
.calc input:focus{outline:0;border-color:var(--green)}
.addnum{margin-top:18px;display:grid;gap:8px}.addnum .btn{border:0;background:none;cursor:pointer}
/* the check: the trade asked, never guessed wrong */
.wdq{font:700 22px/1.2 var(--sans);margin-top:4px}
.taps{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tap{background:none;border:1px solid rgba(250,250,248,.4);border-radius:999px;padding:11px 16px;color:var(--ink);font:500 16px/1 var(--sans);cursor:pointer}
.tap:hover,.tap[aria-pressed="true"]{border-color:var(--green);background:rgba(28,217,135,.1)}
.other select{margin-top:12px;background:none;border:0;border-bottom:1px dashed var(--ink3);color:var(--ink2);font:500 15px var(--sans);padding:6px 0}
.onk{margin-top:4px}.onk .textbtn{padding-left:0}
/* after the card: three questions, one a screen */
.ans .chatx{display:grid;gap:10px;margin-top:6px}
.ans .chatx .m{font:500 17px/1.35 var(--sans);color:var(--ink2)}
.ans .chatx textarea{margin-left:24px;padding:10px 14px;border:0;border-left:2px solid var(--green);background:rgba(28,217,135,.06);color:var(--ink);font:500 17px/1.4 var(--sans);resize:vertical;border-radius:0 12px 12px 0}
.ans .photo{display:flex;align-items:center;gap:12px;cursor:pointer}.ans .photo .btn{padding:12px 18px;font-size:15px}.ans .photo small{color:var(--ink2)}
.ans .navb{display:grid;gap:4px}.ans .navb .btn{border:0;cursor:pointer;width:100%}
.ans .saved{min-height:1.2em;font-size:13px;color:var(--ink3)}
.ans h1:focus{outline:0}
/* the leader's sponsors: waiting ones ask for an answer, a seated one is a line to be proud of */
.sponsors{margin:24px 0 8px}
.sponsors h2{font:700 22px/1.2 var(--sans);margin-bottom:12px}
.sp{padding:18px;border:1px solid rgba(28,217,135,.35);border-radius:18px;background:rgba(28,217,135,.05);display:grid;gap:10px;margin-bottom:12px}
.sp p{font-size:15px;color:var(--ink2)}.sp .sph{font:700 17px/1.3 var(--sans);color:var(--ink)}.sp b{color:var(--ink);font-weight:500}
.sp a{color:var(--green);text-underline-offset:3px}
.spb{display:grid;grid-template-columns:1fr 1fr;gap:10px}.spb .btn{margin:0;border:0;cursor:pointer}.spb .btn.no{border:1px solid rgba(250,250,248,.5);background:none;color:var(--ink)}
.spm{display:grid;gap:8px;padding:6px 0}.spsw{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--ink)}
.sp .lnk{justify-self:start;font-size:14px;color:var(--ink2)}
.seated{font:italic 400 20px/1.3 var(--serif);color:var(--green);margin:6px 0 12px}.seated b{font-style:normal;font-family:var(--sans);font-weight:700;color:var(--ink)}
.orow.auto{margin-top:18px}
.spm[hidden]{display:none}
/* the leader's page carries the green card too: the live number, or who and by when */
.nowcard{margin:20px 0 8px}
.nowcard .now{padding:0;border:0;margin:0}
.nowcard .state{font:700 24px/1.2 var(--sans);letter-spacing:-.02em}
.nowcard .line{color:rgba(250,250,248,.8)}
.nowcard textarea{background:rgba(5,32,20,.35);border-color:rgba(250,250,248,.25)}
.nowcard .tally{border-top:1px solid rgba(250,250,248,.2);padding-top:14px}

/* ---- desktop (Fer, 2 Nov): the deck's layout, never the phone's column stretched. Mobile is untouched: everything below
   sits in min-width:1080px, except .demo, which only exists for desktop. The one bold thing is the hero card, wide, the
   headline left and the product itself right (the quiet chat on the home, the biggest missed asks on the index). Below it,
   every section reads as a rail: the heading in the left third, the content in the right two thirds, so hierarchy is
   carried by position instead of by size alone. The views (business, community, leader) become two columns: who and the
   green card stay on the left, the detail runs on the right. ---- */
.demo{display:none}
@media (min-width:1080px){
 .top,main>section,.foot{max-width:1180px}
 .home .top{padding:0 32px}
 .home main>section{padding-left:32px;padding-right:32px}
 /* the hero: wide, two columns, headline left, product right */
 /* the hero is the cover (deck page 1): the width of the page's column, so it lines up with every section under it; the
    headline bottom left, the light on the right is the glow itself. It stops above the fold so the next heading shows. */
 .home .hero-r .glow{display:flex;flex-direction:column;justify-content:flex-end;gap:0;min-height:clamp(460px,calc(100svh - 190px),580px);padding:56px 64px}
 .home .hero-r .glow h1{font-size:clamp(68px,6vw,92px);max-width:13ch;line-height:.95}
 .home .hero-r .glow .lede{margin-top:28px;font-size:21px;max-width:44ch}
 .home .hero-r .glow>.btn{align-self:flex-start;margin-top:36px}
 /* the rail: heading left, content right */
 .home main>section.block,.home main>section.close{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:64px;align-items:start;padding-top:88px;padding-bottom:88px}
 .home .block>h2{grid-column:1;grid-row:1/span 40;font-size:44px;line-height:1.02;max-width:11ch;position:sticky;top:96px}
 .home .block>*:not(h2){grid-column:2}
 .home .block>.body:first-of-type{margin-top:0}
 .home .block .body{max-width:44ch}
 .home .close{align-items:center}
 .home .close h2{grid-column:1/span 2;font-size:72px;max-width:none;margin-bottom:8px}
 .home .close .btn{grid-column:1;justify-self:start}
 .home .ixh{font-size:44px}
 .ix .tbls{grid-template-columns:1fr}.ix .tbl{max-width:none}
 .ix .sting{grid-template-columns:1fr 1fr}
 .home .three{max-width:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
 .home .trust ul{grid-template-columns:repeat(3,1fr)}
 .foot{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;padding:40px 32px 56px}
 .foot .about{grid-row:1/span 3;border-bottom:0;padding-bottom:0}
 /* the views: two columns, who and the green card left, the detail right */
 body.k-brand main,body.k-community main{max-width:1180px;margin:0 auto;padding:0 32px;display:flow-root}
 body.k-brand main>section,body.k-community main>section{max-width:none;margin:0}
 /* one edge for the page (2 Nov 2026): logo, language and the green card share the home page's 32px gutter */
 body.k-brand .top,body.k-community .top,body.k-settings .top{padding:0 32px}
 body.k-brand main>section,body.k-community main>section{padding-left:0;padding-right:0}
 body.k-brand main>section.sheet,body.k-brand main>section.hero,body.k-brand main>section.wait,body.k-brand main>section.offer,body.k-brand main>section.letter,
 body.k-community main>section.sheet,body.k-community main>section.hero{float:left;clear:left;width:480px}
 body.k-brand main>section:not(.sheet):not(.hero):not(.wait):not(.offer):not(.letter),body.k-community main>section:not(.sheet):not(.hero){margin-left:560px}
 body.k-brand main>section.board:first-of-type,body.k-brand main>.board{border-top:0}
 body.k-brand .src,body.k-community .src{clear:both;max-width:1180px;padding-left:0;padding-right:0}
 body.k-brand .prog,body.k-community .prog{max-width:1116px}
 body.k-brand .hero.vis,body.k-community .hero.vis{padding-top:8px}
 body.k-brand .letter{margin:20px 0}
 body.k-settings main>section.setf.ov{max-width:1180px;padding:56px 32px 40px;display:flow-root}
 .setf.ov>.ovh,.setf.ov>.nowcard,.setf.ov>.sponsors{float:left;clear:left;width:480px}
 .setf.ov>.vtabs,.setf.ov>[role=tabpanel],.setf.ov>.orows,.setf.ov>.later{margin-left:560px}
 .setf.ov>.vtabs{margin-top:8px}
 .setf.ov .ovh h1{font-size:52px}
 /* the steps: the question larger, the column a little wider */
 .steps .flow{max-width:620px}
 .steps .flow h1{font-size:56px}
}
@media (min-width:1080px){
 body.k-brand .foot,body.k-community .foot,body.k-settings .foot{max-width:1180px}
 body.k-settings .prog{display:none}
}

/* ---- the team page (2 Nov 2026): the deck's people slide. No card here: headline, one green line, rows with a label and a
   hairline, black and white portraits on cream with a small radius, the city maps with their one glowing dot. ---- */
.foot .about .more{color:var(--green);font-weight:500;text-underline-offset:3px}
.team main>section{max-width:1180px}
.pplh{padding-top:40px;padding-bottom:36px}
.pplh h1{font:700 min(48px,12vw)/1 var(--sans);letter-spacing:-.035em}
.pplh .human{margin-top:10px}
.pplr{padding-top:22px;padding-bottom:30px;border-top:1px solid var(--line)}
.lab{font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px}
.lab b{color:var(--ink2);font-weight:700;margin-right:10px}
.ppg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:26px 16px}
.ppg .ph,.ppg .map{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-bottom:10px}
.ppg h3{font:700 15px/1.25 var(--sans);letter-spacing:-.005em}
.ppg .role{font-size:13px;line-height:1.35;color:var(--ink2);margin-top:2px}
.ppg .cred{font-size:12.5px;line-height:1.35;color:rgba(250,250,248,.82);margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.ppg .lg{display:block;height:12px;width:auto;max-width:72px;object-fit:contain}
.ppg .lg[src*=bird],.ppg .lg[src*=revfixr]{height:15px;border-radius:3px}
.team .foot .about .more{display:none}
.ppg .nom{font:italic 400 14px/1.3 var(--serif);color:var(--green);margin-top:8px}
.ppg .cy .cn{font:700 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.ppg .cy .map{box-shadow:0 0 0 1px var(--line)}
.ppg .vc{display:grid;place-items:center;background:#10301f;border:1px solid var(--line);border-radius:10px;aspect-ratio:1;margin-bottom:10px}
.ppg.small{grid-template-columns:repeat(4,1fr);gap:20px 12px}
.ppg.small h3{font-size:13px}.ppg.small .role{font-size:12px}.ppg.small .cred{font-size:11.5px}
.halves>div+div{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
@media (min-width:1080px){
 .team .top{padding:0 32px}
 .team main>section{padding-left:32px;padding-right:32px}
 .pplh{padding-top:72px;padding-bottom:48px}
 .pplh h1{font-size:76px}
 .pplh .human{font-size:30px}
 .pplr{padding-top:24px;padding-bottom:40px}
 .ppg.six{grid-template-columns:repeat(7,1fr);gap:24px}
 .ppg.pairs{grid-template-columns:repeat(6,1fr);gap:24px}
 .ppg.six .ph,.ppg.pairs .ph,.ppg .map{max-width:136px}
 .ppg .cy .map{opacity:.95}
 .halves{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
 .halves>div+div{margin-top:0;padding-top:0;border-top:0}
 .ppg.small{gap:20px}
 .ppg.small .ph,.ppg.small .vc{max-width:84px}
}
/* ---- the leader's page (2 Nov 2026), in the deck's grammar. The green card is their cover: who it is from, their klickie's
   name, nothing else. Under it one slide: label, headline, one green line, the asks as hairline rows, one button. ---- */
body.k-community .prog{display:none}
.hero.cover{padding-top:8px;padding-bottom:0}
.hero.cover .glow{min-height:clamp(340px,52svh,460px);justify-content:space-between;padding:22px 22px 26px}
.cover .from{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(250,250,248,.82)}
.cover .from img{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block}
.cover .name p{margin-top:8px;font-size:15px;color:rgba(250,250,248,.75)}
.hero.cover .glow h1{font:700 min(50px,12.4vw)/.95 var(--sans);letter-spacing:-.035em}
.hero.cover .glow h1.long{font-size:min(40px,9.8vw)}
main>section.slide{padding-top:40px;padding-bottom:40px}
.slide .lab{font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
.slide .lab b{color:var(--ink2);font-weight:700;margin-right:10px}
.slide h2{font:700 32px/1.05 var(--sans);letter-spacing:-.03em;text-wrap:balance}
.slide .human{margin-top:10px}
.slide .act{margin-top:28px}
.slide .act .btn.ask{margin-top:0}
.slide .small{font-size:13px;color:var(--ink3);text-align:center;margin-top:10px}
.slide .askbox{margin-top:36px}
.asklist{list-style:none;margin:0;padding:0}
.asklist li{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-top:1px solid var(--line);font-size:16px}
.asklist li b{font:700 22px/1 var(--sans);letter-spacing:-.02em}
.asklist.fog{filter:blur(5px);opacity:.55;user-select:none;pointer-events:none}
.asklist.fog li:last-child{border-bottom:1px solid var(--line)}
.slide .cap{font-size:13px;color:var(--ink3);margin-top:12px}
.slide.bench{padding-top:0}
@media (min-width:1080px){
 body.k-community main>section.hero.cover,body.k-community main>section.slide:not(.sheet):not(.hero){float:none;width:auto;margin:0 auto;max-width:1180px}
 .hero.cover .glow{min-height:min(520px,60svh);padding:40px 56px 52px}
 .hero.cover .glow h1{font-size:112px}
 .hero.cover .glow h1.long{font-size:84px}
 .cover .name p{font-size:18px;margin-top:14px}
 main>section.slide{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:80px;align-items:start;padding-top:64px;padding-bottom:64px}
 .slide h2{font-size:52px;max-width:13ch}
 .slide .human{font-size:28px}
 .slide .act .btn.ask{display:inline-block;padding:18px 44px}
 .slide .small{text-align:left}
 .slide .askbox{margin-top:6px}
}

/* the quiet way sits right under the card (2 Nov 2026), in its own typographic style above; on desktop the line and the
   conversation read in the right column of the rail. */

/* ---- the leader page, final (Rory, 2 Nov 2026, night): what we see, theirs to fix; their setup behind the claim.
   Row one of the setup is clear. From row two the labels stay readable and the values blur, 3.5px on row two, 7px from
   row three, the real text underneath. The claim sits sharp on the fog, centred over rows two to six. ---- */
.seeing .seen{font-size:24px;line-height:1.4}
.seen .fx{cursor:text}
.seen .fx.add{color:var(--ink3)}
.seeing .human{margin-top:14px}
.setrows{list-style:none;margin:0;padding:0}
.setrows li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:15px 0;border-top:1px solid var(--line);font-size:15px}
.setrows li span{color:var(--ink2);flex:0 0 auto}
.setrows li b{font-weight:500;text-align:right;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setrows li:last-child{border-bottom:1px solid var(--line)}
.setrows+.setfog .setrows li:first-child{border-top:0}
.setrows li.f1 b{filter:blur(3.5px)}
.setrows li.f2 b{filter:blur(7px)}
.setrows li.f1 b,.setrows li.f2 b{user-select:none;pointer-events:none}
.setfog{position:relative}
.onfog{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 8px;
 background:radial-gradient(ellipse 60% 42% at 50% 50%,color-mix(in srgb,var(--frame) 92%,transparent) 40%,transparent)}
.slide .onfog .btn.ask{display:inline-block;width:auto;max-width:100%;margin:0;padding:16px 28px;text-wrap:balance;text-align:center;box-shadow:0 10px 32px rgba(0,0,0,.35)}
.setrows li:not(.f1):not(.f2) b{white-space:normal}
.slide .onfog .small{margin:0;max-width:30ch;font-size:14px;line-height:1.4;color:var(--ink);text-align:center;text-shadow:0 0 12px var(--frame),0 0 4px var(--frame)}
.setfor .act{margin-top:24px}
.presetbar{max-width:440px;margin:16px auto 0;padding:12px 16px;border:1px solid var(--green);border-radius:12px;font-size:14px;color:var(--ink2)}
@media (min-width:1080px){
 .seeing .seen{font-size:30px}
 /* the claim on the values, so every label stays readable */
 .onfog{left:36%}
 body.k-community main>section.slide.setfor,body.k-community main>section.slide.seeing{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
 .setrows li{font-size:16px;padding:17px 0}
 .presetbar{max-width:1116px}
}

/* the business flow (2 Nov, final): one question a screen, hairline lists with a tick, the rank as a tally of asks */
.bz-hint{font-size:16px;color:var(--ink2);margin-top:-8px}
.bz-list{display:grid;align-content:start;flex:none;border-top:1px solid var(--line)}
.bz-list button{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:500 19px/1.25 var(--sans);letter-spacing:-.01em;text-align:left;cursor:pointer}
.bz-tick{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink3);position:relative;transition:background .15s,border-color .15s}
.bz-list [aria-pressed=true] .bz-tick,.bz-list [aria-checked=true] .bz-tick{background:var(--green);border-color:var(--green)}
.bz-list [aria-pressed=true] .bz-tick::after,.bz-list [aria-checked=true] .bz-tick::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid var(--frame);border-width:0 2px 2px 0;transform:rotate(45deg)}
.bz-list button.bz-full{color:var(--ink3)}
.bz-next{margin-top:auto!important}
.bz-back{margin-top:-8px}
.bz .wdq{font:700 22px/1.2 var(--sans);letter-spacing:-.015em;margin:28px 0 12px}
#us{display:flex;flex-direction:column;gap:16px}
.bz-view h1{font-size:32px;line-height:1.1}
.bz-named{display:block;color:var(--ink2)}
.bz-tally{display:grid;grid-template-columns:repeat(13,1fr);gap:7px;max-width:360px;margin-top:4px}
.bz-tally i{aspect-ratio:1;border-radius:50%;background:var(--ink3);opacity:.55}
.bz-tally i.lit{background:var(--green);opacity:1;box-shadow:0 0 10px rgba(28,217,135,.55)}
.bz-tally.run i{animation:bz-in .3s both;animation-delay:calc(var(--d)*12ms)}
.bz-tally.run i.lit{animation:bz-in .3s both,bz-lit .5s both;animation-delay:calc(var(--d)*12ms),calc(78*12ms + 200ms)}
@keyframes bz-in{from{opacity:0;transform:scale(.4)}}
@keyframes bz-lit{from{background:var(--ink3);box-shadow:none;opacity:.55}}
.bz-view .human{margin-top:-4px}
.bz-facts{margin:0;border-top:1px solid var(--line)}
.bz-facts div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.bz-facts dt{color:var(--ink2)}.bz-facts dd{margin:0;text-align:right;font-weight:500}
.bz-sub{font:500 15px/1.3 var(--sans);color:var(--ink2);margin-bottom:-12px}
.bz-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.bz-rows li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
.bz-rows li b{font-weight:500;white-space:nowrap}
.bz-where{display:flex;flex-direction:column;gap:20px}
.bz-fog{position:relative;min-height:230px}
.bz-fog li{filter:blur(3.5px);user-select:none}.bz-fog li.f2{filter:blur(7px)}
.bz-onfog{position:absolute;left:0;right:0;top:34px;display:flex;flex-direction:column;align-items:center;gap:10px}
.bz-onfog .btn.ask{margin:0;box-shadow:0 10px 36px rgba(0,0,0,.45)}
.bz-small{font-size:14px;line-height:1.45;color:var(--ink2)}
.bz-onfog .bz-small{background:rgba(10,31,21,.8);border-radius:8px;padding:4px 10px}
.bz-get li{font-weight:500}
.bz-tiers b{font-size:18px}
.bz-range{font:500 17px/1.4 var(--sans);margin-top:-8px}
.bz-pay dd{max-width:60%}
.bz-done .btn.ask{margin-top:auto}
.bz-done .human{font-size:24px}
@media (min-width:700px){.bz-view h1{font-size:40px}.bz .btn.ask{align-self:flex-start;display:inline-block;padding:18px 44px}.bz-onfog{align-items:flex-start;left:24px}.bz-tally{max-width:420px}}
@media (prefers-reduced-motion:reduce){.bz-tally.run i{animation:none}.bz-tick{transition:none}}
.bz .gbtn{display:flex;align-items:center;justify-content:center;gap:12px}
.bz .gbtn svg{flex:none;display:block}
.bz #mail{display:grid;gap:16px}
.bz-over dd{font-weight:500;max-width:62%}
.bz-wait{display:flex;flex-direction:column;gap:16px;margin-top:20px;padding-top:28px;border-top:1px solid var(--line)}
.bz-wait h2{font:700 26px/1.15 var(--sans);letter-spacing:-.02em}
.bz-tips{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);counter-reset:t}
.bz-tips li{display:grid;grid-template-columns:28px 1fr;column-gap:8px;padding:13px 0;border-bottom:1px solid var(--line);counter-increment:t}
.bz-tips li::before{content:counter(t);grid-row:span 2;font:italic 400 20px/1.1 var(--serif);color:var(--green)}
.bz-tips b{font-weight:700;font-size:16px}.bz-tips span{font-size:14px;color:var(--ink2)}
.bz-done .bz-wait .btn.ask{margin-top:8px}
@media (min-width:700px){.bz .gbtn{display:inline-flex}}
.trustl[hidden]{display:none}
.bz-other{display:block;margin-top:8px}

/* the request (3 Nov 2026): the communities by name, then one screen with where his name shows up, the deal, email and card */
.bz-comms button small{display:block;margin-top:3px;font:400 15px/1.35 var(--sans);color:var(--ink2);letter-spacing:0}
.bz-comms .bz-us{color:var(--ink2);font-weight:400}
.bz-taken{margin:-8px 0 0;font:italic 400 18px/1.3 var(--serif);color:var(--green)}
.bz-fit{display:flex;flex-direction:column;gap:20px}
.bz-req h1{font-size:30px;line-height:1.1}
.bz-tiles{display:grid;grid-template-columns:1fr;gap:10px}
.bz-tile{margin:0;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card0);display:flex;flex-direction:column;gap:10px}
.bz-tile figcaption{font-size:12px;color:var(--ink3)}
.bz-phone{display:flex;flex-direction:column;gap:6px}
.bz-from{margin:0;font-size:12px;font-weight:600;color:var(--green)}
.bz-bub{margin:0;padding:9px 12px;border-radius:14px;font-size:14.5px;line-height:1.38;max-width:92%}
.bz-bub.in{align-self:flex-start;background:rgba(28,217,135,.08);border:1px solid rgba(28,217,135,.22);border-bottom-left-radius:4px}
.bz-bub.out{align-self:flex-end;background:rgba(255,255,255,.06);border-bottom-right-radius:4px}
.bz-card{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:12px;background:linear-gradient(160deg,rgba(28,217,135,.16),transparent 72%);font-size:15px}
.bz-card b{font:700 19px/1.2 var(--sans);letter-spacing:-.01em}
.bz-night{font:italic 400 19px/1.3 var(--serif);color:var(--green)}
.bz-door{border-style:dashed;background:none;color:var(--ink3);font:500 15px/1.35 var(--sans);text-align:left;cursor:pointer}
.bz-door[aria-pressed=true]{border-style:solid;border-color:var(--green);color:var(--ink)}
.bz-door:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.bz-deal{margin:0;font-size:17px;line-height:1.45}
#deal{font-weight:600}
.bz-fee{color:var(--ink2);font-size:15.5px}
#rq{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding-top:20px}
.bz-field{display:grid;gap:6px;font-size:14px;color:var(--ink2)}
.bz-field input,.bz-cardin{background:var(--card0);border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--ink);font:500 17px/1.2 var(--sans)}
.bz-field input:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.bz-cardin{min-height:52px;padding:10px 14px}
.bz-zero{margin:0;font-weight:600}
.bz-box{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.35}
.bz-box input{margin-top:3px;width:18px;height:18px;accent-color:#1CD987}
@media (min-width:700px){.bz-tiles{grid-template-columns:1fr 1fr}.bz-door{grid-column:1/-1}.bz-req h1{font-size:38px}}

/* his page after a request: the wait, then the profile tips with a check on each */
.setup{display:flex;flex-direction:column;gap:14px}
.setup .tips{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.setup .tips li{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.setup .tips li div{display:grid;gap:2px}.setup .tips li b{font-weight:600}.setup .tips li span{font-size:14px;color:var(--ink2)}
.setup .ck{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink3);position:relative}
.setup li.ok .ck{background:var(--green);border-color:var(--green)}
.setup li.ok .ck::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid var(--frame);border-width:0 2px 2px 0;transform:rotate(45deg)}
.setup li.ok b{color:var(--ink2)}
.setup .tell{font-size:14px;font-weight:600;color:var(--green);white-space:nowrap;text-decoration:none}
.setup .person{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:2px}.setup .person p{margin:0}.setup .person a{color:var(--ink)}
.bz-field[hidden],.bz-fee[hidden],.bz-fit[hidden],.bz-taken[hidden]{display:none}