:root{
 /* Della option C tokens (CLAUDE_CODE_BRIEF_della-redesign-C.md, section 2) */
 --navy-900:#0B1220;--navy-800:#131D31;--navy-700:#22304A;--navy-500:#4A5873;--on-navy:#E7ECF3;--on-navy-muted:#8A96AB;
 --mint:#34D399;--mint-tint:#ECFDF5;--green-700:#047857;--bg:#F6F8FB;--card:#FFFFFF;--slate:#5E687B;
 --st-booked:#047857;--st-booked-bg:#ECFDF5;--st-you:#92400E;--st-you-bg:#FEF3C7;--st-closed:#475569;--st-closed-bg:#EEF1F5;
 --st-info:#1D4ED8;--st-info-bg:#DBEAFE;--st-urgent:#B42318;--st-urgent-bg:#FEE4E2;
 /* names the existing rules use */
 --g:#0B1220;--g-dk:#0B1220;--g-lt:#34D399;--g-tint:#ECFDF5;--g-night:#0B1220;--g-grad:none;
 --ink:#0B1220;--ink-2:#2B3445;--ink-3:#5E687B;--line:#E1E6EE;--line-2:#CBD3DF;
 --paper:#F6F8FB;--paper-2:#EEF1F5;--white:#fff;--amber:#F59E0B;--red:#F04438;
 --sans:'Figtree',system-ui,-apple-system,sans-serif;--display:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
 --serif:var(--sans);--mono:var(--sans);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 16px/1.6 var(--sans);color:var(--ink-2);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
h1,h2,h3{color:var(--ink);font-weight:600;letter-spacing:-.03em;line-height:1.05}
h1 em,h2 em{font-style:normal}
h2{font-size:52px}
h2 em{color:inherit}
h3{font-size:20px;letter-spacing:-.015em;line-height:1.25}
.kick{font:600 14px/1.4 var(--sans);color:var(--green-700);margin-bottom:12px}

.lede{font-size:18px;color:var(--ink-3);max-width:640px;margin-top:18px}
section{padding:110px 0}
.btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 22px;border-radius:12px;font:600 15px var(--sans);border:1px solid transparent;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn.pri{background:var(--g);color:#fff}
.btn.pri:hover{background:var(--g-dk)}
.btn.sec{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn.sec:hover{border-color:var(--g)}
.btn.lt{background:#fff;color:var(--g-dk)}
.btn.gh{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.btn.gh:hover{background:rgba(255,255,255,.2)}
.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dot{width:8px;height:8px;border-radius:50%;background:var(--g-lt);box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}80%,100%{box-shadow:0 0 0 10px rgba(52,211,153,0)}}

/* ---------- announcement + header ---------- */
.ann{background:var(--g-night);color:rgba(255,255,255,.86);font-size:13.5px;text-align:center;padding:9px 16px}
.ann a{color:#fff;text-decoration:underline;text-underline-offset:3px}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;color:var(--ink)}
.brand img{width:34px;height:34px}
nav.links{display:flex;gap:26px;font-size:14.5px;color:var(--ink-2)}
nav.links a:hover{color:var(--g)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:14.5px}
.hd-r .btn{height:40px;padding:0 16px;font-size:14px;border-radius:10px}
.callme{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:720px;padding:0;color:#fff;overflow:hidden;background:#1d1a16}
.hero .bg{position:absolute;inset:0;background:url(/media/della/hero-salon.webp) center 35%/cover;transform:scale(1.04);animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.1) translateX(-1.5%)}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,18,.92) 0%,rgba(5,9,18,.78) 36%,rgba(5,9,18,.25) 62%,rgba(5,9,18,.15) 100%),linear-gradient(0deg,rgba(5,9,18,.55),transparent 40%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.02fr 1fr;gap:40px;align-items:center;min-height:720px;padding-top:40px;padding-bottom:70px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px var(--mono);color:rgba(255,255,255,.75);margin-bottom:22px}
.hero h1{color:#fff;font-size:68px;line-height:1}
.hero h1 em{color:#fff}
.hero p.sub{font-size:19px;line-height:1.55;color:rgba(255,255,255,.82);margin-top:22px;max-width:540px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;font-size:14px;color:rgba(255,255,255,.75)}
.hero .trust span{display:flex;align-items:center;gap:7px}
.hero .trust svg{width:16px;height:16px;color:var(--g-lt)}
.hero .trust b{color:#fff;font-weight:600}

/* animated call story */
.story{position:relative;height:540px;max-width:570px;margin-left:auto;width:100%}
.card{position:absolute;background:rgba(255,255,255,.97);color:var(--ink-2);border-radius:18px;box-shadow:0 30px 60px -24px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.6) inset;padding:16px 18px;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.card.on{opacity:1;transform:none}
.card .lb{font:500 10.5px var(--mono);color:var(--ink-3);display:flex;align-items:center;gap:8px}
.c-call{left:0;top:0;width:310px;display:flex;align-items:center;gap:14px}
.c-call .av{position:relative;width:48px;height:48px;border-radius:50%;background:#F4E9E4;color:#A4553F;display:grid;place-items:center;font-weight:600;flex:none}
.c-call .av:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--g-lt);animation:ring 1.2s ease-out infinite}
.c-call.ans .av:after{display:none}
@keyframes ring{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.35)}}
.c-call b{display:block;color:var(--ink);font-size:15px}
.c-call small{font-size:12.5px;color:var(--ink-3)}
.c-call .st{margin-left:auto;font:500 11px var(--mono);padding:5px 9px;border-radius:999px;background:var(--g-tint);color:var(--g-dk);white-space:nowrap}
.c-chat{left:0;top:96px;width:318px}
.lang{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--mono);color:var(--g-dk);background:var(--g-tint);padding:4px 9px;border-radius:999px;margin-left:auto}
.msg{margin-top:10px;font-size:14px;line-height:1.45;padding:9px 12px;border-radius:12px;max-width:88%;opacity:0;transform:translateY(6px);transition:all .4s}
.msg.on{opacity:1;transform:none}
.msg.in{background:var(--paper-2);color:var(--ink)}
.msg.out{background:var(--g);color:#fff;margin-left:auto}
.msg .who{display:block;font:500 10px var(--mono);opacity:.7;margin-bottom:2px}
.typing{display:inline-flex;gap:4px;padding:12px 14px}
.typing i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;animation:bl 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{50%{opacity:1}}
.c-book{right:0;top:196px;width:236px}
.c-book .slot{margin-top:10px;border-radius:12px;border:1px solid var(--line);overflow:hidden}
.c-book .row{display:grid;grid-template-columns:46px 1fr;font-size:12.5px;border-top:1px solid var(--line)}
.c-book .row:first-child{border-top:0}
.c-book .row span{padding:8px 10px;color:var(--ink-3);font-family:var(--mono);font-size:11px}
.c-book .row div{padding:6px 8px}
.c-book .new{background:var(--g);color:#fff;border-radius:8px;padding:6px 9px;font-size:12.5px;transform-origin:left;transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.c-book.on .new{transform:scaleX(1)}
.c-book .new b{font-weight:600}
.c-book .busy{background:var(--paper-2);border-radius:8px;padding:6px 9px;color:var(--ink-3)}
.c-sms{left:0;top:392px;width:318px;display:flex;gap:12px;align-items:flex-start}
.c-sms .ic{width:34px;height:34px;border-radius:10px;background:var(--g-tint);color:var(--g);display:grid;place-items:center;flex:none}
.c-sms p{font-size:13.5px;color:var(--ink);line-height:1.4}
.c-sum{right:0;top:0;width:236px;background:var(--g-night)!important;color:rgba(255,255,255,.8)!important}
.c-sum .lb{color:rgba(255,255,255,.6)}
.c-sum ul{list-style:none;margin-top:8px;font-size:13px}
.c-sum li{display:flex;gap:8px;padding:4px 0}
.c-sum li svg{width:15px;height:15px;color:var(--g-lt);flex:none;margin-top:3px}
.steps4{position:absolute;left:0;right:0;bottom:-30px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.steps4 div{font:500 11px var(--mono);color:rgba(255,255,255,.55);padding-top:10px;border-top:2px solid rgba(255,255,255,.18);transition:color .3s,border-color .3s}
.steps4 div.on{color:#fff;border-color:var(--g-lt)}
.steps4 div b{display:block;font:400 13px var(--sans);text-transform:none;letter-spacing:0;color:inherit;opacity:.85}

/* ---------- live demo band ---------- */
.demo{padding:0;background:var(--g-night);color:#fff}
.demo .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;padding-top:34px;padding-bottom:34px}
.demo .ph{display:flex;align-items:center;gap:16px}
.demo .ph .ic{width:56px;height:56px;border-radius:16px;background:rgba(52,211,153,.16);display:grid;place-items:center;color:var(--g-lt)}
.demo .ph small{display:block;font:500 11px var(--mono);color:rgba(255,255,255,.6)}
.demo .ph a{font-size:30px;font-weight:600;letter-spacing:-.02em;color:#fff}
.demo p{color:rgba(255,255,255,.72);font-size:15.5px;max-width:520px}

/* ---------- cost of missed calls ---------- */
.cost .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.calc{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px}
.calc label{display:flex;justify-content:space-between;font-size:14.5px;color:var(--ink);margin-top:22px}
.calc label:first-child{margin-top:0}
.calc label b{font-family:var(--mono);font-weight:500;color:var(--g-dk)}
.calc input[type=range]{width:100%;margin-top:10px;accent-color:var(--g)}
.calc .out{margin-top:28px;padding:22px;border-radius:16px;background:var(--g-tint);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.calc .out small{display:block;font:500 11px var(--mono);color:var(--g-dk)}
.calc .out strong{display:block;font-size:34px;letter-spacing:-.03em;color:var(--ink);font-weight:600;line-height:1.1;margin-top:4px}
.calc .out .vs strong{color:var(--g)}
.calc .note{font-size:12.5px;color:var(--ink-3);margin-top:14px}

/* ---------- how it works ---------- */
.how{background:#fff}
.how3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.hw{border:1px solid var(--line);border-radius:22px;padding:28px;background:var(--paper);position:relative}
.hw .n{font:500 12px var(--mono);color:var(--g)}
.hw h3{margin:14px 0 8px}
.hw p{font-size:15px;color:var(--ink-3)}
.hw .vis{margin-top:22px;height:130px;border-radius:14px;background:#fff;border:1px solid var(--line);padding:14px;font-size:13px;overflow:hidden}
.pill{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--sans);padding:6px 11px;border-radius:999px;border:1px solid var(--line-2);background:#fff;margin:0 6px 6px 0;color:var(--ink-2)}
.pill.on{background:var(--g);border-color:var(--g);color:#fff}
.time{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font:500 12px var(--mono);color:var(--g-dk)}

/* ---------- outcomes ---------- */
.out6{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.oc{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;transition:border-color .2s,transform .2s}
.oc:hover{border-color:var(--g)}
.oc .ic{width:46px;height:46px;border-radius:14px;background:var(--g-tint);color:var(--g);display:grid;place-items:center;margin-bottom:18px}
.oc h3{margin-bottom:8px}
.oc p{font-size:15px;color:var(--ink-3)}
.oc.hl{background:var(--g-night);border-color:var(--g-night);color:rgba(255,255,255,.7)}
.oc.hl h3{color:#fff}.oc.hl p{color:rgba(255,255,255,.7)}
.oc.hl .ic{background:rgba(255,255,255,.1);color:var(--g-lt)}
.langs{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.langs span{font:500 11px var(--mono);padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.8)}

/* ---------- industries ---------- */
.ind{background:#fff}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.tabs button{font:500 14.5px var(--sans);height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.ipanel{display:none;grid-template-columns:1.1fr 1fr;gap:0;margin-top:28px;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.ipanel.on{display:grid}
.ipanel .ph{min-height:440px;background-size:cover;background-position:center;position:relative}
.ipanel .ph .tag{position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.95);border-radius:12px;padding:10px 14px;font-size:13px;color:var(--ink);box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.ipanel .ph .tag b{color:var(--g)}
.ipanel .tx{padding:40px}
.ipanel h3{font-size:28px;letter-spacing:-.025em}
.ipanel .tx>p{color:var(--ink-3);margin-top:10px}
.script{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.script .msg{opacity:1;transform:none}
.ipanel ul{list-style:none;margin-top:20px;font-size:14.5px}
.ipanel li{display:flex;gap:10px;padding:5px 0;color:var(--ink-2)}
.ipanel li svg{width:17px;height:17px;color:var(--g);flex:none;margin-top:3px}
.ipanel .grad{background:var(--paper-2);display:grid;place-items:center}

/* ---------- compare ---------- */
.cmp{margin-top:50px;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.cmp table{width:100%;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{padding:16px 20px;text-align:left;border-top:1px solid var(--line)}
.cmp thead th{border-top:0;font:500 12px var(--mono);color:var(--ink-3);background:var(--paper)}
.cmp thead th.d{color:#fff;background:var(--g)}
.cmp td.d{background:rgba(17,24,39,.06);color:var(--ink);font-weight:600}
.cmp td:first-child{color:var(--ink)}
.y{color:var(--g)}.n{color:var(--ink-3)}

/* ---------- trust ---------- */
.trust4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.tr{border-top:2px solid var(--g);padding-top:18px}
.tr h3{font-size:17px;margin-bottom:6px}
.tr p{font-size:14.5px;color:var(--ink-3)}

/* ---------- pricing ---------- */
.pricing{background:#fff}
.bill{display:inline-flex;margin-top:28px;background:var(--paper-2);border-radius:999px;padding:4px}
.bill button{font:500 14px var(--sans);border:0;background:none;padding:8px 18px;border-radius:999px;cursor:pointer;color:var(--ink-2)}
.bill button.on{background:#fff;color:var(--ink);box-shadow:0 4px 10px -4px rgba(0,0,0,.2)}
.bill small{color:var(--g);font-weight:600}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.plan{border:1px solid var(--line);border-radius:22px;padding:26px;background:var(--paper);display:flex;flex-direction:column}
.plan.pop{background:var(--g-night);border-color:var(--g-night);color:rgba(255,255,255,.75);position:relative}
.plan.pop h3,.plan.pop .pr{color:#fff}
.plan .badge{position:absolute;top:-12px;left:26px;font:500 11px var(--mono);background:var(--g-lt);color:var(--g-night);padding:5px 10px;border-radius:999px}
.plan h3{font-size:19px}
.plan .for{font-size:13.5px;margin-top:4px;color:inherit;opacity:.85}
.plan .pr{font-size:44px;font-weight:600;letter-spacing:-.04em;color:var(--ink);margin-top:18px;line-height:1}
.plan .pr small{font-size:15px;font-weight:400;letter-spacing:0;opacity:.7}
.plan .inc{font:500 12px var(--mono);margin-top:8px;opacity:.8}
.plan ul{list-style:none;margin:20px 0 24px;font-size:14px;flex:1}
.plan li{display:flex;gap:8px;padding:4px 0}
.plan li svg{width:16px;height:16px;color:var(--g);flex:none;margin-top:3px}
.plan.pop li svg{color:var(--g-lt)}
.plan li.x{opacity:.45}
.plan li.x svg{color:inherit}
.plan .btn{justify-content:center;height:46px}
.guar{margin-top:22px;font-size:14px;color:var(--ink-3);display:flex;gap:22px;flex-wrap:wrap}
.guar span{display:flex;gap:7px;align-items:center}
.guar svg{width:16px;height:16px;color:var(--g)}

/* ---------- proof ---------- */
.proof .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.rating{display:flex;align-items:baseline;gap:14px}
.rating b{font-family:var(--serif);font-weight:400;font-size:96px;color:var(--ink);line-height:1;letter-spacing:-.02em}
.stars{color:var(--amber);font-size:22px;letter-spacing:3px}
.quotes{display:grid;gap:16px}
.q{background:#fff;border:1px dashed var(--line-2);border-radius:20px;padding:24px}
.q p{font-size:17px;color:var(--ink);line-height:1.5}
.q .by{margin-top:14px;font-size:13.5px;color:var(--ink-3)}
.q .ph{font:500 11px var(--mono);color:#B54708;background:#FFF4E5;border-radius:6px;padding:3px 8px;display:inline-block;margin-bottom:12px}

/* ---------- FAQ ---------- */
.faq .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
details{border-top:1px solid var(--line);padding:20px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;font-weight:600;color:var(--ink);font-size:17px;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-weight:400;font-size:22px;color:var(--g);line-height:1}
details[open] summary:after{content:"−"}
details p{margin-top:10px;color:var(--ink-3);font-size:15.5px}

/* ---------- final CTA + footer ---------- */
.final{padding:0 0 110px}
.band{position:relative;overflow:hidden;border-radius:30px;background:var(--g-night);color:rgba(255,255,255,.75);padding:64px;display:grid;grid-template-columns:1.2fr auto;gap:40px;align-items:center}
.band:before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:var(--g-grad);filter:blur(120px);opacity:.35;right:-160px;top:-260px}
.band>*{position:relative}
.band h2{color:#fff}
.band h2 em{color:#6EE7B7}
.band .ctas{display:flex;flex-direction:column;gap:12px}
footer{border-top:1px solid var(--line);padding:56px 0 40px;font-size:14px;color:var(--ink-3)}
footer .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
footer h4{font:500 11.5px var(--mono);color:var(--ink);margin-bottom:14px}
footer a{display:block;padding:4px 0}
footer a:hover{color:var(--g)}
footer .bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
footer .made a{display:inline;color:var(--ink);font-weight:500}

/* ---------- responsive ---------- */
@media(max-width:1100px){
 h2{font-size:44px}
 .hero .wrap{grid-template-columns:1fr;padding-top:56px}
 .hero h1{font-size:56px}
 .story{height:520px;max-width:560px}
 .cost .grid,.proof .grid,.faq .grid{grid-template-columns:1fr;gap:40px}
 .out6,.how3{grid-template-columns:1fr 1fr}
 .plans{grid-template-columns:1fr 1fr}
 .trust4{grid-template-columns:1fr 1fr}
 .ipanel.on{grid-template-columns:1fr}
 .ipanel .ph{min-height:280px}
 .demo .wrap{grid-template-columns:1fr;gap:16px}
 nav.links{display:none}
 footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
 .story{margin-left:0}
 .wrap{padding:0 16px}
 section{padding:72px 0}
 h2{font-size:36px}
 .hero h1{font-size:42px}
 .hero p.sub{font-size:17px}
 .hero .wrap{min-height:0;padding-bottom:40px}
 .story{height:auto;display:flex;flex-direction:column;gap:10px;margin-top:8px}
 .story .card{position:relative;left:auto;right:auto;top:auto;width:100%}
 .c-book,.c-sum{display:none}
 .steps4{display:none}
 .out6,.how3,.plans,.trust4{grid-template-columns:1fr}
 .calc{padding:22px}.calc .out{grid-template-columns:1fr}
 .ipanel .tx{padding:24px}
 .band{padding:36px 24px;grid-template-columns:1fr}
 .cmp{overflow-x:auto}.cmp table{min-width:620px}
 .callme{display:none}
 .demo .ph a{font-size:24px}
}
@media(prefers-reduced-motion:reduce){.hero .bg{animation:none}.card,.msg,.c-book .new{transition:none}.dot,.c-call .av:after{animation:none}}

/* palette B: mint button on the dark plan card */
.plan.pop .btn.pri{background:var(--g-lt);border-color:var(--g-lt);color:var(--g-night)}
.plan.pop .btn.pri:hover{background:#6EE7B7}
/* ===== inner pages (features, industries, hubs, pricing, story, legal) ===== */
header nav.links a.on{color:var(--g);font-weight:600}
.crumb{font:500 12px var(--mono);color:var(--ink-3);margin-bottom:26px}
.crumb a:hover{color:var(--g)}
.phero2{padding:64px 0 90px;position:relative;overflow:hidden;background:var(--paper)}
.phero2 .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.phero2 h1{font-size:60px;line-height:1.02}
.phero2 h1 em{color:var(--g)}
.phero2 .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.phero2.hub{padding-bottom:50px}
.phero2.hub h1{max-width:900px}
.fvis{position:relative;min-height:420px;border-radius:28px;background:var(--paper-2);display:grid;place-items:center;padding:40px}
.fcard{position:relative;width:100%;max-width:420px;background:#fff;border-radius:20px;box-shadow:0 40px 80px -30px rgba(11,18,32,.45);padding:22px}
.fbar{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.fbar b{color:var(--ink);font-size:16px}
.chip{margin-left:auto;font:500 11px var(--mono);padding:5px 9px;border-radius:999px;background:var(--g-tint);color:var(--g-dk)}
.fcard ul{list-style:none;margin-top:6px}
.fcard li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.fcard li:last-child{border-bottom:0}
.fcard li svg{width:18px;height:18px;color:var(--g);flex:none;margin-top:3px}
.fcard li b{display:block;color:var(--ink);font-size:14.5px}
.fcard li span{font-size:13px;color:var(--ink-3)}
.fchip{position:absolute;right:-18px;bottom:-22px;background:var(--g-night);color:#fff;border-radius:14px;padding:12px 16px;font-size:14px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.fchip small{display:block;font:500 10.5px var(--mono);color:var(--g-lt)}
.ivis{position:relative;min-height:440px;border-radius:28px;background:var(--paper-2);display:grid;place-items:center;padding:36px}
.ivis.photo{background-size:cover;background-position:center;align-items:end;justify-items:start}
.ivis .script.fl{width:100%;max-width:400px;box-shadow:0 40px 80px -30px rgba(11,18,32,.5)}
.ivis .script .lb{margin-bottom:4px}
.ivis .fchip{right:20px;bottom:20px}
.prob .grid,.prob.grid0{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.prob p{font-size:17px;color:var(--ink-3);margin-bottom:14px}
.prob.grid0{margin-bottom:10px}
.out6.c2{grid-template-columns:repeat(2,1fr)}
.oc .n{font:500 12px var(--mono);color:var(--g);margin-bottom:14px}
.subv{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff}
.subv>div{padding:28px;border-left:1px solid var(--line)}
.subv>div:first-child{border-left:0}
.subv h3{margin-bottom:8px}.subv p{font-size:15px;color:var(--ink-3)}
.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.rel.r5{grid-template-columns:repeat(5,1fr)}
.rel a{position:relative;display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 20px 46px;transition:border-color .2s,transform .2s}
.rel a:hover{border-color:var(--g)}
.rel b{color:var(--ink);font-size:16px}
.rel span{font-size:13.5px;color:var(--ink-3)}
.rel svg{position:absolute;left:20px;bottom:18px;width:16px;height:16px;color:var(--g)}
.hubg{margin-bottom:56px}
.igrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:6px}
.icard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .2s,transform .2s}
.icard:hover{border-color:var(--g)}
.icard .im{height:130px;background:var(--paper-2);display:flex;align-items:flex-end;padding:12px;background-size:cover;background-position:center}
.icard .im span{background:#fff;border-radius:10px;padding:7px 10px;font-size:12px;color:var(--ink);box-shadow:0 10px 20px -12px rgba(0,0,0,.4)}
.icard .ib{padding:16px}
.icard b{color:var(--ink)}
.icard p{font-size:13.5px;color:var(--ink-3);margin-top:4px;line-height:1.45}
.pstrip2{padding:80px 0 110px}
.ps{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px 40px}
.ps h3{font-size:30px;letter-spacing:-.025em}
.ps h3 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--g)}
.ps p{color:var(--ink-3);margin-top:8px}
.ps .ctas{display:flex;gap:10px}
section.alt{background:#fff}
.ticks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;margin-top:30px;font-size:16px}
.ticks li{display:flex;gap:10px;color:var(--ink-2)}
.ticks svg{width:18px;height:18px;color:var(--g);flex:none;margin-top:4px}
.legal{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start}
.toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.toc a{color:var(--ink-3)}.toc a:hover{color:var(--g)}
.ldoc{max-width:760px}
.lsec{padding:0 0 34px}
.lsec h2{font-size:26px;letter-spacing:-.02em;margin-bottom:12px}
.lsec p,.lsec li{font-size:16px;color:var(--ink-2);margin-bottom:10px}
.lsec ul{padding-left:20px}
.lnote{margin-top:20px;font:500 12px var(--mono);color:#B54708;background:#FFF4E5;padding:12px 14px;border-radius:10px}
.fvis.phone,.ivis.phone{display:flex;align-items:center;justify-content:center}
.shot-ph{width:270px;border-radius:38px;box-shadow:0 40px 80px -30px rgba(11,18,32,.55)}
.shot-web{width:100%;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(11,18,32,.45)}
.shot-web .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.shot-web .bar i{width:9px;height:9px;border-radius:50%;background:rgba(11,18,32,.16)}
.shot-web .bar span{margin-left:12px;font:11px var(--mono);color:var(--ink-3)}
.shot-web img,.shot-web video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:#fff}
.fvis.web{padding:44px 34px}
.ivis.phone{gap:0;padding:40px 30px}
.ivis.phone .shot-ph{width:240px;flex:none}
.ivis .script.fl.side{position:absolute;right:22px;bottom:30px;width:300px}
.tour{background:#fff}
.tgrid{display:grid;grid-template-columns:1fr 290px;gap:32px;align-items:center;margin-top:44px}
.tgrid .shot-web video{aspect-ratio:16/9;object-fit:cover}
.tph{position:relative;text-align:center}
.tph video{width:100%;max-width:290px;aspect-ratio:886/1920;border-radius:36px;background:#000;box-shadow:0 40px 80px -30px rgba(11,18,32,.55);object-fit:cover}
.tph span{display:block;margin-top:12px;font:500 11px var(--mono);color:var(--ink-3)}
.stores{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px;font-size:14px;color:var(--ink-3)}
.store{display:inline-flex;flex-direction:column;justify-content:center;height:48px;padding:0 18px;border-radius:12px;background:var(--ink);color:#fff;line-height:1.1}
.store small{font-size:10.5px;opacity:.7}.store b{font-size:16px;font-weight:600}
@media(max-width:1100px){
 .tgrid{grid-template-columns:1fr}
 .ivis .script.fl.side{position:relative;right:auto;bottom:auto;margin-top:16px}
 .ivis.phone{flex-direction:column}
 .phero2 .grid,.prob .grid,.prob.grid0,.legal{grid-template-columns:1fr;gap:36px}
 .phero2 h1{font-size:48px}
 .rel,.rel.r5{grid-template-columns:repeat(2,1fr)}
 .igrid{grid-template-columns:repeat(3,1fr)}
 .subv{grid-template-columns:1fr}.subv>div{border-left:0;border-top:1px solid var(--line)}.subv>div:first-child{border-top:0}
 .ps{grid-template-columns:1fr}
 .toc{position:static}
}
@media(max-width:640px){
 .phero2{padding:40px 0 60px}
 .phero2 h1{font-size:38px}
 .fvis,.ivis{min-height:0;padding:22px}
 .fchip{position:relative;right:auto;bottom:auto;margin-top:12px}
 .ivis .fchip{position:relative;right:auto;bottom:auto}
 .ivis.photo{min-height:340px}
 .rel,.rel.r5,.igrid,.out6.c2,.ticks{grid-template-columns:1fr}
 .ps{padding:24px}.ps .ctas{flex-direction:column}
 .pstrip2{padding-bottom:72px}
}

/* ===== mega menus (Features, Industries) + mobile menu ===== */
header{position:sticky}
nav.links{align-items:center}
.mm-b{display:inline-flex;align-items:center;gap:5px;background:none;border:0;font:inherit;font-size:14.5px;color:var(--ink-2);cursor:pointer;padding:6px 0}
.mm-b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.mm-b[aria-expanded=true],.mm-b:hover,.mm-b.on{color:var(--g)}
.mm-b[aria-expanded=true] svg{transform:rotate(180deg)}
nav.links a.on{color:var(--g);font-weight:600}
.mm{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(11,18,32,.3);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;pointer-events:none}
.mm.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mm .wrap{display:block;height:auto;padding-top:30px;padding-bottom:22px}
.mm-g{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.mm-h{font:500 11.5px var(--mono);color:var(--g-dk);padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.mm-l{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:9px 10px 9px 6px;border-radius:12px;transition:background .15s}
.mm-l:hover{background:var(--g-tint)}
.mm-i{width:34px;height:34px;padding:7px;border-radius:10px;background:var(--paper-2);fill:none;stroke:var(--g);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mm-l:hover .mm-i{background:#fff}
.mm-l b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.mm-l small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.mm-f{display:flex;align-items:center;gap:26px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.mm-f a{color:var(--g-dk);font-weight:600}
.mm-f .mm-call{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.mb{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);background:#fff;cursor:pointer;place-items:center}
.mb svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.mnav{display:none}
@media(max-width:1100px){
 .mm{display:none}
 .mb{display:grid}
 .hd-r .li{display:none}
 .mnav.open{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(11,18,32,.35);padding:12px 16px 20px;max-height:calc(100vh - 110px);overflow:auto}
 .mnav details{border-bottom:1px solid var(--line)}
 .mnav summary{list-style:none;cursor:pointer;padding:14px 4px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between}
 .mnav summary::-webkit-details-marker{display:none}
 .mnav summary:after{content:"+";color:var(--g)}
 .mnav details[open] summary:after{content:"−"}
 .mnav .mlist{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:0 4px 14px}
 .mnav .mlist a{padding:7px 0;font-size:14.5px;color:var(--ink-2)}
 .mnav .mlist a.all{grid-column:1/-1;color:var(--g);font-weight:600}
 .mnav .ml{display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
}
@media(max-width:640px){.hd-r .btn.pri{display:none}}

/* ===== "What she does" showcase (real app screens) ===== */
.sc{background:#fff}
.sc-head{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end}
.sc-head .lede{margin-top:0}
.sc-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;margin-top:56px}
.sc-tabs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sc-t{position:relative;display:grid;grid-template-columns:44px 1fr;gap:6px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:20px 4px;cursor:pointer;font:inherit;color:inherit}
.sc-t .n{font:500 12px var(--mono);color:var(--ink-3);padding-top:4px}
.sc-t b{display:block;font-size:19px;font-weight:600;color:var(--ink-3);letter-spacing:-.015em;transition:color .2s}
.sc-t .tx>span{display:block;max-height:0;overflow:hidden;opacity:0;font-size:15px;color:var(--ink-3);line-height:1.55;transition:max-height .35s ease,opacity .3s,margin .3s}
.sc-t.on b{color:var(--ink)}
.sc-t.on .n{color:var(--g)}
.sc-t.on .tx>span{max-height:120px;opacity:1;margin-top:8px}
.sc-t:hover b{color:var(--ink)}
.sc-t .bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.sc-t .bar i{display:block;height:100%;width:0;background:var(--g)}
.sc-stage{position:relative;height:620px;border-radius:30px;overflow:hidden;background:var(--paper-2)}
.sc-s{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:36px;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.sc-s.on{opacity:1;transform:none;pointer-events:auto}
.sc-ph{height:500px;width:auto;border-radius:44px;box-shadow:0 50px 90px -30px rgba(11,18,32,.6)}
.sc-web{width:100%;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 50px 90px -30px rgba(11,18,32,.5)}
.sc-web .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.sc-web .bar i{width:9px;height:9px;border-radius:50%;background:rgba(11,18,32,.16)}
.sc-web .bar span{margin-left:12px;font:11px var(--mono);color:var(--ink-3)}
.sc-web img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.sc-s figcaption{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 14px;font-size:13.5px;color:var(--ink);box-shadow:0 14px 30px -16px rgba(11,18,32,.4)}
/* inner pages: numbered list instead of icon cards */
.out6{gap:0 44px}
.oc{background:none;border:0;border-top:1px solid var(--line-2);border-radius:0;padding:24px 0 30px}
.oc:hover{transform:none}
.oc .n{font:500 12px var(--mono);color:var(--g);margin-bottom:12px}
.oc h3{font-size:19px}
@media(max-width:1100px){.sc-head,.sc-grid{grid-template-columns:1fr}.sc-stage{height:560px}}
@media(max-width:640px){
 .sc-grid{gap:28px;margin-top:32px}
 .sc-stage{height:470px;border-radius:22px}
 .sc-ph{height:400px;border-radius:34px}
 .sc-s{padding:20px}
 .sc-t b{font-size:17px}
}

/* ===== calldella.ai site additions (2026-10-18) ===== */
/* Screenshot deterrent L1 (was in feature-page.css + landing.html); L2 is /features/_shared/screenshot-deterrent.js */
html,body{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"],code,pre,.selectable{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none}
body.is-blurred{filter:blur(20px);transition:filter .12s ease}
@media print{body *{visibility:hidden!important}body::after{content:'Printing is disabled. Visit calldella.ai for an authorized export.';visibility:visible;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font:600 18px/1.5 var(--sans);color:var(--ink);text-align:center;padding:40px}}
/* keyboard focus */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--g-lt);outline-offset:2px;border-radius:6px}
/* language picker (every page) */
.lang-picker{position:relative}
.lang-trigger{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border:1px solid var(--line-2);border-radius:10px;background:#fff;color:var(--ink-2);font:500 13px var(--sans);cursor:pointer}
.lang-trigger svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.lang-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:60;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -18px rgba(11,18,32,.35);padding:6px;flex-direction:column;min-width:170px;max-height:70vh;overflow:auto}
.lang-menu.open{display:flex}
.lang-item{background:none;border:0;text-align:left;padding:8px 12px;border-radius:8px;font:400 14px var(--sans);color:var(--ink-2);cursor:pointer}
.lang-item:hover{background:var(--paper)}
.lang-item.active{background:var(--g-tint);color:var(--ink);font-weight:600}
.mnav .mlang{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.mnav .mlang button{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:5px 10px;font:400 13px var(--sans);color:var(--ink-2)}
.mnav .mlang button.active{background:var(--g-tint);border-color:var(--g-lt);color:var(--ink)}
.lang-menu a.lang-item{text-decoration:none}
.mnav .mlang a{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:5px 10px;font:400 13px var(--sans);color:var(--ink-2);text-decoration:none}
.mnav .mlang a.active{background:var(--g-tint);border-color:var(--g-lt);color:var(--ink)}
@media(max-width:640px){.lang-picker{display:none}}
/* pricing: free test call strip (same as the in-app pricing sheet) */
.tryfree{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:28px;padding:18px 22px;border:1px solid var(--line);border-radius:18px;background:#fff}
.tryfree b{color:var(--ink);font-weight:600}
.tryfree small{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.tryfree .ctas{display:flex;gap:10px;flex-wrap:wrap}
.tryfree .btn{height:42px;font-size:14px;border-radius:10px}
.tryfree .btn svg{width:16px;height:16px}
.plan .pr .yr{display:block;font:500 12px var(--mono);letter-spacing:0;color:var(--ink-3);margin-top:8px}
.plan.pop .pr .yr{color:var(--g-lt)}
.plan li.x{text-decoration:line-through}
.plan .for b{font-weight:600;color:inherit;opacity:1}
.ent-call{margin-top:10px;font-size:13px;text-align:center;opacity:.75}
.ent-call a{text-decoration:underline}
.bill small{margin-left:6px}
/* pricing: pay-as-you-go top-ups */
.payg{margin-top:26px;border:1px solid var(--line);border-radius:18px;background:#fff;padding:22px}
.payg h3{font-size:17px}
.payg>p{font-size:14px;color:var(--ink-3);margin-top:4px}
.payg .packs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.payg .pk{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--paper)}
.payg .pk b{display:block;color:var(--ink);font-size:15px}
.payg .pk span{font:500 12px var(--mono);color:var(--ink-3)}
.payg .pk .best{display:inline-block;margin-left:6px;font:500 10px var(--mono);background:var(--g-tint);color:var(--ink);padding:2px 6px;border-radius:6px}
@media(max-width:640px){.payg .packs{grid-template-columns:1fr 1fr}}
/* proof: customer quotes */
.quotes.q4{grid-template-columns:1fr 1fr}
.q.real{border-style:solid}
.q .stars{color:#F2B544;letter-spacing:2px;font-size:14px;margin-bottom:8px}
.q .by b{color:var(--ink);font-weight:600}
@media(max-width:640px){.quotes.q4{grid-template-columns:1fr}}
/* legal pages: original text in the new layout */
.ldoc .updated{font:500 12px var(--mono);color:var(--ink-3);margin-bottom:20px}
.ldoc ul{margin:10px 0 14px 20px}
.ldoc a{text-decoration:underline}
.plan .pr:not([data-m]){font-size:34px}
/* accessibility pass (Lighthouse, 2026-10-18) */
footer h2.fh{font:500 11.5px var(--mono);color:var(--ink);margin-bottom:14px}
.cmp tbody th{font:inherit;font-weight:400;color:var(--ink);text-align:left}
.c-call .av{color:#8A4330}
.shot-web .bar span,.sc-web .bar span{color:var(--ink-2)}
.plan li.x{opacity:1;color:var(--ink-3)}
.plan.pop li.x{color:rgba(255,255,255,.62)}
/* story pages: the original About / Founder / Why Della / Who it's for content in the new layout (2026-10-18) */
.story-hero .wrap.with-photo{display:grid;grid-template-columns:1fr 260px;gap:48px;align-items:center}
.story-hero .headshot img{width:240px;height:240px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 20px 40px -20px rgba(11,18,32,.45)}
.story-hero .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.story-hero .tags span,.chips span{font:500 12px var(--mono);padding:6px 10px;border-radius:999px;background:#fff;border:1px solid var(--line-2);color:var(--ink-2)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;max-width:900px}
.kpis div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.kpis b{display:block;font-size:28px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.kpis span{font-size:13.5px;color:var(--ink-3)}
.sdek{max-width:760px;margin-top:18px}
.sdek p{font-size:17px;color:var(--ink-2);margin-bottom:12px}
.wideimg{margin-top:28px}
.wideimg img{width:100%;border-radius:22px;border:1px solid var(--line)}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.story-grid.c2{grid-template-columns:repeat(2,1fr)}
.story-card{display:block;color:inherit}
.story-card .meta{font:500 12px var(--mono);color:var(--ink-3);margin-bottom:10px}
.story-card p+p{margin-top:8px}
.story-card .cimg img{max-width:160px;border-radius:12px;margin-bottom:14px}
.story-card .ticks{margin-top:12px}
.more{display:inline-block;margin-top:16px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ticks{list-style:none;margin:18px 0 0;display:grid;gap:8px}
.ticks li{display:flex;gap:10px;font-size:15.5px;color:var(--ink-2)}
.ticks li svg{width:18px;height:18px;flex:none;margin-top:3px;color:#047857;fill:none;stroke:currentColor;stroke-width:2.2}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pillar .pgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.pillar .pgrid.flip>div:first-child{order:2}
.pvis{border-radius:22px;overflow:hidden}
.pvis.photo{min-height:380px;background-size:cover;background-position:center}
.pvis .shot-ph{max-width:300px;margin:0 auto;display:block}
.pvis>img{width:100%;border-radius:22px}
.quote1 .wrap{max-width:860px;text-align:center}
.quote1 .stars{color:#F2B544;letter-spacing:3px}
.quote1 blockquote{font-size:24px;line-height:1.45;color:var(--ink);margin-top:14px;letter-spacing:-.01em}
.quote1 cite{display:block;margin-top:16px;font-style:normal;font-size:14px;color:var(--ink-3)}
@media(max-width:1100px){.story-hero .wrap.with-photo,.pillar .pgrid{grid-template-columns:1fr}.pillar .pgrid.flip>div:first-child{order:0}.story-grid{grid-template-columns:1fr 1fr}.kpis{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.story-grid,.story-grid.c2{grid-template-columns:1fr}.quote1 blockquote{font-size:19px}.story-hero .headshot img{width:160px;height:160px}}

/* ===== option C (2026-10-18): Bricolage Grotesque for display, Figtree for text, navy + mint ===== */
body{font-family:var(--sans);background:var(--bg);color:var(--ink-2)}
h1,h2,h3,.plan .pr,.kpis b,.rating b,.calc strong,.demo .ph a{font-family:var(--display)}
h1,h2{font-weight:700;letter-spacing:-.025em}
h2{font-size:44px;line-height:48px}
h3{font-weight:700}
.phero2 h1{font-size:56px;line-height:1.02}
.della-ph,.plan .pr,.payg,.calc strong,.kpis b,time{font-variant-numeric:tabular-nums}
.btn{border-radius:12px}
.oc,.plan,.q,.cmp,.payg,.tryfree,.kpis div,.story-card{border-radius:18px;box-shadow:none}
.btn.pri:hover{background:var(--navy-800)}
.oc:hover{border-color:var(--line-2)}
/* sections alternate light background and white card; navy only for the demo band and the final call to action */
main>section{background:var(--bg)}
main>section:nth-of-type(even):not(.demo):not(.final):not(.dhero){background:var(--card)}
/* status chips */
.plan.pop .btn.pri,.dhero .btn.pri{background:var(--mint);border-color:var(--mint);color:#052E1F}
.plan.pop .btn.pri:hover,.dhero .btn.pri:hover{background:#6EE7B7}
/* ---- home hero: navy, headline left, the day dial right ---- */
.dhero{background:var(--navy-900);color:var(--on-navy);padding:64px 0 88px;overflow:hidden}
.dhero .wrap{display:grid;grid-template-columns:1fr 520px;gap:40px;align-items:center}
.dhero h1{font:700 72px/72px var(--display);letter-spacing:-.035em;color:#fff}
.dhero h1 em{color:#fff}
.dhero .eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 14px var(--sans);color:var(--on-navy-muted);margin-bottom:22px}
.dhero .sub{font-size:18px;line-height:28px;color:#AEB8C9;max-width:42ch;margin-top:22px}
.dhero .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.dhero .btn.gh{background:var(--navy-800);border-color:var(--navy-700);color:var(--on-navy)}
.dhero .btn.gh:hover{background:var(--navy-700)}
.dhero .trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:13.5px;color:var(--on-navy-muted)}
.dhero .trust span{display:inline-flex;align-items:center;gap:6px}
.dhero .trust svg{width:15px;height:15px;color:var(--mint)}
.dhero .trust b{color:var(--on-navy);font-weight:600}
.bigdial{position:relative;width:520px;height:520px}
.bigdial svg.d{width:100%;height:100%}
.bigdial .face{position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%)}
.bigdial .live{animation:dialpulse 1.8s ease-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes dialpulse{0%{opacity:1}70%,100%{opacity:.25}}
.bub{position:absolute;background:#fff;color:var(--ink);border-radius:16px;padding:11px 14px;font-size:14px;line-height:1.35;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);max-width:240px}
.bub time{display:block;font-size:11px;color:var(--slate);margin-bottom:2px}
.bub .chip{display:inline-block;margin-top:6px;font:600 11px var(--sans);padding:2px 8px;border-radius:999px;background:var(--st-booked-bg);color:var(--st-booked)}
.bub .chip.you{background:var(--st-you-bg);color:var(--st-you)}
.bub.glass{left:0;top:0;width:250px;max-width:250px;color:#fff;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 48px -24px rgba(0,0,0,.75);transition:transform .9s cubic-bezier(.22,.8,.2,1);will-change:transform}
.bigdial:not(.live-feed) .bub.glass{visibility:hidden}
.bub.glass time{display:flex;align-items:center;gap:6px;color:rgba(231,236,243,.78)}
.bub.glass time::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot,#34D399);flex:none}
.bub.glass time,.bub.glass .t{transition:opacity .24s ease}
.bub.glass.swap time,.bub.glass.swap .t{opacity:0}
.bigdial .halo{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2;transition:transform .9s cubic-bezier(.22,.8,.2,1)}
@media(prefers-reduced-motion:reduce){.bub.glass,.bigdial .halo{transition:none}}
@media(max-width:1100px){.dhero .wrap{grid-template-columns:1fr}.bigdial{margin:0 auto;width:min(440px,100%);height:auto;aspect-ratio:1}}
@media(max-width:640px){.bub.glass{display:block;left:50%;top:auto;bottom:2%;width:min(280px,86%);max-width:none;transform:translateX(-50%)!important;transition:none;font-size:13px}.dhero{padding:40px 0 56px}.dhero h1{font-size:44px;line-height:46px}h2{font-size:32px;line-height:36px}.phero2 h1{font-size:38px}.bub{display:none}.bigdial .face{width:110px;height:110px}}
@media(prefers-reduced-motion:reduce){.bigdial .live{animation:none}}
.dhero+.demo{border-top:1px solid var(--navy-700)}
.lsw{font:600 13px var(--sans);padding:6px 9px;border:1px solid var(--line-2);border-radius:10px;color:var(--ink-2)}.lsw:hover{border-color:var(--ink-3)}
/* ===== home-page pop-ups (checkout email prompt, Enterprise sales form): option C finish ===== */
#checkoutEmailModal,#entSalesModal{font-family:var(--sans)}
#checkoutEmailModal [role=dialog],#entSalesModal .ent-card{border-radius:18px!important;box-shadow:0 30px 60px -20px rgba(11,18,32,.45)!important;color:var(--ink)}
#checkoutEmailModal h3,#entSalesModal h2{font-family:var(--display)!important;font-weight:700!important;letter-spacing:-.02em;color:var(--ink)!important}
#checkoutEmailModal p,#entSalesModal .ent-h-sub{color:var(--slate)!important}
#checkoutEmailModal label,#entSalesModal .ent-fld label{color:var(--ink)!important;font-weight:600!important}
#checkoutEmailModal input,#entSalesModal .ent-ip,#entSalesModal .ent-sel,#entSalesModal textarea{border:1px solid var(--line)!important;border-radius:10px!important;font-family:var(--sans)!important;color:var(--ink)!important}
#checkoutEmailModal input:focus,#entSalesModal .ent-ip:focus,#entSalesModal .ent-sel:focus,#entSalesModal textarea:focus{border-color:var(--ink)!important;box-shadow:0 0 0 3px rgba(52,211,153,.35)!important}
#entSalesModal .ent-sec-label{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;color:var(--ink)!important}
#entSalesModal .ent-sec-n{background:var(--mint-tint)!important;color:var(--green-700)!important}
#entSalesModal .ent-h-ico,#entSalesModal .ent-trust{background:var(--navy-900)!important}
#checkoutEmailModal button,#entSalesModal button{font-family:var(--sans)!important;border-radius:12px}