/* Choice Limit site styles. Shared by every page. Tokens follow DESIGN.md; do not add colours. */
:root{
  --ink:#0b1f3a; --ink-2:#4d5b70; --accent:#0a5ce8; --accent-deep:#0a46b0; --accent-pale:#e7f0ff;
  --sky:#cfe4ff; --lavender:#d9d2fb; --hero-deep:#2f6fe0;
  --ground:#f7f8fa; --surface:#ffffff; --line:#d9dfe8;
  --amber:#f2b100; --amber-pale:#fff3cf; --coral:#b3261e; --coral-pale:#fbe0dc;
  --on-blue:#e4ecff;
  --float:0 12px 32px -12px rgba(11,31,58,.25);
  --font:'Onest',-apple-system,'Segoe UI',Roboto,Arial,'Hiragino Sans','Noto Sans',sans-serif;
  --wrap:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-color:var(--ink-2) var(--ground);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.0625rem/1.6 var(--font);caret-color:var(--accent);-webkit-font-smoothing:antialiased}
::selection{background:var(--sky);color:var(--ink)}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--accent-deep);text-decoration-thickness:2px}
img{max-width:100%;display:block}
p,li{text-wrap:pretty}
p{margin:0}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);letter-spacing:-.03em;line-height:1.05}
h1 sup{font-size:.32em;vertical-align:top;position:relative;top:.45em;margin-left:.04em;letter-spacing:0;font-weight:600}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem);letter-spacing:-.03em}
h3{font-size:1.25rem;line-height:1.25}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.measure{max-width:36em}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.on-blue :focus-visible{outline-color:#fff}
.on-blue .story :focus-visible{outline-color:var(--accent)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:10px;z-index:50}
.skip:focus{top:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:10px;border:1px solid var(--ink);font:600 1rem/1.2 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#16325c;border-color:#16325c;color:#fff}
.btn-secondary{background:var(--surface);color:var(--ink)}
.btn-secondary:hover{background:var(--accent-pale);color:var(--ink)}
.btn[disabled]{opacity:.7;cursor:progress}

/* mark */
.mark{display:inline-flex;gap:3px;flex:none}
.mark i{width:10px;height:10px;border-radius:3px;background:var(--ink);display:block}
.mark i:last-child{background:var(--accent)}

/* header */
.site-head{position:sticky;top:0;z-index:30;background:rgba(247,248,250,.94);transition:box-shadow .2s ease-out}
@supports (backdrop-filter:blur(8px)){.site-head{background:rgba(247,248,250,.82);backdrop-filter:saturate(1.4) blur(10px)}}
.site-head.floating{box-shadow:0 1px 0 var(--line),0 8px 24px -16px rgba(11,31,58,.25)}
.head-row{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;margin-right:auto}
.brand:hover{color:var(--ink)}
.brand b{font-weight:700;font-size:1.2rem;letter-spacing:-.02em}
.brand small{font-size:.875rem;color:var(--ink-2)}
.nav-list{display:flex;align-items:center;gap:28px;margin:0;padding:0;list-style:none}
.nav-list a{color:var(--ink);text-decoration:none;font-size:1rem;font-weight:500}
.nav-list a:hover{color:var(--accent)}
.nav-list a.btn{color:#fff;min-height:44px;font-weight:600}
@media (max-width:860px){.nav-list li.hide-sm{display:none}}

/* hero */
.hero-shell{padding:16px 0 0}
.hero{border-radius:28px;padding:64px 24px 0;text-align:center;color:#fff;overflow:hidden;
  background:radial-gradient(90% 40% at 100% 100%,#d9a6ec 0%,transparent 60%),linear-gradient(180deg,#1b46a8 0,#2152bd 380px,#3d6fd9 560px,#7f97ea 760px,#b9b0f2 100%)}
.works{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.94);color:var(--ink);border-radius:999px;padding:5px 14px 5px 10px;font-size:.875rem;font-weight:600;margin-bottom:22px}
/* the icon file has transparent margins (64 of 96px wide is drawn); pull the text in so the gap matches the left padding */
.works img{width:22px;height:22px;margin:0 -3px 0 -4px}
.hero h1{max-width:19ch;margin:0 auto 18px}
.hero .lede{max-width:50ch;margin:0 auto 28px;font-size:1.15rem;color:var(--on-blue)}
.notify{max-width:480px;margin:0 auto}
.notify-row{display:flex;gap:8px;flex-wrap:wrap}
.notify input{flex:1 1 220px;min-width:0;min-height:48px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:400 1.0625rem var(--font)}
.notify input::placeholder{color:#6b778a}
.notify input[aria-invalid="true"]{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.notify .hint{font-size:.9375rem;margin-top:12px}
.hero .notify .hint{color:var(--on-blue)}
.notify .msg{margin-top:12px;font-weight:600;font-size:.9375rem;text-align:left}
.notify .msg:empty{display:none}
.notify .msg.error{background:var(--coral-pale);color:var(--coral);padding:9px 12px;border-radius:10px}
.notify .msg.ok{background:var(--accent-pale);color:var(--accent-deep);padding:9px 12px;border-radius:10px}
.hero .price{margin:14px 0 40px;font-size:.9375rem;color:#fff}
.hero .price b{font-weight:700}
.story{margin:0 auto;max-width:1000px;background:var(--ground);color:var(--ink);border-radius:22px 22px 0 0;padding:22px 20px 12px}
.story img{width:100%;height:auto}
.story figcaption{color:var(--ink-2);font-size:.9375rem;padding:6px 0 4px}

/* sections */
section:where(:not(.hero)){padding:112px 0 0}
.sec-head{max-width:40em}
.sec-head p{margin-top:16px;color:var(--ink-2);font-size:1.125rem}
.stage{border-radius:28px;padding:44px 32px;min-height:420px;display:grid;place-items:center;
  background:radial-gradient(80% 70% at 20% 0%,#fff 0%,transparent 60%),linear-gradient(180deg,#9cc4ff 0%,#5b8ff0 60%,#2a5fc9 100%)}
.stage.lav{background:radial-gradient(80% 70% at 80% 0%,#fff 0%,transparent 60%),linear-gradient(180deg,var(--lavender) 0%,#a99af0 60%,#6e5fd6 100%)}
.stage img{width:100%;height:auto;border-radius:16px;box-shadow:var(--float)}
.stage img.w420{max-width:420px}
.stage img.w480{max-width:480px}

/* how it works: list on the left, pinned panel on the right that follows the scroll */
.scrolly{padding-bottom:12vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start}
.scrolly-text h2{margin-bottom:16px}
.uses{color:var(--ink-2);font-size:1.0625rem;margin-bottom:32px;max-width:40ch}
.scrolly-stage{position:sticky;top:max(96px,calc(50vh - 250px))}
.scrolly-stage .stage{height:500px;min-height:0;transition:background .5s ease-out}
.stage.lav{background:radial-gradient(80% 70% at 80% 0%,#fff 0%,transparent 60%),linear-gradient(180deg,var(--lavender) 0%,#a99af0 60%,#6e5fd6 100%)}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.steps li{border-bottom:1px solid var(--line);padding:22px 0;min-height:30vh;display:flex;flex-direction:column;justify-content:center;transition:opacity .3s ease-out}
.steps li:not(.on){opacity:.38}
.steps li:not(.on):hover{opacity:.7}
.steps button{all:unset;display:block;width:100%;cursor:pointer;box-sizing:border-box;border-radius:6px}
.steps button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.steps .t{font-weight:600;font-size:1.2rem;letter-spacing:-.01em;display:flex;gap:12px;align-items:center}
.steps .n{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.875rem;color:var(--ink-2);flex:none;font-variant-numeric:tabular-nums;transition:background-color .2s ease-out,color .2s ease-out}
.steps li.on .n{background:var(--ink);color:#fff;border-color:var(--ink)}
.steps .d{color:var(--ink-2);margin:10px 0 0 40px;max-width:42ch}
.inline-shot{display:none}
#how-shot.swap{animation:swap .35s cubic-bezier(.2,.8,.2,1)}
@keyframes swap{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* seats (honest example) */
.seats{display:flex;gap:5px;align-items:center}
.s{width:22px;height:22px;border-radius:4px;border:2px solid var(--ink-2);display:block}
.s.t{background:var(--ink);border-color:var(--ink)}
.s.w{border-style:dashed;border-color:var(--ink);border-radius:50%;background:var(--amber-pale)}
.sep{height:22px;border-left:2px dashed var(--ink-2);margin:0 4px}
.full{font-size:.8125rem;font-weight:700;color:var(--coral);background:var(--coral-pale);border-radius:999px;padding:2px 10px}
.ex-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ex-time{font-weight:700;font-size:1.0625rem;min-width:74px;font-variant-numeric:tabular-nums}
.ex-wait{font-size:.9375rem;color:var(--ink-2)}

/* ---- Calendly-style sections (landing page) ---- */
.center-head{max-width:44em;margin:0 auto;text-align:center}
.center-head p{margin-top:16px;color:var(--ink-2);font-size:1.125rem}
.center-head .cta-row{margin-top:28px}
.lead-2{margin-top:16px;color:var(--ink-2);font-size:1.125rem;max-width:36em}

/* a feature row: text on one side, gradient panel with a white UI card on the other */
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.row2.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.stage-sm{min-height:440px}
.ui-card{background:#fff;border-radius:16px;box-shadow:var(--float);padding:24px;width:min(400px,100%)}
.ui-title{font-weight:700;font-size:1.125rem;margin-bottom:12px}
.example{border-radius:16px;background:var(--ground);padding:22px 24px}
.timeline{list-style:none;margin:20px 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:6px;top:12px;bottom:12px;border-left:1.5px solid var(--line)}
.timeline li{display:flex;gap:14px;align-items:flex-start;padding:7px 0;font-size:.9375rem;color:var(--ink-2);position:relative}
.timeline b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;margin-right:6px}
.dot{width:13px;height:13px;border-radius:50%;flex:none;margin-top:5px;border:2px solid #fff;outline:1px solid var(--line)}
.dot-ink{background:var(--ink)}.dot-amber{background:var(--amber)}.dot-blue{background:var(--accent)}
.ticks{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.ticks li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-weight:500}
.ticks svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:3px}

/* proof band: full-width soft gradient with white cards, like Calendly's customer band */
.proof-band{margin:0 16px;border-radius:28px;padding:96px 0;
  background:radial-gradient(60% 80% at 100% 0%,var(--lavender) 0%,transparent 70%),linear-gradient(135deg,var(--sky) 0%,#e9ecff 50%,var(--lavender) 100%)}
.vs-cards{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vs-cards li{background:#fff;border-radius:20px;padding:28px;box-shadow:var(--float);display:flex;flex-direction:column}
.vs-cards h3{font-size:1.3rem;margin-bottom:18px}
.vs-cards p{font-size:1rem;line-height:1.55}
.vs-cards p span{display:block;font-size:.8125rem;font-weight:600;margin-bottom:4px}
.vs-cards .was{color:var(--ink-2);padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.vs-cards .here{color:var(--ink);font-weight:500}
.vs-cards .here span{color:var(--accent-deep)}

/* info cards (privacy) */
.info-cards{list-style:none;margin:48px auto 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.info-cards li{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px}
.info-cards h3{font-size:1.0625rem;margin:16px 0 6px}
.info-cards p{color:var(--ink-2);font-size:.9375rem}
.ic{width:44px;height:44px;border-radius:12px;background:var(--accent-pale);color:var(--accent-deep);display:grid;place-items:center;flex:none}
.ic svg{width:24px;height:24px}

/* pricing: tinted panel, intro on the left, plan cards on the right (Calendly's pricing grammar) */
.price-panel{border-radius:28px;padding:56px;background:color-mix(in srgb,var(--sky) 28%,var(--ground));display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:28px 48px;align-items:start}
.price-intro h2{margin-bottom:16px}
.price-intro>p{color:var(--ink-2);font-size:1.0625rem}
.price-notes{list-style:none;margin:24px 0 0;padding:0}
.price-notes li{display:flex;gap:10px;padding:6px 0;font-weight:500}
.price-notes svg,.pcard li svg{width:18px;height:18px;flex:none;color:var(--accent);margin-top:4px}
.price-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.pcard{position:relative;background:var(--surface);border-radius:20px;padding:28px;border:1px solid var(--line);display:flex;flex-direction:column}
.pcard.featured{border:2px solid transparent;padding:27px;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(160deg,var(--accent) 0%,#7f6fe0 60%,var(--lavender) 100%) border-box;box-shadow:var(--float)}
.ptab{position:absolute;top:-14px;left:24px;background:var(--ink);color:#fff;font-size:.8125rem;font-weight:600;border-radius:999px;padding:4px 12px}
.pcard h3{font-size:1.25rem}
.pprice{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-top:18px;font-variant-numeric:tabular-nums}
.pprice small{font-size:1rem;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.psub{color:var(--ink-2);font-size:.9375rem;margin-top:8px;min-height:2.9em}
.pbtn{width:100%;justify-content:space-between;margin-top:18px}
.pbtn .arr{width:18px;height:18px;transition:transform .2s ease-out}
.pbtn:hover .arr{transform:translateX(3px)}
.pinc{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:.875rem;font-weight:600;color:var(--ink-2)}
.pcard ul{list-style:none;margin:10px 0 0;padding:0}
.pcard li{display:flex;gap:10px;padding:5px 0;font-size:.9375rem}
.price-fine{grid-column:1/-1;color:var(--ink-2);font-size:.9375rem;max-width:62em;padding-top:8px}
@media (max-width:1020px){.price-panel{grid-template-columns:1fr;padding:40px}}
@media (max-width:640px){.price-panel{padding:28px 18px;border-radius:22px}.price-cards{grid-template-columns:1fr;gap:28px}}

/* ready-made forms as tiles, like Calendly's integrations grid */
.arrow-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;color:var(--ink)}
.arrow-link svg{width:18px;height:18px;transition:transform .2s ease-out}
.arrow-link:hover{color:var(--accent-deep)}
.arrow-link:hover svg{transform:translateX(3px)}
.tiles{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.tiles a{display:flex;flex-direction:column;gap:4px;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;text-decoration:none;color:var(--ink);transition:border-color .2s ease-out,box-shadow .2s ease-out,transform .2s ease-out}
.tiles a:hover{border-color:var(--sky);box-shadow:var(--float);transform:translateY(-2px);color:var(--ink)}
.tiles .ic{margin-bottom:12px}
.tiles b{font-weight:600}
.tiles a>span:last-child{color:var(--ink-2);font-size:.9375rem}

/* questions */
.faq-box{max-width:820px;margin:40px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:8px 32px}
.faq-box details:first-child{border-top:0}
.faq-box details:last-child{border-bottom:0}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;list-style:none;font-weight:600;font-size:1.125rem}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--accent-deep)}
summary svg{width:20px;height:20px;flex:none;color:var(--accent);transition:transform .2s ease-out}
details[open] summary svg{transform:rotate(45deg)}
details p{padding:0 0 22px;color:var(--ink-2);max-width:40em}

/* closing: centred call to action over three gradient cards */
.trio{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:20px;align-items:center;margin-top:56px}
.trio-card{border-radius:24px;padding:28px 22px;display:grid;place-items:center;aspect-ratio:4/3.2}
.trio-card img{width:100%;height:auto;border-radius:12px;box-shadow:var(--float)}
.t-sky{background:linear-gradient(160deg,#fff 0%,var(--sky) 60%,#9cc4ff 100%)}
.t-mid{aspect-ratio:4/3.4;background:radial-gradient(80% 70% at 20% 0%,#fff 0%,transparent 60%),linear-gradient(180deg,#9cc4ff 0%,#5b8ff0 60%,#2a5fc9 100%)}
.t-lav{background:linear-gradient(160deg,#fff 0%,var(--lavender) 60%,#a99af0 100%)}

@media (max-width:1020px){
  .info-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .row2,.row2.flip{grid-template-columns:1fr;gap:32px}
  .row2.flip .stage{order:2}
  .stage-sm{min-height:0}
  .vs-cards{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr}
  .trio .t-sky,.trio .t-lav{display:none}
}
@media (max-width:640px){
  .proof-band{margin:0 8px;padding:64px 0;border-radius:22px}
  .info-cards{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq-box{padding:4px 18px}
}

/* final */
.final{padding-bottom:0}
.final-box{border-radius:28px;padding:64px 48px;color:#fff;text-align:center;
  background:radial-gradient(70% 90% at 0% 100%,#8f84ea 0%,transparent 60%),linear-gradient(160deg,#1b46a8 0%,#2152bd 55%,#3d6fd9 100%)}
.final-box p.lead{margin:16px auto 28px;max-width:40em;color:var(--on-blue);font-size:1.125rem}

.site-foot{padding:48px 0 56px;font-size:.9375rem;color:var(--ink-2)}
.foot-row{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.foot-brand{display:flex;align-items:center;gap:9px;color:var(--ink)}
.foot-brand b{font-weight:700}
.site-foot p{max-width:40em}

@media (max-width:960px){
  .scrolly{grid-template-columns:1fr;gap:32px}
  .scrolly-stage{display:none}
  .steps li,.steps li:not(.on){opacity:1;min-height:0}
  .steps li .n{background:var(--ink);color:#fff;border-color:var(--ink)}
  .inline-shot{display:block;width:100%;height:auto;margin:18px 0 4px;border-radius:16px;box-shadow:0 0 0 1px var(--line),var(--float)}
  .steps .d{margin-left:0}
}
@media (max-width:760px){
  section:where(:not(.hero)){padding-top:80px}
}
@media (max-width:700px){
  .story{padding:14px 8px 8px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .head-row{height:64px;gap:12px}
  .brand small{display:none}
  .nav-list a.btn{padding:0 14px;font-size:.9375rem}
  .hero{padding:44px 16px 0;border-radius:22px}
  .hero .lede{font-size:1.0625rem}
  .notify .btn{width:100%}
  .final-box{padding:44px 20px;border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.site-foot .foot-legal{margin-top:28px;max-width:none}

/* ------------------------------------------------------------------
   Inner pages: help, privacy, terms, templates, 404 (Calendly-style)
   ------------------------------------------------------------------ */
.inner section:where(:not(.hero)){padding:0}
.inner .sec{padding-top:112px}

/* page hero: the homepage .hero panel. Text sits on the deep blue; the lavender fade
   below it carries only images, tiles or nothing, so white text keeps 4.5:1 */
.hero.pg{padding-bottom:0;background:linear-gradient(180deg,#1b46a8 0,#2152bd 100%)}
.hero.pg h1{font-size:clamp(2.1rem,4.8vw,3.3rem);max-width:21ch}
.hero.pg .price{margin:16px 0 0}
.hero-fade{margin:48px -24px 0;padding:0 24px 56px;min-height:96px;
  background:linear-gradient(180deg,rgba(33,82,189,0) 0%,#7f97ea 45%,var(--lavender) 100%)}
.hero-fade .tiles{max-width:860px;margin:0 auto;text-align:left}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:820px;margin:0 auto}
.chips a{background:rgba(255,255,255,.94);color:var(--ink);border-radius:999px;padding:8px 16px;font-weight:600;font-size:.9375rem;text-decoration:none;transition:background-color .15s ease-out}
.chips a:hover{background:var(--accent-pale);color:var(--ink)}

/* template pages */
.ui-card .ui-title{display:flex;align-items:center;gap:12px}
.ui-card .ticks{margin-top:8px}
.ui-card .ticks li{font-weight:400;font-size:.9375rem}
.ui-card .ticks li:last-child{border-bottom:0}
.form-card{width:min(440px,100%)}
.row2 .lead-2 + .lead-2{margin-top:14px}
.tot{margin-top:24px;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--ink-2)}
.tot b{color:var(--ink);font-size:1.25rem;margin-right:4px}
.howto-list{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.howto-list li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.howto-list .n{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.875rem;font-weight:600;flex:none;font-variant-numeric:tabular-nums}
.howto-list b{display:block;font-weight:600;color:var(--ink)}
.howto-list span.d{display:block;color:var(--ink-2);margin-top:4px}
.info-cards.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px}
.info-cards.two h3{margin-top:0;font-size:1.25rem}
.info-cards.two p{font-size:1rem}
.info-cards.three{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.info-cards.links li{position:relative;transition:border-color .2s ease-out,box-shadow .2s ease-out,transform .2s ease-out}
.info-cards.links li:hover{border-color:var(--sky);box-shadow:var(--float);transform:translateY(-2px)}
.info-cards.links h3 a{color:var(--ink);text-decoration:none}
.info-cards.links h3 a::after{content:"";position:absolute;inset:0;border-radius:20px}
.info-cards.links h3 a:focus-visible{outline:0}
.info-cards.links li:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.inner .tpl-group + .tpl-group{padding-top:80px}
.tpl-group .tiles{margin-top:28px}

/* documents with a contents sidebar: help, privacy, terms */
.doc,.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;align-items:start;padding-top:96px}
.legal{padding-top:56px}
.toc{position:sticky;top:96px;font-size:.9375rem;max-height:calc(100vh - 120px);overflow:auto}
.toc-title{font-weight:600;margin-bottom:10px}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:block;padding:7px 12px;border-radius:10px;color:var(--ink-2);text-decoration:none;line-height:1.35;transition:background-color .15s ease-out,color .15s ease-out}
.toc a:hover{color:var(--ink);background:var(--surface)}
.toc a[aria-current]{color:var(--accent-deep);background:var(--accent-pale);font-weight:600}
.legal-head{padding-bottom:40px;margin-bottom:48px;border-bottom:1px solid var(--line)}
.legal-head h1{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.legal-head .lede{margin-top:18px;color:var(--ink-2);font-size:1.2rem}
.updated{margin-top:14px;font-size:.9375rem;color:var(--ink-2)}

.prose{max-width:70ch;min-width:0;font-size:1.0625rem}
.prose > section + section{margin-top:64px}
.prose h2{font-size:clamp(1.7rem,3vw,2.2rem);margin:0 0 20px;scroll-margin-top:96px}
.prose h3{font-size:1.35rem;margin:36px 0 10px}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:8px 0;padding-left:2px}
.prose li::marker{color:var(--ink-2)}
.prose strong{font-weight:600}
.prose ol.howto{list-style:none;padding:0;counter-reset:howto}
.prose ol.howto > li{counter-increment:howto;position:relative;padding-left:44px;margin:0 0 18px}
.prose ol.howto > li::before{content:counter(howto);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums}
.prose figure{margin:8px 0 28px}
.prose figure img{width:100%;max-width:480px;height:auto;border-radius:16px;box-shadow:0 0 0 1px var(--line),var(--float)}
.prose figcaption{margin-top:10px;font-size:.9375rem;color:var(--ink-2)}
.prose .install-row{margin-top:24px}

/* placeholders the owner still has to fill in */
.ph{background:var(--amber-pale);color:var(--ink);border-radius:4px;padding:1px 5px;font-weight:600;white-space:nowrap}

/* "good to know" (amber is kept for this and the waiting list) */
.note{background:var(--amber-pale);border-radius:16px;padding:18px 22px;margin:0 0 16px}
.note p{margin:0}

/* plain tables in documents */
.table-wrap{overflow-x:auto;margin:4px 0 24px}
.data{width:100%;border-collapse:collapse;font-size:1rem}
.data th{text-align:left;font-weight:600;font-size:.875rem;color:var(--ink-2);padding:0 20px 10px 0;vertical-align:bottom}
.data td{vertical-align:top;padding:14px 20px 14px 0;border-top:1px solid var(--line)}
.data td:first-child{font-weight:600;min-width:9em}

/* "Still stuck?" */
.help-box{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:40px 32px}
.help-box h2{font-size:clamp(1.6rem,3vw,2rem);margin-bottom:12px}
.help-box p{color:var(--ink-2)}
.help-box.stuck{max-width:640px;margin:0 auto;text-align:center;box-shadow:var(--float)}

@media (max-width:1020px){
  .tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .info-cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .doc,.legal{grid-template-columns:1fr;gap:32px;padding-top:56px}
  .toc{position:static;max-height:none;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
  .toc ol{columns:2;column-gap:24px}
  .toc a{padding:5px 8px}
}
@media (max-width:640px){
  .inner .sec{padding-top:80px}
  .inner .tpl-group + .tpl-group{padding-top:64px}
  .hero-fade{margin:36px -16px 0;padding:0 16px 40px}
  .toc ol{columns:1}
  .info-cards.two,.info-cards.three,.tiles.three{grid-template-columns:1fr}
  .help-box{padding:28px 20px}
  .inner .stage{padding:28px 16px;border-radius:22px;min-height:0}
}

/* install call to action */
.cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-install{background:#fff;color:var(--ink);border-color:#fff;min-height:44px;padding:0 16px;font-size:.9375rem}
.btn-install:hover{background:var(--accent-pale);border-color:var(--accent-pale);color:var(--ink)}
.btn-install img{width:16px;height:16px}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);min-height:44px;padding:0 16px;font-size:.9375rem}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.hero .cta-row{margin-bottom:6px}
@media (max-width:480px){.cta-row .btn{width:100%}}

/* the install button on a light page (help, 404) needs an edge: secondary-button border per DESIGN.md */
.on-light .btn-install{border-color:var(--ink);box-shadow:none}
.on-light .btn-install:hover{border-color:var(--ink)}

/* ------------------------------------------------------------------
   Footer as a navy rounded panel (Calendly-style), every page
   ------------------------------------------------------------------ */
.site-foot{padding:112px 16px 16px;color:#b9c4d6}
.site-foot>.wrap{background:var(--ink);border-radius:28px;padding:48px 48px 36px;max-width:calc(var(--wrap) - 32px)}
.site-foot .foot-brand,.site-foot .foot-brand b{color:#fff}
.site-foot .mark i{background:#fff}
.site-foot .mark i:last-child{background:#7fb0ff}
.site-foot .foot-legal{border-top:1px solid rgba(255,255,255,.14);padding-top:24px;color:#b9c4d6;font-size:.875rem}
.site-foot :focus-visible{outline-color:#fff}
@media (max-width:640px){.site-foot{padding:80px 8px 8px}.site-foot>.wrap{padding:32px 20px 24px;border-radius:22px}}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:48px;align-items:start;padding-bottom:36px}
.foot-line{margin:14px 0 22px;max-width:30ch;color:#b9c4d6}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot-cols h2{font-size:.875rem;font-weight:600;letter-spacing:0;color:#b9c4d6;margin-bottom:12px}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{padding:4px 0}
.foot-cols a{color:#fff;text-decoration:none;font-size:.9375rem}
.foot-cols a:hover{color:#cfe4ff;text-decoration:underline}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr}}
@media (max-width:560px){.foot-cols{grid-template-columns:1fr 1fr}}

/* who it is for: audience tabs, like Calendly's team tabs */
.who-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:36px auto 0;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;width:fit-content;max-width:100%}
.who-tabs [role=tab]{all:unset;cursor:pointer;padding:10px 18px;border-radius:999px;font-weight:600;font-size:.9375rem;color:var(--ink-2);transition:background-color .2s ease-out,color .2s ease-out}
.who-tabs [role=tab]:hover{color:var(--ink)}
.who-tabs [role=tab][aria-selected=true]{background:var(--ink);color:#fff}
.who-tabs [role=tab]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.who-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center;margin-top:48px}
.who-panel[hidden]{display:none}
.who-text h3{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.02em}
.who-text>p{margin-top:12px;color:var(--ink-2);font-size:1.125rem;max-width:34em}
.who-links{margin-top:20px;font-size:.9375rem;color:var(--ink-2)}
.who-links a{font-weight:600}
.form-card{padding:0 0 18px;overflow:hidden}
.form-card .bar{display:block;height:8px;background:#673ab7}
.form-card .ui-title{padding:18px 22px 0;margin-bottom:4px}
.form-card .q{padding:0 22px;color:var(--ink-2);font-size:.9375rem;margin-bottom:8px}
.opts{list-style:none;margin:0;padding:0 22px}
.opts li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:.9375rem}
.opts li:first-child{border-top:0}
.opts .r{width:16px;height:16px;border-radius:50%;border:2px solid #5f6368;flex:none}
.opts .o{flex:1}
.opts .pill{font-size:.8125rem;font-weight:600;color:var(--accent-deep);background:var(--accent-pale);border-radius:999px;padding:2px 10px;white-space:nowrap}
.opts .pill-full{font-size:.8125rem;font-weight:700;color:var(--coral);background:var(--coral-pale);border-radius:999px;padding:2px 10px;white-space:nowrap}
.opts .is-full .o{color:var(--ink-2)}
@media (max-width:960px){.who-panel{grid-template-columns:1fr;gap:28px}}
@media (max-width:640px){.who-tabs{border-radius:20px;justify-content:flex-start}.who-tabs [role=tab]{padding:8px 12px;font-size:.875rem}}

/* help topic cards: icon beside the heading rather than stacked above it */
.info-cards.links h3{display:flex;align-items:center;gap:14px;margin:0 0 10px;font-size:1.35rem}

/* page heroes: a solid panel when nothing sits below the text, and the template's own form card in the fade */
.hero.pg.solo{padding-bottom:56px}
.hero-fade{color:var(--ink)}
.hero-fade .form-card{margin:0 auto;text-align:left}
.hero-fade .info-cards{max-width:var(--wrap);margin:0 auto;text-align:left}

/* an example email in the style of the real ones (apps/addon/src/server/mail.ts) */
.mail-card{padding:0;overflow:hidden;width:min(440px,100%);text-align:left}
.mail-band{background:var(--ink);color:#fff;font-weight:700;font-size:1.0625rem;padding:16px 22px}
.mail-body{padding:22px 22px 24px}
.mail-head{font-weight:700;font-size:1.35rem;line-height:1.3;letter-spacing:-.01em}
.mail-body p + p{margin-top:10px;font-size:.9375rem}
.ticket{display:flex;margin-top:18px;background:var(--accent-pale);border-radius:10px}
.ticket-main{flex:1;min-width:0;padding:16px 18px 18px}
.mail-body .ticket-label{margin:0;font-size:.8125rem;font-weight:700;color:var(--accent-deep)}
.mail-body .ticket-opt{margin:2px 0 12px;font-size:1.5rem;font-weight:700;line-height:1.3}
.pill-wait{display:inline-block;font-size:.8125rem;font-weight:700;color:var(--ink);background:var(--amber-pale);border:1px solid var(--amber);border-radius:999px;padding:2px 10px}
.ticket-stub{flex:none;width:76px;border-left:2px dashed var(--ink);display:grid;place-items:center}
.ticket-stub i{display:block;width:28px;height:28px;border:1.5px dashed var(--ink-2);border-radius:50%;background:var(--amber-pale)}

/* templates index: one row per audience, forms on one side and a gradient panel with that audience's example form on the other */
.inner .tpl-group{padding-top:96px}
.inner .tpl-group + .tpl-group{padding-top:96px}
.tpl-group-head .ic{margin-bottom:16px}
.tpl-group-head h2{font-size:clamp(1.6rem,2.8vw,2.1rem)}
.tpl-group-head p{margin-top:10px;color:var(--ink-2);font-size:1.0625rem;max-width:34ch}
.group-text .tiles{margin-top:28px;grid-template-columns:repeat(2,minmax(0,1fr))}
.stage.sky{background:radial-gradient(80% 70% at 80% 0%,#fff 0%,transparent 60%),linear-gradient(180deg,var(--sky) 0%,#8fc0f5 60%,#4f8fe0 100%)}
.group-art{position:relative}
.art-badge{position:absolute;top:24px;left:24px;width:52px;height:52px;border-radius:16px;background:#fff;color:var(--accent-deep);display:grid;place-items:center;box-shadow:var(--float)}
.art-badge svg{width:28px;height:28px}
/* hero: audience cards sit in the lavender fade, navy on light */
.aud-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:var(--wrap);margin:0 auto}
.aud{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:#fff;border-radius:16px;padding:18px;color:var(--ink);font-weight:600;font-size:.9375rem;text-decoration:none;text-align:left;box-shadow:0 8px 20px -14px rgba(11,31,58,.35);transition:transform .2s ease-out,box-shadow .2s ease-out}
.aud:hover{transform:translateY(-2px);box-shadow:var(--float);color:var(--ink)}
.aud .ic{width:40px;height:40px}
@media (max-width:960px){.aud-row{grid-template-columns:repeat(3,minmax(0,1fr))}.art-badge{top:16px;left:16px;width:44px;height:44px}}
@media (max-width:560px){.aud-row{grid-template-columns:1fr 1fr}.group-text .tiles{grid-template-columns:1fr}}

/* small-screen menu */
.menu-btn{display:none;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:600 .9375rem var(--font);cursor:pointer}
.menu-btn svg{width:18px;height:18px}
@media (max-width:860px){
  .site-head nav{display:flex;align-items:center;gap:8px}
  .menu-btn{display:inline-flex}
  .site-head nav.open .nav-list{position:absolute;left:12px;right:12px;top:calc(100% + 6px);flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--float);padding:8px}
  .site-head nav.open .nav-list li.hide-sm{display:block}
  .site-head nav.open .nav-list a{display:flex;min-height:44px;align-items:center;padding:0 12px;border-radius:10px}
  .site-head nav.open .nav-list a:hover{background:var(--accent-pale)}
  .site-head nav.open .nav-list a.btn{justify-content:center;margin-top:6px;color:#fff}
  .site-head nav.open .nav-list a.btn:hover{background:#16325c}
}
.tpl-group .row2.flip .group-art{order:-1}
@media (max-width:960px){.tpl-group .row2.flip .group-art{order:0}}