/* Layout: a dive from shore to deep water. Each page is a run of sections joined by drifting wave edges; a tide line flows down the right edge on every screen size. */
:root{
  --foam:#F2F7F6;
  --shell:#FFFFFF;
  --ink:#0B2A33;
  --ink-soft:#3E5A61;
  --tide:#1D6E76;
  --seaglass:#A8D8CC;
  --sand:#EDE4D3;
  --flag:#F2C230;
  --flag-red:#D8442E;
  --line:#D5E3E1;
  --deep:#0B2A33;
  --deep-fg:#E8F3F1;
  --on-flag:#0B2A33;
  --font-display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --font-body:"Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius:18px;
  --wrap:1120px;
  --head:64px;
  color-scheme:light;
}
/* Always light (brand Option C). Dark contrast comes from the .bg-deep sections, not the phone setting. */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--head)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--foam);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--foam)}
a{color:inherit}
:focus-visible{outline:3px solid var(--flag);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--font-display);line-height:1.05;letter-spacing:-0.02em;margin:0;text-wrap:balance}
p{margin:0}
.eyebrow{font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--tide)}
.mock{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-align:center;padding-block:6px;background:var(--flag);color:var(--on-flag)}

/* Header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb, var(--foam) 88%, transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-0.02em}
.brand svg{width:34px;height:20px;flex:none}
.links{display:flex;gap:26px;font-weight:500;font-size:15px}
.links a{text-decoration:none;color:var(--ink-soft)}
.links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 20px;font-weight:600;font-size:15px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:var(--font-body);transition:transform .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--flag);color:var(--on-flag)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-flag{background:var(--flag);color:var(--on-flag)}
@media (max-width:860px){.links{display:none}}

/* Tide line on every screen size */
#tideline{position:fixed;top:0;right:max(2px, env(safe-area-inset-right, 0px));width:24px;height:100vh;z-index:15;pointer-events:none}
@media (max-width:700px){#tideline{width:14px}}

/* Pages: each chapter fills the screen and is a snap point */
.chapter{position:relative;padding-block:84px;overflow:hidden}
.chapter > .page{width:100%}
/* Sections wash in from above as they scroll into view; wave edges roll up into place */
.wash.washing{animation:washin 1.3s cubic-bezier(.3,.6,.2,1) both;-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 55%);mask-image:linear-gradient(to bottom,#000 45%,transparent 55%);-webkit-mask-size:100% 260%;mask-size:100% 260%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@keyframes washin{from{-webkit-mask-position:0 100%;mask-position:0 100%;transform:translateY(24px)}to{-webkit-mask-position:0 0;mask-position:0 0;transform:none}}
.wave-edge.rolling svg{animation:roll 1.2s cubic-bezier(.3,.6,.2,1) both}
@keyframes roll{from{transform:translateY(60%)}to{transform:none}}
@media (prefers-reduced-motion: reduce){.wash.washing,.wave-edge.rolling svg{animation:none}}
.bg-foam{background:var(--foam)}
.bg-sand{background:var(--sand)}
.bg-deep{background:var(--deep);color:var(--deep-fg)}
.bg-deep .section-head p,.bg-deep .muted{color:color-mix(in srgb, var(--deep-fg) 74%, transparent)}
.bg-deep .eyebrow{color:var(--flag)}

/* Wave edges between pages */
.wave-edge{position:relative;height:90px;margin-block:-1px;background:var(--from);overflow:hidden}
.wave-edge svg{position:absolute;left:0;bottom:0;width:200%;height:100%;display:block}
.wave-edge .w1{fill:var(--to);opacity:.45;animation:drift 14s linear infinite}
.wave-edge .w2{fill:var(--to);animation:drift 22s linear infinite reverse}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:700px){.wave-edge{height:56px}}
@media (prefers-reduced-motion: reduce){.wave-edge .w1,.wave-edge .w2{animation:none}}

.section-head{display:grid;gap:14px;max-width:760px}
.section-head h2{font-size:clamp(32px, 4.6vw, 54px);font-weight:800}
.section-head p{color:var(--ink-soft);font-size:19px;max-width:60ch}

/* Hero */
.hero{position:relative}
#sea{position:absolute;inset:auto 0 0 0;width:100%;height:200px;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(44px, 7vw, 88px);font-weight:800;margin-top:14px}
.hero h1 .swash{color:var(--tide)}
.hero .lede{margin-top:22px;font-size:20px;max-width:36ch;color:var(--ink-soft)}
.hero .ctas{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.hero .proof{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--ink-soft)}
.hero .proof span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tide);margin-right:8px;vertical-align:1px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.phone-wrap{justify-self:center}}

