/* Home page. Motion states are added by html classes set in <head>:
   .js   scripts are running
   .anim motion is allowed (no reduced-motion preference)
   .pin  wide and tall enough for the pinned story
   Without them the page is the finished, static version. */

.top{position:fixed;inset:0 0 auto 0;border-bottom-color:transparent;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.top.scrolled{background:rgba(13,15,12,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
main{position:relative;z-index:1}
.top-sentinel{position:absolute;top:0;left:0;width:1px;height:24px;pointer-events:none}

/* =========================================================
   STORY: the hero. A site builds itself inside a phone.
   ========================================================= */
.story{position:relative;overflow:hidden;padding:calc(var(--hh) + clamp(2rem,6vw,4rem)) 0 clamp(3.5rem,8vw,6rem)}
.rings{position:absolute;top:50%;right:-22%;width:min(1300px,150vw);height:auto;aspect-ratio:16/9;opacity:.5;pointer-events:none;translate:0 -50%;
  mask-image:radial-gradient(closest-side,#000 50%,transparent);-webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent)}
@media (max-width:899px){.rings{top:auto;bottom:-4%;translate:0;right:-55%;opacity:.35}}
.story-inner{position:relative;z-index:1;display:grid;gap:clamp(2.5rem,6vw,3.5rem);max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.copy{display:contents}
.intro{order:1}
.stage{order:2}
.beats{order:3}
.rail{display:none}
@media (min-width:900px){
  .story-inner{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:clamp(2rem,4vw,5rem);align-items:center}
  .intro{grid-column:1;grid-row:1}
  .stage{grid-column:2;grid-row:1}
  .beats{grid-column:1/-1;grid-row:2}
}

/* intro */
.intro h1{font-size:clamp(3.1rem,min(6vw,8.5vh),5rem);font-size:clamp(3.1rem,min(6vw,8.5svh),5rem);line-height:.98;letter-spacing:-.035em;margin:1.4rem 0 1.6rem}
.intro h1 .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.intro h1 .ln>span{display:block}
.intro h1 .ln.it{color:var(--lime)}
.intro h1 .ln.it>span{padding-right:.1em}
.intro .lede{max-width:46ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.cta-row .btn{flex:0 0 auto}
@media (max-width:520px){.cta-row .btn{flex:1 1 100%}}
.note{margin-top:1.5rem;font-size:.88rem;color:var(--muted)}
.note b{color:var(--cream);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .intro h1 .ln>span{animation:lift 1.1s var(--ease-out) backwards}
  .intro h1 .ln:nth-child(1)>span{animation-delay:.12s}
  .intro h1 .ln:nth-child(2)>span{animation-delay:.26s}
  .intro h1 .ln:nth-child(3)>span{animation-delay:.4s}
  .intro .eyebrow,.intro .lede,.intro .cta-row,.intro .note{animation:fade .9s var(--ease-out) backwards}
  .intro .eyebrow{animation-delay:.05s}
  .intro .lede{animation-delay:.6s}
  .intro .cta-row{animation-delay:.72s}
  .intro .note{animation-delay:.84s}
  .stage{animation:fade 1.2s var(--ease-out) .35s backwards}
}
@keyframes lift{from{transform:translateY(108%)}}
@keyframes fade{from{opacity:0;transform:translateY(16px)}}

/* beats: the three steps */
.beats{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(3,1fr);margin-top:clamp(1rem,3vw,2rem)}
@media (max-width:899px){.beats{grid-template-columns:1fr;gap:0;margin-top:0}}
.beat{position:relative;border-top:1px solid var(--rule);padding-top:1.5rem}
@media (max-width:899px){.beat{padding:1.5rem 0 1.6rem}}
.beat .n{display:block;font:italic 400 clamp(2.4rem,4vw,3.2rem)/1 var(--serif);color:var(--lime);margin-bottom:.9rem}
.beat h2{font-size:clamp(1.5rem,2.2vw,1.9rem);margin-bottom:.6rem}
.beat p{color:var(--muted);font-size:.96rem;max-width:40ch}

/* phone stage */
.stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-self:center;width:100%}
.dev{position:relative;--pw:min(320px,78vw);display:flex;justify-content:center;width:100%}
.pin .dev{--pw:min(330px,78vw,calc((100vh - 15rem)*.46));--pw:min(330px,78vw,calc((100svh - 15rem)*.46))}
@media (min-width:1600px){.pin .dev{--pw:min(360px,78vw,calc((100vh - 15rem)*.46));--pw:min(360px,78vw,calc((100svh - 15rem)*.46))}}
.glow{position:absolute;inset:6% 4%;background:radial-gradient(closest-side,rgba(184,242,70,.26),transparent);filter:blur(24px);pointer-events:none;opacity:.7}
.phone{position:relative;z-index:1;width:var(--pw);font-size:calc(var(--pw)/30);aspect-ratio:9/17.6;padding:1.1em;border-radius:4.4em;
  background:linear-gradient(145deg,#2d3324,#10130c);box-shadow:0 4em 8em -3em rgba(0,0,0,.85),inset 0 0 0 1px rgba(238,241,230,.09)}
.screen{position:relative;height:100%;border-radius:3.4em;overflow:hidden;background:#0b141a;isolation:isolate}
.notch{position:absolute;top:.9em;left:50%;translate:-50% 0;width:32%;height:2.2em;border-radius:1.2em;background:#000;z-index:5}
.sc{position:absolute;inset:0;display:flex;flex-direction:column}

/* scene 1: a WhatsApp chat */
.s-chat{background:#0b141a;color:#e9edef}
html:not(.anim) .s-chat{display:none}
.wa-bar{display:flex;align-items:center;gap:.9em;padding:4.4em 1.2em .9em;background:#1f2c34}
.wa-bar .av{width:3.4em;height:3.4em;border-radius:50%;background:var(--lime);color:var(--bg);display:grid;place-items:center;font-weight:700;font-size:1.2em}
.wa-bar b{display:block;font-weight:600;font-size:1.3em;line-height:1.2}
.wa-bar small{color:#8696a0;font-size:1em}
.wa-body{flex:1;padding:1em 1em;display:flex;flex-direction:column;gap:.6em;min-height:0}
.day{align-self:center;font-size:.95em;color:#8696a0;background:#182229;padding:.25em .8em;border-radius:.6em}
.slot{display:grid}
.slot>*{grid-area:1/1}
.slot.in>*{justify-self:start}
.msg{max-width:86%;padding:.5em .7em .4em;border-radius:1em;font-size:1.12em;line-height:1.36;color:#e9edef}
.msg time{display:block;text-align:right;font-size:.66em;color:#8696a0;margin-top:.2em}
.msg.out{align-self:flex-end;background:#005c4b;border-top-right-radius:.3em}
.msg.out time{color:#b3d3cc}
.msg.in{background:#202c33;border-top-left-radius:.3em}
.typing{display:flex;gap:.4em;align-items:center;background:#202c33;border-radius:1em;border-top-left-radius:.3em;padding:.95em 1.1em;width:max-content}
.typing i{width:.6em;height:.6em;border-radius:50%;background:#8696a0;animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}
@keyframes blink{50%{opacity:.3}}
.wa-type{display:flex;align-items:center;gap:.6em;padding:.6em .8em 1.3em;background:#0b141a}
.wa-type span{flex:1;background:#1f2c34;color:#8696a0;border-radius:2em;padding:.75em 1.1em;font-size:1.05em}
.wa-type i{width:3.2em;height:3.2em;border-radius:50%;background:#00a884;flex:none}

/* scene 2: the owner's single list */
.s-list{background:#f6f7f3;color:#16210a;padding:0 1.3em 1.3em}
.ls-bar{margin-top:4.1em;padding-bottom:1em;display:flex;align-items:baseline;justify-content:space-between}
.ls-bar b{font:400 2.5em/1 var(--serif);letter-spacing:-.025em;color:#10190a}
.ls-body{display:flex;flex-direction:column;gap:.9em}
.lead{background:#fff;border:1px solid #e3e7da;border-radius:1em;padding:1.1em 1.2em 1.15em}
.lead.new{border-left:.4em solid var(--lime);box-shadow:0 .8em 2em -1.2em rgba(40,70,10,.5)}
.lead-top{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin-bottom:.7em}
.pill{background:var(--lime);color:#10190a;font-weight:700;font-size:1em;padding:.3em .85em;border-radius:2em}
.when{font-size:1.05em;font-weight:600;color:#33401f}
.lead.new b{display:block;font-size:1.45em;line-height:1.2;color:#10190a}
.lead.new p{font-size:1.1em;color:#4b5541;margin-top:.15em}
.meta{display:flex;gap:.5em;margin-top:.8em}
.meta span{font-size:.95em;color:#4b5541;background:#eef1e6;border-radius:2em;padding:.25em .8em}
.lead.ghost{opacity:.85;padding:1.1em 1.2em}
.bar{display:block;height:.6em;border-radius:.3em;background:#dfe4d3;margin-top:.55em}
.bar.s{width:58%}
.lead.ghost .bar:first-child{margin-top:0;width:40%;height:.8em}
.anim .s-list,.anim .s-follow{opacity:0;visibility:hidden}

/* scene 3: the quote follow-up goes out on its own (also the static end state) */
html:not(.anim) .s-chat,html:not(.anim) .s-list{display:none}
.s-follow{background:#0b141a;color:#e9edef}
.booked{align-self:center;margin-top:.9em;display:inline-flex;align-items:center;gap:.5em;font:700 1.35em/1 var(--sans);color:var(--bg);background:var(--lime);padding:.7em 1.5em;border-radius:3em}
.booked::before{content:"";width:.9em;height:.5em;border-left:.17em solid var(--bg);border-bottom:.17em solid var(--bg);transform:rotate(-45deg) translate(.08em,-.12em)}

/* floating notes beside the phone, wide screens only */
.note-chip{display:none}
@media (min-width:1360px){
  .note-chip{display:block;position:absolute;z-index:3;width:9.6rem;padding:.7rem .9rem;background:rgba(25,29,18,.94);border:1px solid rgba(184,242,70,.4);
    font-size:.78rem;line-height:1.4;color:var(--cream);backdrop-filter:blur(6px);box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
  .note-chip::before{content:"";position:absolute;top:1.05rem;width:.9rem;height:1px;background:var(--lime)}
  .note-chip.l{right:calc(50% + var(--pw)/2 + .9rem)}
  .note-chip.r{left:calc(50% + var(--pw)/2 + .9rem)}
  .note-chip.l::before{left:100%}
  .note-chip.r::before{right:100%}
  .anim .note-chip{opacity:0;visibility:hidden}
}
.cap{margin-top:1.3rem;text-align:center;font-size:.82rem;color:var(--muted);max-width:32ch}
.cap b{color:var(--cream);font-weight:600}
.replay{display:none;align-items:center;gap:.5rem;min-height:44px;padding:.4rem .8rem;background:none;border:0;color:var(--lime);font-size:.86rem;font-weight:600;cursor:pointer;margin-top:.1rem}
.replay.show{display:inline-flex}
.replay:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- pinned mode (desktop): the copy column swaps text as you scroll ---- */
.pin .story{height:100vh;height:100svh;min-height:620px;padding:var(--hh) 0 0}
.pin .story-inner{height:100%;align-items:center}
.pin .copy{display:grid;grid-column:1;grid-row:1;position:relative;align-self:stretch;align-items:center}
.pin .copy>*{grid-area:1/1}
.pin .beats{display:grid;margin:0;grid-template-columns:none;align-self:center}
.pin .beat{grid-area:1/1;border:0;padding:0;visibility:hidden;opacity:0}
.pin .beat .n{font-size:clamp(3.4rem,5.6vw,5.4rem);margin-bottom:1.1rem}
.pin .beat h2{max-width:10.5em;font-size:clamp(2.1rem,3.6vw,3.6rem);line-height:1.04;margin-bottom:1.1rem;letter-spacing:-.03em}
.pin .beat p{font-size:clamp(1rem,1.25vw,1.15rem);max-width:38ch}
.pin .stage{grid-row:1;grid-column:2}
.pin .rail{display:block;visibility:hidden;align-self:end;margin-bottom:clamp(2rem,6vh,4rem);height:1px;background:var(--rule);position:relative}
.pin .rail i{position:absolute;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:left}
.pin .cap{margin-top:1rem}

/* =========================================================
   SECTIONS
   ========================================================= */
.sec{position:relative;padding:clamp(5rem,11vw,9rem) 0}
.band{background:rgba(21,24,15,.78);border-block:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;margin-bottom:clamp(2.75rem,6vw,4.5rem);max-width:920px}
#websites .sec-head{margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head h2{font-size:clamp(2.4rem,5.4vw,4.9rem);line-height:1.02;letter-spacing:-.03em}

/* reveal on scroll */
.anim .rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out) var(--d,0s),transform 1s var(--ease-out) var(--d,0s)}
.anim .rv.in{opacity:1;transform:none}

/* ---- in short ---- */
.short{padding:clamp(4rem,9vw,7rem) 0 clamp(3.5rem,8vw,6rem)}
.short .wrap{display:grid;gap:1.6rem}
.short h2{font:600 .72rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:.8rem}
.short h2::before{content:"";width:2rem;height:1px;background:var(--lime)}
.short p{font:400 clamp(1.55rem,3.3vw,2.85rem)/1.22 var(--serif);letter-spacing:-.022em;max-width:30em;color:var(--cream)}
.short p small{display:block;margin-top:1.6rem;font:350 1rem/1.6 var(--sans);letter-spacing:0;color:var(--muted);max-width:52ch}

/* ---- how it works ---- */
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.hs{position:relative;border-top:1px solid var(--rule);padding-top:1.6rem}
.hs::after{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out)}
.hs:hover::after{transform:scaleX(1)}
.hs .n{display:block;font:italic 400 clamp(2.6rem,4vw,3.4rem)/1 var(--serif);color:var(--lime);margin-bottom:1rem}
.hs h3{font-size:clamp(1.5rem,2.3vw,2rem);letter-spacing:-.025em;margin-bottom:.7rem}
.hs p{color:var(--muted);font-size:.98rem;max-width:36ch}
@media (max-width:760px){.how-steps{grid-template-columns:1fr;gap:2.2rem}}

/* ---- services ---- */
.svc-list{border-bottom:1px solid var(--rule)}
.svc{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1rem,2.4vw,2.2rem);row-gap:1.5rem;padding:clamp(2.25rem,4.5vw,3.5rem) 0}
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule)}
.svc::after{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out)}
.svc:hover::after,.svc:focus-within::after{transform:scaleX(1)}
.svc .tag{grid-column:1/4;font:italic 400 clamp(1.4rem,2vw,1.8rem)/1.2 var(--serif);color:var(--lime);letter-spacing:-.01em}
.svc .main{grid-column:4/9;display:flex;flex-direction:column;gap:1.25rem}
.svc .main h3{font-size:clamp(2.1rem,3.8vw,3.4rem);line-height:1.04;letter-spacing:-.03em}
.svc .main>p{color:var(--muted);max-width:46ch}
.svc .cost{grid-column:9/13;display:flex;flex-direction:column;gap:.5rem}
@media (max-width:899px){
  .svc .tag,.svc .main,.svc .cost{grid-column:1/-1}
  .svc{row-gap:1.6rem}
}
.ticks{display:flex;flex-direction:column;gap:.6rem;font-size:.95rem}
.ticks li{display:grid;grid-template-columns:1rem 1fr;gap:.7rem;align-items:baseline}
.ticks li::before{content:"";width:.5rem;height:.5rem;background:var(--lime);transform:translateY(-1px)}
.price{display:flex;flex-direction:column;gap:.35rem}
.price b{font:400 clamp(2.8rem,4.6vw,4.2rem)/1 var(--serif);letter-spacing:-.03em;color:var(--cream)}
.price span{font-size:.9rem;color:var(--muted)}
.incl{margin-top:1.1rem;border-top:1px solid var(--rule);overflow:clip}
.incl summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:48px;padding:.6rem 0;font-size:.92rem;font-weight:600;color:var(--lime)}
.incl summary::-webkit-details-marker{display:none}
.incl summary::after{content:"+";font:300 1.5rem/1 var(--sans);transition:transform .5s var(--ease)}
.incl[open] summary::after{transform:rotate(45deg)}
.incl .ticks{padding:.4rem 0 .6rem}
.incl summary:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- price table ---- */
.pt{margin-top:clamp(4rem,8vw,6.5rem);scroll-margin-top:5.5rem}
.pt h3{font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:-.03em;margin-bottom:2rem}
.pt table{width:100%;border-collapse:collapse;font-size:.98rem}
.pt th,.pt td{text-align:left;padding:1.4rem 1.2rem 1.4rem 0;border-top:1px solid var(--rule);vertical-align:top}
.pt thead th{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);padding-top:0;border-top:0;padding-bottom:1rem}
.pt tbody tr{transition:background .5s var(--ease)}
.pt tbody tr:hover{background:rgba(238,241,230,.03)}
.pt tbody tr:last-child th,.pt tbody tr:last-child td{border-bottom:1px solid var(--rule)}
.pt tbody th{font:400 clamp(1.25rem,1.8vw,1.55rem)/1.2 var(--serif);letter-spacing:-.015em;color:var(--cream);white-space:nowrap}
.pt td{color:var(--muted);max-width:38ch}
.pt td.n{color:var(--cream);font:400 1.5rem/1.2 var(--serif);letter-spacing:-.02em;white-space:nowrap}
.pt td.n small{color:var(--muted);font:350 .8rem var(--sans);letter-spacing:0;margin-left:.3rem}
@media (max-width:860px){
  .pt thead{position:absolute;left:-9999px}
  .pt tr{display:block;padding:1.4rem 0;border-top:1px solid var(--rule)}
  .pt tbody tr:last-child{border-bottom:1px solid var(--rule)}
  .pt th,.pt td{display:block;border:0 !important;padding:.2rem 0;white-space:normal;max-width:none}
  .pt tbody th{margin-bottom:.35rem;font-size:1.5rem}
  .pt td:not([data-l]){margin-bottom:.6rem}
  .pt td[data-l]{display:flex;align-items:baseline;gap:.9rem}
  .pt td[data-l]::before{content:attr(data-l);min-width:4.6rem;font:600 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
  .pt td.dash{display:none}
}
.small{margin-top:1.6rem;font-size:.88rem;color:var(--muted)}

/* ---- websites ---- */
#websites h2{font-size:clamp(2rem,3.9vw,3.4rem);line-height:1.06;letter-spacing:-.03em;max-width:22em}
.web-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);margin-bottom:clamp(2.5rem,5vw,4rem)}
.web-steps .ln{position:absolute;top:0;left:0;right:0;height:1px;background:var(--lime);transform-origin:left}
.ws{padding-top:2rem;position:relative}
.ws::before{content:"";position:absolute;top:-.3rem;left:0;width:.6rem;height:.6rem;background:var(--lime)}
.ws b{display:block;font:400 clamp(1.5rem,2.4vw,2rem)/1.15 var(--serif);letter-spacing:-.02em;margin-bottom:.7rem}
.ws b i{font-style:italic;color:var(--lime);margin-right:.4rem}
.ws p{color:var(--muted);font-size:.96rem;max-width:34ch}
@media (max-width:760px){
  .web-steps{grid-template-columns:1fr;gap:0}
  .web-steps .ln{top:0;bottom:0;left:0;right:auto;width:1px;height:auto;transform-origin:top}
  .ws{padding:0 0 2.2rem 1.8rem}
  .ws::before{top:.45rem;left:-.3rem}
}
.plans{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1rem,2.4vw,2rem)}
@media (max-width:899px){.plans{grid-template-columns:1fr}}
.plan{padding:clamp(1.75rem,3.4vw,3rem);border-top:1px solid var(--rule);background:var(--bg-3);display:flex;flex-direction:column;gap:1.6rem}
.plan.main{border-top:4px solid var(--lime);background:radial-gradient(90% 70% at 100% 0%,rgba(184,242,70,.1),transparent 65%),var(--bg-3)}
.plan .head{display:flex;flex-direction:column;gap:.4rem}
.plan h3{font-size:clamp(1.4rem,2vw,1.8rem);color:var(--muted);font-weight:400}
.plan .amt{font:400 clamp(2.8rem,4.8vw,4.2rem)/.95 var(--serif);letter-spacing:-.04em;color:var(--lime)}
.plan:not(.main) .amt{font-size:clamp(2.4rem,4vw,3.4rem);color:var(--cream)}
.plan .amt small{display:block;font:350 .95rem/1.4 var(--sans);letter-spacing:0;color:var(--muted);margin-top:.6rem}
.plan.main .ticks{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 2rem}
@media (max-width:640px){.plan.main .ticks{grid-template-columns:1fr}}
.extra{margin-top:clamp(1rem,2.4vw,2rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,2rem)}
@media (max-width:760px){.extra{grid-template-columns:1fr}}
.box{padding:clamp(1.5rem,3vw,2.4rem);border-top:1px solid var(--rule);background:rgba(25,29,18,.5)}
.box h3{font-size:1.6rem;margin-bottom:.8rem}
.box p,.box li{color:var(--muted);font-size:.95rem}
.box .amt{font:400 2.4rem/1 var(--serif);letter-spacing:-.03em;color:var(--cream);margin:.2rem 0 .9rem}
.box .amt small{font:350 .9rem var(--sans);color:var(--muted);margin-left:.4rem;letter-spacing:0}
.box ul{display:flex;flex-direction:column;gap:.4rem}
.box li::before{content:"\00d7";color:var(--lime);margin-right:.7rem}
.straight{margin-top:clamp(1rem,2.4vw,2rem);padding:clamp(1.75rem,3.5vw,3rem);background:var(--lime);color:var(--bg);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem 3rem}
.straight p{font:400 clamp(1.3rem,2.3vw,1.9rem)/1.3 var(--serif);letter-spacing:-.015em;flex:1 1 34ch}

/* ---- why ---- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
.why>div{border-top:1px solid var(--rule);padding-top:1.6rem}
.why>div:nth-child(2){margin-top:clamp(0rem,4vw,4rem)}
.why>div:nth-child(3){margin-top:clamp(0rem,8vw,8rem)}
.why h3{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.025em;margin-bottom:.8rem}
.why p{color:var(--muted);font-size:.98rem;max-width:32ch}
@media (max-width:760px){.why{grid-template-columns:1fr}.why>div:nth-child(n){margin-top:0}}

/* ---- faq ---- */
#faq .wrap{display:grid;gap:2.5rem}
@media (min-width:1000px){#faq .wrap{grid-template-columns:5fr 7fr;gap:clamp(3rem,7vw,7rem);align-items:start}#faq .sec-head{position:sticky;top:7rem;margin-bottom:0}}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;min-height:56px;
  padding:1.4rem 0;font:400 clamp(1.2rem,1.9vw,1.55rem)/1.25 var(--serif);letter-spacing:-.015em;transition:color .5s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--lime)}
.faq summary::after{content:"+";flex:none;width:2.4rem;height:2.4rem;border:1px solid var(--rule);display:grid;place-items:center;
  font:300 1.4rem/1 var(--sans);color:var(--lime);transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease)}
.faq summary:hover::after,.faq details[open] summary::after{border-color:var(--lime)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>p{color:var(--muted);padding:0 4rem 1.7rem 0;max-width:62ch}
.faq details{overflow:clip}

/* ---- contact ---- */
.contact .wrap{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,6vw,4rem);align-items:start}
@media (min-width:900px){.contact .wrap{grid-template-columns:7fr 5fr;gap:clamp(3rem,7vw,7rem)}}
.contact h2{font-size:clamp(2.8rem,7.4vw,6.6rem);line-height:.98;letter-spacing:-.04em;margin:1.4rem 0 1.6rem}
.contact .big{margin-top:2.2rem}
.contact .mail{display:block;margin-top:1.4rem;font-size:.95rem;color:var(--muted)}
.contact .mail a{color:var(--cream);text-underline-offset:3px}
form{display:flex;flex-direction:column;gap:1.5rem;padding:clamp(1.6rem,3vw,2.4rem);border-top:4px solid var(--lime);background:var(--bg-3)}
form .t{font:400 1.7rem/1.15 var(--serif);letter-spacing:-.02em}
label span{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.2rem}
input,textarea{width:100%;font:400 1.02rem var(--sans);color:var(--cream);background:transparent;border:0;border-bottom:1px solid #7C8670;
  border-radius:0;padding:.75rem 0;transition:border-color .4s var(--ease)}
input:focus,textarea:focus{border-bottom-color:var(--lime);outline:0}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
input:user-invalid,textarea:user-invalid{border-bottom-color:var(--red)}
textarea{resize:vertical;min-height:5.5rem}
.hp{position:absolute;left:-9999px}
form .btn{align-self:flex-start}
form .btn.sending{pointer-events:none;opacity:.7}
form .fine{font-size:.8rem;color:var(--muted)}
form .fine a{color:var(--cream)}

/* ---- mobile WhatsApp bar ---- */
.mbar{position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));z-index:40;display:none;
  transform:translateY(160%);visibility:hidden;transition:transform .5s var(--ease-out),visibility .5s}
.mbar.show{transform:none;visibility:visible}
.mbar .btn{width:100%;box-shadow:0 14px 30px -12px rgba(0,0,0,.85)}
@media (max-width:760px){.mbar{display:block}}

@media print{.anim .rv{opacity:1;transform:none}.stage{display:none}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none}}

/* ---- dashboard: tab switcher, browser frame and phone frame ----
   Without scripts: the Today shot and all four captions show. The tabs stay
   hidden until site.js adds .live to .dboard. */
.dboard{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3rem);grid-template-areas:"ctl" "stage" "info"}
.dash-ctl{grid-area:ctl}.dash-stage{grid-area:stage}.dash-info{grid-area:info}
@media (min-width:1000px){
  .dboard{grid-template-columns:5fr 7fr;column-gap:clamp(2.5rem,5vw,5rem);row-gap:2.5rem;grid-template-areas:"ctl stage" "info stage";grid-template-rows:auto 1fr}
  .dash-stage{align-self:start}
}
.dash-tabs{display:none;flex-wrap:wrap;gap:.5rem}
.dboard.live .dash-tabs{display:flex}
.dash-tabs button{min-height:44px;padding:.55rem 1.15rem;border:1px solid var(--rule);background:transparent;color:var(--muted);font:600 .86rem/1 var(--sans);letter-spacing:.02em;cursor:pointer;transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.dash-tabs button:hover{color:var(--cream);border-color:rgba(238,241,230,.4)}
.dash-tabs button[aria-selected="true"]{background:var(--lime);border-color:var(--lime);color:var(--bg)}
.dash-caps{display:flex;flex-direction:column}
.dash-caps li{padding:1rem 0;border-top:1px solid var(--rule);font:400 clamp(1.15rem,1.6vw,1.4rem)/1.35 var(--serif);letter-spacing:-.01em;color:var(--cream)}
.dash-caps li:last-child{border-bottom:1px solid var(--rule)}
.dash-caps b{display:block;margin-bottom:.3rem;font:600 .7rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}
.dboard.live .dash-caps{min-height:7.2rem;margin-top:1.4rem}
.dboard.live .dash-caps li{display:none;border:0;padding:0}
.dboard.live .dash-caps li.on{display:block;animation:dashcap .5s var(--ease-out)}
.dboard.live .dash-caps b{display:none}
@keyframes dashcap{from{opacity:0;transform:translateY(6px)}}
@media (min-width:1000px){.dboard.live .dash-caps{min-height:0}}

.dash-stage{position:relative;display:flex;flex-direction:column;gap:1.4rem;max-width:760px;width:100%;margin-inline:auto}
.dash-stage::before{content:"";position:absolute;inset:8% 0 0;z-index:-1;background:radial-gradient(60% 55% at 50% 50%,rgba(184,242,70,.13),transparent 70%);pointer-events:none}
.shots{display:grid}
.shots img{grid-area:1/1;width:100%;height:auto;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .5s var(--ease),transform .6s var(--ease-out),visibility 0s linear .5s}
.shots img.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.frame-d{border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:#0a0c09;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.frame-d .bar{display:flex;align-items:center;gap:.4rem;height:2.25rem;padding:0 .9rem;background:#15180F;border-bottom:1px solid var(--line)}
.frame-d .bar i{width:.6rem;height:.6rem;border-radius:50%;background:#2A2F22}
.frame-d .bar span{margin-left:.9rem;font-size:.72rem;color:var(--muted)}
.frame-d .bar em{margin-left:auto;font:600 .64rem/1 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .5rem;border:1px solid rgba(184,242,70,.5);color:var(--lime)}
.frame-p{width:min(240px,72%);margin-inline:auto;order:-1;border:6px solid #20241A;border-radius:30px;overflow:hidden;background:#f3f5ef;box-shadow:0 40px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(238,241,230,.12)}
@media (min-width:700px){
  .dash-stage{display:block;padding-bottom:12%}
  .frame-d{width:88%}
  .frame-p{position:absolute;right:0;bottom:0;width:28%;margin:0}
}
.dash-info{display:flex;flex-direction:column;gap:1.6rem}
.dash-info .price{margin-top:.4rem}
.dash-bk{color:var(--muted);font-size:.92rem;max-width:44ch;margin-top:-.6rem}
.dash-info .cta-row{margin-top:.4rem}
.dash-info .small{margin-top:0}
.shots img[hidden]{display:none}
#dashboard .sec-head{margin-bottom:clamp(1.75rem,4vw,3rem)}
.dboard.live .dash-caps{min-height:4.8rem}
@media (max-width:520px){
  .dash-tabs{flex-wrap:nowrap;gap:.35rem}
  .dash-tabs button{flex:1 1 0;min-width:0;padding:.55rem .25rem;font-size:.8rem}
}
@media (min-width:1000px){.dboard.live .dash-caps{min-height:0}}

/* Hero background: soft glow, a dot field that fades out, one light arc (12 Oct 2026). Replaces the gridlines and the network svg. */
.rings{display:none}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(55% 65% at 76% 45%,rgba(184,242,70,.14),transparent 62%),
             radial-gradient(45% 55% at 96% 100%,rgba(15,122,95,.26),transparent 70%),
             radial-gradient(40% 50% at 8% 0%,rgba(184,242,70,.06),transparent 70%)}
.hero-bg::after{content:"";position:absolute;inset:0;opacity:.06;
  background-image: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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-bg .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(238,241,230,.13) 1px,transparent 1.2px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(65% 75% at 72% 50%,#000 15%,transparent 75%);mask-image:radial-gradient(65% 75% at 72% 50%,#000 15%,transparent 75%)}
.hero-bg .arc{position:absolute;width:140vw;aspect-ratio:1;left:18vw;top:62%;border-radius:50%;border:1px solid rgba(184,242,70,.32);
  box-shadow:0 0 120px rgba(184,242,70,.1),inset 0 0 120px rgba(184,242,70,.05)}
@media (max-width:899px){.hero-bg .arc{width:220vw;left:-30vw;top:70%}.hero-bg .dots{-webkit-mask-image:radial-gradient(90% 60% at 50% 70%,#000 10%,transparent 75%);mask-image:radial-gradient(90% 60% at 50% 70%,#000 10%,transparent 75%)}}

/* Offer strip along the bottom of the first screen */
.offers{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;max-width:var(--wrap);margin:clamp(2rem,6vw,3rem) auto 0;padding-inline:var(--gut)}
.offers a{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-top:1px solid rgba(238,241,230,.1);color:var(--muted);font-size:.9rem;text-decoration:none}
.offers b{color:var(--cream,#eef1e6);font-weight:600;font-size:.95rem}
.offers a:hover b{color:var(--lime)}
@media (min-width:900px){.offers{grid-template-columns:repeat(4,1fr);column-gap:2rem}}
.pin .story{padding-bottom:5.5rem}
.pin .offers{position:absolute;left:0;right:0;bottom:0;margin:0 auto;padding-bottom:12px}
.pin .intro .note{display:none}

/* Wider layout, same comfortable line length for reading. */
main p{max-width:min(72ch,58rem)}