/* Tusker: colour chapters.
   Every section is a full-bleed field in one flat colour, like the stages an enquiry moves through.
   One typeface (Cabinet Grotesk), five sizes, one ink, one accent (Tusker's logo blue, for actions only).
   Direction dealt by tasteskill (colour-chapters, seed 745271036); palette "swapping pastels", accent from the brand. */

:root{
  --field-1:#c3cbe5; --field-2:#efd3da; --field-3:#e6dccd; --field-4:#cfd3cb; --field-5:#f9cdbd;
  --paper:#faf8f4; --ink:#141414; --ink-2:#2a2a2a; --muted:#41465a;
  --accent:#2350c4; --accent-hover:#1b3f9e; --accent-ink:#fff;
  --face:'Cabinet Grotesk',system-ui,sans-serif;
  --step-small:clamp(0.875rem,0.84rem + 0.15vw,0.9375rem);
  --step-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --step-lead:clamp(1.375rem,1.15rem + 0.8vw,1.875rem);
  --step-head:clamp(2.5rem,1.4rem + 4.2vw,5.25rem);
  --step-display:clamp(3.25rem,1rem + 7.6vw,8.5rem);
  --m:clamp(16px,3.2vw,48px);
  --gap:clamp(96px,10vw,160px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --bar-bg:var(--field-1); --bar-ink:var(--ink);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-body)/1.5 var(--face);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--m);top:-60px;z-index:20;background:var(--ink);color:#fff;padding:12px 16px;text-decoration:none}
.skip:focus{top:12px}

/* Type: five sizes. */
h1{font-size:var(--step-display);font-weight:800;line-height:.9;letter-spacing:-.035em}
h2{font-size:var(--step-head);font-weight:800;line-height:.95;letter-spacing:-.035em;max-width:16ch;text-wrap:balance}
h3{font-size:var(--step-lead);font-weight:800;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.statement,.lead{font-size:var(--step-lead);line-height:1.3;max-width:34ch;text-wrap:pretty}
.small{font-size:var(--step-small);line-height:1.5;max-width:70ch}
p,li,dd{text-wrap:pretty}

/* Buttons: one shape (fully round), one fill. */
.btn,.plan-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:500 var(--step-body)/1 var(--face);text-decoration:none;border:0;cursor:pointer;transition:background .2s,transform .16s var(--ease-out)}
.btn:hover,.plan-cta:hover{background:var(--accent-hover)}
.btn:active,.plan-cta:active,.presets button:active,.text-link:active{transform:scale(.97)}
.btn-lg{min-height:56px;padding:0 30px;font-size:var(--step-lead)}
.text-link{font-weight:500;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:2px;transition:text-decoration-color .2s,transform .16s var(--ease-out);display:inline-block}
.text-link:hover{text-decoration-color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}

/* The bar: wordmark, four links, one action. It takes the colour of the chapter beneath it. */
.bar{position:fixed;inset:0 0 auto;z-index:10;height:68px;display:flex;align-items:center;gap:32px;padding:0 var(--m);background:var(--bar-bg);color:var(--bar-ink);transition:background-color .3s,color .3s}
.wordmark{display:flex;align-items:center;gap:8px;text-decoration:none;font:800 26px/1 var(--face);letter-spacing:-.03em}
.bar nav{display:flex;gap:28px;margin-left:auto}
.bar nav a{text-decoration:none;font-weight:500}
.bar nav a:hover{text-decoration:underline;text-underline-offset:.3em}