/* Phone demo */
.phone-wrap{position:relative;justify-self:end;width:100%;max-width:340px}
.phone{position:relative;border-radius:40px;background:var(--deep);padding:14px;box-shadow:0 30px 60px -30px rgba(11,42,51,.55)}
.screen{border-radius:28px;background:var(--shell);min-height:500px;padding:18px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.status{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}
.stage{position:relative;flex:1}
.panel{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(12px);transition:opacity .9s ease, transform .9s ease}
.phone[data-step="1"] .p1,.phone[data-step="2"] .p2,.phone[data-step="3"] .p3{opacity:1;transform:none}
.call{margin-top:30px;text-align:center}
.call .who{font-family:var(--font-display);font-size:26px;font-weight:700}
.call .num{font-family:var(--font-mono);font-size:14px;color:var(--ink-soft)}
.ring{margin:28px auto 0;width:84px;height:84px;border-radius:50%;background:var(--tide);display:grid;place-items:center;color:var(--foam);font-weight:700;position:relative}
.ring::before,.ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--tide);animation:pulse 1.8s ease-out infinite}
.ring::after{animation-delay:.9s}
@keyframes pulse{from{transform:scale(1);opacity:.7}to{transform:scale(1.8);opacity:0}}
@media (prefers-reduced-motion: reduce){.ring::before,.ring::after{animation:none}}
.missed{margin-top:22px;text-align:center;font-size:14px;color:var(--ink-soft)}
.tag{display:inline-block;align-self:flex-start;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--seaglass);color:var(--ink)}
.bubble{max-width:88%;padding:10px 12px;border-radius:16px;font-size:14px;line-height:1.4;opacity:0;transform:translateY(6px);transition:opacity .7s ease, transform .7s ease}
.phone[data-step="2"] .bubble{opacity:1;transform:none}
.phone[data-step="2"] .bubble.b2{transition-delay:2.6s}
.phone[data-step="2"] .bubble.b3{transition-delay:5.2s}
.bubble.ai{background:var(--seaglass);color:var(--ink);border-bottom-left-radius:4px}
.bubble.caller{align-self:flex-end;background:var(--sand);color:var(--ink);border-bottom-right-radius:4px}
.label{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft)}
.sms{margin-top:6px;border-radius:16px;border:1px solid var(--line);padding:12px;background:var(--foam)}
.sms .from{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft)}
.sms .body{margin-top:6px;font-size:14px;line-height:1.45}
.sms .urgent{color:var(--flag-red);font-weight:700}
.steps-dots{display:flex;gap:6px;justify-content:center;margin-top:14px}
.steps-dots button{width:28px;height:6px;border-radius:3px;border:0;background:var(--line);cursor:pointer;padding:0}
.steps-dots button[aria-current="true"]{background:var(--tide)}
.steps-caption{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:8px;min-height:1.5em}

/* Stopper questions */
.questions{display:grid;gap:clamp(18px,3vw,30px);max-width:900px}
.q{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,5vw,58px);line-height:1.08;letter-spacing:-0.025em;text-wrap:balance}
.q span{color:var(--flag)}
.q:nth-child(2){color:color-mix(in srgb, var(--deep-fg) 80%, transparent)}
.q:nth-child(3){color:color-mix(in srgb, var(--deep-fg) 62%, transparent)}
.answer{margin-top:clamp(28px,4vw,44px);display:grid;gap:18px;max-width:640px}
.answer p{font-size:21px;color:var(--deep-fg)}
.answer p strong{color:var(--flag);font-weight:600}

/* How it works */
.flow{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.flow::before{content:"";position:absolute;left:8%;right:8%;top:28px;height:2px;background:repeating-linear-gradient(90deg,var(--tide) 0 10px,transparent 10px 18px);opacity:.5}
.step{position:relative;display:grid;gap:12px;align-content:start}
.step .n{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--shell);border:2px solid var(--tide);font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--tide);position:relative;z-index:1}
.step h3{font-size:24px}
.step p{color:var(--ink-soft)}
.step .time{font-family:var(--font-mono);font-size:13px;color:var(--tide)}
@media (max-width:820px){.flow{grid-template-columns:1fr}.flow::before{display:none}}

