/* SunnyAnswer: sunny Florida luxury. Sand-white paper, deep Gulf-blue ink, sunlight gold, a sea-teal touch, hairline rules,
   Miami art-deco sunburst. Cormorant Garamond for display, Hanken Grotesk for text.
   The demo call card and the emergency band are "ocean at night" in both themes. */
:root{
  --bg:#FFFCF6; --bg-2:#FDF4E1; --surface:#FFFFFF; --surface-2:#FFFAF0;
  --ink:#0F2F3A; --muted:#4A6670; --line:#EADCC0; --line-soft:#F3EAD6;
  --sun:#E0A21C; --sun-ink:#9C6200; --sun-soft:#FBEBC4; --on-sun:#0F2F3A;
  --sea:#0E7C88; --ray:rgba(224,162,28,.20); --wash:rgba(255,206,92,.28);
  --btn:#0F2F3A; --on-btn:#FBF7EF;
  --alert:#C2412D; --alert-soft:#FBE3DC;
  --paper:#FFFFFF; --paper-ink:#0F2F3A; --paper-muted:#4A6670; --paper-line:#F0E6D2;
  --display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0A1F27; --bg-2:#0D2630; --surface:#11303B; --surface-2:#163845;
  --ink:#F6EFDF; --muted:#9DB5BB; --line:#23444F; --line-soft:#1A3843;
  --sun:#F2B23A; --sun-ink:#F5C25C; --sun-soft:#3A2F14; --on-sun:#0A1F27;
  --sea:#5CC3CC; --ray:rgba(242,178,58,.13); --wash:rgba(242,178,58,.10);
  --btn:#F2B23A; --on-btn:#0A1F27;
  --alert:#F08A72; --alert-soft:#41201A;
  color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0A1F27; --bg-2:#0D2630; --surface:#11303B; --surface-2:#163845;
  --ink:#F6EFDF; --muted:#9DB5BB; --line:#23444F; --line-soft:#1A3843;
  --sun:#F2B23A; --sun-ink:#F5C25C; --sun-soft:#3A2F14; --on-sun:#0A1F27;
  --sea:#5CC3CC; --ray:rgba(242,178,58,.13); --wash:rgba(242,178,58,.10);
  --btn:#F2B23A; --on-btn:#0A1F27;
  --alert:#F08A72; --alert-soft:#41201A;
  color-scheme:dark }
/* Night scope: always the ocean-night palette, whatever the page theme */
.night{
  --surface:#11303B; --surface-2:#163845;
  --ink:#F6EFDF; --muted:#9DB5BB; --line:#23444F; --line-soft:#1A3843;
  --sun:#F2B23A; --sun-ink:#F5C25C; --sun-soft:#3A2F14; --on-sun:#0A1F27;
  --sea:#5CC3CC;
  --alert:#F08A72; --alert-soft:#41201A;
  color:var(--ink);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:700px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
p{margin:0}
h1,h2,h3{margin:0;font-weight:500}
h1,h2{font-family:var(--display);letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.9rem,5.8vw,5rem);line-height:1.02;font-weight:500}
h2{font-size:clamp(2.1rem,3.9vw,3.3rem);line-height:1.08}
h3{font-family:var(--body);font-weight:600;font-size:1.06rem;line-height:1.35}
em{font-style:italic}
h1 em,h2 em{color:var(--sun-ink);font-weight:500}
a{color:var(--sun-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--sun-ink)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.num{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.todo{color:var(--alert)}

/* ---------- Header ---------- */
.sky{position:relative;overflow:hidden;padding-bottom:18px;
  --veil:color-mix(in srgb,var(--bg) 92%,transparent); --veil-mid:color-mix(in srgb,var(--bg) 50%,transparent); --veil-far:transparent;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 92%,transparent) 0,color-mix(in srgb,var(--bg) 70%,transparent) 96px,transparent 190px),
    linear-gradient(0deg,var(--bg) 0,transparent 160px),
    linear-gradient(90deg,var(--bg) 0,var(--veil) 28%,var(--veil-mid) 50%,var(--veil-far) 78%),
    image-set(url("img/palms-sky-2000.webp") type("image/webp"),url("img/palms-sky-2000.jpg") type("image/jpeg")) 70% 30%/cover no-repeat,
    var(--bg)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sky{--veil:color-mix(in srgb,var(--bg) 96%,transparent);--veil-mid:color-mix(in srgb,var(--bg) 78%,transparent);--veil-far:color-mix(in srgb,var(--bg) 45%,transparent)} }
