/*
 * Booked — the home page.
 *
 * Everything below the nav and above the footer: the hero and its animated
 * booking mock, the designer, triage, the dark follow-ups board, payments,
 * the bento grid, pricing and the FAQ.
 */

/* ---------- hero ---------- */
.hero{padding:88px 0 40px;position:relative}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:64px;align-items:center}
.hero-copy{padding-right:16px;min-width:0}
.hero-copy h1{margin:0 0 22px;max-width:13ch}
.hero-copy .lead{margin-bottom:34px}
.hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.hero-fine{font-size:14px;color:var(--ink-3);display:flex;gap:18px;flex-wrap:wrap}
.hero-fine span{display:inline-flex;align-items:center;gap:6px}
.hero-fine svg{width:14px;height:14px}
.hero-copy > *{opacity:0;transform:translateY(16px);animation:up .8s var(--ease) forwards}
.hero-copy > :nth-child(2){animation-delay:.1s}.hero-copy > :nth-child(3){animation-delay:.2s}.hero-copy > :nth-child(4){animation-delay:.3s}
.stage{opacity:0;transform:translateY(24px) scale(.97);animation:up .9s var(--ease) .25s forwards}
@keyframes up{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-copy > *,.stage{animation:none;opacity:1;transform:none}}
@media(max-width:960px){.hero{padding-top:56px}.hero .wrap{grid-template-columns:1fr;gap:40px}.hero-copy{padding-right:0}.hero-copy h1{max-width:none}}

/* hero mock stage */
.stage{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center;min-width:0}
.stage-bg{position:absolute;inset:-40px -40px;border-radius:40px;background:
 radial-gradient(60% 55% at 70% 30%,rgba(43,76,255,.18),transparent 70%),
 radial-gradient(45% 45% at 20% 80%,rgba(24,183,122,.14),transparent 70%),
 var(--mist);z-index:0;overflow:hidden}