/* Conversation */
.convo-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.convo{display:grid;gap:10px;border-radius:var(--radius);background:var(--shell);border:1.5px solid var(--line);padding:20px}
.convo .bubble{opacity:1;transform:none;max-width:90%}
.points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px}
.points li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.points li svg{margin-top:4px}
.points b{display:block;font-family:var(--font-display);font-size:19px;letter-spacing:-0.01em}
.points span{color:var(--ink-soft)}
@media (max-width:860px){.convo-grid{grid-template-columns:1fr}}

/* Texts */
.texts{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.text-card{border-radius:var(--radius);background:color-mix(in srgb, var(--deep-fg) 7%, transparent);border:1px solid color-mix(in srgb, var(--deep-fg) 14%, transparent);padding:18px;display:grid;gap:10px;align-content:start;min-width:0}
.text-card .meta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;color:color-mix(in srgb, var(--deep-fg) 62%, transparent)}
.text-card .msg{font-family:var(--font-mono);font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.text-card .msg b{font-weight:500;color:var(--flag)}
.text-card .msg b.red{color:var(--flag-red)}
.text-card .why{font-size:14px;color:color-mix(in srgb, var(--deep-fg) 74%, transparent)}
@media (max-width:900px){.texts{grid-template-columns:1fr}}

/* Calculator */
.calc{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.calc-in{display:grid;gap:22px;align-content:start}
.slider{display:grid;gap:8px}
.slider .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.slider label{font-weight:600;font-size:15px}
.slider output{font-family:var(--font-mono);font-size:15px;color:var(--tide);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--tide)}
.calc-out{border-radius:var(--radius);background:var(--deep);color:var(--deep-fg);padding:28px;display:grid;gap:10px;align-content:center}
.calc-out .big{font-family:var(--font-display);font-weight:800;font-size:clamp(42px,6vw,64px);letter-spacing:-0.03em;color:var(--flag);font-variant-numeric:tabular-nums;line-height:1}
.calc-out p{color:color-mix(in srgb, var(--deep-fg) 78%, transparent)}
.calc-out .compare{font-size:15px}
.calc-note{margin-top:14px;font-size:13px;color:var(--ink-soft)}
@media (max-width:820px){.calc{grid-template-columns:1fr}}

/* Features */
.features{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px 28px}
.feature{display:grid;gap:8px;align-content:start;border-top:2px solid var(--line);padding-top:18px}
.feature.hl{border-top-color:var(--flag)}
.feature h3{font-size:21px}
.feature p{color:var(--ink-soft);font-size:16px}
.feature .pill{justify-self:start;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--flag);color:var(--on-flag);border-radius:6px;padding:3px 7px}
@media (max-width:900px){.features{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.features{grid-template-columns:1fr}}

/* Working together */
.together{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stage-card{border-radius:var(--radius);background:var(--shell);border:1.5px solid var(--line);padding:24px;display:grid;gap:10px;align-content:start}
.stage-card .when{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tide)}
.stage-card h3{font-size:23px}
.stage-card p{color:var(--ink-soft);font-size:16px}
.promise{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);background:var(--shell);border-radius:999px;padding:9px 16px;font-weight:500;font-size:15px}
@media (max-width:900px){.together{grid-template-columns:1fr}}

/* Your data */
.data-grid{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.data-item{border-radius:var(--radius);border:1px solid color-mix(in srgb, var(--deep-fg) 16%, transparent);background:color-mix(in srgb, var(--deep-fg) 6%, transparent);padding:22px;display:grid;gap:8px}
.data-item h3{font-size:22px}
.data-item p{color:color-mix(in srgb, var(--deep-fg) 76%, transparent);font-size:16px}
.data-fine{margin-top:20px;font-size:14px;color:color-mix(in srgb, var(--deep-fg) 66%, transparent);max-width:80ch}
@media (max-width:820px){.data-grid{grid-template-columns:1fr}}

/* Pricing */
.offer{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;border-radius:14px;padding:14px 18px;background:color-mix(in srgb, var(--flag) 22%, var(--foam));border:1.5px solid var(--flag)}
.offer strong{font-family:var(--font-display);font-size:18px}
.pricing{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{border-radius:var(--radius);border:1.5px solid var(--line);background:var(--shell);padding:26px;display:grid;gap:12px;align-content:start}
.plan.pro{border-color:var(--tide);box-shadow:0 20px 40px -28px rgba(29,110,118,.6)}
.plan .name{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-weight:700;font-size:22px}
.plan .was{font-size:15px;color:var(--ink-soft)}
.plan .price{font-family:var(--font-display);font-weight:800;font-size:44px;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:1}
.plan .price small{font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--ink-soft);letter-spacing:0}
.plan .setupfee{font-size:14px;color:var(--ink-soft)}
.plan ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--ink-soft);font-size:15px}
.pop{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--flag);color:var(--on-flag);border-radius:6px;padding:4px 8px}
.price-note{margin-top:16px;font-size:14px;color:var(--ink-soft)}
@media (max-width:900px){.pricing{grid-template-columns:1fr}}

