/* Apple-style redesign (2026-11-04, LOCAL EXPERIMENT, not deployed; owner: "nah dont like it, has to be like apple type, and we
   can be bolder"): white and #F5F5F7, near-black text, the system font (SF Pro on Apple devices, Inter elsewhere), huge heavy
   centred headlines with a grey second line, blue pill buttons and "Learn more ›" links, big rounded bento tiles, and a
   full-width black section for the AI front desk. Loaded after studio.css on every page (blocks.py adds the link). */

:root{
  --a-bg:#FFFFFF; --a-grey:#F5F5F7; --a-ink:#1D1D1F; --a-mute:#6E6E73; --a-faint:#86868B; --a-line:#D2D2D7;
  --a-blue:#0071E3; --a-blue-h:#0077ED; --a-black:#000000;
  --a-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Helvetica Neue",Arial,sans-serif;
  --bg:var(--a-bg); --bg-2:var(--a-grey); --surface:#fff; --surface-2:var(--a-grey);
  --line:#E8E8ED; --line-2:var(--a-line); --text:var(--a-ink); --muted:var(--a-mute); --dim:var(--a-faint);
  --accent:var(--a-blue); --accent-2:var(--a-blue);
}
html,body{background:#fff}
body{font-family:var(--a-font);color:var(--a-ink);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased}
body::after{display:none}
::selection{background:rgba(0,113,227,.25);color:inherit}
button,input,select,textarea,.btn{font-family:var(--a-font)}

/* type: big, heavy, tight; the second half of a headline in grey */
h1,h2,h3,.legal h1{font-family:var(--a-font);color:var(--a-ink)}
h1{font-weight:700;letter-spacing:-.045em;line-height:1.02}
h2{font-weight:700;font-size:clamp(40px,5.8vw,80px);line-height:1.04;letter-spacing:-.04em}
h3{font-weight:600;letter-spacing:-.02em}
em,h1 em,h2 em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit}
h2 em{color:var(--a-faint)}
h1 em{background:linear-gradient(92deg,#0071E3 10%,#40A9FF 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--a-mute);font-size:clamp(19px,1.6vw,24px);line-height:1.4;letter-spacing:-.02em;font-weight:400}
.sec-sub{color:var(--a-mute);font-size:clamp(18px,1.45vw,21px)}

/* labels: one quiet line, no chips or numbers */
.label,.eyebrow{font-family:var(--a-font);font-size:17px;font-weight:600;letter-spacing:-.02em;text-transform:none;color:var(--a-mute);gap:8px}
.label span:not(.desk-new):not(.desk-live-dot){display:none}
.label span.desk-new{font-family:var(--a-font);background:none!important;color:#BF4800!important;padding:0;font-size:17px;font-weight:600;letter-spacing:-.02em;text-transform:none}
.dot{background:#30D158;box-shadow:0 0 0 4px rgba(48,209,88,.18)}

/* buttons: blue pills and plain links */
.btn{background:var(--a-blue);color:#fff;border-radius:980px;min-height:48px;padding:0 24px;font-size:17px;font-weight:400;letter-spacing:-.02em;box-shadow:none}
.btn:hover{background:var(--a-blue-h);color:#fff;transform:none;box-shadow:none}
.btn:active{transform:scale(.98)}
.btn.ghost,.plan .btn.ghost{background:transparent;color:var(--a-blue);box-shadow:inset 0 0 0 1px var(--a-blue)}
.btn.ghost:hover{background:var(--a-blue);color:#fff}
.btn-sm{min-height:34px;padding:0 16px;font-size:14px}
.more,.textlink,.visit{color:var(--a-blue);border:0;font-size:17px;font-weight:400}
.more:hover,.textlink:hover{text-decoration:underline;color:var(--a-blue)}

/* header: the slim translucent bar */
.top,.top.scrolled{padding-top:10px;padding-bottom:10px;background:rgba(255,255,255,.8);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.brand img{height:44px}
.nav{gap:30px}
.nav a{color:rgba(0,0,0,.8);font-size:13px;font-weight:400;letter-spacing:-.01em}
.nav a:hover,.nav a[aria-current=page]{color:#000}
.nav a[aria-current=page]::after{display:none}
@media (max-width:860px){.brand img{height:38px}}

/* sections: centred heads, big air */
section{padding-top:clamp(100px,11vw,170px)}
.sec-head{gap:14px;margin-bottom:clamp(44px,5vw,72px);justify-items:center;text-align:center}
.sec-head h2{margin-inline:auto;max-width:18ch}
.sec-head .label{justify-content:center}
.sec-split{grid-template-columns:1fr}
.sec-split .sec-sub{justify-self:center;max-width:46ch;padding:0}
.band{padding-top:clamp(100px,11vw,170px);padding-bottom:clamp(100px,11vw,170px);margin-top:clamp(100px,11vw,170px)}
.band::before{background:var(--a-grey);border:0}
.faq .sec-head{justify-items:start;text-align:left}

/* ===== home hero ===== */
.hero.split{padding-top:clamp(120px,13vw,170px)}
.hero.split .hero-head{text-align:center}
.hero.split .eyebrow{justify-content:center;color:var(--a-mute);font-size:19px}
.hero.split h1{font-size:clamp(56px,9vw,128px);line-height:1;letter-spacing:-.05em;max-width:12ch;margin-inline:auto}
.hero.split .lede{margin:22px auto 0;max-width:34ch}
.prem-hero .ways{margin-top:clamp(56px,6vw,88px);gap:clamp(14px,1.6vw,22px)}
.way{background:var(--a-grey);box-shadow:none;border-radius:30px;padding:clamp(32px,3.6vw,56px)}
.way-dfy{background:#000;color:#F5F5F7}
.way h2{font-size:clamp(36px,3.8vw,56px);font-weight:700;letter-spacing:-.04em}
.way h2 em{color:var(--a-blue)}
.way-dfy h2,.way-dfy h2 em{color:#F5F5F7}
.way-dfy h2 em{color:#2997FF}
.way-tag{font-size:15px;font-weight:600;color:var(--a-mute);letter-spacing:-.01em}
.way-tag span{background:none;box-shadow:none;padding:0;color:#BF4800;font-size:15px}
.way-dfy .way-tag{color:#A1A1A6}
.way-dfy .way-tag span{background:none;color:#FF9F0A}
.way-line{color:var(--a-mute);font-size:19px;line-height:1.4}
.way-dfy .way-line{color:#A1A1A6}
.way-pic .browser,.wshot{box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.way-badge{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);color:#1D1D1F;font-size:13px;font-weight:600}
.path-price{border-top-color:rgba(0,0,0,.1)}
.path-price b{font-size:clamp(40px,4vw,56px);font-weight:700;letter-spacing:-.04em}
.path-price .from,.path-price span,.path-price small{color:var(--a-mute)}
.way-dfy .path-price{border-top-color:rgba(255,255,255,.16)}
.way-dfy .path-price b{color:#F5F5F7}
.way-dfy .path-price span,.way-dfy .path-price small,.way-dfy .path-price .from{color:#A1A1A6}
.way-dfy .btn{background:var(--a-blue);color:#fff}
.way-note,.way-dfy .way-note{color:var(--a-faint);font-size:14px}

/* client names */
.built-for{border-top:0;margin-top:clamp(48px,5vw,72px);padding-top:0}
.built-for span{font-size:14px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--a-faint)}
.built-for a{font-size:clamp(20px,1.9vw,26px);font-weight:700;letter-spacing:-.035em;color:#1D1D1F;opacity:.35}

/* work: big tiles */
.wgrid{gap:clamp(16px,1.8vw,24px)}
.wcard{background:var(--a-grey);border-radius:30px;padding:clamp(24px,2.6vw,36px) clamp(24px,2.6vw,36px) 0;overflow:hidden;gap:22px;grid-template-rows:auto 1fr}
.wmeta{order:-1;text-align:center;justify-items:center}
.wmeta b{font-size:clamp(26px,2.6vw,36px);font-weight:700;letter-spacing:-.04em}
.wmeta small{font-size:17px;color:var(--a-mute)}
.wshot{border-radius:14px 14px 0 0;align-self:end;box-shadow:0 -10px 40px -20px rgba(0,0,0,.25)}
.wcard:hover .wshot img{transform:scale(1.02)}

/* what's in the box: bento */
.inc-grid li,.band .inc-grid li{background:#fff;box-shadow:none;border-radius:28px}
.inc-pic,.band .inc-pic{background:var(--a-grey);border-radius:18px}
.inc-grid h3{font-size:24px;font-weight:700;letter-spacing:-.035em}
.inc-grid p{color:var(--a-mute);font-size:16px}
.inc-who span{border-radius:980px;font-size:12px;font-weight:600}
.inc-who .both{background:var(--a-grey);color:var(--a-ink)}
.inc-who .dfy{background:#1D1D1F;color:#fff}

/* front desk: a full-width black section */
.desk-feature{position:relative;isolation:isolate;color:#F5F5F7;padding-top:clamp(100px,11vw,170px);padding-bottom:clamp(100px,11vw,170px);margin-top:clamp(100px,11vw,170px)}
.desk-feature::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:#000}
.desk-feature h2{color:#F5F5F7;font-size:clamp(44px,5.4vw,80px)}
.desk-feature h2 em{color:#86868B}
.desk-feature .label{color:#A1A1A6}
.desk-feature .label span.desk-new{color:#FF9F0A!important}
.desk-feature .feature-copy p,.desk-feature .desk-points li{color:#A1A1A6}
.desk-feature .feature-copy b{color:#F5F5F7}
.desk-points li::before{background:rgba(41,151,255,.18);color:#2997FF;box-shadow:none}
.desk-ctas .btn:first-child{background:var(--a-blue);color:#fff;box-shadow:none}
.desk-ctas .btn:last-child{background:transparent;color:#2997FF;box-shadow:inset 0 0 0 1px #2997FF}
.desk-feature .desk-tabs button{background:#1D1D1F;color:#F5F5F7;box-shadow:none}
.desk-feature .desk-tabs button.on{background:#F5F5F7;color:#000}
.desk-feature + section,.desk-feature + .band{margin-top:0}
.pd-phone{background:linear-gradient(145deg,#4A4A4F,#1D1D1F 45%,#3A3A3C);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),0 60px 120px -40px rgba(41,151,255,.25)}

/* pricing */
.plan{background:#fff;box-shadow:none;border-radius:30px;padding:clamp(32px,3.4vw,48px)}
.plan-k{font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--a-ink)}
.plan ul{border-top-color:#E8E8ED}
.plan li{color:var(--a-mute);font-size:16px}
.plan li::before{background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071E3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:none}
.plan-dfy{background:#000;box-shadow:none}
.plan-dfy .plan-k,.plan-dfy h3{color:#F5F5F7}
.plan-dfy li{color:#A1A1A6}
.plan-dfy ul{border-top-color:rgba(255,255,255,.14)}
.plan-dfy li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232997FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")}
.plan-dfy .path-price b{color:#F5F5F7}
.plan-dfy .path-price span,.plan-dfy .path-price small,.plan-dfy .path-price .from{color:#A1A1A6}
.plan-dfy .btn{background:var(--a-blue);color:#fff;box-shadow:none}
.plan-pick{background:none;color:#FF9F0A;font-size:14px;font-weight:600;padding:0}
.plan-note,.plan-dfy .plan-note{color:var(--a-faint);font-size:14px}
.addons-k{font-size:17px;font-weight:600;color:var(--a-ink);text-align:center;margin-bottom:6px}
.addon,.cmp-more{background:#fff;box-shadow:none;border-radius:20px}
.addon:hover{transform:translateY(-2px);box-shadow:0 20px 40px -24px rgba(0,0,0,.25)}
.addon b{font-size:17px;font-weight:700;letter-spacing:-.025em}
.addon em{font-style:normal;font-weight:600;color:var(--a-ink)}
.cmp thead th:last-child{background:#000;color:#F5F5F7}

/* FAQ */
.qa details{border-bottom-color:#E8E8ED}
.qa summary{font-size:clamp(19px,1.7vw,24px);font-weight:600;letter-spacing:-.025em}
.qa summary::after{box-shadow:none;background-color:var(--a-grey)}

/* closing: black, huge */
.closing-card{background:#000;border-radius:30px;box-shadow:none;padding:clamp(64px,8vw,120px) clamp(24px,5vw,64px)}
.closing-card h2{font-size:clamp(52px,7.4vw,112px);color:#F5F5F7}
.closing-card h2 em{color:#86868B}
.closing-card>p:not(.cta-note){color:#A1A1A6;font-size:21px}
.closing-card .btn{background:var(--a-blue);color:#fff}
.closing-card .cta-note,.closing-row{color:#86868B}
.closing-card a:not(.btn){color:#2997FF}

/* footer: the small grey one */
.foot{background:var(--a-grey);max-width:none;padding:clamp(40px,4vw,56px) max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad))) 32px;border-top:0;margin-top:clamp(60px,6vw,96px);font-size:12px}
.foot-brand img{height:34px}
.foot-brand p,.foot nav a{color:#424245;font-size:12px}
.foot nav a:hover{color:#1D1D1F;text-decoration:underline}
.foot-h{font-size:12px;font-weight:600;color:#1D1D1F;text-transform:none;letter-spacing:0}
.foot .foot-mail{color:#1D1D1F;font-size:12px;border:0;text-decoration:underline}
.foot-base{border-top-color:#D2D2D7;color:#6E6E73;font-size:12px}
.foot .small{font-size:12px;color:#6E6E73}

/* other pages */
.legal h1{font-weight:700;letter-spacing:-.045em}
.legal h2{font-weight:700;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.035em;border-top-color:#E8E8ED}
.legal p,.legal li{color:#424245;font-size:17px}
.covers li,.addon-tiles li,.who-row div{background:var(--a-grey);box-shadow:none;border-radius:24px}
.band .covers li{background:#fff}
.covers h3{font-size:21px;font-weight:700;letter-spacing:-.03em}
.covers svg,.addon-tiles svg{color:var(--a-blue)}
.frame,.legal-img{box-shadow:0 30px 60px -30px rgba(0,0,0,.3);border-radius:20px}
.dp-flow-line li{background:#1D1D1F}
.dp-flow-line li::before{background:var(--a-blue)}
.dp-flow-line li:last-child{background:var(--a-blue)}
.dp-flow-cards li{background:var(--a-grey);box-shadow:none;border-radius:24px}
.dp-style-tabs button{background:var(--a-grey)}
.dp-style-tabs button[aria-selected=true]{background:#1D1D1F;color:#fff}
.dp-tune-k{text-transform:none;letter-spacing:-.01em;font-size:15px}

/* fixes after the first look */
.band + .desk-feature{margin-top:0}
.prem-work .more,.incl .more{display:table;margin:clamp(28px,3vw,40px) auto 0}
.desk-feature .pd-screen{color:#1D1D1F}

/* ===== Toned back (2026-11-04, owner: "I like this design lots, but its just a little too similar to apple, can we tone it back
   just a bit, particuarly the nav bar") ===== Sava's own font (Geist) and brand blue instead of SF Pro and Apple blue, no orange
   accents, a floating rounded nav bar instead of Apple's thin full-width strip, and a slightly larger footer. */
:root{--a-blue:#1D4FD8;--a-blue-h:#2F6BFF;--a-font:Geist,Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--accent:#1D4FD8;--accent-2:#1D4FD8}
body{letter-spacing:-.011em}
h1{letter-spacing:-.05em}
h2{letter-spacing:-.045em}
h1 em{background:linear-gradient(92deg,#1D4FD8 5%,#4F86FF 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.way h2 em{color:#1D4FD8}
.way-dfy h2 em{color:#6E9BFF}
.way-tag span,.label span.desk-new{color:#1D4FD8!important}
.way-dfy .way-tag span{color:#6E9BFF}
.desk-feature .label span.desk-new{color:#6E9BFF!important}
.plan-pick{color:#6E9BFF}
.desk-points li::before{background:rgba(110,155,255,.18);color:#6E9BFF}
.desk-ctas .btn:last-child{color:#6E9BFF;box-shadow:inset 0 0 0 1px #6E9BFF}
.closing-card a:not(.btn){color:#6E9BFF}

/* the floating nav bar */
.top,.top.scrolled{left:50%;right:auto;top:12px;transform:translateX(-50%);width:min(1240px,calc(100% - 24px));padding:8px 8px 8px 20px;border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border:1px solid rgba(14,21,37,.07);box-shadow:0 12px 32px -20px rgba(14,21,37,.35)}
.brand img{height:40px}
.nav{gap:4px}
.nav a{padding:8px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:#424245;transition:background .2s,color .2s}
.nav a:hover{background:#F5F5F7;color:#1D1D1F}
.nav a[aria-current=page]{background:#F0F3FA;color:#1D4FD8}
.top .btn-sm{min-height:40px;padding:0 20px;font-size:14.5px;font-weight:600}
@media (max-width:860px){.top,.top.scrolled{top:8px;padding:6px 6px 6px 16px}.brand img{height:34px}}

/* footer a touch larger */
.foot{font-size:13.5px}
.foot-brand p,.foot nav a,.foot .foot-mail,.foot-h{font-size:13.5px}
.foot-base,.foot .small{font-size:12.5px}

/* nav bar, take 3 (owner: "no dont like that navi bar"): back to a classic full-width bar: solid white, logo left, links in the
   middle at a normal size, the blue button right, a thin line underneath */
.top,.top.scrolled{left:0;right:0;top:0;transform:none;width:auto;padding:14px var(--pad);border-radius:0;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border:0;border-bottom:1px solid #E8E8ED;box-shadow:none}
.brand img{height:44px}
.nav{margin-left:auto;margin-right:auto;gap:30px}
.nav a{padding:0;border-radius:0;background:none!important;font-size:15px;font-weight:500;color:#424245}
.nav a:hover{color:#1D1D1F}
.nav a[aria-current=page]{color:#1D4FD8}
.top .btn-sm{min-height:42px;padding:0 20px;font-size:15px;font-weight:600}
@media (max-width:860px){.top,.top.scrolled{padding:10px 16px}.brand img{height:36px}}

/* FAQ (owner: "can we display this better?"): heading centred, questions as rounded cards in two columns that open in place */
.faq{display:block}
.faq .sec-head{position:static;justify-items:center;text-align:center;margin-bottom:clamp(36px,4vw,56px)}
.faq .sec-head .label{justify-content:center}
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:1080px;margin:0 auto;align-items:start}
.qa details{background:#F5F5F7;border:0;border-radius:22px;padding:0 26px;transition:background .2s}
.qa details:hover{background:#EEEEF1}
.qa details[open]{background:#fff;box-shadow:0 0 0 1px #E8E8ED,0 24px 50px -30px rgba(0,0,0,.25)}
.qa summary{padding:24px 0;font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.025em;gap:18px}
.qa summary:hover{color:inherit}
.qa summary::after{width:30px;height:30px;background-color:#fff;box-shadow:0 0 0 1px #E8E8ED}
.qa details[open] summary::after{background-color:#1D4FD8;box-shadow:none;filter:invert(1) brightness(2)}
.qa details p{padding:0 0 24px;margin-top:-6px;font-size:16.5px;color:#6E6E73}
.band .qa details{background:#fff}
@media (max-width:760px){.qa{grid-template-columns:1fr}}
.qa{border-top:0}
/* FAQ: one centred column of cards (two columns left gaps when a card opened) */
.qa{grid-template-columns:1fr;max-width:820px;gap:12px}
.qa details[open] summary::after{filter:none;background-color:#E8EEFF;box-shadow:none}

/* Get started page (2026-11-04, owner: "the contact page goes down lots", "There's no need to have quotes"): the price up top,
   three steps, four add-on ticks and a running price; no 16-feature checklist */
.start-price{margin-top:26px;padding:18px 22px;border-radius:20px;background:#F5F5F7;font-size:19px;letter-spacing:-.02em}
.start-price b{font-weight:700}
.start-price>b:first-child{font-size:32px;letter-spacing:-.04em}
.start-price small{display:block;margin-top:4px;font-size:13.5px;color:#6E6E73;letter-spacing:-.01em}
.start-page .next-steps{margin-top:22px}
.start-adds .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.start-adds .feat-d{font-size:13px}
.feat-sum{font-size:16px;color:#1D1D1F}
@media (max-width:560px){.start-adds .feat-grid{grid-template-columns:1fr}}