:root[data-theme="dark"] .sky{--veil:color-mix(in srgb,var(--bg) 96%,transparent);--veil-mid:color-mix(in srgb,var(--bg) 78%,transparent);--veil-far:color-mix(in srgb,var(--bg) 45%,transparent)}
/* a wide photo band: sunlit palms, Peanut Island FL */
.photo-band{height:clamp(240px,36vw,460px);background:image-set(url("img/palms-sunlit-2000.webp") type("image/webp"),url("img/palms-sunlit-2000.jpg") type("image/jpeg")) center 40%/cover no-repeat,#8EC5E8;border-block:1px solid var(--line-soft)}
/* the shoreline */
.sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 6c6 0 6-4 12-4s6 4 12 4 6-4 12-4 6 4 12 4' fill='none' stroke='%230E7C88' stroke-opacity='.55' stroke-width='1.2'/%3E%3Cpath d='M0 11c6 0 6-4 12-4s6 4 12 4 6-4 12-4 6 4 12 4' fill='none' stroke='%23E0A21C' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E") repeat-x left bottom}
.sky>*{position:relative;z-index:1}
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:26px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-family:var(--display);font-size:1.6rem;font-weight:600;letter-spacing:.01em;line-height:1}
.brand svg{flex:none}
.brand svg *{fill:none;stroke:var(--sun);stroke-width:1.5;stroke-linecap:round}
.brand svg .disc{fill:var(--sun-soft);stroke:var(--sun)}
.brand svg .w{stroke:var(--sea)}
.brand b{font-weight:600;color:var(--sun-ink);font-style:italic}
nav.links{display:flex;gap:30px;align-items:center;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
nav.links a{color:var(--muted);text-decoration:none}
nav.links a:hover{color:var(--ink)}
nav.links a.call{color:var(--ink);background:var(--bg);border:1px solid var(--ink);padding:10px 16px;display:inline-flex;gap:10px;align-items:center;letter-spacing:.08em}
nav.links a.call:hover{background:var(--ink);color:var(--bg)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--sun);flex:none}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:72px;align-items:start;padding-block:72px 112px}
.pitch{min-width:0;position:sticky;top:32px;padding-top:12px}
.clock{display:flex;align-items:center;gap:12px;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.clock::before{content:"";width:28px;height:1px;background:var(--sun)}
.lede{font-size:1.16rem;color:var(--muted);max-width:38ch;margin-top:28px}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;align-items:stretch}
.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--body);font-weight:600;font-size:.98rem;text-decoration:none;border-radius:2px;padding:15px 24px;border:0;cursor:pointer;line-height:1.2;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.btn.primary{background:var(--btn);color:var(--on-btn)}
.btn.primary:hover{background:var(--sun);color:var(--on-sun)}
.btn.primary small{display:block;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin-bottom:3px}
.btn.primary .n{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em;white-space:nowrap}
.btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.demo-note{margin-top:22px;font-size:.95rem;color:var(--muted);max-width:42ch}
.demo-note strong{color:var(--ink);font-weight:600}
.eyebrow.under{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted)}
.eyebrow.under::before{display:none}