/* FAQ */
.faq{margin-top:36px;display:grid;gap:10px;max-width:820px}
details{border:1.5px solid var(--line);border-radius:14px;background:var(--shell);padding:16px 18px}
summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--font-mono);color:var(--tide)}
details[open] summary::after{content:"\2013"}
details p{margin-top:10px;color:var(--ink-soft)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact h2{font-size:clamp(34px,5vw,60px);font-weight:800}
.contact .sub{color:color-mix(in srgb, var(--deep-fg) 76%, transparent);margin-top:16px;max-width:44ch}
.contact ul{margin:22px 0 0;padding-left:18px;display:grid;gap:6px;color:color-mix(in srgb, var(--deep-fg) 80%, transparent)}
form{display:grid;gap:12px}
label{font-size:14px;font-weight:600}
input:not([type=range]),select{width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:12px;border:1.5px solid color-mix(in srgb, var(--deep-fg) 22%, transparent);background:color-mix(in srgb, var(--deep-fg) 6%, transparent);color:var(--deep-fg)}
select option{color:#0B2A33}
.field{display:grid;gap:6px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-msg{font-size:14px;color:var(--flag)}
@media (max-width:820px){.contact-grid,.form-row{grid-template-columns:1fr}}

/* Who it's for */
.who-for{position:relative;margin-top:56px;display:grid;gap:12px}
.who-for .label{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.trades{display:flex;flex-wrap:wrap;gap:8px}
.trade{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--shell);border-radius:999px;padding:7px 14px 7px 10px;font-weight:500;font-size:15px}
.trade svg{width:18px;height:18px;flex:none;stroke:var(--tide);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Trust lines */
.trust{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trust div{border-top:2px solid var(--tide);padding-top:12px}
.trust b{display:block;font-family:var(--font-display);font-size:18px;letter-spacing:-0.01em}
.trust span{color:var(--ink-soft);font-size:15px}
@media (max-width:860px){.trust{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.trust{grid-template-columns:1fr}}

/* Plan buttons, Pro emphasis, Premium coming soon */
.plan .cta{margin-top:auto;padding-top:8px}
.plan .cta .btn{width:100%}
.plan .fit{font-size:14px;color:var(--ink-soft);font-style:italic}
.plan.pro{position:relative;background:linear-gradient(180deg, color-mix(in srgb, var(--seaglass) 30%, var(--shell)), var(--shell) 45%);border-width:2px;transform:translateY(-10px)}
.plan.pro .price{color:var(--tide)}
.plan.pro ul{color:var(--ink)}
.plan.pro li b{font-weight:600}
.bonus{border-radius:12px;background:color-mix(in srgb, var(--flag) 24%, var(--shell));border:1.5px solid var(--flag);padding:10px 12px;font-size:14px;color:var(--ink)}
.bonus b{font-family:var(--font-display)}
.plan.soon-plan{border-style:dashed}
.plan.soon-plan .price{opacity:.75}
.plan.soon-plan .cta .btn{background:transparent;border-color:var(--ink);color:var(--ink)}
@media (max-width:900px){.plan.pro{transform:none;order:-1}}
.calls{color:var(--ink-soft);font-weight:400}

/* Phone line + founding reminder in contact */
.call-us{margin-top:18px;font-size:16px}
.call-us b{font-family:var(--font-mono);font-weight:500;color:var(--flag)}
.founding-strip{margin-top:22px;border-radius:14px;border:1.5px solid var(--flag);padding:12px 16px;display:grid;gap:4px}
.founding-strip b{color:var(--flag);font-family:var(--font-display);font-size:18px}
.founding-strip span{font-size:14px;color:color-mix(in srgb, var(--deep-fg) 76%, transparent)}

/* Sample call player placeholder */
.sample{margin-top:22px;display:flex;align-items:center;gap:14px;border-radius:14px;border:1.5px dashed color-mix(in srgb, var(--ink) 25%, transparent);padding:12px 16px;max-width:460px}
.sample .play{width:44px;height:44px;border-radius:50%;background:var(--tide);display:grid;place-items:center;flex:none}
.sample .play svg{width:16px;height:16px;fill:var(--foam);margin-left:3px}
.sample b{display:block;font-family:var(--font-display);font-size:17px}
.sample span{font-size:14px;color:var(--ink-soft)}

/* Testimonials placeholder */
.quotes{margin-top:36px;border-radius:var(--radius);border:1.5px dashed color-mix(in srgb, var(--ink) 25%, transparent);padding:20px 22px;display:grid;gap:6px}
.quotes b{font-family:var(--font-display);font-size:19px}
.quotes span{color:var(--ink-soft);font-size:15px}

/* Value: problem to outcome */
.value-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vcard{border-radius:var(--radius);background:var(--shell);border:1.5px solid var(--line);padding:22px;display:grid;gap:12px;align-content:start}
.vcard .before{font-size:15px;color:var(--ink-soft);text-decoration:line-through;text-decoration-color:color-mix(in srgb, var(--flag-red) 70%, transparent);text-decoration-thickness:2px}
.vcard .arrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tide)}
.vcard h3{font-size:22px}
.vcard p{color:var(--ink-soft);font-size:16px}
@media (max-width:900px){.value-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.value-grid{grid-template-columns:1fr}}
.guarantee{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;border-radius:var(--radius);background:var(--deep);color:var(--deep-fg);padding:20px 22px}
.guarantee .seal{width:52px;height:52px;border-radius:50%;border:2px solid var(--flag);display:grid;place-items:center;flex:none}
.guarantee .seal svg{width:24px;height:24px;stroke:var(--flag);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.guarantee div{flex:1;min-width:220px;display:grid;gap:4px}
.guarantee b{font-family:var(--font-display);font-size:20px;color:var(--flag)}
.guarantee span{font-size:15px;color:color-mix(in srgb, var(--deep-fg) 80%, transparent)}

/* Soon tag */
.soon{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor;border-radius:5px;padding:1px 5px;margin-left:6px;vertical-align:2px;opacity:.8}

/* About */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.photo{aspect-ratio:4/5;border-radius:var(--radius);border:2px dashed color-mix(in srgb, var(--ink) 25%, transparent);background:color-mix(in srgb, var(--shell) 60%, transparent);display:grid;place-items:center;text-align:center;padding:20px;color:var(--ink-soft);font-family:var(--font-mono);font-size:13px;max-width:380px;width:100%}
.about-copy{display:grid;gap:16px}
.about-copy p{font-size:18px;color:var(--ink-soft);max-width:58ch}
.about-copy .sign{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--ink)}
.draft-note{font-family:var(--font-mono);font-size:12px;color:var(--tide)}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}.photo{max-width:260px}}

/* Contact choices */
.book{margin-top:26px;display:grid;gap:10px;justify-items:start}
.book .hint{font-size:14px;color:color-mix(in srgb, var(--deep-fg) 66%, transparent)}
.form-title{font-family:var(--font-display);font-weight:700;font-size:20px}
.collect{font-size:13px;color:color-mix(in srgb, var(--deep-fg) 66%, transparent)}
.collect a,.foot a{color:inherit}

footer{background:var(--deep);color:color-mix(in srgb, var(--deep-fg) 65%, transparent);font-size:14px;border-top:1px solid color-mix(in srgb, var(--deep-fg) 12%, transparent)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:28px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* Multi-page header: current page marker and phone menu */
.links a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--tide);text-decoration-thickness:2px;text-underline-offset:6px}
.nav-right{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--shell);color:var(--ink);cursor:pointer;place-items:center}
.menu-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
@media (max-width:860px){
  .menu-btn{display:grid}
  header.site.open .links{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--foam);border-bottom:1px solid var(--line);padding:6px 16px 14px}
  header.site.open .links a{padding:12px 4px;border-bottom:1px solid var(--line);font-size:17px}
  .nav-right .btn{padding:10px 14px;font-size:14px}
}

