@font-face{font-family:"Archivo";src:url("../fonts/archivo.woff") format("woff");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --black:#111111; --black-hover:#333333; --white:#ffffff;
  --gray:#535353; --warm:#8A8780; --sand:#DDD3BE; --sand-soft:#F1ECE1;
  --line:rgba(17,17,17,.16); --line-sand:rgba(17,17,17,.22); --on-dark:rgba(255,255,255,.72);
  --font:"Archivo",Arial,sans-serif;
  --m:64px; --gap:24px;
  --band:128px; --band-tight:80px; --band-end:calc(var(--band) / 2);
}
@media (max-width:1199px){:root{--m:32px;--band:104px;--band-tight:72px;--band-end:52px}}
@media (max-width:767px){:root{--m:20px;--gap:16px;--band:64px;--band-tight:48px;--band-end:32px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:112px}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
/* Archivo's bold weights set word spaces tight; open them slightly so words never run together */
h3,strong,b,dt,summary,.btn,.tab,.textlink,.nav-links a,.menu-panel a,.field,.back{word-spacing:.12em}
:focus-visible{outline:2px solid var(--black);outline-offset:2px}
.dark :focus-visible{outline-color:var(--white)}

/* Containers own horizontal space; bands own vertical space. Never both on one element. */
.container{max-width:calc(1280px + 2 * var(--m));margin:0 auto;padding-left:var(--m);padding-right:var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.band{padding-top:var(--band);padding-bottom:var(--band-end)}
.band.tight{padding-top:var(--band-tight);padding-bottom:var(--band-end)}
.ruled-section{padding-top:0}
.ruled{border-top:1px solid var(--line);padding-top:var(--band-tight)}
.dark{background:var(--black);color:var(--white)}

/* Type hierarchy: one large regular headline, smaller regular section heads, bold only for structure */
.label{font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.display{font-weight:400;font-size:clamp(42px,6.6vw,96px);line-height:.98;letter-spacing:-.035em;word-spacing:.03em;margin:0;text-wrap:balance}
.h-primary{font-weight:400;font-size:clamp(30px,3.2vw,42px);line-height:1.1;letter-spacing:-.025em;margin:0;text-wrap:balance}
.h-secondary{font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance}
h3{font-weight:700;font-size:17px;line-height:1.35;letter-spacing:-.005em;margin:0}
.lead{font-size:19px;line-height:1.5;color:var(--gray)}
.muted{color:var(--gray)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;min-height:56px;padding:0 24px;border:1px solid var(--black);border-radius:0;background:var(--black);color:var(--white);font-family:var(--font);font-size:16px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--black-hover);border-color:var(--black-hover)}
.btn svg{flex:none}
.btn.compact{min-height:48px;padding:0 20px;gap:24px;font-size:15px}
.btn.light{background:var(--white);color:var(--black);border-color:var(--white)}
.btn.light:hover{background:var(--sand);border-color:var(--sand)}
.commit{font-size:14px;line-height:1.5;color:var(--gray);max-width:26em}
.dark .commit{color:var(--on-dark)}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.textlink{font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.textlink:hover{text-decoration-thickness:2px}

/* Photo slots: art-directed placeholders until real photos are dropped into PHOTOS (see script) */
.photo{position:relative;overflow:hidden;background:var(--ph,#8A8780);color:#fff}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .brief{position:absolute;left:16px;bottom:14px;right:16px;font-size:12px;line-height:1.4;opacity:.92}
.photo .brief b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
.photo.has-img .brief{display:none}

/* Header */
.skip{position:absolute;left:12px;top:-120px;background:var(--white);padding:16px;z-index:20}
.skip:focus{top:12px}
.site-header{position:sticky;top:0;z-index:10;background:var(--white);transition:box-shadow .18s ease}
.site-header.is-stuck{box-shadow:0 1px 0 var(--line)}
.site-header.is-stuck .nav{border-bottom-color:transparent}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:96px;border-bottom:1px solid var(--line)}
.brand{display:block;line-height:0;color:var(--black)}
.brand svg{width:184px;height:auto}
.nav-right{display:flex;align-items:center;gap:32px}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:15px;font-weight:600;text-decoration:none}
.nav-links a:hover{text-decoration:underline;text-underline-offset:5px}
.menu-btn{display:none;width:48px;height:48px;align-items:center;justify-content:center;border:1px solid var(--black);background:var(--white);padding:0}
.menu-panel{display:none}

/* Hero */
.hero{padding-top:72px;padding-bottom:var(--band-end)}
.hero-title{grid-column:1 / 9}
.hero-title .display{margin-top:24px}
.hero-side{grid-column:9 / 13;align-self:end;display:flex;flex-direction:column;gap:28px;padding-bottom:6px}
.hero-photo{margin-top:56px;aspect-ratio:1280 / 540;--ph:#7E7A72}
.tagline{margin-top:18px;font-size:22px;line-height:1.3;letter-spacing:-.015em}

/* Offer: the price is the page's signature moment */
.offer{background:var(--sand);padding-top:88px;padding-bottom:96px}
.offer-top{grid-column:1 / -1;align-items:end}
.offer-price{grid-column:1 / 8}
.price{font-weight:700;font-size:clamp(104px,15.5vw,224px);line-height:.8;letter-spacing:-.045em;font-feature-settings:"lnum" 1;margin-top:20px}
.price-note{margin-top:24px;font-size:18px;line-height:1.4;color:var(--gray)}
.offer-pitch{grid-column:8 / 13;display:flex;flex-direction:column;gap:24px;padding-bottom:4px}
.offer-pitch .h-primary{font-size:clamp(26px,2.4vw,32px)}
.offer-rule{grid-column:1 / -1;height:2px;background:var(--black);margin:40px 0 32px}
.offer-scope{grid-column:1 / 8}
.offer-details{grid-column:9 / 13}
.offer h3.sub{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.scope{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap)}
.scope li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line-sand)}
.scope li svg{margin-top:1px}
.scope strong{display:block;font-size:16px}
.scope span{display:block;font-size:15px;line-height:1.45;color:#3f3f3f;margin-top:2px}
.details div{display:grid;grid-template-columns:112px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line-sand);font-size:15px;line-height:1.45}
.details dt{font-weight:700}
.details dd{color:#3f3f3f}

/* Website examples */
.ex-head{align-items:end;margin-bottom:40px}
.ex-head .h-primary{grid-column:1 / 7}
.ex-head p{grid-column:8 / 13}
.tabs{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.tab{flex:none;min-height:48px;padding:0 20px;border:1px solid var(--line);background:var(--white);font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:10px}
.tab .no{font-size:11px;letter-spacing:.1em;color:var(--gray)}
.tab[aria-selected="true"]{background:var(--black);color:var(--white);border-color:var(--black)}
.tab[aria-selected="true"] .no{color:var(--on-dark)}
.frame{border:1px solid var(--line)}
.frame-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--gray)}
.frame-bar .label{color:var(--black);font-size:11px}
/* A full sample homepage, scrollable inside the browser frame */
.ex-scroll{height:min(680px,72vh);overflow-y:auto;overscroll-behavior:contain;background:#fff;scrollbar-width:thin}
.ex-scroll:focus-visible{outline-offset:-2px}
.ex-scroll img{display:block;width:100%;height:auto}
.ex-caption{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:20px}
.ex-caption strong{grid-column:1 / 5;font-size:17px}
.ex-caption span{grid-column:5 / 11;color:var(--gray);font-size:15px}


/* Process */
.process{margin-top:48px;align-items:start}
.steps{grid-column:1 / 7;display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.step{display:grid;grid-template-columns:96px 1fr;gap:var(--gap);width:100%;padding:26px 24px 28px;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;font:inherit;color:inherit;transition:background-color .18s ease,box-shadow .18s ease}
.step-no{font-size:48px;line-height:1;letter-spacing:-.03em;color:var(--warm);transition:color .18s ease}
.step-text{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.step-title{font-weight:700;font-size:17px;line-height:1.35;word-spacing:.12em}
.step-desc{color:var(--gray);max-width:30em;font-size:16px;line-height:1.55}
.step:hover,.step:focus-visible{background:var(--sand-soft)}
.step:focus-visible{outline-offset:-2px}
.step[aria-selected="true"]{background:var(--sand);box-shadow:inset 0 2px 0 var(--black)}
.step[aria-selected="true"] .step-no,.step:hover .step-no,.step:focus-visible .step-no{color:var(--black)}
.step[aria-selected="true"] .step-desc{color:#3f3f3f}

/* Process previews: small, illustrative mockups of each step */
.step-preview{grid-column:8 / 13;position:sticky;top:120px}
.pv{border:1px solid var(--line);background:var(--white);min-height:470px;display:flex;flex-direction:column;animation:pv-in .18s ease}
@keyframes pv-in{from{opacity:0}to{opacity:1}}
.pv-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:12px;color:var(--gray)}
.pv-bar .label{color:var(--black);font-size:11px}
.pv-body{padding:22px 22px 24px;font-size:14px;line-height:1.45;flex:1;display:flex;flex-direction:column}
.pv-title{font-size:24px;line-height:1.1;letter-spacing:-.02em;margin-bottom:6px}
.pv-field{margin-top:14px;font-size:13px;font-weight:700}
.pv-input{margin-top:6px;padding:11px 14px;border:1px solid var(--gray);font-weight:400;font-size:14px;position:relative}
.pv-select::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--black);border-bottom:1.5px solid var(--black);transform:translateY(-70%) rotate(45deg)}
.pv-area{min-height:64px}
.pv-caret{display:inline-block;width:1px;height:1.1em;margin-left:2px;vertical-align:-.2em;background:var(--black);animation:pv-blink 1.1s steps(1) infinite}
@keyframes pv-blink{50%{opacity:0}}
.pv-actions{margin-top:auto;padding-top:20px;display:flex;justify-content:flex-end}
.pv-btn{display:inline-flex;align-items:center;gap:18px;padding:11px 16px;background:var(--black);color:var(--white);font-weight:700;font-size:13px;word-spacing:.12em}
.pv-sub{color:var(--gray);font-size:13px;margin-bottom:6px}
.pv-order{margin-top:10px}
.pv-plan.pv-order div{grid-template-columns:1fr auto}
.pv-order dd{text-align:right}
.pv-plan.pv-order div:last-child{border-bottom:0}
.pv-card{display:flex;gap:10px;align-items:center;min-height:42px}
.pv-card i{width:34px;height:6px;background:rgba(17,17,17,.18)}
.pv-actions-split{justify-content:space-between;align-items:center}
.pv-saved{font-size:12px;color:var(--gray)}
.pv-saved::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;background:#1a7f37;border-radius:50%}
.pv-plan div{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.pv-plan dt{font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding-top:1px}
.pv-plan{border-bottom:1px solid var(--line)}
.pv-price dd{font-weight:700;font-size:22px;line-height:1;letter-spacing:-.02em}
.pv-review{gap:16px}
.pv-site{border:1px solid var(--line);font-size:11px}
.pv-site-nav{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line)}
.pv-site-nav b{font-stretch:75%;font-variation-settings:"wdth" 75;letter-spacing:.04em}
.pv-site-call{position:relative;background:#1d3b2a;color:#fff;font-weight:700;padding:5px 8px;box-shadow:0 0 0 2px var(--white),0 0 0 3px var(--black)}
.pv-site-hero{position:relative;padding:18px 12px 16px;background:#f3f1ec}
.pv-site-hero b{display:block;font-size:17px;line-height:1.1;letter-spacing:-.01em;max-width:12em;margin-bottom:10px}
.pv-site-hero i,.pv-site-cards i{display:block;height:6px;background:rgba(17,17,17,.12);margin-top:6px;width:80%}
.pv-site-hero i.short{width:55%}
.pv-site-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 12px 12px}
.pv-site-cards i{height:30px;width:auto;margin:0;background:rgba(17,17,17,.07)}
.pv-pin{display:inline-grid;place-items:center;width:20px;height:20px;background:var(--black);color:var(--white);font-size:11px;font-weight:700;flex:none}
.pv-site .pv-pin{position:absolute;top:-12px;right:-12px;box-shadow:0 0 0 2px var(--white)}
.pv-comments{display:flex;flex-direction:column;gap:8px}
.pv-comment{display:flex;gap:10px;padding:12px 14px;border:1px solid var(--line);background:var(--white)}
.pv-comment b{font-size:12px}
.pv-comment p{margin-top:2px;font-size:13px}
.pv-reply{background:var(--sand-soft);margin-left:30px;border-color:transparent}

/* Statement: a full-width interruption */
.statement{padding-top:120px;padding-bottom:120px}
.statement .display{font-size:clamp(38px,5.6vw,80px);max-width:13em}

/* Founder: white, tight, personal */
.founder{align-items:center}
.founder-photo{grid-column:1 / 5;aspect-ratio:4 / 5;--ph:#8A8780}
.founder-copy{grid-column:6 / 12}
.founder-copy .h-primary{margin-top:14px}
.founder-copy .bio{margin-top:22px;font-size:19px;line-height:1.55}
.founder-copy .bio p + p{margin-top:14px}
.contact-lines{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px 28px}

/* Secondary content: compact */
.compact-head{grid-column:1 / 5}
.compact-head p{margin-top:12px;font-size:15px;color:var(--gray);max-width:22em}
.compact-body{grid-column:5 / 13}

/* Who it's for: expandable industry rows */
.ind summary{display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:center;gap:0 24px;min-height:0;padding:22px 20px;font-weight:400;transition:background-color .18s ease}
.ind summary:hover,.ind summary:focus-visible,.ind[open] summary{background:var(--sand-soft)}
.ind summary:focus-visible{outline-offset:-2px}
.ind-name{grid-column:1;font-weight:700;font-size:19px;line-height:1.3}
.ind-benefit{grid-column:1;word-spacing:normal;margin-top:4px;font-size:15px;line-height:1.45;color:var(--gray)}
.pm{grid-column:2;grid-row:1 / span 2;position:relative;width:18px;height:18px}
.pm::before,.pm::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:var(--black);transition:transform .18s ease}
.pm::after{transform:rotate(90deg)}
.ind[open] .pm::after{transform:rotate(180deg)}
.ind-more{padding:2px 20px 26px;background:var(--sand-soft);animation:pv-in .18s ease}
.ind-more p{padding:0;font-size:16px;color:var(--black);max-width:34em}
.ind .ind-pages{margin-top:14px;font-size:14px;color:var(--gray)}
.ind-pages b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--black);margin-bottom:2px}
.ind-start{margin-top:18px}
button.textlink,a.textlink.icon{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;font-size:inherit;cursor:pointer}
.ind-start{font-size:15px}
.ind-other{margin-top:22px;font-size:15px;color:var(--gray)}
.ind-other .textlink{color:var(--black)}

/* After launch: monthly plans */
.plans-head p{margin-top:12px;max-width:46em;font-size:16px;color:var(--gray)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:40px}
.plan{display:flex;flex-direction:column;padding:28px 28px 30px;border:1px solid var(--line)}
.plan-featured{background:var(--sand);border-color:var(--sand)}
.plan-name{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:22px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.plan-flag{padding:4px 8px;background:var(--black);color:var(--white);font-size:10.5px}
.plan-flag-outline{padding:3px 7px;background:none;color:var(--black);border:1px solid var(--black)}
.plan-price{margin-top:18px;font-weight:700;font-size:56px;line-height:1;letter-spacing:-.04em}
.plan-price span{margin-left:4px;font-weight:400;font-size:16px;letter-spacing:0;color:var(--gray)}
.plan-featured .plan-price span{color:#3f3f3f}
.plan-lede{margin-top:14px;font-size:16px}
.plan-list{margin:20px 0 24px}
.plan-list li{display:grid;grid-template-columns:20px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.45}
.plan-featured .plan-list li{border-color:var(--line-sand)}
.plan-list svg{margin-top:1px}
.plan .textlink{margin-top:auto;align-self:flex-start;font-size:15px}
.plans-note{margin-top:24px;max-width:60em;font-size:14px;color:var(--gray)}

/* Add when you need it: typography-led service selector */
.xs{margin-top:40px;align-items:start}
.xs-names{grid-column:1 / 6;display:flex;flex-direction:column;align-items:flex-start}
.xs-name{padding:2px 0;border:0;background:none;font-family:var(--font);font-size:clamp(40px,4.6vw,68px);font-weight:400;line-height:1.1;letter-spacing:-.035em;color:var(--warm);text-align:left;cursor:pointer;transition:color .18s ease}
.xs-name:hover,.xs-name:focus-visible{color:var(--gray)}
.xs-name[aria-selected="true"]{color:var(--black)}
.xs-stage{grid-column:6 / 13;display:grid}
.xs-panel{grid-area:1 / 1;transition:opacity .2s ease,visibility .2s}
.xs-panel[hidden]{display:block;opacity:0;visibility:hidden}
.xs-copy{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 32px;margin-top:20px}
.xs-copy p{max-width:30em;font-size:16px}
.xs-copy .textlink{flex:none;font-size:15px}
.xs-note{margin-top:48px;font-size:15px;color:var(--gray)}

/* Add-on previews: illustrative mockups on a soft sand stage */
.xv{--shadow:0 20px 44px -24px rgba(17,17,17,.4);position:relative;overflow:hidden;aspect-ratio:16 / 10;min-height:340px;padding:32px;display:grid;place-items:center;align-content:center;gap:14px;background:var(--sand-soft);font-size:13px;line-height:1.4;color:var(--black)}
.xv mark{background:#EAD9A2;color:inherit;padding:0 2px}
.xb-card{position:absolute;width:44%;aspect-ratio:3.5 / 2;box-shadow:var(--shadow)}
.xb-back{left:10%;top:15%;transform:rotate(-6deg);background:#1d3b2a;color:#f3f1ec;display:grid;place-items:center;text-align:center}
.xb-mark b{display:block;font-size:clamp(22px,2.6vw,34px);line-height:1;letter-spacing:.06em;font-stretch:75%;font-variation-settings:"wdth" 75}
.xb-mark i{display:block;margin-top:6px;font-style:normal;font-size:10px;letter-spacing:.42em;color:#e8b64a}
.xb-front{right:10%;bottom:17%;transform:rotate(4deg);background:var(--white);padding:0 7%;display:flex;flex-direction:column;justify-content:center;font-size:12px;color:#3f3f3f}
.xb-front b{font-size:15px;color:var(--black)}
.xb-gap{margin-top:10px}
.xb-swatches{position:absolute;left:28px;bottom:22px;display:flex;align-items:center;gap:6px}
.xb-swatches i{width:22px;height:22px;border:1px solid rgba(17,17,17,.14)}
.xb-swatches span{margin-left:8px;font-size:20px;letter-spacing:-.02em}
.xg{width:min(360px,100%);background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}
.xg-photos{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3px;height:92px}
.xg-photos i{background:linear-gradient(135deg,#b9ae97,#8d8472)}
.xg-photos i:nth-child(2){background:linear-gradient(135deg,#1d3b2a,#46634f)}
.xg-photos i:nth-child(3){background:linear-gradient(135deg,#ddd6c7,#b5ab96)}
.xg-body{display:flex;flex-direction:column;gap:2px;padding:14px 16px 16px}
.xg-name{font-size:19px;letter-spacing:-.01em}
.xg-rating,.xg-meta{color:var(--gray)}
.xg-rating em{font-style:normal;color:#d99a1e;letter-spacing:.05em}
.xg-open b{color:#1a7f37}
.xg-actions{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;padding-top:12px;border-top:1px solid var(--line);text-align:center;font-size:11px;font-weight:600;color:#1d3b2a}
.xg-actions i{display:block;width:30px;height:30px;margin:0 auto 4px;border:1px solid var(--line);border-radius:50%}
.xa{width:100%;max-width:520px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}
.xa-bar{display:flex;align-items:center;gap:5px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:10.5px;color:var(--gray)}
.xa-bar i{flex:none;width:7px;height:7px;border-radius:50%;background:rgba(17,17,17,.15)}
.xa-bar span{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xa-body{padding:16px 18px 18px}
.xa-crumb{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.xa-title{display:block;margin:6px 0 8px;font-size:20px;line-height:1.1;letter-spacing:-.015em}
.xa-line{display:block;width:90%;height:6px;margin-top:6px;background:rgba(17,17,17,.1)}
.xa-line.short{width:60%}
.xa-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.xa-map{position:relative;min-height:92px;background:#ebe6da;background-image:linear-gradient(rgba(17,17,17,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,.06) 1px,transparent 1px);background-size:18px 18px}
.xa-map::before{content:"";position:absolute;inset:16% 18% 14% 14%;background:rgba(29,59,42,.2);clip-path:polygon(10% 20%,70% 0,100% 45%,80% 100%,20% 85%,0 50%)}
.xa-pin{position:absolute;left:46%;top:40%;width:13px;height:13px;background:#1d3b2a;border:2px solid var(--white);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.xa-list li{padding:4px 0;border-bottom:1px solid var(--line);font-size:12px}
.xa-btn,.xr-btn{display:inline-block;padding:8px 12px;background:#1d3b2a;color:var(--white);font-size:12px;font-weight:700}
.xr{width:min(420px,100%);padding:18px 20px 20px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}
.xr-head{display:flex;flex-direction:column;gap:2px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line);font-size:12px}
.xr-head b{display:inline-block;width:62px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.xr p{font-size:13.5px}
.xr-stars{display:flex;gap:6px;margin:14px 0 12px;font-size:26px;line-height:1;color:#d99a1e}
.xr-stars i{font-style:normal}
.xr-note{display:block;margin-top:8px;font-size:11.5px;color:var(--gray)}
.footnote{margin-top:16px;font-size:14px;color:var(--gray)}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:60px;padding:14px 0;font-size:17px;font-weight:700;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary svg{flex:none;transition:transform .2s}
details[open] summary svg{transform:rotate(45deg)}
details p{padding:0 48px 20px 0;color:var(--gray);max-width:42em;font-size:16px}

/* Closing */
.closing{padding-top:104px;padding-bottom:104px}
.closing .inner{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.closing .display{font-size:clamp(38px,5vw,72px);text-wrap:wrap}

/* Footer */
.footer{padding-top:56px;padding-bottom:28px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding-bottom:40px}
.footer .brand svg{width:240px}
.footer address{font-style:normal;text-align:right;font-size:15px;line-height:1.7}
.footer address a{text-decoration:none}
.footer address a:hover{text-decoration:underline}
.footer-mail{margin-left:14px}
.footer-login{margin-left:14px;color:var(--black);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--gray)}

/* Start your website: order summary dialog */
.co-price{margin:14px 0 10px;font-weight:700;font-size:48px;line-height:1;letter-spacing:-.04em}
.co-price span{margin-left:6px;font-weight:400;font-size:16px;letter-spacing:0;color:var(--gray)}
.co-go{width:100%}
.co-guarantee{margin-top:14px;font-size:14px;font-weight:700;text-align:center}
.co-fine{margin-top:10px;font-size:14px;color:var(--gray)}
.co-fine{text-align:center}
.co-fine .textlink{color:var(--black)}
dialog{border:1px solid var(--black);border-radius:0;padding:0;width:min(620px,calc(100% - 24px));max-height:92vh;color:var(--black)}
dialog::backdrop{background:rgba(17,17,17,.6)}
.dlg{padding:32px}
.dlg-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.close{border:0;background:none;width:48px;height:48px;display:grid;place-items:center;margin-right:-12px}
.dlg-title{font-weight:400;font-size:32px;line-height:1.1;letter-spacing:-.025em;margin:0 0 8px}
.field{display:block;margin:18px 0;font-size:15px;font-weight:700}
.field .opt{font-weight:400;color:var(--gray)}
.field input,.field select,.field textarea{display:block;width:100%;margin-top:8px;min-height:56px;padding:14px 16px;border:1px solid var(--gray);border-radius:0;background:var(--white);font-size:16px;font-weight:400}
.field textarea{min-height:108px;resize:vertical}
fieldset{border:0;padding:0;margin:0;min-width:0}
.dlg-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px}
.back{border:0;background:none;padding:12px 0;font-weight:700;text-decoration:underline;text-underline-offset:5px}
.error{font-size:14px;color:#A12622;min-height:0}
.error:not(:empty){margin-top:8px}
.next-steps{counter-reset:n;margin:22px 0 24px;border-top:1px solid var(--line)}
.next-steps li{counter-increment:n;display:grid;grid-template-columns:40px 1fr;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.next-steps li::before{content:"0" counter(n);font-weight:700}
.proto{margin-top:20px;padding:14px 16px;background:#F4F2EE;font-size:13px;color:var(--gray)}
.proto button{margin-top:10px;border:0;background:none;padding:0;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
[hidden]{display:none!important}

/* Tablet */
@media (max-width:1199px){
  .hero-title{grid-column:1 / 9}
  .hero-side{grid-column:9 / 13}
  .offer-price{grid-column:1 / 8}
  .offer-pitch{grid-column:8 / 13}
  .offer-scope{grid-column:1 / -1}
  .offer-details{grid-column:1 / -1;margin-top:32px}
  .details{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap)}
  .compact-head{grid-column:1 / -1;margin-bottom:24px}
  .compact-body{grid-column:1 / -1}
}
@media (max-width:959px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .nav-right{gap:10px}
  .menu-panel.open{display:block;border-bottom:1px solid var(--line);padding:4px 0 20px}
  .menu-panel a{display:flex;align-items:center;min-height:52px;font-size:19px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
  .hero-title,.hero-side,.offer-price,.offer-pitch,.ex-head .h-primary,.ex-head p,.founder-photo,.founder-copy{grid-column:1 / -1}
  .hero-side{margin-top:28px}
  .offer-pitch{margin-top:28px}
  .ex-head p{margin-top:14px}
  .ex-caption strong,.ex-caption span{grid-column:1 / -1}
  .ex-caption span{margin-top:4px}
  .steps,.step-preview{grid-column:1 / -1}
  .step{grid-template-columns:72px 1fr;padding:22px 18px 24px}
  .step-no{font-size:40px}
  .step-preview{position:static;margin-top:24px;max-width:560px}
  .founder-photo{max-width:340px;aspect-ratio:1 / 1}
  .founder-copy{margin-top:32px}
  .plans{grid-template-columns:1fr;max-width:560px;margin-top:28px}
  .xs{margin-top:24px}
  .xs-names{grid-column:1 / -1;flex-direction:row;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--m));padding:0 var(--m)}
  .xs-name{flex:none;min-height:44px;padding:0 16px;border:1px solid var(--line);font-size:15px;font-weight:600;letter-spacing:0;line-height:1;white-space:nowrap;color:var(--gray);transition:color .18s ease,background-color .18s ease}
  .xs-name:hover,.xs-name:focus-visible{background:var(--sand-soft)}
  .xs-name[aria-selected="true"]{background:var(--black);border-color:var(--black);color:var(--white)}
  .xs-stage{grid-column:1 / -1;margin-top:16px}
  .xs-note{margin-top:32px}
  .closing .inner{flex-direction:column;align-items:flex-start}
}
/* Mobile: its own composition, not a stacked desktop */
@media (max-width:767px){
  body{font-size:16px}
  html{scroll-padding-top:88px}
  .nav{height:72px}
  .brand svg{width:118px}
  .nav .btn.compact{min-height:44px;padding:0 14px;font-size:13px}
  .nav .btn.compact svg{display:none}
  .menu-btn{width:44px;height:44px}
  .hero{padding-top:28px}
  .hero-title .display{margin-top:14px}
  .hero-side{gap:22px}
  .lead{font-size:17px}
  .btn{width:100%}
  .nav .btn,.dlg-actions .btn{width:auto}
  .hero-photo{margin-top:36px;aspect-ratio:16 / 9;margin-left:calc(-1 * var(--m));margin-right:calc(-1 * var(--m))}
  .tagline{font-size:18px}
  .offer{padding-top:56px;padding-bottom:56px}
  .offer-rule{margin:28px 0 20px}
  .scope{grid-template-columns:1fr}
  .details{grid-template-columns:1fr}
  .details div{grid-template-columns:96px 1fr}
  .tabs{margin-left:calc(-1 * var(--m));margin-right:calc(-1 * var(--m));padding:0 var(--m)}
  .tab{min-height:44px;padding:0 16px;font-size:14px}
  .tab .no{display:none}
  .frame-bar span:first-child{display:none}
  .process{margin-top:28px}
  .steps,.step-preview{grid-column:1 / -1}
  .step{grid-template-columns:48px 1fr;gap:12px;padding:18px 14px 20px}
  .step-no{font-size:28px}
  .step-desc{font-size:15px}
  .step-preview{margin-top:20px;max-width:none}
  .pv{min-height:0}
  .ind summary{padding:18px 14px}
  .ind-more{padding:0 14px 22px}
  .ind-name{font-size:17px}
  .closing br{display:none}
  .closing .display{text-wrap:balance}
  .statement{padding-top:72px;padding-bottom:72px}
  .founder-photo{max-width:none;aspect-ratio:1 / 1}
  .xv{aspect-ratio:auto;min-height:320px;padding:20px}
  .xb-card{width:62%}
  .xb-back{left:4%;top:10%}
  .xb-front{right:4%;bottom:18%}
  .xb-swatches{left:16px;bottom:14px}
  .xa-row{grid-template-columns:1fr}
  .xa-map{min-height:70px}
  .xs-copy p{font-size:15px}
  summary{font-size:16px}
  details p{padding-right:0}
  .closing{padding-top:72px;padding-bottom:72px}
  .footer-top{flex-direction:column}
  .footer .brand svg{width:200px}
  .footer address{text-align:left}
  .footer-bottom{flex-direction:column;gap:6px}
  .dlg{padding:22px}
  .dlg-title{font-size:27px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}summary svg,.step,.step-no,.ind summary,.pm::before,.pm::after,.xs-name,.xs-panel{transition:none}.pv,.ind-more{animation:none}.pv-caret{animation:none}}

/* Hero photo: frame the street running toward the horizon */
.hero-photo img{object-position:50% 45%}

/* Founder photo: keep the face in frame when the slot goes square */
.founder-photo img{object-position:50% 8%}

/* Onboarding (post-purchase questionnaire) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.onb-help{font-size:15px}
.onb{padding-top:48px;padding-bottom:var(--band-end)}
.onb-msg{max-width:640px;padding:40px 0;font-size:17px;color:var(--gray)}
.onb-msg p{margin-top:14px}
.onb-app{display:grid;grid-template-columns:288px minmax(0,1fr);gap:0;align-items:start}
.onb-side{position:sticky;top:120px;padding-right:48px}
.onb-steps{margin-top:16px;counter-reset:s}
.onb-step button{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:6px 10px;margin-left:-10px;border:0;background:none;text-align:left;font-size:15px;color:var(--gray);transition:background-color .15s ease,color .15s ease}
.onb-step button:hover,.onb-step button:focus-visible{background:var(--sand-soft);color:var(--black)}
.onb-step.is-current button{color:var(--black);font-weight:700}
.onb-dot{flex:none;width:10px;height:10px;border:1.5px solid var(--warm);border-radius:50%}
.is-done .onb-dot{background:var(--black);border-color:var(--black)}
.is-missing .onb-dot{border-color:#B7791F;background:#F4D58D}
.is-current .onb-dot{box-shadow:0 0 0 3px var(--sand)}
.onb-step-review{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.onb-save{margin-top:20px;min-height:20px;font-size:13px;color:var(--gray)}
.onb-save.is-error{color:#A12622}
.onb-main{align-self:stretch;max-width:calc(680px + 64px);min-width:0;min-height:100%;padding-left:64px;border-left:1px solid var(--line)}
/* Headings get focus when a section opens (for screen readers); no box needed around them. */
.onb-section [tabindex="-1"]:focus{outline:none}
.onb-mprog{display:none}
.onb-save-m{font-size:12px;color:var(--gray);white-space:nowrap}
.onb-save-m.is-error{color:#A12622}
.onb-bar{flex:1;height:2px;background:var(--line)}
.onb-bar i{display:block;height:100%;width:0;background:var(--black);transition:width .2s ease}
.onb-section .h-primary{margin-top:10px}
.onb-lede{margin-top:12px;font-size:17px;color:var(--gray)}
.onb-intro p:not(.onb-paid){margin-top:16px;font-size:17px;color:#3f3f3f;max-width:36em}
.onb-paid{display:inline-block;margin-bottom:18px;padding:6px 10px;background:var(--sand);font-size:13px;font-weight:700}
.onb-fields{display:flex;flex-wrap:wrap;column-gap:16px;margin-top:28px}
.onb-fields>*{flex:1 1 100%;min-width:0}
.onb-field{margin:0 0 26px}
.onb-field.is-half{flex:1 1 calc(50% - 8px)}
.onb-field.is-quarter{flex:1 1 calc(25% - 12px)}
.onb-label-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0;padding:0;font-size:15px;font-weight:700;line-height:1.4}
.onb-req{padding:1px 6px;background:var(--sand);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.onb-help-text{display:block;margin-top:4px;font-size:14px;font-weight:400;line-height:1.5;color:var(--gray)}
.onb-field input[type=text],.onb-field input[type=email],.onb-field input[type=tel],.onb-field input[type=date],.onb-field select,.onb-field textarea{display:block;width:100%;margin-top:10px;min-height:52px;padding:13px 15px;border:1px solid var(--gray);border-radius:0;background:var(--white);font-size:16px;font-weight:400}
.onb-field textarea{min-height:0;resize:vertical;line-height:1.5}
.onb-field select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111111' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
.onb-field [aria-invalid=true]{border-color:#A12622;box-shadow:inset 0 0 0 1px #A12622}
.onb-voice{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.onb-mic{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--line);background:var(--white);font-size:13px;font-weight:700;color:var(--black);transition:background-color .15s ease,border-color .15s ease}
.onb-mic:hover{background:var(--sand-soft)}
.onb-mic.is-on{background:#FBEDEC;border-color:#A12622;color:#A12622}
.onb-mic.is-on svg{animation:onb-pulse 1.2s ease-in-out infinite}
@keyframes onb-pulse{50%{opacity:.35}}
.onb-voice-status{font-size:13px;color:#A12622}
.onb-color{display:flex;gap:8px;margin-top:10px}
.onb-color input[type=text]{margin-top:0!important;flex:1}
.onb-swatch{position:relative;flex:none;width:52px;height:52px;border:1px solid var(--gray);overflow:hidden}
.onb-swatch input{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);border:0;padding:0;cursor:pointer}
.onb-swatch.is-empty::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top right,transparent calc(50% - 1px),var(--gray) 50%,transparent calc(50% + 1px)),var(--white)}
.onb-swatch:focus-within{outline:2px solid var(--black);outline-offset:2px}
.onb-field-error{display:block;font-size:14px;font-weight:400;color:#A12622}
.onb-field-error:not(:empty){margin-top:8px}
.onb-field input:disabled,.onb-field textarea:disabled{background:#F4F2EE;border-color:var(--line)}
.onb-idk{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;font-weight:400;color:var(--gray);cursor:pointer}
.onb-none{display:flex;margin-top:14px}
.onb-idk input,.onb-opt input{display:inline-block;flex:none;width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--black)}
.onb-choice{border:0;padding:0;min-width:0}
.onb-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.onb-choice.is-grid .onb-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.onb-opt{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border:1px solid var(--line);font-size:15px;font-weight:400;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.onb-opt:hover{background:var(--sand-soft)}
.onb-opt:focus-within{outline:2px solid var(--black);outline-offset:2px}
.onb-opt.is-on{background:var(--sand);border-color:var(--sand)}
.onb-opt:has(input:disabled){opacity:.5;cursor:not-allowed}
.onb-per .onb-field{padding-left:18px;border-left:2px solid var(--sand)}
.onb-note{margin:0 0 26px;padding:14px 16px;background:var(--sand-soft);font-size:14px;color:#3f3f3f}
.onb-rep-list{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.onb-rep{padding:18px 20px 0;border:1px solid var(--line)}
.onb-rep-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.onb-rep-fields{display:flex;flex-wrap:wrap;column-gap:16px}
.onb-rep-fields>*{flex:1 1 100%;min-width:0}
.onb-remove{border:0;background:none;padding:6px 0;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:4px;color:var(--gray)}
.onb-remove:hover{color:var(--black)}
.onb-add{display:inline-flex;align-items:center;gap:8px;margin-top:14px;min-height:44px;padding:0 16px;border:1px dashed var(--gray);background:none;font-size:15px;font-weight:700}
.onb-add:hover{background:var(--sand-soft)}
.onb-hours{display:grid;gap:8px;margin:-12px 0 26px}
.onb-hours-row{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:12px;font-size:15px}
.onb-hours-row input{min-height:46px;padding:10px 14px;border:1px solid var(--gray);border-radius:0;font-size:16px}
.onb-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:130px;margin-top:12px;padding:20px;border:1.5px dashed var(--gray);background:var(--white);text-align:center;cursor:pointer;transition:background-color .15s ease}
.onb-drop:hover,.onb-drop.is-over{background:var(--sand-soft)}
.onb-drop:focus-within{outline:2px solid var(--black);outline-offset:2px}
.onb-drop-main{font-weight:700;font-size:15px}
.onb-drop-sub{font-size:13px;color:var(--gray)}
.onb-files{margin-top:10px;border-top:1px solid var(--line)}
.onb-files li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.onb-file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onb-file-size{color:var(--gray);font-size:13px}
.onb-files .is-busy .onb-file-size{color:var(--black)}
.onb-files .is-error .onb-file-size{color:#A12622}
.onb-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;padding-top:24px;border-top:1px solid var(--line)}
.onb-review{margin-top:28px;border-top:1px solid var(--line)}
.onb-rev{display:grid;grid-template-columns:18px 1fr auto;align-items:start;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.onb-rev .onb-dot{margin-top:6px}
.onb-rev strong{display:block;font-size:16px}
.onb-rev span:not(.onb-dot){display:block;margin-top:2px;font-size:14px;color:var(--gray)}
.onb-rev.is-missing span:not(.onb-dot),.onb-rev.is-todo span:not(.onb-dot){color:#8A5A12}
.onb-rev.is-later .onb-dot{background:#F4D58D;border-color:#B7791F}
.onb-rev-go{font-size:14px;white-space:nowrap}
#submit-error:not(:empty){margin-top:20px;padding:14px 16px;background:#FBEDEC;font-size:15px;line-height:1.5}
.onb-error-go{color:var(--black);font-size:15px}
.onb-done p:not(.onb-status):not(.onb-note){margin-top:16px;font-size:17px;color:#3f3f3f;max-width:36em}
.onb-done .onb-note{margin-top:24px}
.onb-status{display:inline-block;padding:6px 10px;background:var(--sand);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.onb-footer{padding-top:0}
.onb-find{max-width:560px;padding:8px 0 24px}
.onb-find .h-primary{margin-top:10px}
.onb-find form{margin-top:28px}
.onb-find .btn{margin-top:8px}
.onb-find-note{margin-top:16px;padding:12px 14px;background:var(--sand-soft);font-size:15px}
.onb-find-help{margin-top:14px;font-size:15px;color:var(--gray)}
@media (max-width:959px){
  .onb-app{grid-template-columns:1fr;gap:0}
  .onb-main{padding-left:0;border-left:0;max-width:none}
  .onb-side{display:none}
  .onb-mprog{display:flex;align-items:center;gap:16px;margin-bottom:28px}
  .onb-section>.label:first-child{display:none}
  .onb-section>.label:first-child+.h-primary{margin-top:0}
}
@media (max-width:767px){
  .onb{padding-top:28px}
  .onb-field.is-half,.onb-field.is-quarter{flex-basis:100%}
  .onb-hours-row{grid-template-columns:1fr;gap:6px}
  .onb-rep{padding:16px 14px 0}
}
@media (prefers-reduced-motion:reduce){.onb-bar i,.onb-step button,.onb-opt,.onb-drop,.onb-mic{transition:none}.onb-mic.is-on svg{animation:none}}

/* Sign-up form (Start your website dialog) */
.field-note{display:block;margin-top:8px;font-size:13px;font-weight:400;color:var(--gray)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#lead-form .field{margin:14px 0}
#lead-form .co-go{margin-top:10px}

/* Checkout page */
.cko{padding-top:56px;padding-bottom:var(--band-end)}
.cko-grid{align-items:start}
.cko-summary{grid-column:1 / 6}
.cko-summary .h-primary{margin-top:14px}
.cko-list{margin:24px 0 20px}
.cko-guarantee{padding:14px 16px;background:var(--sand);font-weight:700;font-size:15px}
.cko-next{margin-top:16px;font-size:15px;color:var(--gray)}
.cko-then{margin:-2px 0 20px;font-size:16px;line-height:1.45;color:var(--gray)}
.cko-terms{margin-top:14px;font-size:14px;color:var(--gray);text-align:center}
.cko-who{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--gray)}
.cko-who .textlink{color:var(--black)}
.cko-pay{grid-column:7 / 13}
.cko-embed{min-height:560px;padding:32px 24px;background:var(--sand-soft)} /* same color (#F1ECE1) as branding_settings in api/checkout.js */
.cko-status{padding:24px;border:1px solid var(--line);font-size:15px;color:var(--gray)}
.cko-status.is-error{color:#A12622}
.cko-status .textlink{color:var(--black)}
.cko-mock{padding:28px;border:1px solid var(--line);background:var(--sand-soft)}
.cko-mock p:not(.label){margin:10px 0 22px;font-size:15px;color:#3f3f3f}
@media (max-width:959px){.cko-summary,.cko-pay{grid-column:1 / -1}.cko-pay{margin-top:32px}.cko-embed{min-height:0;padding:24px 12px}}
@media (max-width:767px){.cko{padding-top:32px}}

/* Checkout and onboarding: keep the footer at the bottom of the screen when the page is short */
.app-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.app-page>.container{width:100%}
.app-page>main{flex:1 0 auto}

/* Legal pages (privacy, terms) */
.legal{padding-top:56px;padding-bottom:var(--band-end)}
.legal>*{max-width:760px}
.legal .h-primary{margin-top:12px}
.legal-meta{margin-top:10px;font-size:14px;color:var(--gray)}
.legal-lede{margin-top:28px;font-size:19px;line-height:1.55}
.legal p,.legal ul,.legal address{margin-top:16px;font-size:16px;line-height:1.65;color:#2b2b2b}
.legal h2{margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line);font-size:24px;font-weight:400;letter-spacing:-.015em;line-height:1.2}
.legal h3{margin-top:28px;font-size:16px}
.legal ul{padding-left:20px;list-style:disc}
.legal li+li{margin-top:8px}
.legal-toc{margin-top:32px;padding:20px 24px;background:var(--sand-soft)}
.legal-toc ol{margin:0;padding-left:20px;list-style:decimal;columns:2;column-gap:32px;font-size:15px}
.legal-toc li{margin:0 0 6px;break-inside:avoid}
.legal-toc a{text-decoration:none}
.legal-toc a:hover{text-decoration:underline}
.legal-table{margin-top:16px;overflow-x:auto}
.legal table{width:100%;border-collapse:collapse;font-size:15px}
.legal th,.legal td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.legal th{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.legal-contact{font-style:normal}
@media (max-width:767px){.legal{padding-top:32px}.legal-toc ol{columns:1}.legal-lede{font-size:17px}}

/* 404 page */
.nf{padding-top:48px;padding-bottom:var(--band-end)}
.nf-grid{align-items:center;row-gap:40px}
.nf-copy{grid-column:1 / 7}
.nf-code{font-weight:700;font-size:clamp(120px,18vw,260px);line-height:.8;letter-spacing:-.05em;font-feature-settings:"lnum" 1}
.nf-copy .h-primary{margin-top:28px;font-size:clamp(32px,3.6vw,48px)}
.nf-lede{margin-top:16px;max-width:30em;font-size:18px;color:#3f3f3f}
.nf-actions{margin-top:32px}
.nf-gif{grid-column:7 / 13}
.nf-gif img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;background:#111}
.nf-links{margin-top:72px;padding-top:28px;border-top:1px solid var(--line)}
.nf-links ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);margin-top:18px}
.nf-links a{display:flex;flex-direction:column;gap:4px;height:100%;padding:18px 18px 20px;border:1px solid var(--line);font-weight:700;font-size:16px;text-decoration:none;transition:background-color .15s ease}
.nf-links a:hover,.nf-links a:focus-visible{background:var(--sand-soft)}
.nf-links span{font-weight:400;font-size:14px;color:var(--gray)}
@media (max-width:959px){.nf-copy,.nf-gif{grid-column:1 / -1}.nf-gif{max-width:620px}.nf-links ul{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.nf{padding-top:28px}.nf-links{margin-top:48px}.nf-links ul{grid-template-columns:1fr}.nf .nav .btn.compact{display:none}}
@media (prefers-reduced-motion:reduce){.nf-links a{transition:none}}

/* Very small phones (older and compact models): keep the header on one line */
@media (max-width:374px){
  .brand svg{width:100px}
  .nav-right{gap:6px}
  .nav .btn.compact{min-height:40px;padding:0 10px;font-size:12px}
  .menu-btn{width:40px;height:40px}
  .price{font-size:92px}
}