/* ---------- The demo call card ---------- */
.stage{min-width:0;position:relative;border:1px solid #2A5563;background:linear-gradient(180deg,#123F4C,#0E3440);box-shadow:0 34px 70px -40px rgba(6,32,42,.6)}
.stage::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--sun),#F6C35E 40%,var(--sea))}
.stage-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding:16px 22px;border-bottom:1px solid var(--line)}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--sun-ink);white-space:nowrap}
.tag::before{content:"";width:18px;height:1px;background:currentColor}
.tabs{display:none;gap:0;border:1px solid var(--line)}
.js .tabs{display:inline-flex}
.tab{font:inherit;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:transparent;border:0;padding:9px 14px;cursor:pointer;white-space:nowrap}
.tab+.tab{border-left:1px solid var(--line)}
.tab:hover{color:var(--ink)}
.tab[aria-pressed="true"]{background:var(--sun);color:#0E3440}
.tab[data-call="gas"][aria-pressed="true"]{background:var(--alert);color:#0E3440}
.callbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line)}
.callbar .line{min-width:0}
.callbar .line b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1.2}
.callbar .line span{display:block;font-size:.72rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.callbar .right{display:flex;align-items:center;gap:14px}
.wave{display:none}
.play{display:none;font:inherit;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--line);padding:9px 14px 9px 12px;cursor:pointer;align-items:center;gap:10px;white-space:nowrap}
.js .play{display:inline-flex}
.play:hover{border-color:var(--sun);color:var(--sun-ink)}
.play svg{flex:none}
.panel{padding:8px 22px 24px}
.panel[hidden]{display:none}
.panel-title{font-family:var(--display);font-size:1.5rem;font-weight:500;margin:14px 0}
.js .panel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* a transcript, not chat bubbles */
.turns{list-style:none;margin:0;padding:0;display:grid}
.turn{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft);min-width:0}
.turn .who{font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:5px}
.turn.a .who{color:var(--sun-ink)}
.turn p{font-size:.98rem;line-height:1.5}
.turn.c p{font-family:var(--display);font-style:italic;font-size:1.18rem;line-height:1.35;color:#EDE5D2}
.turn.warn{border-left:2px solid var(--alert);padding-left:12px;margin-left:-14px;background:rgba(224,138,124,.07)}
.turn.warn .who{color:var(--alert)}
.slot{border-bottom:1px dotted var(--sun);color:var(--sun-ink)}
.aside{display:flex;align-items:center;gap:14px;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:16px 0 12px}
.aside::before,.aside::after{content:"";flex:1;height:1px;background:var(--line)}
.aside span{min-width:0;text-align:center}
.step{transition:opacity .4s ease,transform .4s ease}
.step.pending{opacity:0;transform:translateY(6px)}

/* outcome: the email */
.outcome{margin-top:10px}
.mail{background:var(--paper);color:var(--paper-ink);border-radius:2px;box-shadow:0 18px 40px -28px rgba(0,0,0,.8)}
.mail-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--paper-line);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-muted)}
.mail-top b{font-weight:600;color:#9C6200}
.mail-body{padding:20px}
.mail-body h3{font-family:var(--display);font-size:1.4rem;font-weight:600;line-height:1.2}
.mail-from{font-size:.82rem;color:var(--paper-muted);margin-top:4px;overflow-wrap:anywhere}
dl.sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 20px;margin:16px 0 0;font-size:.93rem}
dl.sum dt,dl.sum dd{padding:8px 0;border-top:1px solid var(--paper-line)}
dl.sum dt{color:var(--paper-muted);font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding-top:11px}
dl.sum dd{margin:0;font-variant-numeric:tabular-nums;min-width:0}
.pill{display:inline-block;color:#9C3A1E;font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid #E9B49A;background:#FDF0E8;padding:2px 8px}

/* outcome: the owner's phone */
.ring{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:18px 20px;border:1px solid var(--alert);background:rgba(224,138,124,.06)}
.ring-ico{width:48px;height:48px;border-radius:50%;border:1px solid var(--alert);display:grid;place-items:center;color:var(--alert)}
.ring small{display:block;font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--alert)}
.ring b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:600;margin-top:4px}
.ring q{display:block;margin-top:8px;font-family:var(--display);font-style:italic;font-size:1.12rem;line-height:1.4;color:var(--ink);quotes:"\201C" "\201D";font-variant-numeric:lining-nums tabular-nums}
.then{list-style:none;margin:16px 0 0;padding:0;display:grid;font-size:.92rem;color:var(--muted)}
.then li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line-soft)}
.then b{color:var(--ink);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}

/* ---------- Sections ---------- */
section{padding-block:120px}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:780px}
.band{background:var(--bg-2);border-block:1px solid var(--line-soft)}

/* how */
.timeline{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.timeline li{min-width:0;padding-top:28px;border-top:1px solid var(--ink)}
.timeline .n{font-family:var(--display);font-size:3.6rem;font-weight:500;font-style:italic;line-height:1;color:var(--sun-ink);display:block;margin-bottom:18px;font-variant-numeric:lining-nums}
.timeline p{color:var(--muted);margin-top:10px}
.timeline .said{margin-top:18px;font-family:var(--display);font-style:italic;font-size:1.35rem;line-height:1.3;color:var(--ink)}
.timeline .when{display:inline-block;margin-top:18px;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sun-ink)}