/* Page intro for inner pages */
.page-intro{padding-block:64px 40px}
.page-intro h1{font-size:clamp(38px,6vw,68px);font-weight:800;margin-top:12px;max-width:18ch}
.page-intro p.lead{margin-top:16px;font-size:19px;color:var(--ink-soft);max-width:58ch}

/* Pricing teaser and CTA band */
.teaser{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.teaser .from{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,6vw,60px);letter-spacing:-0.03em;line-height:1}
.teaser .from small{font-family:var(--font-body);font-size:16px;font-weight:500;color:var(--ink-soft);letter-spacing:0}
.teaser ul{margin:16px 0 0;padding-left:18px;display:grid;gap:6px;color:var(--ink-soft)}
.teaser .actions{display:grid;gap:10px;justify-items:start}
@media (max-width:820px){.teaser{grid-template-columns:1fr}}
.cta-band{text-align:center;display:grid;gap:16px;justify-items:center}
.cta-band h2{font-size:clamp(30px,4.6vw,48px);font-weight:800;max-width:20ch}
.cta-band p{color:var(--ink-soft);max-width:52ch}
.cta-band .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* Texts: four example messages in a 2x2 grid */
.texts.four{grid-template-columns:repeat(2,1fr)}
.text-card .msg{white-space:pre-line}
.sms .body{white-space:pre-line}
@media (max-width:900px){.texts.four{grid-template-columns:1fr}}

