/* 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:12px;height:12px;border-radius:3px;background:var(--ink);display:block;box-sizing:border-box}
.mark i:last-child{background:none;border:3px solid 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:8px;background:rgba(255,255,255,.94);color:var(--ink);border-radius:999px;padding:6px 15px 6px 13px;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:20px;height:20px;margin:0 -3px}
.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}
/* The heading stays put while the steps scroll up beneath it. */
.scrolly-head{position:sticky;top:var(--head-h,72px);z-index:2;background:var(--ground);padding:24px 0 24px;margin-top:-24px}
.uses{color:var(--ink-2);font-size:1.0625rem;margin-bottom:32px;max-width:40ch}
.scrolly-stage{position:sticky;top:96px}
.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)}
/* comparison art: left half = elsewhere (muted), right half = here (blue). Resting state is the end frame. */
.vs-art{display:block;width:100%;height:auto;margin:-8px 0 20px;padding:12px 8px 6px;border-radius:14px;background:var(--ground);font-family:var(--font);overflow:visible}
.vs-art .lbl{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink-2)}
.vs-art .here-l{fill:var(--accent-deep)}
.vs-art .divide{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.vs-art .sheet,.vs-art .slot,.vs-art .pill{fill:var(--surface);stroke:var(--line);stroke-width:1.2}
.vs-art .bar{fill:var(--line)}
.vs-art .small{font-size:9.5px;fill:var(--ink-2)}
.vs-art .bad-fill{fill:var(--coral-pale);stroke:var(--coral);stroke-width:1.2}
.vs-art .bad-t{font-size:11px;font-weight:600;fill:var(--coral)}
.vs-art .bad-ring{fill:none;stroke:var(--coral);stroke-width:1.6;stroke-dasharray:4 3}
.vs-art .good-fill{fill:var(--accent-pale);stroke:var(--accent);stroke-width:1.2}
.vs-art .good-dot{fill:var(--accent)}
.vs-art .tick{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.vs-art .good-t{font-size:11px;font-weight:600;fill:var(--accent-deep)}
.vs-art .good-t.sm{font-size:9.5px}
.vs-art .share{fill:var(--ink)}
.vs-art .share-t{font-size:9px;font-weight:600;fill:#fff}
.vs-art .slot-t{font-size:11px;font-weight:600;fill:var(--ink)}
.vs-art .slot-n{font-size:9px;fill:var(--ink-2)}
.vs-art .who{stroke:var(--surface);stroke-width:2}
.vs-art .who-a{fill:var(--accent)}
.vs-art .who-b{fill:var(--amber)}
.vs-art .queue{fill:var(--surface);stroke:var(--accent);stroke-width:1.2;stroke-dasharray:4 3}
.vs-art .env{fill:var(--surface);stroke:var(--accent);stroke-width:1.4}
.vs-art .env-flap{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linejoin:round}
.vs-art .pill-t{font-size:9.5px;fill:var(--ink-2)}
.vs-art .pill-t.ink{fill:var(--ink);font-weight:500}
.vs-art .warn-pill{fill:var(--amber-pale);stroke:var(--amber);stroke-width:1.2}
.vs-art .strike{fill:none;stroke:var(--coral);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.vs-art .radio{fill:none;stroke:var(--ink-2);stroke-width:1.3}
.vs-art .a-gone{opacity:.18}
.vs-art g,.vs-art circle,.vs-art path{transform-box:fill-box;transform-origin:center}
.vs-cards li.play .a-drop{animation:vs-drop .55s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.vs-cards li.play .a-pop{animation:vs-pop .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.vs-cards li.play .a-fade{animation:vs-fade .45s ease-out var(--d,0s) both}
.vs-cards li.play .a-draw{animation:vs-draw .45s ease-out var(--d,0s) both}
.vs-cards li.play .a-in-l{animation:vs-in-l .6s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.vs-cards li.play .a-in-r{animation:vs-in-r .6s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.vs-cards li.play .a-in-top{animation:vs-in-top .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.vs-cards li.play .a-bump{animation:vs-bump 1.1s cubic-bezier(.3,.7,.2,1) var(--d,0s) both}
.vs-cards li.play .a-gone{animation:vs-gone .5s ease-in var(--d,0s) both}
@keyframes vs-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes vs-pop{from{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes vs-fade{from{opacity:0}to{opacity:1}}
@keyframes vs-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes vs-in-l{from{opacity:0;transform:translate(-40px,-18px)}to{opacity:1;transform:none}}
@keyframes vs-in-r{from{opacity:0;transform:translate(30px,-26px)}to{opacity:1;transform:none}}
@keyframes vs-in-top{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
@keyframes vs-bump{0%{opacity:0;transform:translateY(-80px)}35%{opacity:1;transform:translateY(-52px)}50%{transform:translate(-10px,-46px)}100%{opacity:1;transform:none}}
@keyframes vs-gone{from{opacity:1}to{opacity:.18}}

/* 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}
  .scrolly-head{position:static;padding:0;margin:0}
  .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}
.hero-fade .info-cards{margin-top:0;max-width:1080px;text-align:left}
.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:none;border-color:#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}
}
/* phones: keep the brand on one line beside Menu and Install */
@media (max-width:420px){
  .brand{gap:7px}
  .brand b{font-size:1rem;white-space:nowrap}
  .site-head .mark{gap:2.5px}
  .site-head .mark i{width:10px;height:10px;border-radius:2.5px}
  .site-head .mark i:last-child{border-width:2.5px}
}
@media (max-width:375px){
  .head-row{gap:8px}
  .site-head nav{gap:6px}
  .menu-btn{padding:0 9px}
  .nav-list a.btn{padding:0 11px}
}
@media (max-width:340px){.brand b{white-space:normal;line-height:1.15}}
.tpl-group .row2.flip .group-art{order:-1}
@media (max-width:960px){.tpl-group .row2.flip .group-art{order:0}}

.btn-gform{min-height:40px;padding:0 24px;border-radius:6px;border:0;background:#673ab7;color:#fff;font-weight:600}
.btn-gform:hover{background:#5b2fa6}
.btn-gform:disabled{opacity:.45;cursor:not-allowed}
.price-vs{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--amber-pale);font-size:.9375rem;color:var(--ink)}
.byhand{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;max-width:960px;margin:40px auto 0}
.byhand-col{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px 26px}
.byhand-col h3{font-size:1.0625rem;margin-bottom:12px}
.byhand ol{margin:0;padding:0;list-style:none;counter-reset:c}
.byhand ol li{counter-increment:c;display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--line);color:var(--ink-2);font-size:.9375rem}
.byhand ol li:first-child{border-top:0}
.byhand ol li::before{content:counter(c);flex:none;width:22px;height:22px;border-radius:50%;background:var(--coral-pale);color:var(--coral);font-weight:700;font-size:.75rem;display:grid;place-items:center;margin-top:1px}
.byhand-col.here{background:var(--ink);color:#fff;border-color:var(--ink);display:grid;align-content:center}
.byhand-col.here h3{color:var(--on-blue)}
.byhand-big{font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.byhand-col.here p + p{margin-top:12px;color:var(--on-blue);font-size:.9375rem}
@media (max-width:820px){.byhand{grid-template-columns:1fr}}

/* "Try it here" demo: a 20-second story that plays itself, then a guided try. Three screens: the parent's form, the organiser's People list, the parents' inbox */
.dm{position:relative;max-width:1080px;margin:40px auto 0;padding:24px;border-radius:28px;display:grid;gap:14px;
  background:radial-gradient(80% 70% at 80% 0%,#fff 0%,transparent 60%),linear-gradient(180deg,var(--sky) 0%,#8fc0f5 60%,#4f8fe0 100%)}
.dm-say{display:flex;gap:12px;align-items:center;background:var(--ink);color:#fff;border-radius:14px;padding:12px 16px;font-weight:500;font-size:1rem;line-height:1.45;min-height:56px}
.dm-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.dm-panel{display:grid;gap:8px;align-content:start;min-width:0}
.dm-lbl{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.dm .form-card{width:100%}
.demo-form fieldset{border:0;margin:0;padding:0;min-width:0}
.demo-form legend{padding:0 22px}
.demo-form label{display:flex;align-items:center;gap:12px;flex:1;cursor:pointer;border-radius:8px}
.demo-form input{position:absolute;opacity:0;width:1px;height:1px}
.demo-form input:checked + .r{border-color:#673ab7;background:radial-gradient(circle,#673ab7 0 4px,transparent 4.5px)}
.demo-form input:focus-visible + .r{outline:2px solid var(--accent);outline-offset:3px}
.demo-form .opts li{border-radius:8px;transition:box-shadow .2s ease-out}
.demo-form .opts li.suggest{box-shadow:0 0 0 2px var(--accent);border-top-color:transparent}
.demo-form .opts li.suggest + li{border-top-color:transparent}
.demo-send{padding:14px 22px 0}
.btn-gform.press{transform:scale(.96)}
.dm-people{width:100%;padding:18px}
.dm-people .ui-title{margin-bottom:4px}
.dm-rows{list-style:none;margin:0;padding:0}
.dm-rows li{padding:9px 0;border-top:1px solid var(--line)}
.dm-rows li:first-child{border-top:0}
.dm-row{display:flex;align-items:center;gap:10px;font-size:.9375rem;flex-wrap:wrap}
.dm-row b{min-width:60px;font-variant-numeric:tabular-nums}
.dm-name{flex:1;color:var(--ink-2);font-style:italic}
.held .dm-name{color:var(--ink);font-weight:600;font-style:normal}
.dm-free{all:unset;cursor:pointer;font-size:.8125rem;font-weight:600;color:var(--accent-deep);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.dm-free:hover{border-color:var(--accent)}
.dm-free.hint{background:var(--accent-pale);border-color:var(--accent);animation:dm-hint 1.6s ease-in-out infinite}
.dm-sub{margin:6px 0 0 70px;font-size:.8125rem;color:var(--ink-2);line-height:1.4}
.dm-wait{margin:6px 0 0 70px;font-size:.8125rem;background:var(--amber-pale);border-radius:8px;padding:2px 10px;width:fit-content}
.dm-tag{display:inline-block;margin-left:8px;font-size:.6875rem;font-weight:700;color:var(--accent-deep);background:var(--accent-pale);border-radius:999px;padding:0 8px;font-style:normal;vertical-align:1px}
.dm-phone{position:relative;background:var(--surface);border:6px solid var(--ink);border-radius:22px;overflow:hidden;min-height:250px;box-shadow:var(--float)}
.dm-phone-top{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;font-size:.8125rem;font-weight:700;border-bottom:1px solid var(--line)}
.dm-badge{background:var(--coral);color:#fff;border-radius:999px;font-size:.6875rem;padding:0 7px;min-width:18px;text-align:center}
.dm-empty{display:grid;justify-items:center;gap:4px;text-align:center;padding:40px 18px;color:var(--ink-2);font-size:.875rem}
.dm-empty svg{width:34px;height:34px;opacity:.7}
.dm-empty b{color:var(--ink)}
.dm-mails{list-style:none;margin:0;padding:0}
.dm-mails li{display:grid;grid-template-columns:8px 1fr;gap:10px;padding:10px 14px;border-top:1px solid var(--line);font-size:.8125rem}
.dm-mails li:first-child{border-top:0}
.dm-mails li.open{background:var(--accent-pale)}
.dm-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:6px}
.dm-mails li.read .dm-dot{background:transparent}
.dm-mail-h{font-weight:700;font-size:.875rem;line-height:1.35}
.dm-mail-m{color:var(--ink-2)}
.dm-mail-b{margin-top:6px;color:var(--ink)}
.dm-toast{position:absolute;left:8px;right:8px;top:8px;z-index:2;display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:9px 11px;box-shadow:0 14px 30px -12px rgba(11,31,58,.55);font-size:.8125rem;animation:dm-drop .45s cubic-bezier(.2,.9,.3,1.15)}
.dm-toast b{display:block;font-size:.8125rem}
.dm-toast-i{flex:none;width:28px;height:28px;border-radius:8px;background:var(--accent);color:#fff;font-weight:800;font-size:.6875rem;display:grid;place-items:center}
.dm-cursor{position:absolute;left:0;top:0;width:26px;height:26px;z-index:5;pointer-events:none;transition:transform .7s cubic-bezier(.45,.05,.25,1);filter:drop-shadow(0 2px 3px rgba(11,31,58,.35))}
.dm-cursor svg{width:100%;height:100%;fill:var(--ink);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.dm-cursor.click::after{content:"";position:absolute;left:-6px;top:-6px;width:20px;height:20px;border-radius:50%;border:2px solid var(--accent);animation:dm-ring .45s ease-out forwards}
.pop{animation:dm-pop .35s cubic-bezier(.2,.9,.3,1.2)}
.demo-foot{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px;min-height:28px}
.demo-cta[hidden]{display:none}
.demo-reset{all:unset;cursor:pointer;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:.18em}
.demo-reset:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@keyframes dm-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes dm-drop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes dm-hint{50%{box-shadow:0 0 0 4px rgba(10,92,232,.18)}}
@keyframes dm-ring{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.pop,.dm-toast,.dm-free.hint{animation:none}.dm-cursor{transition:none}}
@media (max-width:1000px){.dm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dm-inbox-col{grid-column:1/-1}.dm-phone{max-width:420px;width:100%;justify-self:center}.dm-inbox-col .dm-lbl{max-width:420px;width:100%;justify-self:center}}
@media (max-width:700px){.dm{padding:14px;margin-left:-16px;margin-right:-16px;border-radius:22px}.dm-grid{grid-template-columns:1fr}.dm-say{font-size:.9375rem}}
.dm [hidden],.demo-foot [hidden]{display:none!important}

.dm-dots{display:flex;gap:5px;flex:none}
.dm-dots i{width:18px;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
.dm-dots i.on{background:#fff}
.dm-free:focus-visible{outline:2px solid var(--accent);outline-offset:2px}