/* emergencies */
.emg{background:linear-gradient(180deg,#123F4C,#0E3440);border-block:1px solid #2A5563}
.emg .eyebrow{color:var(--alert)}
.emg .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:start}
.emg .grid>div{min-width:0}
.emg h2 em{color:var(--alert)}
.emg .lead{color:var(--muted);margin-top:24px;max-width:44ch;font-size:1.08rem}
.ladder{list-style:none;margin:0;padding:0;display:grid}
.ladder li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:24px;padding:26px 0;border-top:1px solid var(--line);align-items:start}
.ladder li:last-child{border-bottom:1px solid var(--line)}
.ladder b{font-family:var(--display);font-weight:500;font-style:italic;font-size:1.8rem;line-height:1.05;color:var(--sun-ink)}
.ladder span{min-width:0;color:var(--muted)}
.ladder strong{color:var(--ink);font-weight:600}

/* will / won't */
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;margin-top:60px;align-items:start}
.cols>div{min-width:0}
.cols h3.col{font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--sun-ink);padding-bottom:16px;border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:12px}
.cols h3.col.no{color:var(--muted)}
.cols h3.col i{display:none}
.items{list-style:none;margin:0;padding:0}
.items li{padding:24px 0;border-bottom:1px solid var(--line)}
.items h3{font-family:var(--display);font-size:1.45rem;font-weight:600;line-height:1.2}
.items p{color:var(--muted);margin-top:6px;max-width:52ch}

/* pricing */
.price{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:end}
.price>div{min-width:0}
.figure{font-family:var(--display);font-size:clamp(5.5rem,12vw,10rem);font-weight:500;line-height:.85;letter-spacing:-.02em;margin-top:26px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;font-variant-numeric:lining-nums}
.figure small{font-family:var(--body);font-size:.72rem;font-weight:600;color:var(--muted);letter-spacing:.2em;text-transform:uppercase;line-height:1.7}
.terms{list-style:none;margin:0;padding:0}
.terms li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:18px 0;border-top:1px solid var(--line)}
.terms li:last-child{border-bottom:1px solid var(--line)}
.terms li::before{content:"";width:14px;height:1px;background:var(--sun);margin-top:.8em}
.terms div{min-width:0;color:var(--muted)}
.terms strong{color:var(--ink);font-weight:600}

