/* ==========================================================================
   Noventa Studio · homepage (the simple version)
   Big type, plain words, no motion. Geist for everything, Instrument Serif italic for one accent per heading.
   Dark, with a soft plum-and-ember gradient behind the page and thin champagne edges on cards.
   Each sample's own fonts load from that sample's folder, only when the hero shows that sample.
   ========================================================================== */
@font-face{font-family:"Geist";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/geist.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-italic.woff2) format("woff2")}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("Helvetica");size-adjust:104%;ascent-override:93%;descent-override:23%;line-gap-override:0%}
@font-face{font-family:"Bricolage Grotesque";font-weight:600 800;font-display:swap;src:url(/pool/assets/fonts/bricolage.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:400 600;font-display:swap;src:url(/pool/assets/fonts/figtree.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-weight:400;font-display:swap;src:url(/pool/assets/fonts/dmmono-400.woff2) format("woff2")}
@font-face{font-family:"Archivo Expanded";font-weight:800;font-display:swap;src:url(/turf/assets/fonts/archivo-x800.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400 600;font-display:swap;src:url(/turf/assets/fonts/instrument.woff2) format("woff2")}
@font-face{font-family:"Martian Mono";font-weight:400 500;font-display:swap;src:url(/turf/assets/fonts/martian.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 400;font-display:swap;src:url(/medspa/assets/fonts/newsreader.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 400;font-display:swap;src:url(/medspa/assets/fonts/newsreader-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:400 500;font-display:swap;src:url(/medspa/assets/fonts/jost.woff2) format("woff2")}
@font-face{font-family:"Azeret Mono";font-weight:400 500;font-display:swap;src:url(/medspa/assets/fonts/azeret.woff2) format("woff2")}
@font-face{font-family:"Anybody";font-weight:800;font-stretch:112%;font-display:swap;src:url(/epoxy/assets/fonts/anybody.woff2) format("woff2")}
@font-face{font-family:"Albert Sans";font-weight:400 600;font-display:swap;src:url(/epoxy/assets/fonts/albert.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(/epoxy/assets/fonts/jbmono.woff2) format("woff2")}

:root{
  --bg:#0A090B; --ink:#F6F3EE; --muted:#CBC6BE; --line:rgba(255,255,255,.12);
  --gold:#E8C9A0; --hair:linear-gradient(90deg,transparent,rgba(232,201,160,.32),transparent);
  --hot:#FF5A36; --hot-ink:#141414; --hot-grad:linear-gradient(180deg,#FF7A52 0%,#FF5A36 55%,#EE4A27 100%);
  /* cards: an opaque fill (padding-box) over a champagne-to-dark edge (border-box) */
  --card:linear-gradient(180deg,#1A171C 0%,#121014 100%);
  --edge:linear-gradient(155deg,rgba(232,201,160,.45),rgba(255,255,255,.07) 38%,rgba(255,255,255,.05) 70%,rgba(232,201,160,.18));
  --font:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --gutter:clamp(18px,4vw,48px); --max:1200px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;color:var(--ink);font:400 19px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
/* the page background: fixed behind everything, with a little grain so the gradient doesn't band */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(70% 55% at 88% -8%,rgba(255,90,54,.17),transparent 70%),
  radial-gradient(60% 55% at -8% 8%,rgba(139,92,160,.16),transparent 70%),
  radial-gradient(80% 50% at 50% 112%,rgba(232,201,160,.08),transparent 70%),
  linear-gradient(180deg,#151017 0%,#0A090B 55%,#0D0A0F 100%)}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px;border-radius:6px}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.1;font-weight:650;text-wrap:balance}
/* one serif accent per heading, in champagne fading to orange */
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:-.01em;padding-right:.06em;white-space:nowrap;background:linear-gradient(100deg,#F7E6CC 0%,#F0B88F 50%,#FF6E48 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
p{margin:0}
.small{font-size:16px;color:var(--muted)}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 30px;border-radius:999px;border:0;background:var(--hot-grad);color:var(--hot-ink);font-size:19px;font-weight:650;text-decoration:none;cursor:pointer;box-shadow:0 12px 32px -12px rgba(255,90,54,.65),inset 0 1px 0 rgba(255,255,255,.35);transition:filter .15s,box-shadow .15s}
.btn:hover{filter:brightness(1.05);box-shadow:0 16px 40px -12px rgba(255,90,54,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-line{background:rgba(255,255,255,.03);border:1.5px solid rgba(246,243,238,.4);color:var(--ink);box-shadow:none}
.btn-line:hover{background:rgba(255,255,255,.08);border-color:var(--ink);box-shadow:none}
.btn-sm{min-height:46px;padding:0 20px;font-size:17px}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:12px var(--gutter);background:rgba(12,10,13,.74);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid rgba(232,201,160,.12)}
.brand{display:block;color:var(--ink);padding:8px 0}
.brand .wordmark{height:20px;width:auto}
.top-tel{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:600;text-decoration:none}
.top-tel svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.top-tel:hover .top-num{text-decoration:underline}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,80px) var(--gutter) clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:center}
.made[hidden]{display:none}
.made{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;padding:7px 16px 7px 14px;border-radius:999px;border:1px solid transparent;background:var(--card) padding-box,linear-gradient(120deg,rgba(232,201,160,.6),rgba(255,90,54,.5)) border-box;font-size:16px;font-weight:600}
.made::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 4px rgba(255,90,54,.2)}
.hero h1{font-size:clamp(42px,5.2vw,66px);letter-spacing:-.03em;line-height:1.04}
.lead{margin-top:22px;font-size:clamp(20px,1.7vw,22px);color:var(--muted);max-width:32ch}
.ticks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:19.5px;font-weight:600}
.ticks li{display:flex;align-items:center;gap:10px}
.ticks li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23141414' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat,var(--hot-grad);box-shadow:0 4px 12px -4px rgba(255,90,54,.7)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{margin-top:16px;max-width:42ch}

/* ---------- The devices (a sample site, not moving) ---------- */
.hero-pic{position:relative;margin:0}
/* the ember glow behind the laptop and phone */
.hero-pic::before{content:"";position:absolute;z-index:-1;inset:-18% -14% -10%;background:radial-gradient(closest-side,rgba(255,90,54,.3),rgba(255,110,72,.1) 55%,transparent);pointer-events:none}
.hero-pic figcaption{margin-top:34px;text-align:center}
.devices{position:relative;padding-right:7%}
.browser{border-radius:14px;overflow:hidden;background:#141215;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(232,201,160,.18)}
.bar{display:flex;align-items:center;gap:12px;height:36px;padding:0 14px;background:#1E1B20;border-bottom:1px solid rgba(255,255,255,.06)}
.lights{display:flex;gap:7px}
.lights i{width:11px;height:11px;border-radius:50%}
.lights i:nth-child(1){background:#FF5F57}.lights i:nth-child(2){background:#FEBC2E}.lights i:nth-child(3){background:#28C840}
.url{flex:1;max-width:380px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:7px;height:24px;border-radius:7px;background:rgba(255,255,255,.07);color:#D9D4CC;font:500 13px/1 var(--font);overflow:hidden;white-space:nowrap}
.url svg{width:11px;height:11px;flex:none;color:#9A958E}
.url .dom{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.spacer{width:47px}
.screen,.pscreen{position:relative;overflow:hidden;background:#1a1a1d}
.screen{aspect-ratio:16/10}
.phone{position:absolute;right:0;bottom:-8%;width:27%;aspect-ratio:9/19;border-radius:30px;padding:7px;background:linear-gradient(160deg,#2E2A2E,#0E0D0F);box-shadow:0 30px 60px -20px rgba(0,0,0,.85),0 0 0 1px rgba(232,201,160,.24);z-index:2}
.phone .notch{position:absolute;top:12px;left:50%;width:30%;height:14px;transform:translateX(-50%);border-radius:10px;background:#000;z-index:4}
.pscreen{width:100%;height:100%;border-radius:24px}

/* the sample site inside each device: drawn at 1280px / 390px and scaled to fit */
.mk{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--s,1));color:var(--mink);overflow:hidden;font-family:var(--mbody);isolation:isolate}
.mk-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.mk-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(var(--msc),.82) 0%,rgba(var(--msc),.45) 40%,rgba(var(--msc),0) 70%),linear-gradient(0deg,rgba(var(--msc),.5),rgba(var(--msc),0) 40%)}
.mk-nav,.mk-copy,.mk-bar{z-index:3}
.mk-nav{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:40px;padding:28px 56px}
.mk-logo{display:flex;align-items:center;gap:14px}
.mk-logo img{width:52px;height:52px;border-radius:13px}
.mk-logo span{display:grid;line-height:1.05}
.mk-name{font-size:26px;white-space:nowrap}
.mk-logo small{font:500 12px/1.4 var(--mmono);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.mk-links{display:flex;gap:30px;margin-left:auto;font-size:17px;opacity:.9}
.mk-call{padding:14px 22px;border-radius:999px;background:var(--mbtn);color:var(--mbtnink);font-weight:600;font-size:16px}
.mk-copy{position:absolute;left:56px;bottom:70px;max-width:760px}
.mk-kick{display:block;font:500 14px/1 var(--mmono);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.mk-hl{margin:20px 0 0;font-size:calc(var(--fs,1) * 104px);line-height:.95}
.mk-hl span{display:block}
.mk-hl em{font-style:italic}
.mk-sub{margin:22px 0 0;font-size:22px;line-height:1.4;max-width:30ch;opacity:.92}
.mk-btns{display:flex;gap:12px;margin-top:30px}
.mk-btns span{padding:18px 28px;border-radius:999px;font-weight:600;font-size:18px}
.mk-b1{background:var(--mbtn);color:var(--mbtnink)}
.mk-b2{border:1.5px solid currentColor;opacity:.9}
.mk.ph .mk-scrim{background:linear-gradient(0deg,rgba(var(--msc),.95) 0%,rgba(var(--msc),.8) 38%,rgba(var(--msc),0) 70%)}
.mk.ph .mk-nav{padding:56px 22px 0;gap:10px}
.mk.ph .mk-logo img{width:38px;height:38px;border-radius:10px}
.mk.ph .mk-name{font-size:19px}
.mk.ph .mk-logo small{font-size:10px}
.mk.ph .mk-links,.mk.ph .mk-call,.mk.ph .mk-btns{display:none}
.mk.ph .burger{margin-left:auto;width:38px;height:38px;border-radius:50%;display:grid;place-content:center;gap:5px;background:rgba(255,255,255,.18)}
.mk.ph .burger i{display:block;width:16px;height:2px;background:currentColor;border-radius:2px}
.mk.ph .mk-copy{left:22px;right:22px;bottom:118px}
.mk.ph .mk-kick{font-size:11px}
.mk.ph .mk-hl{font-size:calc(var(--fs,1) * 52px);margin-top:12px}
.mk.ph .mk-sub{font-size:16px;margin-top:14px}
.mk.ph .mk-bar{position:absolute;left:14px;right:14px;bottom:26px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mk.ph .mk-bar span{display:grid;place-items:center;height:54px;border-radius:16px;font-weight:600;font-size:16px}
.mk.ph .mk-bar span:first-child{background:var(--mbtn);color:var(--mbtnink)}
.mk.ph .mk-bar span:last-child{background:rgba(255,255,255,.16)}
.mk.light.ph .mk-bar span:last-child{background:rgba(30,36,40,.08)}
.mk:not(.ph) .burger,.mk:not(.ph) .mk-bar{display:none}

/* ---------- Sections ---------- */
.sec{position:relative;max-width:var(--max);margin:0 auto;padding:clamp(72px,9vw,120px) var(--gutter)}
/* a hairline that fades out at both ends, between sections */
.sec::before,.foot::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--hair)}
.sec h2{font-size:clamp(32px,3.6vw,46px);letter-spacing:-.025em}
.sec-sub{margin-top:14px;font-size:20px;color:var(--muted);max-width:52ch}
.sec h3{font-size:22px;letter-spacing:-.01em}

.gets{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gets li{padding:30px;border-radius:20px;border:1px solid transparent;background:var(--card) padding-box,var(--edge) border-box;box-shadow:0 24px 48px -32px rgba(0,0,0,.85)}
.gets svg{width:58px;height:58px;padding:13px;margin-bottom:22px;border-radius:16px;background:linear-gradient(160deg,rgba(255,90,54,.2),rgba(255,90,54,.04));box-shadow:inset 0 0 0 1px rgba(255,140,100,.3);fill:none;stroke:#FF7A52;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gets p{margin-top:10px;color:var(--muted)}

.price{max-width:none;background:radial-gradient(60% 90% at 50% 0%,rgba(255,90,54,.2),transparent 70%),linear-gradient(180deg,#18121A,#0E0B10);box-shadow:inset 0 1px 0 rgba(232,201,160,.24),inset 0 -1px 0 rgba(232,201,160,.24)}
.price::before,.price+.sec::before{display:none}
.price-box{max-width:680px;margin:0 auto;text-align:center;display:grid;justify-items:center}
.price h2{font-size:clamp(34px,3.8vw,48px);font-weight:600}
.price h2 span{display:block;padding-bottom:.04em;font-size:clamp(76px,10vw,124px);font-weight:700;letter-spacing:-.045em;line-height:1;background:linear-gradient(180deg,#FFFFFF 25%,#E8C9A0 115%);-webkit-background-clip:text;background-clip:text;color:transparent}
.price-sub{margin-top:12px;font-size:22px;font-weight:600;color:var(--hot)}
.ticks-col{flex-direction:column;align-items:flex-start;gap:14px;margin:30px 0 34px;font-weight:500;text-align:left}
.price .small{margin-top:18px}

.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.steps b{display:grid;place-items:center;width:60px;height:60px;margin-bottom:20px;border-radius:50%;border:1px solid transparent;background:var(--card) padding-box,linear-gradient(150deg,var(--gold),rgba(255,90,54,.75)) border-box;color:var(--gold);font:italic 400 32px/1 var(--serif)}
.steps p{margin-top:10px;color:var(--muted)}

.samples{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,32px)}
.samples a{display:grid;gap:6px;text-decoration:none}
.samples picture{display:block;margin-bottom:12px;border-radius:26px;padding:6px;background:linear-gradient(160deg,#2E2A2E,#0F0E10);box-shadow:0 0 0 1px rgba(232,201,160,.2),0 30px 50px -28px rgba(0,0,0,.9)}
@media (prefers-reduced-motion: no-preference){
  .samples picture{transition:transform .25s ease}
  .samples a:hover picture{transform:translateY(-4px)}
}
.samples img{width:100%;height:auto;aspect-ratio:390/700;object-fit:cover;object-position:top;border-radius:20px}
.samples b{font-size:21px}
.samples span{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.samples a:hover span{color:var(--ink)}
.for{margin-top:44px;font-size:19px;color:var(--muted);max-width:60ch}
.for a{color:var(--ink);font-weight:600;text-underline-offset:3px}

.faq{margin-top:32px;max-width:860px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:21px;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(232,201,160,.45);color:var(--gold);font-size:24px;font-weight:400;line-height:1}
.faq details[open] summary::after{background:rgba(232,201,160,.1)}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 0 26px;color:var(--muted);max-width:64ch}

/* ---------- Booking ---------- */
/* a softer ember glow behind the form */
.book-sec{isolation:isolate}
.book-sec::after{content:"";position:absolute;z-index:-1;right:0;top:8%;width:62%;height:84%;background:radial-gradient(closest-side,rgba(255,90,54,.14),transparent);pointer-events:none}
.book-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.book-p{margin-top:16px;font-size:20px;color:var(--muted);max-width:34ch}
.talk{position:relative;margin-top:36px;padding-top:28px}
.talk::before{content:"";position:absolute;top:0;left:0;width:min(100%,360px);height:1px;background:linear-gradient(90deg,rgba(232,201,160,.4),transparent)}
.talk p:first-child{font-size:20px;font-weight:600}
.talk-tel{display:inline-block;margin:6px 0 8px;font-size:clamp(32px,3.4vw,42px);font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.talk-tel:hover{text-decoration:underline}
.book{position:relative;display:grid;gap:18px;padding:clamp(22px,3vw,36px);border-radius:22px;border:1px solid transparent;background:var(--card) padding-box,var(--edge) border-box;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.book label>span,.book legend{display:block;margin-bottom:8px;font-size:18px;font-weight:600}
.book em{font-style:normal;font-weight:400;color:var(--muted)}
.book input:not([type=radio]),.book select,.book textarea{width:100%;min-height:58px;padding:12px 16px;border-radius:12px;border:1.5px solid rgba(255,255,255,.16);background:rgba(0,0,0,.35);font-size:19px;transition:border-color .15s,box-shadow .15s}
.book textarea{min-height:110px;resize:vertical}
.book input:focus,.book select:focus,.book textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(232,201,160,.14)}
.book label.bad input{border-color:#FF6B4F}
.when{margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.when legend{grid-column:1/-1;float:left;width:100%}
.when label{position:relative}
.when input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.when label span{display:grid;place-items:center;min-height:54px;border-radius:12px;border:1.5px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);font-size:18px;font-weight:600}
.when input:checked+span{border-color:var(--gold);background:linear-gradient(180deg,#F8EBD8,#E8C9A0);color:#141414}
.when input:focus-visible+span{outline:3px solid var(--hot);outline-offset:3px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{color:#FF8A70;font-weight:600;font-size:17px}
.err:empty{display:none}
.send{width:100%;min-height:62px;font-size:20px}
.send:disabled{opacity:.6;cursor:wait}
.done{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;padding:30px;border-radius:22px;background:var(--card);text-align:center}
.done[hidden]{display:none}
.done svg{width:64px;height:64px;fill:none;stroke:var(--hot);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.done-h{font-size:30px}
.done-p{font-size:20px;color:var(--muted)}
.done-link{font-weight:600}

/* ---------- Phone bar ---------- */
.pbar{display:none}

/* ---------- Footer ---------- */
.foot{position:relative;max-width:var(--max);margin:0 auto;padding:44px var(--gutter) 56px;display:grid;gap:22px}
.foot-brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.foot-brand svg{width:40px;height:auto}
.foot-brand div{display:grid}
.foot-brand b{font-size:19px}
.foot-brand span{font-size:16px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:17px}
.foot nav a{text-underline-offset:3px}
.foot small{font-size:15px;color:var(--muted)}

/* ---------- Smaller screens ---------- */
@media (max-width:1000px){
  .gets{grid-template-columns:repeat(2,1fr)}
  .samples{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:32px}
  .hero-pic{max-width:520px;width:100%;margin:0 auto}
  .hero-pic::before{inset:-14% -6% -8%}
  /* a preview link: their site comes right after "Here's your new website." */
  .hero.is-preview{row-gap:0}
  .hero.is-preview .hero-copy{display:contents}
  .hero.is-preview .made{justify-self:start}
  .hero.is-preview .hero-pic{order:1;margin-top:26px}
  .hero.is-preview .lead,.hero.is-preview .ticks,.hero.is-preview .ctas{order:2}
  .steps{grid-template-columns:1fr;max-width:560px}
  .book-wrap{grid-template-columns:1fr}
  .top-go,.top-tel,.ctas .btn-line{display:none}
  .pbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(12,10,13,.84);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border-top:1px solid rgba(232,201,160,.14);transition:transform .25s}
  .pbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:14px;border:1.5px solid rgba(246,243,238,.4);font-size:18px;font-weight:650;text-decoration:none}
  .pbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
  .pbar .pbar-go{border:0;background:var(--hot-grad);color:var(--hot-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
  .pbar.away{transform:translateY(110%)}
  body{padding-bottom:84px}
}
@media (max-width:640px){
  body{font-size:18px}
  .top{gap:12px}
  .brand .wordmark{height:17px}
  .ctas .btn{width:100%}
  .ticks{gap:10px 20px;font-size:19px}
  .devices{padding-right:0}
  .browser{display:none}
  .phone{position:relative;bottom:auto;width:min(250px,66vw);margin:0 auto}
  .hero-pic figcaption{margin-top:20px}
  .hero-pic::before{inset:-12% 0 -6%}  /* inside the screen edge, so the page never scrolls sideways */
  .gets{grid-template-columns:1fr}
  .gets li{padding:24px}
  .samples{gap:16px 14px}
  .samples b{font-size:18px}
  .samples span{font-size:16px}
  .faq summary{font-size:19px;padding:20px 0}
  .when label span{font-size:16px}
}
@media (max-width:360px){
  .pbar a{font-size:16px;gap:6px}
}