/* Chapters: full-bleed fields, butted, one pair of margins. */
.chapter{position:relative;padding:var(--gap) var(--m)}
.chapter > h2{margin-bottom:28px}
.chapter > .statement{margin-bottom:56px}
[data-field="1"]{background:var(--field-1)} [data-field="2"]{background:var(--field-2)} [data-field="3"]{background:var(--field-3)}
[data-field="4"]{background:var(--field-4)} [data-field="5"]{background:var(--field-5)}
[data-field="ink"]{background:var(--ink);color:var(--paper)}
[data-field="accent"]{background:var(--accent);color:#fff}

/* Hero: the New chapter. Two inks on one field, the owner and her answer at the right. */
.hero{min-height:100svh;padding-top:120px;padding-bottom:56px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.hero h1 span{display:block}
.hero h1 span:first-child{color:var(--accent)}
.hero-lower{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.hero-copy{grid-column:1/6;display:grid;gap:28px;padding-bottom:12px}
.hero-copy .lead{font-size:var(--step-lead)}
.hero-copy .small{color:var(--ink)}
.owner{grid-column:7/13;position:relative;max-width:520px;justify-self:end;width:100%}
.owner-img{width:100%;mix-blend-mode:multiply;filter:brightness(1.09) contrast(1.04);clip-path:inset(1.5%)}
.chat-out{position:absolute;top:24%;right:-2%;max-width:230px;background:#d9fdd3;color:#1f3a29;border-radius:14px 4px 14px 14px;padding:12px 14px 8px;font-size:var(--step-small);box-shadow:0 12px 30px #1414141f} /* taste-skill-ignore: interface fragment floating over the illustration */
.chat-out time{display:block;text-align:right;font-size:13px;color:#48614f;margin-top:2px}
.reply{position:absolute;left:-18%;bottom:4%;width:300px;background:#fff;border-radius:16px;padding:16px;box-shadow:0 18px 40px #14141426} /* taste-skill-ignore: interface fragment floating over the illustration */
.reply p{font-size:var(--step-small);margin-bottom:10px}
.reply ul{list-style:none;display:grid;gap:6px}
.reply li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;background:#f4f3ef}
.reply li span{font-size:13px;color:var(--muted)} .reply li b{display:block;font-size:15px;color:var(--ink)}
.st{font-style:normal;font-size:13px;font-weight:500;padding:4px 9px;border-radius:999px}
.st-new{background:#dfe5f8;color:#1b3f9e} .st-quote{background:#fbe7c4;color:#6b4a12} .st-won{background:#dcefdf;color:#1d5a32}

/* Demo chapter: the existing live demo sits on sand. */
.flow-demo{--fd-canvas:var(--field-3);--fd-line:#cfc5b4;--fd-blue:var(--accent);--fd-blue-d:#1b3f9e;--fd-tint:#dfe5f8;color:var(--ink);border:0;padding:var(--gap) var(--m)}
.flow-demo .fd-head{margin-bottom:32px;align-items:flex-end}
.flow-demo .fd-head h2{font-size:var(--step-head);max-width:14ch}
.flow-demo .fd-switch{background:var(--paper);border:0}
.flow-demo .fd-switch a{font-size:var(--step-body)}
.flow-demo .fd-days{margin-bottom:24px}
.flow-demo .fd-day{font-size:var(--step-small);color:var(--muted)}
.flow-demo .fd-day.now{background:var(--paper);box-shadow:none}
.flow-demo .fd-line{font-size:var(--step-lead);font-family:var(--face)}
.flow-demo .fd-sub{font-size:var(--step-body);color:var(--ink)}
.flow-demo .fd-play{background:var(--accent);border-radius:999px}
.flow-demo .fd-btn{background:var(--paper);border:0;border-radius:999px;min-height:48px}
.flow-demo .fd-app{box-shadow:none}

/* Input half, output half: what staff send, what Tusker keeps. Editing the left updates the right. */
.split{display:grid;grid-template-columns:1fr 1fr;padding:0;min-height:90svh}
.split-in,.split-out{position:relative;padding:calc(var(--gap) * .8) var(--m) 200px}
.split-in{color:var(--paper)}
.split-label{display:block;font-size:var(--step-small);margin-bottom:12px;color:#d9d6cf}
.split-in textarea{width:min(100%,34ch);font:400 clamp(20px,1.4vw + 10px,26px)/1.4 var(--face);color:var(--paper);background:var(--ink-2);border:0;border-radius:16px;padding:20px 22px;resize:vertical}
.split-in textarea:focus-visible{outline:3px solid var(--field-1)}
.presets{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;max-width:34ch}
.presets button{font:500 var(--step-small)/1 var(--face);color:var(--paper);background:var(--ink-2);border:0;border-radius:999px;min-height:44px;padding:0 18px;cursor:pointer;transition:background .2s,transform .16s var(--ease-out)}
.presets button:hover{background:#3a3a3a}
.split-title{position:absolute;bottom:56px;font-size:clamp(36px,4.4vw,72px);max-width:none;margin:0;line-height:.95}
.split-title-a{left:var(--m);color:var(--paper)}
.split-title-b{left:var(--m);right:var(--m)}
.split-out{display:flex;flex-direction:column;gap:32px}
.split-copy{max-width:40ch;font-size:var(--step-body)}
.record{width:min(100%,480px);background:#fff;border-radius:18px;padding:20px;display:grid;gap:18px;font-size:var(--step-small)}
.rec-head{display:flex;align-items:center;gap:12px}
.rec-head b{display:block;font-size:18px} .rec-head span{color:var(--muted)}
.rec-head em{margin-left:auto;font-style:normal;font-weight:500;background:#f1efea;border-radius:8px;padding:5px 9px;color:var(--ink)}
.rec-ini{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e6ecdf;font-weight:800;color:#1d5a32}
.rec-stages{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;counter-reset:s}
.rec-stages li{font-size:13px;line-height:1.2;padding:28px 4px 0;position:relative;color:var(--muted);text-align:center}
.rec-stages li::before{content:"";position:absolute;top:4px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#e4e1da;transition:background .3s,transform .3s var(--ease-out)}
.rec-stages li.done::before{background:var(--ink)}
.rec-stages li.now{color:var(--ink);font-weight:500}
.rec-stages li.now::before{background:var(--accent);transform:scale(1.25)}
.rec-confirm{background:#f4f3ef;border-radius:12px;padding:12px 14px}
.rec-confirm span{display:flex;gap:24px;margin-top:8px;color:#0b7a55}
.rec-note b{display:block;color:var(--muted);font-weight:500;margin-bottom:2px}

/* Stages as one bar: each segment's width follows how long that stage took for Leena's enquiry. */
.bar-chart{list-style:none;display:flex;gap:6px;margin:0 0 72px;min-height:max(22vh,170px)}
.bar-chart li{flex:var(--g) 1 0;min-width:12%;background:var(--c);border-radius:10px;padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.bar-chart b{font-size:var(--step-lead);font-weight:800;letter-spacing:-.02em;line-height:1}
.bar-chart span{font-size:var(--step-small);max-width:22ch}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px clamp(32px,6vw,96px);margin-bottom:48px}
.two-col h3{margin-bottom:14px;max-width:20ch}
.two-col p{max-width:46ch;margin-bottom:16px}
.two-col ul,.setup-card ul,.price-card ul{list-style:none;display:grid;gap:8px}
.two-col li,.setup-card li{padding-left:28px;position:relative}
.two-col li::before,.setup-card li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:6px;border-radius:3px;background:var(--ink)}

/* Comparison: a real table on the peach field. */
.comparison-picker{border:0;padding:0;margin:0 0 24px;display:none}
.comparison-picker legend{font-size:var(--step-small);margin-bottom:10px}
.comparison-picker div{display:flex;flex-wrap:wrap;gap:8px}
.comparison-picker input{position:absolute;opacity:0}
.comparison-picker span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--paper);cursor:pointer;font-weight:500}
.comparison-picker input:checked+span{background:var(--ink);color:var(--paper)}
.comparison-picker input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.table-wrap{overflow-x:auto}
.comparison-table{width:100%;border-collapse:collapse;font-size:var(--step-body)}
.comparison-table th,.comparison-table td{text-align:left;padding:16px 14px;border-bottom:1px solid #14141426;vertical-align:top}
.comparison-table thead th{font-size:var(--step-small);font-weight:500;border-bottom:2px solid var(--ink)}
.comparison-table tbody th{font-weight:500}
.comparison-table small{display:block;font-size:var(--step-small)}
.comparison-table .tusker-column{background:var(--ink);color:var(--paper);font-weight:500}
.comparison-table thead .tusker-column{font-size:var(--step-lead);font-weight:800}
.comparison-table .cost-row td,.comparison-table .cost-row th{font-weight:800}
.compare-foot{display:grid;grid-template-columns:5fr 6fr;gap:48px;margin-top:40px;align-items:start}
.takeaway{display:grid;gap:16px;justify-items:start}

/* Who it is for, as a poster: giant words left, small facts right. */
.poster{min-height:90svh}
.poster-list{list-style:none;margin:56px 0 48px}
.poster-list a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;text-decoration:none}
.pl-word{font-size:var(--step-display);font-weight:800;line-height:.92;letter-spacing:-.035em;transition:color .25s}
.pl-fact{font-size:var(--step-body);max-width:30ch;text-align:right;color:#e6e3dc}
.poster-list a:hover .pl-word,.poster-list a:focus-visible .pl-word{color:var(--field-1)}
.poster h2{max-width:22ch}

/* Setup: two columns on sand, no cards. */
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px clamp(32px,6vw,96px);margin-bottom:56px}
.setup-card{display:grid;gap:18px;align-content:start}
.setup-card .promise{font-size:var(--step-lead);line-height:1.2}
.setup-card .cost b{display:block;font-size:var(--step-lead)}
.setup-card.managed{background:var(--paper);border-radius:20px;padding:32px;margin:-32px}

/* Pricing: tiles step up like a bar chart; each tile's foot is its button. */
.pricing-top{display:grid;grid-template-columns:7fr 5fr;gap:32px;align-items:end;margin-bottom:56px}
.setup-switch{border:0;padding:0;margin:0}
.setup-switch legend{font-size:var(--step-small);margin-bottom:10px}
.setup-switch div{display:inline-flex;background:var(--paper);border-radius:999px;padding:4px}
.setup-switch input{position:absolute;opacity:0}
.setup-switch span{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;cursor:pointer;font-weight:500;transition:background .2s,color .2s}
.setup-switch input:checked+span{background:var(--ink);color:var(--paper)}
.setup-switch input:focus-visible+span{outline:3px solid var(--accent)}
.setup-switch p{margin-top:12px;font-size:var(--step-small)}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:end;margin-bottom:40px}
.price-card{background:var(--c);border-radius:20px;min-height:var(--h);padding:28px 28px 92px;position:relative;display:flex;flex-direction:column;gap:12px}
.price-card[hidden]{display:none}
.price-card h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tag{font-size:13px;font-weight:500;letter-spacing:0;background:var(--ink);color:var(--paper);padding:5px 10px;border-radius:999px}
.plan-price{font-size:var(--step-body)}
.plan-price strong{display:block;font-size:var(--step-head);letter-spacing:-.035em;line-height:1}
.price-card ul{font-size:var(--step-small);margin-top:4px}
.plan-setup{font-size:var(--step-small);margin-top:auto}
.plan-cta{position:absolute;left:8px;right:8px;bottom:8px;min-height:64px;justify-content:flex-start;padding:0 22px;border-radius:14px;background:var(--ink);color:var(--paper)}
.plan-cta:hover{background:var(--accent)}
.trial-card{background:var(--paper);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px;min-height:300px;justify-content:space-between}

/* FAQ: a band per question, all answers visible. */
.faq{padding:0}
.faq-head{min-height:40svh;padding:var(--gap) var(--m) 48px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.faq-head h2{margin:0}
.faq dl{margin:0}
.band{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:56px var(--m);background:var(--field-2)}
.band:nth-child(even){background:var(--paper)}
.band dt{grid-column:1/6;font-size:var(--step-lead);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.band dd{grid-column:7/13;max-width:60ch;display:grid;gap:12px}

/* Closing. */
.cta{min-height:70svh;display:flex;flex-direction:column;justify-content:center;gap:28px}
.cta-line{font-size:var(--step-lead);display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.btn-inline{min-height:56px;font-size:var(--step-lead)}

/* Footer: the name first, then where to reach us. */
.foot{padding:72px var(--m) 32px;overflow:hidden}
.foot-name{font-size:clamp(96px,24vw,360px);font-weight:800;letter-spacing:-.05em;line-height:.8;margin:0 0 72px -.04em;color:var(--paper)}
.foot-row{display:grid;grid-template-columns:5fr 7fr;gap:32px;margin-bottom:96px}
.places a{font-size:var(--step-lead);font-weight:800;color:var(--field-1);text-decoration:none}
.places a:hover{text-decoration:underline}
.places p{margin-top:12px;color:#d9d6cf}
.foot nav{display:flex;flex-wrap:wrap;gap:16px 32px;align-content:start;justify-content:flex-end}
.foot nav a{text-decoration:none} .foot nav a:hover{text-decoration:underline}
.foot-legal{display:flex;justify-content:space-between;gap:16px;font-size:var(--step-small);color:#d9d6cf}

/* Motion: entrances once per section, transform and opacity only, content never hidden without script. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.js .reveal.in{opacity:1;transform:none}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.owner-img{animation:drift 6s ease-in-out infinite alternate}
.chat-out{animation:drift 7s ease-in-out -2s infinite alternate}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .owner-img,.chat-out{animation:none}
  .bar{transition:none}
}

/* Tablet. */
@media (max-width:1000px){
  .bar nav{display:none}
  .bar .btn{margin-left:auto}
  .hero-lower{grid-template-columns:1fr}
  .hero-copy,.owner{grid-column:1/-1}
  .owner{justify-self:center;max-width:460px;margin-top:24px}
  .reply{left:-4%}
  .split{grid-template-columns:1fr}
  .split-in,.split-out{padding-bottom:140px}
  .two-col,.setup-grid,.compare-foot,.pricing-top,.foot-row{grid-template-columns:1fr}
  .setup-card.managed{margin:0}
  .pricing-grid{grid-template-columns:1fr 1fr;align-items:stretch}
  .price-card{min-height:0}
  .band{grid-template-columns:1fr;gap:12px;padding:40px var(--m)}
  .band dt,.band dd{grid-column:1/-1}
  .foot nav{justify-content:flex-start}
}
/* Phone: its own composition. */
@media (max-width:640px){
  :root{--gap:88px}
  .bar{height:60px;gap:12px}
  .bar .btn{min-height:44px;padding:0 16px;font-size:15px}
  .wordmark{font-size:22px}
  h1{font-size:10.4vw}
  .hero{padding-top:96px;gap:32px}
  .reply{left:0;bottom:-4%;width:min(300px,82%)}
  .chat-out{right:0;top:30%;max-width:62%}
  .bar-chart{flex-direction:column;min-height:0}
  .bar-chart li{min-width:0;min-height:calc(72px * var(--g))}
  .comparison-picker{display:block}
  .comparison-section:has(#compare-groups:checked) :is([data-alternative="excel"],[data-alternative="zoho"]),
  .comparison-section:has(#compare-excel:checked) :is([data-alternative="groups"],[data-alternative="zoho"]),
  .comparison-section:has(#compare-zoho:checked) :is([data-alternative="groups"],[data-alternative="excel"]){display:none}
  .comparison-table th,.comparison-table td{padding:12px 8px}
  .poster-list a{flex-direction:column;align-items:flex-start;gap:6px}
  .pl-word{font-size:15vw}
  .pl-fact{text-align:left;margin-bottom:22px}
  .pricing-grid{grid-template-columns:1fr}
  .split-title{font-size:9.5vw}
  .foot-legal{flex-direction:column}
}

/* Round 1 fixes. */
:root{--paper:#f4f4f2}
.chapter p:not(.statement):not(.lead):not(.cta-line){max-width:65ch}
.hero{justify-content:flex-start;gap:36px;padding-top:104px}
.hero h1{font-size:clamp(3.25rem,0.8rem + 7.2vw,7.5rem)}
.hero-lower{align-items:start}
.hero-copy{padding-top:24px}
.owner{max-width:440px}
.flow-demo .fd-stage.fresh .fd-line,.flow-demo .fd-stage.fresh .fd-sub{visibility:hidden}
.flow-demo .fd-compose div,.flow-demo .fd-link span{color:#4a5560}
.flow-demo .fd-st,.flow-demo .fd-day{color:#41465a}
.faq-head{min-height:0;padding-top:72px}
.cta{display:grid;grid-template-columns:7fr 5fr;align-items:center;gap:48px}
.langs ul{list-style:none;display:grid;gap:4px;margin-top:12px;font-size:var(--step-head);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.langs li:lang(ml),.langs li:lang(hi),.langs li:lang(ta),.langs li:lang(te),.langs li:lang(kn){letter-spacing:0;font-weight:700;font-family:system-ui,sans-serif}
@media (max-width:1000px){.cta{grid-template-columns:1fr}}
@media (max-width:640px){
  .split-title{position:static;margin-top:40px}
  .split-in,.split-out{padding-bottom:64px}
  .comparison-table thead .tusker-column{font-size:var(--step-body)}
}
.langs ul{margin-top:16px}
.flow-demo #fdKey,.flow-demo .fd-nav span,.flow-demo .fd-nx small,.flow-demo .fd-vlabel,.flow-demo .fd-prize small{color:#3f4552}
@media (max-width:640px){.hero h1{font-size:10vw}}
.bar{z-index:50}
.pl-fact,.places p,.foot-legal,.split-label{color:#e8e8e6}
.flow-demo .fd-msg .t,.flow-demo .fd-msg time{color:#3f5a4c}
.price-card .plan-price + p{font-size:var(--step-small)}
.bar[data-on="accent"] .btn{background:#fff;color:var(--accent)}
.pricing-top h2{margin-bottom:24px}

/* Fewer colours: three grounds (periwinkle, off-white, ink) and the logo blue for actions only.
   Chapters alternate between them; the old pastel slots map onto these. */
:root{--paper:#f4f4f2;--field-2:var(--paper);--field-3:var(--paper);--field-4:var(--field-1);--field-5:var(--paper)}
.bar-chart li.won{color:var(--paper)}
.setup-card.managed{background:#fff}
.band:nth-child(even){background:#fff}
.price-card.featured-plan{color:var(--paper)}
.price-card.featured-plan .plan-cta{background:var(--accent)}
.price-card.featured-plan .plan-cta:hover{background:var(--accent-hover)}
.trial-card{background:var(--paper)}
.flow-demo{--fd-canvas:var(--paper)}
.flow-demo .fd-switch,.flow-demo .fd-day.now,.flow-demo .fd-btn{background:#fff}
.setup-switch div{background:#fff}

/* Calming pass: a softer navy accent, smaller display type, sections sized to their content,
   black kept for the footer only. */
:root{
  --accent:#2e4a86; --accent-hover:#243b6c;
  --step-head:clamp(2.125rem,1.3rem + 2.6vw,3.75rem);
  --step-display:clamp(2.75rem,0.9rem + 5vw,5.75rem);
  --gap:clamp(72px,7vw,120px);
}
::selection{background:#c3cbe5;color:var(--ink)}
[data-field="white"]{background:#fff;color:var(--ink)}
.hero{min-height:0;padding-top:120px;padding-bottom:var(--gap);gap:40px}
.hero h1{font-size:clamp(2.75rem,0.7rem + 5.4vw,5.75rem);line-height:.95}
.split,.poster{min-height:0}
.cta{min-height:0}
.split-in,.split-out{padding-bottom:140px}
.split-title{font-size:clamp(30px,3vw,48px)}
.split-in .split-label{color:var(--muted)}
.split-in textarea{background:var(--paper);color:var(--ink)}
.split-in textarea:focus-visible{outline-color:var(--accent)}
.presets button{background:var(--paper);color:var(--ink)}
.presets button:hover{background:#e6e6e3}
.split-title-a{color:var(--ink)}
.pl-word{font-size:clamp(2.75rem,1rem + 4.6vw,5.5rem);line-height:1}
.pl-fact{color:#dfe4f0}
.poster-list a:hover .pl-word,.poster-list a:focus-visible .pl-word{color:#c3cbe5}
.poster-list{margin:40px 0 32px}
.foot-name{font-size:clamp(64px,12vw,180px);margin-bottom:48px}
.foot-row{margin-bottom:56px}
.langs ul{font-size:var(--step-lead)}
.bar-chart{min-height:max(16vh,140px);margin-bottom:56px}
.faq-head{padding-top:56px}
.band{padding-top:40px;padding-bottom:40px}
.st-new{background:#e3e7f3;color:#243b6c}
@media (max-width:640px){
  .hero h1{font-size:9vw}
  .pl-word{font-size:11vw}
  .split-in,.split-out{padding-bottom:56px}
}

/* Accent: Tusker's logo lime for actions and highlights (always with black text), navy for the
   dark bands and for blue text. */
:root{--lime:#b5ed6d;--lime-hover:#a3e04f;--navy:#2e4a86;--accent-ink:var(--ink)}
[data-field="accent"]{background:var(--navy);color:#fff}
.btn,.plan-cta:hover,.price-card.featured-plan .plan-cta,.flow-demo .fd-play{background:var(--lime);color:var(--ink)}
.btn:hover,.price-card.featured-plan .plan-cta:hover,.flow-demo .fd-play:hover{background:var(--lime-hover);color:var(--ink)}
.bar[data-on="accent"] .btn{background:var(--lime);color:var(--ink)}
.hero h1 span:first-child{color:var(--navy)}
.text-link:hover{text-decoration-color:var(--navy)}
:focus-visible{outline-color:var(--navy)}
[data-field="accent"] :focus-visible,[data-field="ink"] :focus-visible{outline-color:var(--lime)}
::selection{background:var(--lime);color:var(--ink)}
.rec-stages li.now::before{background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink)} /* taste-skill-ignore: stage ring inside an interface fragment */
.rec-stages li.done::before{background:var(--navy)}
.bar-chart li.won{background:var(--lime)!important;color:var(--ink)}
.comparison-table .tusker-column{background:var(--navy)}
.poster-list a:hover .pl-word,.poster-list a:focus-visible .pl-word{color:var(--lime)}
.places a{color:var(--lime)}
.flow-demo{--fd-blue:var(--navy);--fd-blue-d:var(--navy)}

/* Buttons: solid black, white medium-weight text at body size, lime as a small dot.
   On the navy and black bands they turn lime with black text. */
.btn,.btn-lg,.btn-inline,.flow-demo .fd-play{background:var(--ink);color:#fff;font:500 var(--step-body)/1 var(--face);min-height:52px;padding:0 22px;gap:12px}
.btn::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none}
.btn:hover,.flow-demo .fd-play:hover{background:#2c2c2c;color:#fff}
.bar[data-on="accent"] .btn,.bar[data-on="ink"] .btn,[data-field="accent"] .btn,[data-field="ink"] .btn{background:var(--lime);color:var(--ink)}
.bar[data-on="accent"] .btn::after,.bar[data-on="ink"] .btn::after,[data-field="accent"] .btn::after,[data-field="ink"] .btn::after{background:var(--ink)}
.text-link{text-decoration-thickness:1px;text-underline-offset:.3em}
.bar .btn{min-height:44px}

/* Comparison: the price fact first, then a table you can scan. */
.price-fact{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:48px}
.price-fact p{background:#fff;border-radius:20px;padding:28px;display:grid;gap:8px;max-width:none}
.price-fact p:last-child{background:transparent}
.price-fact b{font-size:var(--step-head);font-weight:800;letter-spacing:-.035em;line-height:1}
.price-fact span{font-size:var(--step-body);max-width:32ch}
.comparison-table thead th{font-size:var(--step-small);font-weight:800;border-bottom:2px solid var(--ink)}
.comparison-table thead .tusker-column{font-size:var(--step-small)}
.comparison-table .tusker-column{background:#fff;color:var(--ink);font-weight:500}
.comparison-table tr.group th{font-size:var(--step-small);font-weight:800;padding-top:28px;border-bottom:2px solid var(--ink);background:transparent}
.comparison-table td,.comparison-table tbody th{font-size:var(--step-small)}
.comparison-table .cost-row td,.comparison-table .cost-row th{font-size:var(--step-body)}
.mk{display:inline-flex;align-items:center;gap:6px}
.mk svg{width:18px;height:18px;flex:none;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mk.yes svg{stroke:#1d6b3a} .mk.no{color:var(--muted)} .mk.no svg{stroke:#9b2c2c}
.mk.yes{font-weight:500}
@media (max-width:640px){.price-fact{grid-template-columns:1fr}}

/* Hero: words on the left, the owner scene at the top right beside the headline. */
.hero{display:grid;grid-template-columns:7fr 5fr;align-items:center;gap:32px 48px;padding-top:110px}
.hero-text{display:grid;gap:40px;align-content:center}
.hero-copy{padding:0}
.hero .owner{grid-column:auto;justify-self:end;max-width:460px;margin:0}
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero .owner{justify-self:center;max-width:420px}
}
.hero h1{font-size:clamp(2.5rem,0.6rem + 4.3vw,4.75rem)}
@media (min-width:641px){.hero h1 span{white-space:nowrap}}
@media (max-width:640px){.hero h1{font-size:9vw}}

/* Cost calculator: one white panel, a slider, two figures with bars sized to the price. */
.calc{background:#fff;border-radius:24px;padding:32px;margin-bottom:24px;display:grid;gap:24px}
.calc-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.calc-top label{font-weight:500}
.calc-top output{font-size:var(--step-lead);font-weight:800;letter-spacing:-.02em}
.calc input[type=range]{width:100%;accent-color:var(--ink);height:28px;cursor:pointer}
.calc-figs{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.fig{display:grid;gap:6px;align-content:start}
.fig span{font-size:var(--step-small);font-weight:500}
.fig strong{font-size:var(--step-head);font-weight:800;letter-spacing:-.035em;line-height:1}
.fig small{font-size:var(--step-small);color:var(--muted)}
.fig .meter{display:block;height:12px;border-radius:6px;background:#eceef5;margin-top:10px;overflow:hidden}
.fig .meter i{display:block;height:100%;border-radius:6px;transition:width .35s var(--ease-out)}
.fig.us .meter i{background:var(--lime)}
.fig.them .meter i{background:#9aa3c2}
.calc-save{font-size:var(--step-lead);font-weight:800;letter-spacing:-.02em;max-width:none}

/* Table: a calm white panel, soft row lines, a light tint on Tusker's column. */
.table-wrap{background:#fff;border-radius:24px;padding:8px 24px 16px}
.comparison-table th,.comparison-table td{border-bottom:1px solid #e9e9ee}
.comparison-table thead th{border-bottom:1px solid #d9dbe5;padding-top:20px}
.comparison-table tr.group th{border-bottom:0;padding-top:28px;color:var(--muted)}
.comparison-table .tusker-column{background:#eef1fb}
.comparison-table tbody tr:last-child th,.comparison-table tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){.calc{padding:22px}.calc-figs{grid-template-columns:1fr;gap:20px}.table-wrap{padding:4px 8px 8px}}

/* Calculator, compact: one row. */
.calc{grid-template-columns:auto 1fr 1fr auto;align-items:center;gap:16px 32px;padding:18px 24px;border-radius:20px}
.calc-size{display:flex;align-items:center;gap:10px;font-weight:500}
.calc-size output{font-size:var(--step-lead);font-weight:800;min-width:2ch;text-align:center}
.step{width:40px;height:40px;border-radius:50%;border:0;background:#eef1fb;color:var(--ink);font:500 20px/1 var(--face);cursor:pointer;transition:background .2s,transform .16s var(--ease-out)}
.step:hover{background:#dfe4f5}.step:active{transform:scale(.92)}
.calc-fig{display:flex;align-items:baseline;gap:10px;max-width:none}
.calc-fig span{font-size:var(--step-small);color:var(--muted)}
.calc-fig strong{font-size:var(--step-lead);font-weight:800;letter-spacing:-.02em}
.calc-fig.them strong{color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#b44}
.calc-save{font-size:var(--step-body);font-weight:800;background:var(--lime);border-radius:999px;padding:8px 16px;justify-self:end}

/* Table: Tusker's column runs unbroken; Yes and No read at a glance. */
.comparison-table tr.group td{border-bottom:0;padding-top:28px}
.mk{padding:5px 11px 5px 8px;border-radius:999px;font-weight:500}
.mk.yes{background:#d9f0de;color:#145c2c}
.mk.yes svg{stroke:#145c2c}
.mk.no{background:#f9dede;color:#8f1d1d}
.mk.no svg{stroke:#8f1d1d}
@media (max-width:900px){.calc{grid-template-columns:1fr 1fr}.calc-size{grid-column:1/-1}.calc-save{grid-column:1/-1;justify-self:start}}

/* Calculator: an inline slider in the same row. */
.calc-size input[type=range]{width:clamp(140px,16vw,220px);height:28px;accent-color:var(--ink);cursor:pointer;margin:0 4px}
@media (max-width:900px){.calc-size input[type=range]{flex:1;width:auto}}

/* Calculator: four labelled boxes in one row. */
.calc{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:8px;padding:8px;border-radius:24px;align-items:stretch}
.calc .cell{display:grid;gap:6px;align-content:start;padding:16px 20px;border-radius:16px;background:#f4f5fa}
.calc .cell > span,.calc .cell > label{font-size:var(--step-small);color:var(--muted);font-weight:500}
.calc .cell strong{font-size:var(--step-lead);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.calc .cell small{font-size:13px;color:var(--muted)}
.calc .cell.them strong{color:var(--muted);text-decoration:none}
.calc .cell.save{background:var(--lime)}
.calc .cell.save > span,.calc .cell.save small{color:var(--ink)}
.size-row{display:flex;align-items:center;gap:14px}
.size-row input[type=range]{flex:1;min-width:0;height:28px;accent-color:var(--ink);cursor:pointer;margin:0}
.size-row output{font-size:var(--step-lead);font-weight:800;letter-spacing:-.02em;white-space:nowrap}
@media (max-width:900px){.calc{grid-template-columns:1fr 1fr}.calc .cell.size{grid-column:1/-1}}

/* The dark bands are black, not navy. */
[data-field="accent"]{background:var(--ink);color:#fff}
.pl-fact{color:#d9d9d6}

/* Hero picture: the headline told in two cards. A lead that is slipping (stop losing leads)
   and a deal that just closed (start closing deals), around an owner drawn in the site's palette. */
.hero .owner{max-width:480px}
.hcard{position:absolute;display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 14px 34px #1414141f} /* taste-skill-ignore: interface fragment floating over the illustration */
.hcard p{display:grid;gap:2px;font-size:13px;color:var(--muted);line-height:1.35;max-width:none}
.hcard b{font-size:15px;color:var(--ink);font-weight:800;letter-spacing:-.01em}
.hcard img{flex:none}
.hcard-tag{flex:none;font-size:13px;font-weight:800;border-radius:999px;padding:5px 10px}
.hcard-tag.lost{background:#f9dede;color:#8f1d1d}
.hcard-tag.won{background:var(--lime);color:var(--ink)}
.hcard-lost{top:9%;left:-10%}
.hcard-won{bottom:7%;right:-8%}
.hcard-lost{animation:drift 7s ease-in-out -1s infinite alternate}
.hcard-won{animation:drift 6s ease-in-out -3s infinite alternate}
@media (prefers-reduced-motion:reduce){.hcard-lost,.hcard-won{animation:none}}
@media (max-width:640px){.hcard-lost{left:0;top:4%}.hcard-won{right:0;bottom:2%}.hcard b{font-size:14px}}
.hcard-won{right:-2%}

/* Hero on white: the illustration keeps its true colours (no blending, so nothing flashes while it fades in). */
.hero .owner-img{mix-blend-mode:normal;filter:none;clip-path:inset(1px)}
/* The illustration has a transparent background, so it sits on the periwinkle as drawn. */
.hero .owner-img{clip-path:none}

/* Around the owner: a stage tracker that has reached Won, and a staff voice note arriving on WhatsApp. */
.hcard-stages{top:2%;right:-6%;padding:12px 16px}
.hcard-stages ol{list-style:none;display:flex;gap:6px;margin:0;padding:0}
.hcard-stages li{position:relative;width:14px;height:14px;border-radius:50%;background:#e4e6ef;font-size:0}
.hcard-stages li.done{background:var(--ink)}
.hcard-stages li.now{background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink)} /* taste-skill-ignore: stage ring inside an interface fragment */
.hcard-stages li+li::before{content:"";position:absolute;right:100%;top:6px;width:6px;height:2px;background:var(--ink)}
.hcard-stages::after{content:"Won";font-size:13px;font-weight:800;margin-left:4px}
.hcard-voice{top:46%;left:-16%;background:#d9fdd3;border-radius:16px 4px 16px 16px}
.hcard-voice p{color:#3d5a45}
.hcard-voice b{color:#14301d}
.vn-play{width:28px;height:28px;border-radius:50%;background:#1f7a45;flex:none;position:relative}
.vn-play::before{content:"";position:absolute;left:11px;top:8px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.vn-wave{display:flex;align-items:center;gap:2px;height:22px}
.vn-wave i{display:block;width:3px;border-radius:2px;background:#1f7a45;height:40%}
.vn-wave i:nth-child(3n){height:90%} .vn-wave i:nth-child(3n+1){height:60%} .vn-wave i:nth-child(4n){height:30%}
.hcard-stages{animation:drift 8s ease-in-out -4s infinite alternate}
.hcard-voice{animation:drift 7.5s ease-in-out -2s infinite alternate}
@media (prefers-reduced-motion:reduce){.hcard-stages,.hcard-voice{animation:none}}
@media (max-width:640px){.hcard-stages{right:0;top:-2%}.hcard-voice{left:0;top:48%}.vn-wave{display:none}}
.hcard-stages{right:0;top:0}
@media (max-width:640px){.hcard-stages{top:-9%}.hcard-lost{top:6%}}
@media (max-width:640px){.hcard-stages{display:none}.hcard-lost{top:2%}}

/* Demo: no box. The start cover is the section's own colour, so it reads as a fade, not a panel. */
.flow-demo .fd-stage{border-radius:0}
.flow-demo .fd-go{background:color-mix(in srgb,var(--paper) 90%,transparent);border-radius:0;inset:-24px calc(var(--m) * -1)}

/* Demo: no box. Phone and app the same height, and the day steps, the flow and the controls fit on one screen. */
.flow-demo{--fd-ph:460px;padding-top:calc(var(--gap) * .8);padding-bottom:calc(var(--gap) * .8)}
.flow-demo .fd-head{margin-bottom:16px}
.flow-demo .fd-days{margin:0 0 12px}
.flow-demo .fd-line{font-size:var(--step-body);margin-bottom:2px}
.flow-demo .fd-sub{font-size:var(--step-small);margin-bottom:14px}
.flow-demo .fd-scene{grid-template-columns:250px 1fr 500px;max-width:1100px;margin-inline:auto}
.flow-demo .fd-phone{width:250px}
.flow-demo .fd-ctl{margin-top:16px}
.flow-demo .fd-go{background:color-mix(in srgb,var(--paper) 90%,transparent);inset:-8px;border-radius:0}
@media (max-width:1000px){.flow-demo .fd-scene{grid-template-columns:1fr}.flow-demo .fd-app{width:100%;max-width:500px}}
/* Demo heading on one line; each step's title back at a readable size. */
.flow-demo .fd-head h2{max-width:none}
@media (min-width:900px){.flow-demo .fd-head h2{white-space:nowrap}}
.flow-demo .fd-line{font-size:var(--step-lead);margin-bottom:4px}
.flow-demo .fd-sub{font-size:var(--step-body)}
/* Room between the layers: heading, day steps, step title, devices. */
.flow-demo{--fd-ph:430px}
.flow-demo .fd-head{margin-bottom:36px}
.flow-demo .fd-days{margin:0 0 32px}
.flow-demo .fd-line{margin-bottom:8px}
.flow-demo .fd-sub{margin-bottom:28px}

/* "Every enquiry has a story": two features side by side, each a heading, one sentence and a small picture. */
.stages > .statement{max-width:52ch;margin-bottom:48px}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px clamp(32px,5vw,80px);margin-bottom:40px}
.feat{display:grid;gap:14px;align-content:start}
.feat h3{max-width:22ch}
.feat > p{max-width:46ch}
.feat-pic{background:#fff;border-radius:20px;padding:20px;margin-top:10px;display:grid;gap:12px;font-size:var(--step-small)}
.chatpic .bub{max-width:85%;border-radius:14px;padding:10px 14px;margin:0}
.chatpic .mine{justify-self:end;background:#d9fdd3;color:#14301d;border-radius:14px 4px 14px 14px}
.chatpic .bot{background:var(--paper);border-radius:4px 14px 14px 14px;display:grid;gap:8px}
.chatpic .bot ul{list-style:none;display:grid;gap:6px;margin:0;padding:0}
.chatpic .bot li{background:#fff;border-radius:10px;padding:8px 10px;color:var(--muted)}
.chatpic .bot li b{display:block;color:var(--ink)}
.tl-head{font-weight:800;color:var(--ink)}
.timeline{list-style:none;margin:0;padding:0 0 0 18px;display:grid;gap:14px;position:relative}
.timeline::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:#e4e6ef}
.timeline li{position:relative;display:grid;gap:2px}
.timeline li::before{content:"";position:absolute;left:-18px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.timeline li:last-child::before{background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink)} /* taste-skill-ignore: timeline dot inside an interface fragment */
.timeline small{font-size:13px;color:var(--muted)}
.timeline b{color:var(--ink)}
.timeline span{color:var(--muted)}
@media (max-width:900px){.feat-grid{grid-template-columns:1fr}}

/* Three features side by side. */
.feat-grid{grid-template-columns:repeat(3,1fr);gap:40px clamp(24px,3vw,48px)}
.chatpic .btns{display:flex;gap:20px;margin:6px 0 0;color:#0b7a55}
.chatpic .saved{margin:0;display:flex;align-items:center;gap:8px;font-weight:500;color:#145c2c}
.chatpic .saved::before{content:"";width:16px;height:16px;border-radius:50%;background:#d9f0de;border:4px solid #1f7a45}
@media (max-width:1100px){.feat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.feat-grid{grid-template-columns:1fr}}

/* Align the three features on shared rows: headings, sentences and picture cards line up, cards equal height. */
.feat-grid{grid-template-rows:auto auto 1fr;row-gap:0}
.feat{grid-row:span 3;display:grid;grid-template-rows:subgrid;gap:14px}
.feat-pic{align-content:start;height:100%}
.chatpic .mine{justify-self:end}
@media (max-width:1100px){.feat-grid{grid-template-rows:none;row-gap:40px}.feat{grid-row:auto;grid-template-rows:none}}

/* The feature pictures as WhatsApp chats with Tusker. */
.feat-pic.wa{padding:0;gap:0;overflow:hidden;background:#efe7de;border-radius:20px;align-content:start}
.wa-head{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#075e54;color:#fff}
.wa-head b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f4d58d;color:#0b1f36;font-size:14px}
.wa-head span{display:grid;font-weight:700;font-size:15px;line-height:1.2}
.wa-head small{font-weight:400;font-size:12px;opacity:.85}
.wa-body{display:grid;gap:6px;padding:14px 12px 16px;align-content:start}
.wm{max-width:86%;padding:7px 10px 5px;border-radius:10px;font-size:14px;line-height:1.4;color:#111b21;position:relative}
.wm p{margin:0}
.wm time{display:flex;justify-content:flex-end;align-items:center;gap:3px;font-size:11px;color:#667781;margin-top:2px}
.wm time svg{width:16px;height:11px;fill:none;stroke:#53bdeb;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wm.out{justify-self:end;background:#d9fdd3;border-top-right-radius:2px}
.wm.in{justify-self:start;background:#fff;border-top-left-radius:2px}
.wa-btns{display:grid;margin:6px -10px -5px}
.wa-btns span{text-align:center;padding:8px;color:#00a884;font-weight:500;border-top:1px solid #e9edef} /* taste-skill-ignore: WhatsApp reply-button divider inside an interface fragment */

/* The history card is the Tusker app, not WhatsApp: same size as the chats, the app's own header. */
.feat-pic.appcard{padding:0;gap:0;overflow:hidden;background:#fff;border-radius:20px;align-content:start}
.app-head{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f1f2f7;font-weight:800;font-size:15px;min-height:54px}
.app-head em{margin-left:auto;font-style:normal;font-weight:500;font-size:13px;background:#fff;border-radius:8px;padding:4px 10px;color:var(--ink)}
.app-body{display:grid;gap:12px;padding:16px 18px 18px}

/* FAQ: three topic tabs, questions open on click (the first one open), like the old site. */
.faq-list{padding:48px var(--m) var(--gap);max-width:1000px}
.faq-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.faq-tabs button{font:500 var(--step-body)/1 var(--face);min-height:44px;padding:0 20px;border-radius:999px;border:0;background:#fff;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.faq-tabs button:hover{background:#e9e9e6}
.faq-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.faq-list [role=tabpanel]{display:grid;gap:8px}
.faq-list details{background:#fff;border-radius:16px}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font-size:var(--step-lead);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:16px}
.faq-indicator{flex:none;width:28px;height:28px;border-radius:50%;background:var(--paper);position:relative;transition:transform .25s var(--ease-out)}
.faq-indicator::before,.faq-indicator::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:2px;border-radius:1px;background:var(--ink)}
.faq-indicator::after{transform:rotate(90deg);transition:transform .25s var(--ease-out)}
.faq-list details[open] .faq-indicator::after{transform:rotate(0)}
.faq-list details > div{padding:0 24px 22px;display:grid;gap:12px;max-width:64ch}
@media (prefers-reduced-motion:reduce){.faq-indicator,.faq-indicator::after{transition:none}}
@media (max-width:640px){.faq-list summary{padding:16px 18px;font-size:var(--step-body)}.faq-list details > div{padding:0 18px 18px}}
.faq-list [role=tabpanel][hidden]{display:none}

/* Closing: one centred moment. Heading, one line, the two actions. */
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;padding-top:var(--gap);padding-bottom:var(--gap)}
.cta h2{max-width:18ch;margin:0}
.cta .statement{max-width:40ch;margin:0}
.cta .actions{justify-content:center;margin-top:8px}