/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:80px;align-items:start}
.faq-grid>div{min-width:0}
details{border-top:1px solid var(--line);padding:0}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.4rem;line-height:1.25;padding:22px 44px 22px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary::before,summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:1px;background:var(--sun-ink);transition:transform .25s ease}
summary::after{transform:rotate(90deg)}
details[open] summary::after{transform:rotate(0deg)}
details p{color:var(--muted);padding:0 44px 24px 0;max-width:64ch}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:80px;align-items:center}
.contact>div{min-width:0}
.bigline{display:block;font-family:var(--display);font-size:clamp(2.8rem,7vw,5.8rem);font-weight:500;line-height:1;letter-spacing:-.01em;color:var(--ink);text-decoration:none;margin-top:28px;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.bigline:hover{color:var(--sun-ink)}
.contact .sub{color:var(--muted);margin-top:18px;max-width:46ch}
.rows{border-top:1px solid var(--ink)}
.rows div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.rows span{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.rows b{font-family:var(--display);font-size:1.4rem;font-weight:600;min-width:0;overflow-wrap:anywhere;font-variant-numeric:lining-nums}

footer{border-top:1px solid var(--line);padding-block:34px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--bg)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}

/* legal pages */
.legal{max-width:760px;padding-block:56px 96px}
.legal h1{font-size:clamp(2.4rem,4.8vw,3.6rem);margin-top:6px}
.legal h2{font-family:var(--display);font-weight:600;font-size:1.6rem;letter-spacing:0;margin-top:44px;padding-top:20px;border-top:1px solid var(--line)}
.legal p,.legal ul{margin-top:14px;color:var(--ink)}
.legal ul{padding-left:1.2em}
.legal li{margin-top:10px}
.legal li::marker{color:var(--sun)}
.legal .meta{color:var(--muted);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin-top:16px}
.legal .eyebrow{margin-bottom:14px}
.legal a{color:var(--sea)}

@media (max-width:960px){
  .hero{grid-template-columns:minmax(0,1fr);gap:48px;padding-block:44px 72px}
  .pitch{position:static;padding-top:0}
  .lede{max-width:44ch}
  .eyebrow.under{display:none}
  .emg .grid,.cols,.price,.faq-grid,.contact{grid-template-columns:minmax(0,1fr);gap:44px}
  .price{align-items:start}
  section{padding-block:80px}
  .timeline{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:44px}
}
@media (max-width:640px){
  .sky{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 88%,transparent) 0,color-mix(in srgb,var(--bg) 50%,transparent) 90px,color-mix(in srgb,var(--bg) 72%,transparent) 200px,var(--bg) 430px),image-set(url("img/palms-sky-1100.webp") type("image/webp"),url("img/palms-sky-1100.jpg") type("image/jpeg")) 62% top/auto 480px no-repeat,var(--bg)}
  .photo-band{background-image:image-set(url("img/palms-sunlit-1100.webp") type("image/webp"),url("img/palms-sunlit-1100.jpg") type("image/jpeg"))}
  body{font-size:16.5px}
  nav.links a.hide-s{display:none}
  header.top{padding-block:18px}
  .brand{font-size:1.4rem}
  .stage-top,.callbar{padding:14px 16px}
  .panel{padding:4px 16px 18px}
  .turn{grid-template-columns:minmax(0,1fr);gap:4px}
  .turn .who{padding-top:0}
  .turn.warn{margin-left:-10px;padding-left:8px}
  .ladder li{grid-template-columns:minmax(0,1fr);gap:6px;padding:22px 0}
  .then li{grid-template-columns:minmax(0,1fr);gap:2px}
  .rows div{grid-template-columns:minmax(0,1fr);gap:4px}
  dl.sum{grid-template-columns:minmax(0,1fr)}
  dl.sum dd{border-top:0;padding-top:0}
  .btn.primary{flex:1 1 100%}
  .btn.ghost{flex:1 1 100%;justify-content:center}
  .bigline{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .step,summary::before,summary::after,.btn{transition:none}
}

/* ---------- The interactive sun (decorative; drawn in SVG, animated in CSS, steered by a small script) ---------- */
.sky>.sun{position:absolute;z-index:0;pointer-events:none;top:20px;right:calc(max(16px,(100% - 1180px)/2) - 95px);width:230px;height:230px;
  transform:translate3d(var(--sx,0px),var(--sy,0px),0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.sun svg{display:block;width:100%;height:100%;overflow:visible}
.sky>.sun::before{content:"";position:absolute;inset:-150px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,240,190,.7) 0,rgba(255,222,140,.32) 22%,rgba(255,214,120,.12) 40%,rgba(255,214,120,0) 62%);
  opacity:calc(.8 + var(--heat,0)*.2);transition:opacity .5s}