.bg-deep .cta-band p{color:color-mix(in srgb, var(--deep-fg) 76%, transparent)}
.btn-ghost.on-deep{border-color:var(--deep-fg);color:var(--deep-fg)}

/* Hand-drawn highlighter: wraps across lines, a little rough, runs past the word ends */
.hl{--hl:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M4%2015C30%2011%2070%2010%20110%209S170%206%20197%204c2%205%201%2012%202%2018s-1%209-3%2012c-35%201-80%202-120%203S22%2039%206%2039C2%2033%205%2025%203%2020s0-3%201-5z%22%20fill%3D%22%23FFD23F%22%20fill-opacity%3D%22.88%22/%3E%3Cpath%20d%3D%22M14%2030c40-2%20100-3%20170-5%22%20stroke%3D%22%23FFD23F%22%20stroke-width%3D%223%22%20stroke-opacity%3D%22.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M60%2012c30-1%2060-2%2090-2%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-opacity%3D%22.18%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");background:var(--hl) 0 72%/100% 62% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .22em 0 .14em;margin:0 -.1em 0 -.06em;color:var(--ink);border-radius:2px}
.hl-g{--hl:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M4%2015C30%2011%2070%2010%20110%209S170%206%20197%204c2%205%201%2012%202%2018s-1%209-3%2012c-35%201-80%202-120%203S22%2039%206%2039C2%2033%205%2025%203%2020s0-3%201-5z%22%20fill%3D%22%235EDCA6%22%20fill-opacity%3D%221%22/%3E%3Cpath%20d%3D%22M14%2030c40-2%20100-3%20170-5%22%20stroke%3D%22%235EDCA6%22%20stroke-width%3D%223%22%20stroke-opacity%3D%22.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M60%2012c30-1%2060-2%2090-2%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-opacity%3D%22.18%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E")}
.hl-b{--hl:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M4%2015C30%2011%2070%2010%20110%209S170%206%20197%204c2%205%201%2012%202%2018s-1%209-3%2012c-35%201-80%202-120%203S22%2039%206%2039C2%2033%205%2025%203%2020s0-3%201-5z%22%20fill%3D%22%239CD3F5%22%20fill-opacity%3D%22.88%22/%3E%3Cpath%20d%3D%22M14%2030c40-2%20100-3%20170-5%22%20stroke%3D%22%239CD3F5%22%20stroke-width%3D%223%22%20stroke-opacity%3D%22.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M60%2012c30-1%2060-2%2090-2%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-opacity%3D%22.18%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E")}
/* On dark sections: white text, a deeper amber stroke so the words stay readable */
.bg-deep .hl,.contact .hl{--hl:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M4%2015C30%2011%2070%2010%20110%209S170%206%20197%204c2%205%201%2012%202%2018s-1%209-3%2012c-35%201-80%202-120%203S22%2039%206%2039C2%2033%205%2025%203%2020s0-3%201-5z%22%20fill%3D%22%23E2B42C%22%20fill-opacity%3D%22.55%22/%3E%3Cpath%20d%3D%22M14%2030c40-2%20100-3%20170-5%22%20stroke%3D%22%23E2B42C%22%20stroke-width%3D%223%22%20stroke-opacity%3D%22.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M60%2012c30-1%2060-2%2090-2%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-opacity%3D%22.18%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");color:var(--deep-fg);background-size:100% 78%;background-position:0 80%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}