.stage-bg svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.form-mock{position:relative;z-index:1;width:360px;background:#fff;border-radius:22px;box-shadow:0 30px 70px -20px rgba(14,18,32,.28),0 0 0 1px rgba(14,18,32,.05);overflow:hidden;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.form-mock{animation:none}}
.form-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.form-head .title{font-weight:600;font-size:14px}
.form-head .biz{display:flex;align-items:center;gap:8px}
.form-head .avatar{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#2B4CFF,#7A8CFF)}
.steps-bar{display:flex;gap:4px;padding:10px 18px 0}
.steps-bar i{flex:1;height:3px;border-radius:2px;background:var(--line);transition:background .3s}
.steps-bar i.done{background:var(--blue)}
.pane{padding:16px 18px 18px;min-height:330px;position:relative}
.screen{position:absolute;inset:16px 18px 18px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;pointer-events:none}
.screen.on{opacity:1;transform:none;pointer-events:auto}
.screen h4{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em;margin-bottom:12px}
.opt{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;font-size:14px;font-weight:500}
.opt small{color:var(--ink-3);font-weight:400;display:block;font-size:12px}
.opt.pick{border-color:var(--blue);background:var(--blue-tint)}
.opt .price{font-weight:600}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px}
.cal span{font-size:12px;text-align:center;padding:7px 0;border-radius:8px;color:var(--ink-2)}
.cal .dow{color:var(--ink-3);font-weight:500;font-size:11px}
.cal .off{color:#C7CBD8}
.cal .sel{background:var(--ink);color:#fff;font-weight:600}
.cal .dot{position:relative}
.cal .dot::after{content:"";position:absolute;bottom:2px;left:50%;width:3px;height:3px;border-radius:50%;background:var(--blue);transform:translateX(-50%)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.slots span{font-size:13px;text-align:center;padding:9px 0;border:1px solid var(--line);border-radius:9px;font-weight:500}
.slots .sel{border-color:var(--blue);background:var(--blue-tint);color:var(--blue-deep)}
.slots .few{position:relative}
.slots .few::after{content:"2 left";position:absolute;top:-7px;right:-4px;font-size:9px;background:var(--amber-tint);color:#9C6400;padding:1px 5px;border-radius:99px;font-weight:600}
.q{margin-bottom:10px}
.q label{font-size:13px;font-weight:500;display:block;margin-bottom:6px}
.q .yn{display:flex;gap:6px}
.q .yn span{flex:1;text-align:center;padding:8px;border:1px solid var(--line);border-radius:9px;font-size:13px}
.q .yn .sel{border-color:var(--blue);background:var(--blue-tint);color:var(--blue-deep);font-weight:600}
.field{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--ink-2);margin-bottom:8px}
.field b{color:var(--ink);font-weight:500}
.wallet{display:flex;gap:6px;margin:4px 0 8px}
.wallet span{flex:1;text-align:center;padding:9px 0;border-radius:9px;font-size:12px;font-weight:600;background:#000;color:#fff}
.wallet span.g{background:#fff;color:#000;border:1px solid var(--line)}
.paybtn{margin-top:4px;background:var(--ink);color:#fff;text-align:center;padding:12px;border-radius:12px;font-weight:600;font-size:14px}
.done{text-align:center;padding-top:26px}
.done .tick{width:56px;height:56px;border-radius:50%;background:var(--mint-tint);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.done .tick svg{width:26px;height:26px;stroke:var(--mint);stroke-width:2.5;fill:none;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .5s .2s}
.screen.on .done .tick svg{stroke-dashoffset:0}
.done p{font-size:13px;color:var(--ink-2)}
.summary{margin-top:14px;text-align:left;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px}
.summary div{display:flex;justify-content:space-between;padding:3px 0}
.summary div span:last-child{font-weight:500}

/* floating chips */
.chip{position:absolute;z-index:2;background:#fff;border-radius:14px;box-shadow:0 14px 34px -12px rgba(14,18,32,.3),0 0 0 1px rgba(14,18,32,.05);padding:10px 14px;display:flex;gap:10px;align-items:center;font-size:13px;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .4s,transform .4s}
.chip.show{opacity:1;transform:none}
.chip:nth-child(3).show{transition-delay:.15s}.chip:nth-child(4).show{transition-delay:.3s}
.chip .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chip .ic svg{width:16px;height:16px}
.chip b{display:block;font-weight:600;font-size:13px}
.chip span{color:var(--ink-3);font-size:12px}
.chip-1{top:38px;left:-14px}
.chip-2{bottom:120px;right:-20px}
.chip-3{bottom:18px;left:0}
@media(max-width:1100px){.chip-1{left:0}.chip-2{right:0}.chip-3{left:10px}}
@media(max-width:460px){.form-mock{width:100%}.stage{min-height:520px}.stage-bg{inset:-20px -24px}.chip{display:none}}

/* marquee */
.uses{padding:40px 0 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:56px;overflow:hidden}
.uses p{text-align:center;font-size:14px;color:var(--ink-3);margin-bottom:18px}
.marquee{display:flex;gap:14px;width:max-content;animation:scroll 40s linear infinite}
.marquee span{padding:9px 18px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap}
@keyframes scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* sections */
.sec{padding:110px 0}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-head h2{margin-bottom:18px}
.sec-head .lead{max-width:60ch}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--blue);margin-bottom:16px}
.tag i{width:8px;height:8px;border-radius:50%;background:currentColor}

/* ---------- designer section ---------- */
.designer{background:var(--mist);border-radius:32px;padding:56px;display:grid;grid-template-columns:1fr 1.15fr;grid-template-areas:"copy stage" "tabs stage" "more stage";grid-template-rows:auto auto 1fr;column-gap:48px;row-gap:0;align-items:start;position:relative;overflow:hidden}
.designer > *{position:relative;z-index:1}
.dcopy{grid-area:copy}
.designer .themes{grid-area:tabs;align-self:start}
.dmore{grid-area:more}
.dstage{grid-area:stage;align-self:center}
.designer h3{font-size:28px;margin-bottom:12px}
.designer .points{margin-top:24px;display:grid;gap:12px}
.designer .points div{display:flex;gap:12px;font-size:15px;color:var(--ink-2)}
.designer .points svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;stroke:var(--mint);stroke-width:2.5;fill:none}
.aibox{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.aibox .spark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#2B4CFF,#7CFFB8);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.aibox .spark svg{width:18px;height:18px;fill:#fff}
.aibox b{display:block;font-size:14.5px;margin-bottom:3px}
.aibox span{font-size:13.5px;color:var(--ink-2)}
.themes{display:flex;gap:6px;margin-top:26px;background:#fff;padding:5px;border-radius:999px;width:max-content;border:1px solid var(--line);flex-wrap:wrap}
.themes button{padding:8px 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-2);transition:background .2s,color .2s}
.themes button.on{background:var(--ink);color:#fff}

.dstage{position:relative;min-height:440px}
.dform{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .45s,transform .45s;pointer-events:none;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(14,18,32,.35)}
.dform.on{opacity:1;transform:none;pointer-events:auto}

.fa{background:#fff;display:grid;grid-template-columns:1.1fr .9fr;height:100%;font-family:var(--body)}
.fa .l{padding:22px;border-right:1px solid var(--line)}
.fa .r{padding:22px;background:var(--mist)}
.fa h5{font-family:var(--display);font-size:17px;letter-spacing:-.02em;margin-bottom:12px;font-weight:600}
.fa .svc{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px;font-size:13px;font-weight:500}
.fa .svc small{display:block;color:var(--ink-3);font-weight:400;font-size:11.5px}
.fa .svc.sel{border-color:var(--blue);background:var(--blue-tint)}
.fa .cal{margin:6px 0 10px}
.fa .cal span{font-size:11px;padding:5px 0}
.fa .slots span{background:#fff}
.fa .go{margin-top:12px;background:var(--blue);color:#fff;text-align:center;padding:11px;border-radius:10px;font-size:13px;font-weight:600}

.fb{background:#0B0D14;color:#fff;height:100%;padding:26px;font-family:var(--display);position:relative}
.fb::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 100% 0%,rgba(124,255,184,.18),transparent 60%);pointer-events:none}
.fb > *{position:relative}
.fb .kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7CFFB8;font-family:var(--body);font-weight:600;margin-bottom:8px}
.fb h5{font-size:34px;letter-spacing:-.04em;line-height:1;font-weight:600;margin-bottom:22px}
.fb h5 em{font-style:normal;color:#8A90A3}
.fb .rail{display:flex;gap:8px;overflow:hidden;margin-bottom:18px}
.fb .rail div{flex:0 0 58px;text-align:center;padding:10px 0;border:1px solid #23283A;border-radius:14px;font-family:var(--body)}
.fb .rail div b{display:block;font-size:20px;font-family:var(--display);letter-spacing:-.03em}
.fb .rail div span{font-size:11px;color:#8A90A3}
.fb .rail .sel{background:#7CFFB8;color:#0B0D14;border-color:#7CFFB8}
.fb .rail .sel span{color:#0B0D14}
.fb .times{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;font-family:var(--body)}
.fb .times span{padding:9px 14px;border-radius:99px;border:1px solid #23283A;font-size:13px;font-weight:500}
.fb .times .sel{background:#fff;color:#0B0D14;border-color:#fff}
.fb .artist{display:flex;align-items:center;gap:12px;font-family:var(--body);font-size:13px;padding:12px;border:1px solid #23283A;border-radius:14px;margin-bottom:14px}
.fb .artist i{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7CFFB8,#2B4CFF)}
.fb .artist small{display:block;color:#8A90A3;font-size:12px}
.fb .go{display:flex;justify-content:space-between;align-items:center;background:#7CFFB8;color:#0B0D14;padding:13px 16px;border-radius:99px;font-family:var(--body);font-weight:600;font-size:14px}

.fc{background:#F6EEE3;color:#3A2A18;height:100%;padding:26px;font-family:"Fraunces",Georgia,serif}
.fc h5{font-size:30px;font-weight:500;letter-spacing:-.01em;line-height:1.1;margin-bottom:4px}
.fc .sub{font-style:italic;font-size:15px;color:#8A6B4A;margin-bottom:18px}
.fc .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.fc .tiles div{border-radius:18px;padding:12px;aspect-ratio:1/1.05;display:flex;flex-direction:column;justify-content:flex-end;font-size:13px;font-family:var(--body);font-weight:500;position:relative;overflow:hidden}
.fc .tiles div::before{content:"";position:absolute;inset:0;opacity:.9}
.fc .tiles .t1::before{background:linear-gradient(160deg,#E6C7A6,#C8632B)}
.fc .tiles .t2::before{background:linear-gradient(160deg,#D8C4B0,#8A6B4A)}
.fc .tiles .t3::before{background:linear-gradient(160deg,#F2DFC8,#E0A56C)}
.fc .tiles div span{position:relative;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.25)}
.fc .tiles .sel{outline:3px solid #C8632B;outline-offset:2px}
.fc .pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;font-family:var(--body)}
.fc .pills span{padding:9px 16px;border-radius:99px;background:#fff;font-size:13px;font-weight:500;border:1px solid #E8DCC8}
.fc .pills .sel{background:#C8632B;color:#fff;border-color:#C8632B}
.fc .go{text-align:center;background:#3A2A18;color:#F6EEE3;padding:13px;border-radius:99px;font-family:var(--body);font-weight:600;font-size:14px}
@media(max-width:900px){
  .designer{grid-template-columns:1fr;grid-template-areas:"copy" "tabs" "stage" "more";grid-template-rows:auto;padding:24px 18px;row-gap:0}
  .designer .themes{width:100%;display:grid;grid-template-columns:repeat(3,1fr);margin:20px 0 14px;position:sticky;top:76px;z-index:5;box-shadow:0 6px 20px -10px rgba(14,18,32,.25)}
  .designer .themes button{padding:11px 0;text-align:center}
  .dmore{margin-top:22px}
  .fa{grid-template-columns:1fr}.fa .l{border-right:0;border-bottom:1px solid var(--line)}.dstage{min-height:640px}
}

/* ---------- triage + intake ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{border:1px solid var(--line);border-radius:24px;padding:36px;background:#fff}
.panel h3{margin-bottom:10px}
.panel > p{color:var(--ink-2);font-size:15px;margin-bottom:26px;max-width:46ch}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.triage{display:grid;gap:8px;position:relative}
.tq{background:var(--mist);border-radius:14px;padding:14px 16px;font-size:14px;font-weight:500}
.tq small{display:block;color:var(--ink-3);font-weight:400;font-size:12px;margin-top:2px}
.tr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding-left:22px;position:relative}
.tr::before{content:"";position:absolute;left:8px;top:-8px;bottom:50%;width:2px;background:var(--line);border-bottom-left-radius:8px}
.tr div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.35}
.tr div b{display:block;font-size:13px;margin-bottom:2px}
.tr .stop{border-color:#F3C9C9;background:#FFF5F5}
.tr .go{border-color:#BFE8D6;background:var(--mint-tint)}
.qlist{display:grid;gap:8px}
.ql{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:500}
.ql em{font-style:normal;font-size:11.5px;padding:3px 8px;border-radius:99px;background:var(--mist);color:var(--ink-2);font-weight:500}
.ql em.flag{background:var(--amber-tint);color:#9C6400}
.ql em.block{background:#FFECEC;color:#B42323}
.ql em.doc{background:var(--blue-tint);color:var(--blue-deep)}
.placements{margin-top:16px;font-size:13px;color:var(--ink-3)}
.placements b{color:var(--ink-2);font-weight:500}
.aitip{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--blue-deep);background:var(--blue-tint);padding:8px 12px;border-radius:99px;font-weight:500}
.aitip svg{width:14px;height:14px;fill:currentColor}

/* ---------- flows - dark section ---------- */
.flows{background:#0B0E1A;color:#fff;border-radius:40px;padding:96px 56px;margin:0 24px;position:relative;overflow:hidden;isolation:isolate}
/* background: soft colour blobs + fine dot grid + one glow behind the board */
.flows::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(38% 45% at 12% 18%,rgba(43,76,255,.45),transparent 65%),
  radial-gradient(30% 40% at 88% 85%,rgba(124,255,184,.22),transparent 65%),
  radial-gradient(28% 34% at 78% 22%,rgba(43,76,255,.28),transparent 65%),
  #0B0E1A}
.flows::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%)}
.flows .blob{position:absolute;border-radius:50%;filter:blur(70px);z-index:-1;pointer-events:none;will-change:transform}
.flows .blob.a{width:520px;height:520px;left:-160px;top:-140px;background:rgba(43,76,255,.4)}
.flows .blob.b{width:420px;height:420px;right:-120px;bottom:-140px;background:rgba(124,255,184,.22)}
.flows .inner{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;position:relative}
.flows h2{color:#fff}
.flows .lead{color:#B4BACF}
.flows .tag{color:#7CFFB8}
.flows .trig{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.flows .trig span{font-size:13px;padding:7px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.14);color:#C9CEE0;background:rgba(255,255,255,.04)}

.boardwrap{position:relative}
.boardwrap::before{content:"";position:absolute;inset:-40px -20px;border-radius:40px;background:radial-gradient(60% 60% at 50% 50%,rgba(43,76,255,.28),transparent 70%);z-index:0;pointer-events:none}
.board{display:flex;flex-direction:column;align-items:center;width:100%;max-width:420px;margin:0 auto;position:relative;z-index:1}
.node{background:rgba(23,28,48,.85);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px 18px;width:100%;display:flex;gap:12px;align-items:center;position:relative;transition:border-color .4s,box-shadow .4s,transform .4s;box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
.node.lit{border-color:#7CFFB8;box-shadow:0 0 0 4px rgba(124,255,184,.12),0 10px 30px -10px rgba(124,255,184,.35);transform:translateX(3px)}
.node .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.node .ic svg{width:17px;height:17px}
.node b{display:block;font-size:14px;font-weight:600}
.node span{font-size:12.5px;color:#8A90A3}
.node.trig-node{border-color:#7CFFB8;background:rgba(21,42,37,.9)}
.conn{width:2px;height:30px;background:rgba(255,255,255,.16);position:relative;flex-shrink:0}
.conn::after{content:"+";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:#2C3352;color:#B4BACF;font-size:12px;line-height:16px;text-align:center}
.conn .pulse{position:absolute;left:-2px;top:0;width:6px;height:6px;border-radius:50%;background:#7CFFB8;box-shadow:0 0 10px #7CFFB8;opacity:0}
.fork{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative;padding-top:30px}
.fork::before{content:"";position:absolute;top:0;left:50%;width:2px;height:16px;background:rgba(255,255,255,.16);transform:translateX(-50%)}
.fork::after{content:"";position:absolute;top:15px;left:25%;right:25%;height:2px;background:rgba(255,255,255,.16)}
.branch{display:flex;flex-direction:column;align-items:center;position:relative}
.branch::before{content:"";position:absolute;top:-15px;left:50%;width:2px;height:15px;background:rgba(255,255,255,.16);transform:translateX(-50%)}
.branch .lbl{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;margin-bottom:10px;position:relative}
.branch .yes{background:#152A25;color:#7CFFB8}
.branch .no{background:#2A1F1F;color:#FF9B9B}
@media(max-width:960px){.flows{padding:56px 24px;border-radius:28px}.flows .inner{grid-template-columns:1fr}}

/* ---------- payments ---------- */
.pay{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.pay .rate{display:flex;align-items:baseline;gap:10px;margin-top:22px;font-family:var(--display);letter-spacing:-.03em;flex-wrap:wrap}
.pay .rate b{font-size:34px;font-weight:600;line-height:1}
.pay .rate span{font-size:15px;color:var(--ink-2);font-family:var(--body);letter-spacing:0}
.pay .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.pay .grid div{border:1px solid var(--line);border-radius:14px;padding:16px;font-size:14px;transition:transform .2s,box-shadow .2s}
.pay .grid div:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(14,18,32,.3)}
.pay .grid b{display:block;font-weight:600;margin-bottom:4px}
.pay .grid span{color:var(--ink-2);font-size:13.5px}
.pay .own{margin-top:22px;font-size:13.5px;color:var(--ink-3);max-width:52ch}
.paystack{position:relative;max-width:440px;margin-left:auto}
.checkout{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 30px 60px -30px rgba(14,18,32,.3);position:relative;z-index:1}
.checkout .ttl{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);margin-bottom:6px}
.checkout .amt{font-family:var(--display);font-size:38px;font-weight:600;letter-spacing:-.03em;margin-bottom:16px}
.checkout .amt small{font-size:14px;color:var(--ink-3);letter-spacing:0;font-weight:500;margin-left:6px}
.wbtn{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-radius:12px;font-weight:600;font-size:14px;margin-bottom:8px}
.wbtn.apple{background:#000;color:#fff}
.wbtn.google{background:#fff;color:#000;border:1px solid var(--line)}
.wbtn svg{width:16px;height:16px}
.or{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-3);margin:12px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.cardrow{display:flex;gap:8px;margin-bottom:8px}
.cardrow .field{flex:1;margin:0}
.checkout .paybtn{background:var(--blue)}
.receipt{position:absolute;right:-18px;bottom:-26px;z-index:2;background:var(--ink);color:#fff;border-radius:16px;padding:14px 16px;font-size:13px;box-shadow:0 20px 40px -16px rgba(14,18,32,.5);min-width:220px}
.receipt div{display:flex;justify-content:space-between;padding:3px 0}
.receipt div span:last-child{font-weight:600}
.receipt .ok{color:#7CFFB8}
.brands{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.brands span{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:7px;background:var(--mist);color:var(--ink-2)}
@media(max-width:900px){.pay{grid-template-columns:1fr}.paystack{margin:0 0 30px}.receipt{right:0}}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.b{border:1px solid var(--line);border-radius:22px;padding:26px;background:#fff;min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;transition:transform .25s,box-shadow .25s,border-color .25s,opacity .8s var(--ease)}
.b:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(14,18,32,.3);border-color:#D2D6E2}
.b .ico{width:38px;height:38px;border-radius:11px;background:var(--mist);display:flex;align-items:center;justify-content:center;margin-bottom:auto}
.b .ico svg{width:19px;height:19px;stroke:var(--ink);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.b h3{font-size:18px}
.b p{font-size:14px;color:var(--ink-2);line-height:1.5}
.b.wide{grid-column:span 2}
.b.tint{background:var(--blue-tint);border-color:transparent}
.b.tint .ico{background:#fff}
.b.mintt{background:var(--mint-tint);border-color:transparent}
.b.mintt .ico{background:#fff}
.b.ai{background:linear-gradient(135deg,#0E1220,#1E36C4);color:#fff;border-color:transparent}
.b.ai .ico{background:rgba(255,255,255,.12)}
.b.ai .ico svg{stroke:#7CFFB8}
.b.ai p{color:#C9CEE0}
@media(max-width:1000px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.b.wide{grid-column:span 1}}

/* everything list */
.all{background:var(--mist);border-radius:32px;padding:56px}
.all h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:8px}
.all p{color:var(--ink-2);margin-bottom:34px}
.all ul{list-style:none;columns:3;column-gap:32px;font-size:14.5px}
.all li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}
.all li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0}
@media(max-width:900px){.all ul{columns:2}.all{padding:32px}}
@media(max-width:560px){.all ul{columns:1}}

/* ---------- pricing ---------- */
/* The billing toggle and the currency picker sit on one row above the plans,
   the same pairing as the pricing page. The margin moves to the row, or the
   two controls end up on different baselines. */
.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.billing{display:inline-flex;align-items:center;gap:4px;background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:4px}
.billing button{padding:8px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2);transition:background .2s,color .2s}
.billing button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px -2px rgba(14,18,32,.15)}
.billing .save{font-size:12px;color:var(--mint);font-weight:600;margin-left:4px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{border:1px solid var(--line);border-radius:28px;padding:34px 30px;background:#fff;display:flex;flex-direction:column;position:relative;transition:transform .3s var(--ease),box-shadow .3s}
.plan:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(14,18,32,.3)}
.plan.hi{background:var(--ink);color:#fff;border-color:var(--ink)}
.plan .badge{position:absolute;top:-13px;left:30px;background:var(--blue);color:#fff;font-size:12px;font-weight:600;padding:5px 12px;border-radius:99px;box-shadow:0 6px 16px -6px rgba(43,76,255,.7)}
.plan h3{font-size:22px;margin-bottom:8px}
.plan .who{font-size:14.5px;color:var(--ink-2);min-height:66px;margin-bottom:18px;line-height:1.5}
.plan.hi .who{color:#B4BACF}
.plan .p{font-family:var(--display);font-size:52px;letter-spacing:-.04em;font-weight:600;line-height:1;display:flex;align-items:baseline;gap:6px}
.plan .p small{font-size:15px;letter-spacing:0;font-weight:500;color:var(--ink-3);font-family:var(--body)}
.plan.hi .p small{color:#8A90A3}
.plan .yr{font-size:13px;color:var(--ink-3);margin:8px 0 22px;min-height:18px}
.plan.hi .yr{color:#8A90A3}
.plan .btn{margin-bottom:8px}
.plan.hi .btn-ghost{background:transparent;border-color:rgba(255,255,255,.2);color:#fff}
.plan.hi .btn-ghost:hover{border-color:#fff}
.plan .nocard{font-size:12.5px;color:var(--ink-3);text-align:center;margin-bottom:24px}
.plan.hi .nocard{color:#8A90A3}
.plan .inc{display:grid;gap:9px;font-size:14px;padding-top:22px;border-top:1px solid var(--line);margin-top:auto}
.plan.hi .inc{border-top-color:rgba(255,255,255,.14)}
.plan .inc div{display:flex;gap:9px;align-items:flex-start}
.plan .inc svg{width:15px;height:15px;stroke:var(--mint);stroke-width:2.5;fill:none;flex-shrink:0;margin-top:3px}
.plan.hi .inc svg{stroke:#7CFFB8}
.plan .inc .plus{font-weight:600;color:var(--ink-3);font-size:13px}
.plan.hi .inc .plus{color:#8A90A3}
.pricing-fine{margin-top:22px;font-size:13.5px;color:var(--ink-3);display:flex;gap:20px;flex-wrap:wrap}
@media(max-width:960px){.plans{grid-template-columns:1fr;max-width:480px}}

/* comparison table */
.compare{margin-top:32px;border:1px solid var(--line);border-radius:24px;overflow:hidden}
.compare summary{padding:22px 28px;font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;background:var(--mist)}
.compare summary::-webkit-details-marker{display:none}
.compare summary svg{width:18px;height:18px;stroke:var(--ink-3);stroke-width:2;fill:none;transition:transform .2s}
.compare[open] summary svg{transform:rotate(45deg)}
.compare .tbl{overflow-x:auto}
.compare table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.compare th,.compare td{padding:11px 16px;text-align:left;border-top:1px solid var(--line)}
.compare th{font-weight:600;font-size:13px;color:var(--ink-2);background:#fff;position:sticky;top:0}
.compare th:not(:first-child),.compare td:not(:first-child){text-align:center;width:16%}
.compare td.grp{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em;background:var(--mist);padding-top:16px;padding-bottom:10px}
.compare td small{display:block;color:var(--ink-3);font-size:12px;font-weight:400}
.compare td .y{color:var(--mint);font-weight:700}
.compare td .n{color:#C7CBD8}
.compare td.v{font-weight:500}

/* faq */
.faq{max-width:760px}
details:not(.compare){border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-weight:600;font-size:17px;cursor:pointer;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;flex-shrink:0;transition:transform .2s;stroke:var(--ink-3);stroke-width:2;fill:none}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--ink-2);font-size:15.5px;max-width:64ch}

/* ---------- cta ---------- */
.cta{background:var(--blue);color:#fff;border-radius:40px;margin:0 24px;padding:96px 56px;text-align:center;position:relative;overflow:hidden}
.cta .bgart{position:absolute;inset:0;pointer-events:none}
.cta .bgart svg{position:absolute;width:100%;height:100%}
.cta > :not(.bgart){position:relative}
.cta h2{color:#fff;max-width:14ch;margin:0 auto 20px}
.cta p{color:#D9DFFF;font-size:18px;margin-bottom:32px}
.cta .btn-primary{background:#fff;color:var(--ink)}
.cta .btn-primary:hover{background:#EAEEFF}
@media(max-width:700px){.cta{padding:64px 24px;border-radius:28px}}

/* compare: mobile plan selector */
.planpick{display:none;gap:6px;padding:12px;background:#fff;border-bottom:1px solid var(--line)}
.planpick button{flex:1;padding:10px 6px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-2);background:var(--mist);transition:background .2s,color .2s}
.planpick button.on{background:var(--ink);color:#fff}
@media(max-width:760px){
  .planpick{display:flex}
  .compare table{min-width:0}
  .compare th:not(:first-child),.compare td:not(:first-child){display:none;width:40%;text-align:right;padding-right:18px}
  .compare th:first-child,.compare td:first-child{position:static;box-shadow:none;min-width:0}
  .compare td.grp{position:static}
  .compare.show-1 th:nth-child(2),.compare.show-1 td:nth-child(2),
  .compare.show-2 th:nth-child(3),.compare.show-2 td:nth-child(3),
  .compare.show-3 th:nth-child(4),.compare.show-3 td:nth-child(4){display:table-cell}
  .compare td.grp{display:table-cell}
}

@media(max-width:760px){
  h1{font-size:clamp(34px,10vw,44px)}
  h2{font-size:clamp(28px,8vw,36px)}
  p.lead{font-size:16.5px}
  .sec{padding:64px 0}
  .sec-head{margin-bottom:32px}
  .hero{padding:36px 0 0;overflow:hidden}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
  .hero-fine{gap:10px 16px}
  .stage{min-height:0;padding:36px 0 30px;overflow:hidden}
  .stage-bg{inset:0;border-radius:20px}
  .form-mock{width:min(340px,100%);animation:none;border-radius:18px}
  .form-head{padding:12px 14px}
  .steps-bar{padding:8px 14px 0;gap:3px}
  .steps-bar i{height:2px}
  .pane{padding:12px 14px 14px;min-height:290px}
  .screen{inset:12px 14px 14px}
  .screen h4{font-size:16px;margin-bottom:8px}
  .opt{padding:8px 10px;margin-bottom:6px;font-size:13px;border-radius:10px}
  .opt small{font-size:11px}
  .cal span{padding:5px 0;font-size:11px}
  .slots span{padding:7px 0;font-size:12px}
  .field{padding:8px 10px;margin-bottom:6px}
  .q{margin-bottom:8px}
  .q .yn span{padding:7px}
  .paybtn{padding:10px}
  .chip{display:none}
  .uses{margin-top:28px;padding:28px 0 14px}
  .panel{padding:22px 18px;border-radius:20px}
  .tr{grid-template-columns:1fr;padding-left:16px}
  .tr::before{bottom:8px}
  #followups{padding-bottom:64px!important}
  .flows{margin:0 12px;padding:48px 18px;border-radius:24px}
  .flows .inner{gap:36px}
  .boardwrap{margin-top:8px}
  .fork{gap:10px}
  .node{padding:12px 14px;gap:10px}
  .node b{font-size:13px}.node span{font-size:12px}
  .node .ic{width:30px;height:30px}
  .pay{gap:32px}
  .pay .rate b{font-size:28px}
  .pay .grid{grid-template-columns:1fr}
  .paystack{max-width:none;margin:0}
  .receipt{position:static;margin-top:12px;width:100%;box-shadow:none}
  .bento{gap:10px}
  .b{min-height:0;padding:20px;border-radius:18px}
  .b .ico{margin-bottom:14px}
  .all{padding:24px 18px;border-radius:22px}
  .all li{padding:9px 0}
  .controls{flex-direction:column;align-items:stretch;margin-bottom:28px}
  .billing{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .billing button{padding:11px 8px;font-size:13.5px}
  .plans{max-width:none;gap:14px}
  .plan{padding:28px 22px;border-radius:22px}
  .plan .who{min-height:0}
  .plan .p{font-size:44px}
  .plan:hover{transform:none}
  .pricing-fine{flex-direction:column;gap:8px}
  .compare summary{padding:18px}
  .faq summary{font-size:15.5px;padding:18px 0}
  .cta{margin:0 12px;padding:56px 22px;border-radius:24px}
  .cta h2{max-width:none}
  .cta p{font-size:16px}
  .cta .btn{width:100%;justify-content:center}
}
@media(max-width:400px){
  .fork{grid-template-columns:1fr;gap:8px}
  .fork::after{display:none}
  .branch::before{display:none}
  .fork::before{height:30px}
  .designer .themes button{font-size:13px}
}

/* The release line above the headline. Same eyebrow the rest of the site
   uses (careers, changelog, compare): a blue dot, blue text, no container —
   a pill inside a pill was fighting the headline for attention. */
.hero-new{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;font-size:14px;font-weight:600;color:var(--blue);text-decoration:none}
.hero-new i{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.hero-new:hover{color:var(--blue-deep)}
.hero-new:hover span.u,.hero-new:hover{text-decoration:none}
@media(max-width:600px){.hero-new{font-size:13px;margin-bottom:14px}}