.sun-halo{transform-box:fill-box;transform-origin:center;opacity:calc(.78 + var(--heat,0)*.22);transform:scale(calc(1 + var(--heat,0)*.1));transition:opacity .5s,transform .5s}
.sun-halo-pulse{transform-box:fill-box;transform-origin:center;animation:sun-breathe 6s ease-in-out infinite}
.sun-rays{transform-box:fill-box;transform-origin:center;animation:sun-spin 90s linear infinite}
.sun-rays-inner{transform-box:fill-box;transform-origin:center;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.sun-disc{filter:drop-shadow(0 0 10px rgba(255,200,80,.8))}
.sun-ring{transform-box:fill-box;transform-origin:center;opacity:0;fill:none;stroke:#FFD25C;stroke-width:2}
.sun.burst .sun-rays-inner{transform:scale(1.32)}
.sun.burst .sun-ring{animation:sun-ring 1.1s ease-out}
.sun.burst .sun-ring.r2{animation-delay:.18s}
.sun.burst .sun-disc{animation:sun-flash 1.1s ease-out}
@keyframes sun-spin{to{transform:rotate(360deg)}}
@keyframes sun-breathe{0%,100%{transform:scale(.96)}50%{transform:scale(1.04)}}
@keyframes sun-ring{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(2.6)}}
@keyframes sun-flash{0%{filter:drop-shadow(0 0 10px rgba(255,200,80,.8)) brightness(1)}25%{filter:drop-shadow(0 0 34px rgba(255,214,110,1)) brightness(1.18)}100%{filter:drop-shadow(0 0 10px rgba(255,200,80,.8)) brightness(1)}}
.sky.near-sun{cursor:pointer}
@media (max-width:640px){
  .sky>.sun{width:150px;height:150px;right:-34px;top:56px}
}
@media (prefers-reduced-motion:reduce){
  .sun-rays,.sun-halo-pulse{animation:none}
  .sky>.sun{transition:none}
}

/* ==========================================================================
   SUN-CENTERED HERO: the sun is the centerpiece; Florida (palms, shoreline) frames it.
   These rules come last on purpose and override the two-column hero above.
   ========================================================================== */
.sky{
  --photo-w:max(100vw,1500px);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 88%,transparent) 0,color-mix(in srgb,var(--bg) 35%,transparent) 96px,transparent 170px),
    radial-gradient(ellipse 620px 400px at 50% 610px,var(--veil) 0,var(--veil) 42%,color-mix(in srgb,var(--bg) 55%,transparent) 72%,transparent 100%),
    linear-gradient(0deg,var(--bg) 0,color-mix(in srgb,var(--bg) 70%,transparent) 22%,transparent 48%) 50% 0/100% calc(var(--photo-w) / 1.5) no-repeat,
    image-set(url("img/palms-sky-2000.webp") type("image/webp"),url("img/palms-sky-2000.jpg") type("image/jpeg")) 50% 0/var(--photo-w) auto no-repeat,
    var(--bg)}
.hero{grid-template-columns:minmax(0,1fr);gap:0;padding-block:0 104px;justify-items:center;text-align:center}
.pitch{position:static;padding-top:clamp(270px,26vw,330px);max-width:880px;margin-inline:auto}
.pitch .clock{justify-content:center}
.pitch .clock::after{content:"";width:28px;height:1px;background:var(--sun)}
.pitch .lede{margin-inline:auto;max-width:46ch}
.pitch .cta{justify-content:center}
.pitch .demo-note{margin-inline:auto}
.pitch .eyebrow.under{justify-content:center;max-width:520px;margin-inline:auto}
.hero .stage{width:100%;max-width:880px;margin:84px auto 0;text-align:left}
/* the big sun, high and centered */
.sky>.sun{top:78px;left:50%;right:auto;width:420px;height:420px;margin-left:-210px}
.sky>.sun::before{inset:-170px}
/* rays also turn as the page scrolls */
.sun-rays-scroll{transform-box:fill-box;transform-origin:center}

/* small suns throughout: section labels and a sunburst behind the price */
.eyebrow::before{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#FFF3C4,#FDBA2E 60%,#F09A10);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sun) 20%,transparent),0 0 14px rgba(253,186,46,.55)}
.figure{position:relative;z-index:0}
.figure::before{content:"";position:absolute;z-index:-1;left:-90px;top:50%;width:460px;height:460px;margin-top:-230px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--sun) 30%,transparent) 0 14%,transparent 15%),
    repeating-conic-gradient(from 3deg,color-mix(in srgb,var(--sun) 30%,transparent) 0 2.2deg,transparent 2.2deg 10deg);
  -webkit-mask:radial-gradient(circle,#000 0 20%,transparent 66%);mask:radial-gradient(circle,#000 0 20%,transparent 66%)}

@media (max-width:960px){
  .pitch{padding-top:250px}
  .hero .stage{margin-top:64px}
}
@media (max-width:640px){
  .sky{background:
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 85%,transparent) 0,color-mix(in srgb,var(--bg) 30%,transparent) 80px,
      color-mix(in srgb,var(--bg) 55%,transparent) 260px,var(--bg) 470px),
    image-set(url("img/palms-sky-1100.webp") type("image/webp"),url("img/palms-sky-1100.jpg") type("image/jpeg")) 50% top/auto 500px no-repeat,var(--bg)}
  .sky>.sun{width:260px;height:260px;margin-left:-130px;top:70px}
  .sky>.sun::before{inset:-100px}
  .pitch{padding-top:210px}
  .figure::before{left:-70px;width:340px;height:340px;margin-top:-170px}
}