:root{
  --bg:#F6F6F4; --card:#FFFFFF; --ink:#1C1F23; --ink-2:#444A52; --muted:#6B7178;
  --plum:#C2410C; --plum-2:#9A3412; --plum-soft:#EFEEEA; --gold:#FB923C; --gold-soft:#FFEDD5;
  --rule:#E3E3DF;
  --display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Figtree","Segoe UI",Roboto,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15171A; --card:#1D2024; --ink:#EEF0F2; --ink-2:#C9CDD2; --muted:#9AA0A7;
    --plum:#FB923C; --plum-2:#FDBA74; --plum-soft:#202327; --gold:#FDBA74; --gold-soft:#3A2A1C; --rule:#2E3237;
  }
}
:root[data-theme="dark"]{
  --bg:#15171A; --card:#1D2024; --ink:#EEF0F2; --ink-2:#C9CDD2; --muted:#9AA0A7;
  --plum:#FB923C; --plum-2:#FDBA74; --plum-soft:#202327; --gold:#FDBA74; --gold-soft:#3A2A1C; --rule:#2E3237;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(76px + env(safe-area-inset-top,0px)); scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1.05rem; line-height:1.6}
img{max-width:100%; display:block}
a{color:var(--plum)}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display); line-height:1.08; margin:0 0 .55em; letter-spacing:-0.025em; font-weight:700}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.3rem; letter-spacing:-0.01em}
p{margin:0 0 1em; max-width:66ch}
.wrap{width:min(1180px,100% - 2.5rem); margin-inline:auto}
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.lede{font-size:1.2rem; color:var(--ink-2); max-width:58ch}
.small{font-size:.9rem; color:var(--muted)}

header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:70px; gap:1rem}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:-0.02em}
.brand svg{width:30px; height:30px}
nav.main{display:flex; gap:1.6rem; font-weight:500; font-size:.97rem}
nav.main a{color:var(--ink-2); text-decoration:none}
nav.main a:hover{color:var(--plum)}
.btn{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--display); font-weight:600; font-size:1rem; padding:.78rem 1.3rem; border-radius:999px; text-decoration:none; border:1.5px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer}
.btn.solid{background:var(--plum); border-color:var(--plum); color:#fff}
.btn.solid:hover{background:var(--plum-2); border-color:var(--plum-2)}
:root[data-theme="dark"] .btn.solid{color:#15171A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.solid{color:#15171A}}
@media (max-width:1000px){nav.main{display:none}}

/* hero: the work is the hero */
.hero{padding-bottom:0}
.hero h1{max-width:15ch}
.hero .row{display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end}
@media (max-width:860px){.hero .row{grid-template-columns:1fr}}
.hero .cta{display:flex; gap:.8rem; flex-wrap:wrap}
.frame{background:var(--card); border:1px solid var(--rule); border-radius:12px; overflow:hidden; box-shadow:0 18px 40px -24px rgba(28,31,35,.4)}
.frame .bar{display:flex; align-items:center; gap:.35rem; padding:.45rem .6rem; border-bottom:1px solid var(--rule); font-size:.74rem; color:var(--muted)}
.frame .bar i{width:7px; height:7px; border-radius:50%; background:var(--rule); display:block}
.frame .bar span{min-width:0; margin-left:.4rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.frame img{aspect-ratio:16/10; width:100%; height:auto; object-fit:cover; object-position:top}

/* services */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem 2rem; margin-top:2.5rem}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}}
.svc h3{padding-top:1rem; border-top:3px solid var(--plum)}
.svc p{color:var(--ink-2); font-size:1rem}

.trust{list-style:none; padding:0; margin:1.8rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; font-family:var(--display); font-weight:500; font-size:.95rem; color:var(--ink-2)}
.trust li{display:flex; align-items:center; gap:.5rem}
.trust li::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--plum)}
.svc .num{font-family:var(--display); font-weight:700; color:var(--plum); font-size:.95rem}
.svc .from{font-family:var(--display); font-weight:600; color:var(--ink)}
.principle{background:#1C1F23; color:#EEF0F2}
.principle .lede,.principle p{color:#C9CDD2}
.principle h2{color:#fff}
.principle-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.5rem,4vw,4rem); align-items:start}
@media (max-width:860px){.principle-grid{grid-template-columns:1fr}}
.hero-video{position:relative; margin:clamp(2.2rem,5vw,3.4rem) 0 0; border-radius:18px; overflow:hidden; background:#1C1F23; box-shadow:0 30px 60px -30px rgba(28,31,35,.55); aspect-ratio:16/9}
.hero-video video{display:block; width:100%; height:100%; object-fit:cover}
.sound{position:absolute; right:16px; bottom:16px; display:flex; align-items:center; gap:.45rem; font-family:var(--display); font-weight:600; font-size:.95rem; padding:.6rem 1rem; border-radius:999px; border:0; background:rgba(255,255,255,.94); color:#1C1F23; cursor:pointer}
.sound:hover{background:#fff}
.sound[hidden]{display:none}
.svc ul.get{margin:.2rem 0 1rem; padding-left:1.1rem; font-size:.97rem; color:var(--ink-2)}
.svc ul.get li{margin-bottom:.35rem}
.cc{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); margin-top:2.2rem; align-items:start}
@media (max-width:900px){.cc{grid-template-columns:1fr}}
.cc-mock{position:relative; display:grid; grid-template-columns:150px 1fr; background:var(--card); border:1px solid var(--rule); border-radius:16px; overflow:hidden; box-shadow:0 18px 40px -24px rgba(28,31,35,.4); font-size:.92rem}
@media (max-width:520px){.cc-mock{grid-template-columns:1fr}.cc-side{display:none!important}}
.cc-side{background:#1C1F23; color:#C9CDD2; padding:1.1rem .9rem; display:flex; flex-direction:column; gap:.2rem; font-family:var(--display)}
.cc-side b{color:#fff; margin-bottom:.7rem}
.cc-side span{padding:.4rem .55rem; border-radius:7px}
.cc-side .on{background:#33373C; color:#fff}
.cc-main{padding:1.1rem 1.2rem 2.2rem}
.cc-h{font-family:var(--display); font-weight:700; font-size:1.2rem; margin-bottom:.7rem}
.cc-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.8rem}
.cc-kpis div{border:1px solid var(--rule); border-radius:10px; padding:.55rem .65rem; color:var(--muted); font-size:.8rem; line-height:1.3}
.cc-kpis b{display:block; font-family:var(--display); font-size:1.1rem; color:var(--ink)}
.cc-row{display:flex; align-items:center; gap:.6rem; padding:.6rem 0; border-bottom:1px solid var(--rule)}
.cc-row em{margin-left:auto; font-style:normal; font-size:.78rem; color:var(--muted)}
.cc-row .t{font-family:var(--display); font-weight:600; font-size:.74rem; padding:.12rem .5rem; border-radius:999px; background:var(--plum-soft); color:var(--ink-2); white-space:nowrap}
.cc-row .t.new{background:#FFEDD5; color:#9A3412}
.cc-row .t.warn{background:#FEE2E2; color:#991B1B}
.cc-note{position:absolute; right:12px; bottom:8px; margin:0; font-size:.75rem; color:var(--muted)}
.mods{display:grid; gap:1.3rem}
.mods h3{font-size:1.1rem; margin-bottom:.3rem; padding-left:.8rem; border-left:3px solid var(--plum)}
.mods p{margin:0; color:var(--ink-2); font-size:.98rem}
.headshot{width:160px; height:160px; border-radius:50%; object-fit:cover; border:4px solid var(--card); box-shadow:0 10px 30px -15px rgba(28,31,35,.5)}
/* work detail */
.work{background:var(--plum-soft)}
.proj{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; padding:2.6rem 0; border-bottom:1px solid var(--rule)}
.proj:last-child{border-bottom:0}
.proj:nth-child(even) .shot{order:2}
@media (max-width:860px){.proj{grid-template-columns:1fr}.proj:nth-child(even) .shot{order:0}}
.proj .kind{font-family:var(--display); font-weight:600; color:var(--plum); margin-bottom:.35rem}
.proj ul{margin:.4rem 0 1rem; padding-left:1.1rem; color:var(--ink-2)}
.proj li{margin-bottom:.3rem}
.proj .visit{font-family:var(--display); font-weight:600}

/* pricing */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:1.6rem; display:flex; flex-direction:column}
.tier.feature{background:#1C1F23; border:2px solid #FB923C; color:#fff}
.tier.feature .fit,.tier.feature li{color:#C9CDD2}
.price{font-family:var(--display); font-weight:700; font-size:2.4rem; letter-spacing:-0.03em; margin:.1rem 0}
.price span{font-size:1rem; font-weight:500; opacity:.75; letter-spacing:0}
.fit{color:var(--muted); font-size:.95rem; margin-bottom:1rem}
.tier ul{margin:0; padding-left:1.1rem; font-size:.96rem}
.tier li{margin-bottom:.35rem}
.pill{align-self:flex-start; font-family:var(--display); font-weight:600; font-size:.82rem; background:var(--gold); color:#1C1F23; padding:.2rem .7rem; border-radius:999px; margin-bottom:.7rem}
.block-title{margin-top:3.5rem}
.table-scroll{overflow-x:auto; margin-top:1.2rem; background:var(--card); border:1px solid var(--rule); border-radius:16px}
table{width:100%; border-collapse:collapse; font-size:.98rem}
th,td{text-align:left; padding:.95rem 1.1rem; border-bottom:1px solid var(--rule); vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-family:var(--display); font-weight:600; color:var(--muted)}
td:first-child{font-family:var(--display); font-weight:600; min-width:11rem}
td:nth-child(2){font-family:var(--display); font-weight:700; white-space:nowrap}
td:last-child{color:var(--ink-2); min-width:20rem}

/* care */
.care{background:var(--card); border-block:1px solid var(--rule)}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--rule); border-radius:16px; padding:1.6rem; background:var(--bg)}
.plan ul{padding-left:1.1rem; font-size:.96rem; margin:.8rem 0 0}
.plan li{margin-bottom:.35rem}

/* estimator */
.est{display:grid; grid-template-columns:1.25fr .75fr; gap:2rem; margin-top:2rem; align-items:start}
@media (max-width:900px){.est{grid-template-columns:1fr}}
.est fieldset{border:1px solid var(--rule); border-radius:16px; padding:1rem 1.3rem 1.1rem; margin:0 0 1rem; background:var(--card)}
.est legend{font-family:var(--display); font-weight:700; padding:0 .4rem}
.opt{display:flex; gap:.6rem; align-items:flex-start; padding:.38rem 0; font-size:.98rem; cursor:pointer}
.opt input{margin-top:.3rem; accent-color:var(--plum); width:1.05rem; height:1.05rem; flex:none}
.opt .amt{margin-left:auto; font-family:var(--display); font-weight:600; white-space:nowrap; padding-left:1rem}
.total{position:sticky; top:calc(90px + env(safe-area-inset-top,0px)); background:#1C1F23; color:#F1ECF4; border-radius:16px; padding:1.7rem; font-family:var(--display)}
.total .row{display:flex; justify-content:space-between; align-items:baseline; padding:.65rem 0; border-bottom:1px solid #33373C}
.total .big{font-size:2rem; font-weight:700; color:var(--gold); letter-spacing:-0.02em}
.total p{font-family:var(--body); font-size:.9rem; color:#A9AFB5; margin:1rem 0 0}
.total .disc{display:flex; gap:.5rem; align-items:center; margin-top:.9rem; font-size:.94rem; cursor:pointer}
.total .disc input{accent-color:#FB923C}

/* process */
.steps{list-style:none; counter-reset:s; padding:0; margin:2rem 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s}
.steps li::before{content:counter(s); display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--gold-soft); color:var(--ink); font-family:var(--display); font-weight:700; margin-bottom:.8rem}
.steps p{font-size:.98rem; color:var(--ink-2)}

/* founder */
.founder{display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:start}
@media (max-width:700px){.founder{grid-template-columns:1fr}}

.faq details{border-bottom:1px solid var(--rule); padding:1.05rem 0}
.faq summary{font-family:var(--display); font-weight:600; font-size:1.1rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--plum); font-weight:700}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:.7rem 0 0; color:var(--ink-2)}

.contact{background:#1C1F23; color:#fff; border-radius:28px; padding:clamp(2.2rem,5vw,3.6rem); margin-bottom:3rem}
.contact h2{color:#fff; max-width:18ch}
.contact p{color:#C9CDD2}
.contact .btn{background:#FB923C; border-color:#FB923C; color:#1C1F23}
.contact .btn:hover{background:#fff; border-color:#fff}
footer.foot{padding:1.5rem 0 2.5rem; font-size:.9rem; color:var(--muted)}
footer.foot .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem}

/* ===== multi-page additions ===== */
.skip{position:absolute; left:-999px; top:8px; background:var(--card); padding:.5rem 1rem; border-radius:8px; z-index:99}
.skip:focus{left:12px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
nav.main a[aria-current="page"]{color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--plum)}
.top-cta{display:flex; align-items:center; gap:.6rem}
.mnav{display:none; position:relative}
.mnav summary{list-style:none; cursor:pointer; width:44px; height:44px; display:grid; place-content:center; gap:5px; border-radius:10px; border:1px solid var(--rule)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{display:block; width:20px; height:2px; background:var(--ink); border-radius:2px}
.mnav nav{position:absolute; right:0; top:52px; background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:.5rem; min-width:200px; box-shadow:0 18px 40px -20px rgba(28,31,35,.4); display:grid}
.mnav nav a{padding:.75rem 1rem; text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:600; border-radius:8px}
.mnav nav a:hover{background:var(--plum-soft)}
@media (max-width:1000px){.mnav{display:block} .top-cta .btn{padding:.6rem 1rem; font-size:.92rem}}
h1.pg{font-size:clamp(2.3rem,5.2vw,4rem); max-width:18ch}
.pg-hero{padding-bottom:clamp(1.5rem,4vw,2.5rem)}
.svc .more{font-family:var(--display); font-weight:600; text-decoration:none}
.svc .more::after{content:" \2192"}
footer.foot{border-top:1px solid var(--rule); padding:2.2rem 0 2.6rem}
footer.foot .wrap{display:grid; grid-template-columns:1.3fr 1fr auto; gap:1.2rem 2rem; align-items:start}
@media (max-width:760px){footer.foot .wrap{grid-template-columns:1fr}}
.foot-brand{display:grid; gap:.2rem}
.foot-brand b{font-family:var(--display); color:var(--ink); font-size:1.1rem}
footer.foot nav{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem}
footer.foot nav a{color:var(--ink-2); text-decoration:none}

/* home */
.hd{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
@media (max-width:860px){.hd{grid-template-columns:1fr}}
.hd-tabs{display:flex; flex-wrap:wrap; gap:.5rem; padding:1.4rem; border-radius:18px; background:#1C1F23; text-decoration:none}
.hd-tabs span{font-family:var(--display); font-weight:600; font-size:.95rem; color:#C9CDD2; background:#2A2E33; padding:.5rem .85rem; border-radius:999px}
.hd-tabs span:first-child{background:#FB923C; color:#1C1F23}
.hd-tabs:hover span{color:#fff}
.hw{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2rem}
@media (max-width:860px){.hw{grid-template-columns:1fr}}
.hw a{text-decoration:none; color:var(--ink); display:grid; gap:.35rem; min-width:0}
.hw a b{font-family:var(--display); font-size:1.1rem; margin-top:.5rem}
.hw a span{color:var(--muted); font-size:.95rem}
.hw a:hover .frame{border-color:var(--plum)}

/* software demo */
.demo-sec{padding-top:0}
.app{border-radius:18px; overflow:hidden; border:1px solid var(--rule); background:var(--card); box-shadow:0 30px 60px -34px rgba(28,31,35,.5)}
.app-top{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 1.2rem; background:#1C1F23; color:#C9CDD2; font-size:.85rem}
.app-name{display:flex; align-items:center; gap:.55rem; font-family:var(--display); font-weight:700; color:#fff; font-size:.98rem}
.app-name i{width:10px; height:10px; border-radius:3px; background:#FB923C}
@media (max-width:600px){.app-user{display:none}}
.app-tabs{display:flex; gap:.25rem; overflow-x:auto; padding:.35rem .6rem .6rem; background:#1C1F23; scrollbar-width:thin}
.app-tabs button{flex:none; font-family:var(--display); font-weight:600; font-size:.93rem; color:#C9CDD2; background:transparent; border:0; padding:.55rem .85rem; border-radius:8px; cursor:pointer}
.app-tabs button:hover{color:#fff; background:#2A2E33}
.app-tabs button[aria-selected="true"]{background:#FB923C; color:#1C1F23}
.app-panel{display:grid; grid-template-columns:1.55fr 1fr; min-height:470px}
.app-panel[hidden]{display:none}
@media (max-width:900px){.app-panel{grid-template-columns:1fr}}
.scr{padding:1.3rem 1.4rem 1.6rem; background:var(--bg); min-width:0; font-size:.92rem}
.scr-h{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; font-family:var(--display); font-weight:700; font-size:1.2rem; margin-bottom:1rem}
.scr-h .muted{font-family:var(--body); font-weight:400; font-size:.85rem}
.scr-h .acts{margin-left:auto; display:flex; gap:.4rem; flex-wrap:wrap}
.muted{color:var(--muted)}
.bx{display:inline-block; font-family:var(--display); font-weight:600; font-size:.8rem; padding:.35rem .75rem; border-radius:999px; border:1px solid var(--rule); background:var(--card); color:var(--ink); white-space:nowrap}
.bx.solid{background:var(--plum); border-color:var(--plum); color:#fff}
.pl{display:inline-block; font-family:var(--display); font-weight:600; font-size:.74rem; padding:.15rem .55rem; border-radius:999px; background:var(--plum-soft); color:var(--ink-2); white-space:nowrap}
.pl.new{background:#FFEDD5; color:#9A3412}
.pl.ok{background:#DCFCE7; color:#166534}
.pl.bad{background:#FEE2E2; color:#991B1B}
.kp4{display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; margin-bottom:1rem}
@media (max-width:560px){.kp4{grid-template-columns:repeat(2,1fr)}}
.kp{background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:.65rem .75rem; color:var(--muted); font-size:.8rem; line-height:1.3}
.kp b{display:block; font-family:var(--display); font-size:1.25rem; color:var(--ink); letter-spacing:-0.02em}
.kp.warn b{color:#B91C1C} .kp.ok b{color:#15803D}
.lst{background:var(--card); border:1px solid var(--rule); border-radius:12px; overflow:hidden}
.li{display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .6rem; padding:.65rem .85rem; border-bottom:1px solid var(--rule)}
.li:last-child{border-bottom:0}
.li em{margin-left:auto; font-style:normal; font-size:.78rem; color:var(--muted)}
.mt{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--rule); border-radius:12px; overflow:hidden; font-size:.86rem; display:table}
.mt th{font-family:var(--display); font-weight:600; font-size:.78rem; color:var(--muted); text-align:left; padding:.55rem .75rem; border-bottom:1px solid var(--rule)}
.mt td{padding:.6rem .75rem; border-bottom:1px solid var(--rule); vertical-align:middle; min-width:0}
.mt td:first-child{font-family:var(--body); font-weight:400; min-width:0}
.mt td:nth-child(2){font-family:var(--body); font-weight:400; white-space:normal}
.mt td:last-child{min-width:0; color:inherit}
.mt tr:last-child td{border-bottom:0}
.mt small{display:block; color:var(--muted); font-size:.75rem}
@media (max-width:560px){.mt th:nth-child(2),.mt td:nth-child(2){display:none}}
.note-row{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:.9rem; font-size:.85rem}
.kv{display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr; gap:.3rem .7rem; background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:.7rem .9rem; font-size:.86rem}
.kv span{color:var(--muted)}
@media (max-width:560px){.kv{grid-template-columns:auto 1fr}}
.box{background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:.8rem .9rem}
.box-h{font-family:var(--display); font-weight:700; font-size:.92rem; margin-bottom:.55rem}
.two{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.vbars{display:flex; align-items:flex-end; gap:5px; height:130px}
.vbars i{flex:1; background:#FDBA74; border-radius:4px 4px 0 0}
.vbars i.hi{background:var(--plum)}
.hb{display:grid; grid-template-columns:90px 1fr 28px; align-items:center; gap:.5rem; font-size:.8rem; margin:.45rem 0}
.hb i{height:10px; border-radius:5px; background:var(--plum); display:block}
.hb b{font-family:var(--display); text-align:right}
.seg{display:inline-flex; gap:2px; margin-left:auto; font-family:var(--display); font-weight:600; font-size:.76rem}
.seg span{padding:.25rem .55rem; border-radius:999px; border:1px solid var(--rule); background:var(--card)}
.seg .on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.search{background:var(--card); border:1px solid var(--rule); border-radius:999px; padding:.5rem .9rem; color:var(--muted); margin-bottom:.8rem; font-size:.86rem}
.feed{display:grid; gap:.6rem}
.fi{display:grid; grid-template-columns:auto 1fr auto; gap:.15rem .7rem; align-items:center; background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:.7rem .85rem}
.fi b{grid-column:2} .fi small{grid-column:2; color:var(--muted)} .fi .pl{grid-row:1/3} .fi .bx{grid-column:3; grid-row:1/3}
@media (max-width:560px){.fi{grid-template-columns:1fr}.fi b,.fi small,.fi .pl,.fi .bx{grid-column:1; grid-row:auto; justify-self:start}}
.chips{display:flex; flex-wrap:wrap; gap:.25rem}
.chips i{font-style:normal; font-size:.72rem; padding:.12rem .45rem; border-radius:6px; background:var(--plum-soft)}
.log{background:var(--card); border:1px solid var(--rule); border-radius:12px; font-size:.86rem}
.log div{padding:.65rem .85rem; border-bottom:1px solid var(--rule)}
.log div:last-child{border-bottom:0}
.log time{display:inline-block; min-width:5.5rem; color:var(--muted); font-size:.78rem}
.spark{display:flex; align-items:flex-end; gap:8px; height:110px}
.spark span{flex:1; background:#FDBA74; border-radius:6px 6px 0 0; display:flex; justify-content:center; padding-top:4px; font-family:var(--display); font-weight:700; font-size:.78rem; color:#1C1F23}
.spark span.hi{background:#15803D; color:#fff}
.about{padding:1.4rem 1.5rem 1.6rem; border-left:1px solid var(--rule); background:var(--card)}
@media (max-width:900px){.about{border-left:0; border-top:1px solid var(--rule)}}
.about h2{font-size:1.5rem; margin-bottom:.4rem}
.about p{color:var(--ink-2); font-size:.98rem}
.about ul{padding-left:1.1rem; margin:0 0 1rem; color:var(--ink-2); font-size:.96rem}
.about li{margin-bottom:.35rem}
.about .rep{background:var(--gold-soft); border-radius:10px; padding:.7rem .85rem; font-size:.92rem; color:var(--ink); margin:0}
.demo-note{margin-top:.8rem}
.build-sec{padding-top:clamp(2.5rem,6vw,4.5rem)}
.safe{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start}
@media (max-width:860px){.safe{grid-template-columns:1fr}}
.checks{list-style:none; padding:0; margin:0; display:grid; gap:.8rem}
.checks li{position:relative; padding-left:1.8rem; color:var(--ink-2)}
.checks li::before{content:"\2713"; position:absolute; left:0; top:0; width:1.25rem; height:1.25rem; border-radius:50%; background:#DCFCE7; color:#166534; font-size:.8rem; display:grid; place-items:center; font-weight:700}
.checks b{color:var(--ink)}
.safe-sec{background:var(--card); border-block:1px solid var(--rule)}
.ps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.6rem}
@media (max-width:860px){.ps{grid-template-columns:1fr}}
.ps div{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:1.4rem}
.ps b{display:block; font-family:var(--display); font-size:2rem; letter-spacing:-0.03em}
.ps span{font-family:var(--display); font-weight:600; color:var(--plum)}
.ps p{margin:.6rem 0 0; color:var(--ink-2); font-size:.96rem}

/* websites page */
.ba{margin-top:1.8rem; border:1px solid var(--rule); border-radius:18px; overflow:hidden; background:var(--card); box-shadow:0 30px 60px -34px rgba(28,31,35,.5); container-type:inline-size}
.ba-bar{display:flex; align-items:center; gap:6px; padding:.6rem 1rem; border-bottom:1px solid var(--rule); font-size:.82rem; color:var(--muted)}
.ba-bar i{width:9px; height:9px; border-radius:50%; background:var(--rule)}
.ba-bar span{margin-left:.6rem}
.ba-view{position:relative; aspect-ratio:16/8.5; overflow:hidden}
@media (max-width:560px){.ba-view{aspect-ratio:4/3.4}}
.ba-old,.ba-new{position:absolute; inset:0}
.ba-old{background:#E9E6DF; font-family:Georgia,"Times New Roman",serif; color:#333; text-align:center; padding:3.5cqw 4cqw}
.ba-old .o1{background:#4A5A7A; color:#fff; padding:1.3cqw; font-size:2.8cqw}
.ba-old .o2{font-size:1.8cqw; margin:1.3cqw 0; color:#0000EE; text-decoration:underline}
.ba-old .o3{font-size:3.6cqw; margin:2.6cqw 0 1.3cqw}
.ba-old .o4{font-size:1.9cqw; line-height:1.5; max-width:62cqw; margin:0 auto}
.ba-old .o5{width:24cqw; height:9cqw; margin:2.3cqw auto; background:#C9C3B6; border:2px dashed #999; font-size:1.5cqw; display:grid; place-items:center}
.ba-old .o6{font-size:1.4cqw; color:#777}
.ba-new{background:#F6F6F4; color:#1C1F23; padding:0 4cqw}
.n-nav{display:flex; align-items:center; gap:2.8cqw; padding:2.2cqw 0; font-family:var(--display); font-size:1.8cqw; color:#444A52}
.n-nav b{font-size:2.4cqw; color:#1C1F23; margin-right:auto}
.n-btn{display:inline-block; font-family:var(--display); font-weight:600; font-size:1.7cqw; padding:1cqw 2cqw; border-radius:999px; background:#C2410C; color:#fff}
.n-btn.ghost{background:#fff; color:#1C1F23; border:1.5px solid #1C1F23}
.n-h{font-family:var(--display); font-weight:700; font-size:4.8cqw; line-height:1.04; letter-spacing:-0.025em; max-width:66cqw; margin-top:2cqw}
.n-p{font-size:1.9cqw; color:#444A52; margin:1.6cqw 0 2cqw; max-width:60cqw}
.n-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6cqw; margin-top:3cqw}
.n-cards div{background:#fff; border:1px solid #E3E3DF; border-radius:1.4cqw; padding:1.6cqw 1.8cqw; display:grid}
.n-cards b{font-family:var(--display); font-size:1.9cqw}
.n-cards span{font-size:1.5cqw; color:#6B7178}
.ba-line{position:absolute; top:0; bottom:0; width:3px; background:var(--plum); transform:translateX(-50%); pointer-events:none}
.ba-line span{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:var(--plum); color:#fff; display:grid; place-items:center; font-size:1.2rem; box-shadow:0 6px 16px rgba(0,0,0,.25)}
.ba-tag{position:absolute; bottom:12px; font-family:var(--display); font-weight:600; font-size:.8rem; padding:.25rem .7rem; border-radius:999px; color:#fff}
.ba-tag.l{left:12px; background:#1C1F23} .ba-tag.r{right:12px; background:#C2410C}
#baRange{display:block; width:calc(100% - 2rem); margin:1rem auto 1.1rem; accent-color:var(--plum); height:28px}
.steps.six{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.steps.six{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps.six{grid-template-columns:1fr}}
.smap{margin-top:2rem; background:var(--card); border:1px solid var(--rule); border-radius:18px; padding:1.6rem}
.smap-home{width:max-content; margin:0 auto 1.4rem; background:#1C1F23; color:#fff; font-family:var(--display); font-weight:700; padding:.55rem 1.6rem; border-radius:10px}
.smap-cols{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem}
@media (max-width:900px){.smap-cols{grid-template-columns:repeat(2,1fr)}}
.smap-cols div{display:grid; gap:.4rem; align-content:start}
.smap-cols b{font-family:var(--display); text-align:center; padding:.5rem; border-radius:10px; border:1.5px solid var(--plum); color:var(--ink)}
.smap-cols span{font-size:.85rem; padding:.4rem .6rem; border-radius:8px; background:var(--bg); border:1px solid var(--rule); color:var(--ink-2)}
.move{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2rem}
@media (max-width:860px){.move{grid-template-columns:1fr}}
.card-x{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:1.3rem 1.4rem; min-width:0}
.cx-h{font-family:var(--display); font-weight:700; font-size:1.1rem; margin-bottom:.6rem}
.card-x .rd{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:.7rem 0; border-bottom:1px solid var(--rule); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85rem}
.card-x .rd:last-child{border-bottom:0}
.card-x .rd s{color:var(--muted)} .card-x .rd span{grid-column:1; overflow-wrap:anywhere}
.card-x .rd em{grid-column:2; grid-row:1/3; align-self:center; font-style:normal; font-family:var(--display); font-weight:600; font-size:.75rem; background:#DCFCE7; color:#166534; padding:.15rem .6rem; border-radius:999px}
.big{font-family:var(--display); font-weight:700; font-size:2.6rem; letter-spacing:-0.03em; color:var(--plum)}
.big span{color:var(--muted); font-size:1.6rem}
.ichart{width:100%; height:auto; margin:.4rem 0 .6rem}
.pills{display:flex; flex-wrap:wrap; gap:.4rem}
.pills span{font-family:var(--display); font-weight:600; font-size:.8rem; padding:.25rem .7rem; border-radius:999px; background:var(--plum-soft)}
.pills .okp{background:#DCFCE7; color:#166534}
.seo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
@media (max-width:860px){.seo{grid-template-columns:1fr}}
.seo-kp{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-bottom:1rem}
.seo-kp div{border:1px solid var(--rule); border-radius:10px; padding:.5rem .6rem; font-size:.78rem; color:var(--muted)}
.seo-kp b{display:block; font-family:var(--display); font-size:1.3rem; color:var(--ink)}
.seo-kp .ok b{color:#15803D}
.every{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem}
@media (max-width:900px){.every{grid-template-columns:1fr}}
.ev-n{display:block; font-family:var(--display); font-size:1.05rem}
.map{height:120px; border-radius:10px; background:repeating-linear-gradient(45deg,var(--bg) 0 12px,var(--plum-soft) 12px 24px); position:relative; margin-bottom:.8rem}
.map i{position:absolute; left:46%; top:30%; width:22px; height:22px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--plum)}
.li-banner{height:70px; border-radius:10px; background:linear-gradient(120deg,#1C1F23,#C2410C)}
.li-logo{width:54px; height:54px; border-radius:12px; background:#fff; border:3px solid var(--card); margin:-27px 0 .5rem 14px; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:1.4rem; color:#C2410C; box-shadow:0 4px 12px rgba(0,0,0,.15)}
.vid{position:relative; aspect-ratio:16/9; border-radius:10px; background:#1C1F23; display:grid; place-items:center; margin-bottom:.8rem}
.vid .play{width:56px; height:56px; border-radius:50%; background:#C2410C; position:relative}
.vid .play::after{content:""; position:absolute; left:22px; top:16px; border-left:18px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent}
.vid small{position:absolute; left:10px; bottom:8px; color:#C9CDD2; font-size:.78rem}
.res{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.6rem}
@media (max-width:860px){.res{grid-template-columns:1fr}}
.res div{border-top:3px solid var(--plum); padding-top:1rem}
.res b{display:block; font-family:var(--display); font-weight:700; font-size:2.4rem; letter-spacing:-0.03em}
.res span{color:var(--ink-2)}
.res-sec,.seo-sec{background:var(--card); border-block:1px solid var(--rule)}

/* ===== v7: positioning, controls, consulting, case studies, estimator ===== */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; margin-top:2.2rem}
@media (max-width:1000px){.pillars{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pillars{grid-template-columns:1fr}}
.pillar{border-top:3px solid var(--plum); padding-top:1rem; display:flex; flex-direction:column}
.pillar .num{font-family:var(--display); font-weight:700; color:var(--plum); font-size:.95rem}
.pillar h3{margin:.3rem 0 .4rem}
.pillar p{color:var(--ink-2); font-size:.98rem; margin-bottom:.5rem}
.pillar ul.get{margin:0 0 1rem; padding-left:1.1rem; font-size:.95rem; color:var(--ink-2)}
.pillar ul.get li{margin-bottom:.3rem}
.pillar .more{margin-top:auto; font-family:var(--display); font-weight:600; text-decoration:none}
.pillar .more::after{content:" \2192"}
.moves-sec{background:#1C1F23; color:#EEF0F2}
.moves-sec h2{color:#fff} .moves-sec .lede{color:#C9CDD2}
.moves{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem}
@media (max-width:900px){.moves{grid-template-columns:1fr}}
.move-c{background:#25292E; border:1px solid #33373C; border-radius:16px; padding:1.4rem}
.move-c h3{color:#FB923C; font-size:1.5rem; margin-bottom:.3rem}
.move-c p{color:#C9CDD2; font-size:.98rem}
.proof{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.proof li{color:#C9CDD2; font-size:.94rem; border-top:1px solid #33373C; padding-top:.6rem}
.proof b{color:#fff; font-family:var(--display)}

/* demo additions */
.stages{display:flex; flex-wrap:wrap; gap:3px; margin-bottom:.8rem}
.stages span{font-family:var(--display); font-weight:600; font-size:.72rem; padding:.3rem .6rem; background:var(--card); border:1px solid var(--rule); color:var(--muted); border-radius:6px}
.stages span.done{background:#DCFCE7; color:#166534; border-color:#BBF7D0}
.stages span.on{background:var(--plum); color:#fff; border-color:var(--plum)}
.hb2{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .7rem; padding:.45rem 0; border-bottom:1px solid var(--rule); font-size:.85rem}
.hb2:last-child{border-bottom:0}
.hb2 > span:first-of-type{margin-left:auto}
.hb2 .bx{margin-left:.2rem}
.box.ready{border-color:#FDBA74; background:#FFF7ED}
.lst.chk .li{font-size:.86rem}
.tk{width:16px; height:16px; border-radius:4px; border:1.5px solid var(--rule); display:inline-block; flex:none; background:var(--card)}
.tk.on{background:#15803D; border-color:#15803D; position:relative}
.tk.on::after{content:"\2713"; color:#fff; font-size:11px; font-style:normal; position:absolute; left:2px; top:-1px}
.days{display:flex; flex-wrap:wrap; gap:.35rem}
.days span{font-family:var(--display); font-weight:600; font-size:.75rem; padding:.2rem .6rem; border-radius:999px}
.days .ok{background:#DCFCE7; color:#166534} .days .bad{background:#FEE2E2; color:#991B1B}

/* automation, controls, moving in */
.flows{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2rem}
@media (max-width:1000px){.flows{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.flows{grid-template-columns:1fr}}
.flow{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:1.2rem; display:grid; gap:.4rem; align-content:start}
.flow .lbl{justify-self:start; font-family:var(--display); font-weight:600; font-size:.85rem; padding:.3rem .75rem; border-radius:6px; background:#E8F0FE; color:#1A4FB4}
.flow i{width:2px; height:22px; background:var(--plum); margin-left:1.2rem; position:relative}
.flow i::after{content:""; position:absolute; left:-4px; bottom:-2px; border:5px solid transparent; border-top-color:var(--plum)}
.flow b{font-family:var(--display); font-size:1.05rem}
.flow small{color:var(--muted); font-size:.88rem}
.auto-more{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:1.8rem}
@media (max-width:900px){.auto-more{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.auto-more{grid-template-columns:1fr}}
.auto-more div{border-top:2px solid var(--ink); padding-top:.7rem; display:grid; gap:.2rem}
.auto-more b{font-family:var(--display)} .auto-more span{color:var(--ink-2); font-size:.95rem}
.movein{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:1.8rem}
@media (max-width:900px){.movein{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.movein{grid-template-columns:1fr}}
.movein .num{font-family:var(--display); font-weight:700; color:var(--plum)}
.movein h3{font-size:1.1rem; margin:.3rem 0} .movein p{color:var(--ink-2); font-size:.96rem}

/* consulting */
.listen{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start}
@media (max-width:860px){.listen{grid-template-columns:1fr}}
.lsteps{margin:0; padding:0; list-style:none; counter-reset:l; display:grid; gap:1rem}
.lsteps li{counter-increment:l; position:relative; padding-left:2.8rem; color:var(--ink-2)}
.lsteps li::before{content:counter(l); position:absolute; left:0; top:0; width:2rem; height:2rem; border-radius:50%; background:var(--gold-soft); color:var(--ink); font-family:var(--display); font-weight:700; display:grid; place-items:center}
.lsteps b{color:var(--ink); display:block; font-family:var(--display)}
.listen-sec,.ways-sec{background:var(--card); border-block:1px solid var(--rule)}
.advice{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem}
@media (max-width:900px){.advice{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.advice{grid-template-columns:1fr}}
.adv{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:1.3rem}
.adv h3{font-size:1.12rem; margin:.5rem 0 .4rem}
.adv p{color:var(--ink-2); font-size:.95rem; margin:0}
.tag2{display:inline-block; font-family:var(--display); font-weight:600; font-size:.75rem; padding:.15rem .6rem; border-radius:999px; background:var(--plum-soft); color:var(--ink-2)}

/* case studies */
.cs-sec.alt{background:var(--card); border-block:1px solid var(--rule)}
.cs-head{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
@media (max-width:860px){.cs-head{grid-template-columns:1fr}}
.cs-head .kind{font-family:var(--display); font-weight:600; color:var(--plum); margin-bottom:.3rem}
.cs-head .shot{display:block}
.visit{font-family:var(--display); font-weight:600}
.heard{margin-top:2rem; padding:1.2rem 1.4rem; border-left:4px solid var(--plum); background:var(--gold-soft); border-radius:0 12px 12px 0}
.heard b{font-family:var(--display)} .heard p{margin:.3rem 0 0; color:var(--ink)}
.cs-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2rem}
.cs-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.cs-grid,.cs-grid.three{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cs-grid,.cs-grid.three{grid-template-columns:1fr}}
.cs-col h3{font-size:1.1rem; padding-top:.8rem; border-top:3px solid var(--plum)}
.cs-col ul{margin:0; padding-left:1.1rem; color:var(--ink-2); font-size:.94rem}
.cs-col li{margin-bottom:.4rem}
.cs-consult{margin-top:1.6rem; background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:1.1rem 1.3rem}
.cs-sec.alt .cs-consult{background:var(--bg)}
.cs-consult b{font-family:var(--display)} .cs-consult p{margin:.3rem 0 0; color:var(--ink-2)}
.cs-results{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:1.8rem}
@media (max-width:860px){.cs-results{grid-template-columns:1fr 1fr}}
.cs-results div{border-top:3px solid var(--ink); padding-top:.8rem}
.cs-results b{display:block; font-family:var(--display); font-weight:700; font-size:2.1rem; letter-spacing:-0.03em}
.cs-results span{color:var(--ink-2); font-size:.94rem}
ul.plain{padding-left:1.1rem; color:var(--ink-2)}

/* estimator v2 */
.est2-sec{padding-top:0}
.est2{display:grid; grid-template-columns:1.4fr .9fr; gap:2rem; align-items:start}
@media (max-width:960px){.est2{grid-template-columns:1fr}}
.eg{border:0; padding:0; margin:0 0 2rem}
.eg legend{font-family:var(--display); font-weight:700; font-size:1.4rem; padding:0}
.eg-note{color:var(--muted); margin:.2rem 0 .8rem}
.eo{background:var(--card); border:1px solid var(--rule); border-radius:14px; margin-bottom:.55rem; transition:border-color .15s}
.eo.on{border-color:var(--plum); box-shadow:0 0 0 1px var(--plum)}
.eo-main{display:flex; align-items:center; gap:.8rem; padding:.9rem 1.1rem; cursor:pointer}
.eo-main input{width:1.15rem; height:1.15rem; accent-color:var(--plum); flex:none}
.eo-t{display:grid; gap:.1rem; min-width:0}
.eo-t b{font-family:var(--display); font-size:1.05rem}
.eo-t small{color:var(--muted); font-size:.86rem}
.eo-p{margin-left:auto; font-family:var(--display); font-weight:700; white-space:nowrap; padding-left:.8rem}
.eo-inc{padding:0 1.1rem .9rem 3.05rem}
.eo-inc summary{cursor:pointer; font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--plum); list-style:none; display:inline-flex; align-items:center; gap:.35rem}
.eo-inc summary::-webkit-details-marker{display:none}
.eo-inc summary::after{content:"+"; font-weight:700}
.eo-inc[open] summary::after{content:"\2212"}
.eo-inc ul{margin:.6rem 0 0; padding-left:1.1rem; color:var(--ink-2); font-size:.94rem; columns:2; column-gap:1.6rem}
@media (max-width:640px){.eo-inc{padding-left:1.1rem}.eo-inc ul{columns:1}}
.eo-inc li{margin-bottom:.3rem; break-inside:avoid}
.est2-sum{position:sticky; top:calc(88px + env(safe-area-inset-top,0px)); background:#1C1F23; color:#EEF0F2; border-radius:18px; padding:1.5rem; max-height:calc(100vh - 110px); overflow:auto}
@media (max-width:960px){.est2-sum{position:static; max-height:none}}
.sum-h{font-family:var(--display); font-weight:700; font-size:1.2rem; margin-bottom:.4rem}
.sum-row{display:flex; justify-content:space-between; align-items:baseline; padding:.55rem 0; border-bottom:1px solid #33373C; font-family:var(--display)}
.sum-row b{font-size:1.7rem; color:#FB923C; letter-spacing:-0.02em}
.sum-row.tot b{font-size:1.2rem; color:#fff}
.est2-sum .disc{display:flex; gap:.5rem; align-items:flex-start; margin:.9rem 0; font-size:.9rem; color:#C9CDD2; cursor:pointer}
.est2-sum .disc input{accent-color:#FB923C; margin-top:.2rem}
.sum-list{border-top:1px solid #33373C; padding-top:.8rem}
.sum-h2{font-family:var(--display); font-weight:700; margin-bottom:.5rem}
.sum-empty{color:#9AA0A7; font-size:.92rem}
.si{margin-bottom:.8rem}
.si-h{display:flex; justify-content:space-between; gap:.6rem; font-family:var(--display)}
.si-h span{color:#FB923C; white-space:nowrap}
.si ul{margin:.3rem 0 0; padding-left:1rem; color:#C9CDD2; font-size:.85rem}
.si li{margin-bottom:.15rem}
.si .more-li{list-style:none; margin-left:-1rem; color:#9AA0A7}
.sum-cta{display:flex; justify-content:center; width:100%; margin:.6rem 0 .8rem; background:#FB923C!important; border-color:#FB923C!important; color:#1C1F23!important}
.sum-note{font-size:.82rem; color:#9AA0A7; margin:0}
.terms{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:1.6rem}
@media (max-width:900px){.terms{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.terms{grid-template-columns:1fr}}
.terms h3{font-size:1.1rem; padding-top:.8rem; border-top:3px solid var(--plum)}
.terms p{color:var(--ink-2); font-size:.96rem}
.terms-sec{background:var(--card); border-block:1px solid var(--rule)}

/* ===== v8: interactive demo, wide layout, before/after ===== */
.wrap.wide{width:min(1400px,100% - 2rem)}
.app-tabs{flex-wrap:wrap; overflow:visible}
@media (max-width:760px){.app-tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}.app-tabs::-webkit-scrollbar{display:none}}
.app-panel{grid-template-columns:1.7fr 1fr; min-height:540px}
@media (max-width:900px){.app-panel{grid-template-columns:1fr}}
button.kp,button.li{font:inherit; text-align:left; cursor:pointer; width:100%}
button.kp{display:block}
button.kp:hover{border-color:var(--plum)}
button.kp.on{border-color:var(--plum); box-shadow:0 0 0 1px var(--plum)}
.lst button.li{background:transparent; border:0; border-bottom:1px solid var(--rule); color:inherit}
.lst button.li:last-child{border-bottom:0}
.lst button.li:hover{background:var(--plum-soft)}
.hint{font-size:.8rem; color:var(--muted); margin:.1rem 0 .6rem}
.xr{background:var(--card); border:1px solid var(--rule); border-radius:12px; margin-bottom:.5rem}
.xr[open]{border-color:var(--plum)}
.xr > summary{list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .6rem; padding:.65rem .85rem; font-size:.88rem}
.xr > summary::-webkit-details-marker{display:none}
.xr > summary::before{content:"\25B8"; color:var(--muted); font-size:.8rem; transition:transform .15s}
.xr[open] > summary::before{transform:rotate(90deg)}
.xr > summary .r{margin-left:auto}
.xr > summary:hover{background:var(--plum-soft); border-radius:12px}
.xb{padding:.2rem .9rem .9rem; font-size:.86rem}
.xb.two{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:640px){.xb.two{grid-template-columns:1fr}}
.xb p{margin:0 0 .5rem}
.msg{background:var(--bg); border-radius:10px; padding:.6rem .75rem; margin-bottom:.6rem}
.msg b{font-family:var(--display); font-size:.8rem; color:var(--muted)}
.msg p,.msg ul{margin:.25rem 0 0}
.hist{padding-left:1rem}
.frm{display:grid; grid-template-columns:1fr 1fr; gap:.5rem .6rem}
.frm.row3{grid-template-columns:2fr 1fr 1fr auto; align-items:center}
@media (max-width:640px){.frm,.frm.row3{grid-template-columns:1fr}}
.frm label,.lab{display:grid; gap:.2rem; font-family:var(--display); font-weight:600; font-size:.76rem; color:var(--muted)}
.frm .wide{grid-column:1/-1}
.app input:not([type=checkbox]):not([type=radio]),.app select,.app textarea{font:inherit; font-size:.85rem; color:var(--ink); background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:.4rem .55rem; width:100%; min-width:0}
.app textarea{min-height:64px; resize:vertical}
.app input:focus,.app select:focus,.app textarea:focus{outline:2px solid var(--plum); outline-offset:0; border-color:var(--plum)}
.lab{margin-bottom:.5rem}
.lab select{margin-top:.15rem}
.tpl{background:var(--bg); border:1px dashed var(--rule); border-radius:10px; padding:.6rem .75rem; margin-bottom:.5rem}
.tpl b{font-family:var(--display); font-size:.82rem}
.tpl p{margin:.3rem 0 0; color:var(--ink-2)}
.acts2{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.5rem}
.app button.bx{cursor:pointer; font:inherit; font-family:var(--display); font-weight:600; font-size:.8rem}
.app button.bx:hover{border-color:var(--plum)}
.app button.bx.solid:hover{background:var(--plum-2)}
.app button.bx:disabled{opacity:.7; cursor:default}
.sub{background:var(--gold-soft); border-radius:10px; padding:.7rem .8rem; margin:.6rem 0; display:grid; gap:.35rem}
.tiny{font-size:.8rem; color:var(--ink-2); display:flex; align-items:center; gap:.4rem}
.doc{background:#fff; color:#1C1F23; border:1px solid var(--rule); border-radius:8px; padding:.8rem .9rem; font-family:Georgia,"Times New Roman",serif; font-size:.82rem; line-height:1.5; box-shadow:0 6px 18px -12px rgba(0,0,0,.4)}
.doc b{font-family:var(--display); letter-spacing:.04em; font-size:.75rem}
.doc span[data-out]{background:#FFF1D6}
.stages.click button{font:inherit; font-family:var(--display); font-weight:600; font-size:.72rem; padding:.3rem .6rem; background:var(--card); border:1px solid var(--rule); color:var(--muted); border-radius:6px; cursor:pointer}
.stages.click button.done{background:#DCFCE7; color:#166534; border-color:#BBF7D0}
.stages.click button.on{background:var(--plum); color:#fff; border-color:var(--plum)}
.search2{margin-bottom:.7rem}
.post{min-height:80px!important}
.chips.tog button{font:inherit; font-size:.72rem; padding:.15rem .5rem; border-radius:6px; border:1px dashed var(--rule); background:transparent; color:var(--muted); cursor:pointer}
.chips.tog button.on{background:var(--plum-soft); border-style:solid; color:var(--ink)}
.chk2 .ci{display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .6rem; padding:.55rem .8rem; border-bottom:1px solid var(--rule); font-size:.86rem}
.chk2 .ci:last-child{border-bottom:0}
.chk2 .ci label{display:flex; align-items:center; gap:.5rem; cursor:pointer}
.chk2 .ci input[type=checkbox]{accent-color:#15803D; width:16px; height:16px}
.chk2 .ci em{margin-left:auto; font-style:normal; font-size:.76rem; color:var(--muted)}
.chk2 .ci .note{flex-basis:100%}
.chk2 .ci.flag{background:#FEE2E2; transition:background .3s}
.bad-t{color:#B91C1C} .ok-t{color:#15803D}
.steps2{margin:0; padding-left:1.2rem}
.steps2 li{margin-bottom:.3rem}
.fresh{animation:fresh 1.6s ease}
@keyframes fresh{from{background:#FFEDD5}to{background:transparent}}
.new-log{background:#ECFDF5}
.scr-text{background:var(--bg); border-radius:8px; padding:.6rem .75rem}
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:#1C1F23; color:#fff; padding:.8rem 1.1rem; border-radius:12px; font-size:.92rem; max-width:min(560px,92vw); box-shadow:0 18px 40px -12px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:200}
.toast.show{opacity:1; transform:translate(-50%,0)}
@media (prefers-reduced-motion: reduce){.fresh{animation:none}.toast{transition:none}}

/* before/after v2 */
.ba-btns{display:inline-flex; gap:4px; margin-top:1.4rem; padding:4px; border-radius:999px; background:var(--card); border:1px solid var(--rule)}
.ba-btns button{font-family:var(--display); font-weight:600; font-size:.92rem; padding:.5rem 1rem; border-radius:999px; border:0; background:transparent; color:var(--ink-2); cursor:pointer}
.ba-btns button.on{background:var(--plum); color:#fff}
.ba{margin-top:1rem}
.ba-view{cursor:ew-resize; touch-action:pan-y; user-select:none}
.ba-old{z-index:2}
.ba-view.anim .ba-old{transition:clip-path .4s ease}
.ba-view.anim .ba-handle{transition:left .4s ease}
.ba-handle{position:absolute; top:0; bottom:0; width:44px; transform:translateX(-50%); z-index:5; cursor:ew-resize; display:grid; place-items:center}
.ba-handle::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:3px; transform:translateX(-50%); background:var(--plum)}
.ba-handle span{position:relative; width:44px; height:44px; border-radius:50%; background:var(--plum); color:#fff; display:grid; place-items:center; font-size:1.3rem; box-shadow:0 6px 16px rgba(0,0,0,.3); transition:transform .15s}
.ba-view.dragging .ba-handle span,.ba-handle:hover span{transform:scale(1.1)}
.ba-tag{top:12px; bottom:auto; z-index:4; transition:opacity .2s}
#baRange,.ba-line{display:none}
.ba-old{z-index:1} .ba-new{z-index:2}
.ba-view.anim .ba-new{transition:clip-path .4s ease}
.ba-tag.r2{left:12px; right:auto; background:#C2410C}
.ba-tag.l2{right:12px; left:auto; background:#1C1F23}
.ba-handle small{position:absolute; top:calc(50% + 28px); font-family:var(--display); font-weight:700; font-size:.72rem; color:#fff; background:var(--plum); padding:.1rem .45rem; border-radius:999px}
.xb.two > *,.frm > *,.frm label{min-width:0}
.app input:not([type=checkbox]):not([type=radio]),.app select,.app textarea{box-sizing:border-box; max-width:100%}

/* ===== v9: summary boxes, help, dark mode fixes ===== */
:root{--ready-bg:#FFF7ED; --ready-bd:#FDBA74; --warn-t:#B91C1C; --flag-bg:#FEE2E2; --newlog:#ECFDF5; --upd-bg:#FEF9C3; --upd-bd:#FDE047}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ready-bg:#33261A; --ready-bd:#9A3412; --warn-t:#F87171; --flag-bg:#4A1F1F; --newlog:#15302A; --upd-bg:#36311A; --upd-bd:#A16207}}
:root[data-theme="dark"]{--ready-bg:#33261A; --ready-bd:#9A3412; --warn-t:#F87171; --flag-bg:#4A1F1F; --newlog:#15302A; --upd-bg:#36311A; --upd-bd:#A16207}
.box.ready{background:var(--ready-bg); border-color:var(--ready-bd)}
.kp.warn b{color:var(--warn-t)}
.bad-t{color:var(--warn-t)}
.chk2 .ci.flag{background:var(--flag-bg)}
.new-log{background:var(--newlog)}
@keyframes fresh{from{background:var(--ready-bg)}to{background:transparent}}
.sumbox{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.5rem; margin-bottom:.9rem}
.sumbox .kp{min-width:0}
.bar2{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem}
.bar2 input{flex:1 1 200px}
.bar2 select{flex:0 0 auto; width:auto!important}
.li2{display:flex; align-items:center; flex-wrap:wrap; gap:.35rem .55rem; width:100%; text-align:left; font:inherit; font-size:.85rem; color:inherit; background:transparent; border:0; border-bottom:1px solid var(--rule); padding:.5rem 0; cursor:pointer}
.li2:last-child{border-bottom:0}
.li2:hover{color:var(--plum)}
.tag3{font-family:var(--display); font-weight:600; font-size:.7rem; padding:.1rem .45rem; border-radius:6px; border:1px solid var(--rule); color:var(--muted)}
.tag3.new{background:var(--upd-bg); border-color:var(--upd-bd); color:var(--ink)}
.msg.upd{background:var(--upd-bg); border:1px solid var(--upd-bd)}
.sub2{display:flex; align-items:center; gap:.5rem; font-family:var(--display); margin:.9rem 0 .5rem}
.seg2{display:inline-flex; flex-wrap:wrap; gap:3px; padding:3px; border-radius:999px; border:1px solid var(--rule); background:var(--card); margin-bottom:.8rem}
.seg2 button{font:inherit; font-family:var(--display); font-weight:600; font-size:.8rem; padding:.35rem .8rem; border-radius:999px; border:0; background:transparent; color:var(--ink-2); cursor:pointer}
.seg2 button.on{background:var(--ink); color:var(--bg)}
.helpbtn{font:inherit; font-family:var(--display); font-weight:600; font-size:.78rem; color:var(--plum); background:transparent; border:1px solid var(--rule); border-radius:999px; padding:.25rem .7rem; cursor:pointer; margin:-.5rem 0 .8rem}
.helpbox{background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--plum); border-radius:10px; padding:.6rem .85rem; margin-bottom:.8rem; font-size:.84rem}
.helpbox b{font-family:var(--display)}
.helpbox ul{margin:.3rem 0 0; padding-left:1.1rem; color:var(--ink-2)}
.xr > summary input[type=checkbox]{margin:0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .bx.solid,:root:not([data-theme="light"]) .stages.click button.on,:root:not([data-theme="light"]) .stages span.on,:root:not([data-theme="light"]) .ba-btns button.on{color:#1C1F23}}
:root[data-theme="dark"] .bx.solid,:root[data-theme="dark"] .stages.click button.on,:root[data-theme="dark"] .stages span.on,:root[data-theme="dark"] .ba-btns button.on{color:#1C1F23}
.doc .muted{color:#6B7178}

/* ===== v10: richer "after" mock ===== */
.ba-view{aspect-ratio:16/9}
.ba-new{padding:0 3.6cqw; display:flex; flex-direction:column}
.n-nav{border-bottom:1px solid #E3E3DF; margin:0 -3.6cqw; padding:1.6cqw 3.6cqw}
.n-nav b{display:flex; align-items:center; gap:.8cqw}
.n-mark{width:2.4cqw; height:2.4cqw; border-radius:.6cqw; background:linear-gradient(135deg,#C2410C,#FB923C); display:inline-block}
.n-hero{display:grid; grid-template-columns:1.15fr .85fr; gap:3cqw; align-items:center; margin-top:2.6cqw}
.n-eye{font-family:var(--display); font-weight:600; font-size:1.35cqw; color:#C2410C; margin-bottom:1cqw}
.n-hero .n-h{font-size:3.9cqw; margin:0; max-width:none}
.n-hero .n-p{font-size:1.6cqw; margin:1.4cqw 0 1.8cqw; max-width:none}
.n-ctas{display:flex; gap:1cqw}
.n-trust{display:flex; flex-wrap:wrap; gap:.6cqw 2cqw; margin-top:2cqw; font-size:1.3cqw; color:#444A52}
.n-trust b{color:#1C1F23; font-family:var(--display)}
.n-trust span:first-child b{color:#F59E0B; letter-spacing:.1em}
.n-right{position:relative}
.n-art{width:100%; aspect-ratio:4/3; border-radius:1.6cqw; display:block; box-shadow:0 2cqw 4cqw -2.4cqw rgba(28,31,35,.5)}
.n-float{position:absolute; left:-2.4cqw; bottom:2cqw; display:flex; align-items:center; gap:1cqw; background:#fff; border:1px solid #E3E3DF; border-radius:1.2cqw; padding:1cqw 1.4cqw; box-shadow:0 1.4cqw 3cqw -1.6cqw rgba(28,31,35,.45)}
.n-float b{display:block; font-family:var(--display); font-size:1.4cqw; color:#1C1F23}
.n-float small{font-size:1.15cqw; color:#6B7178}
.n-dot{width:1.6cqw; height:1.6cqw; border-radius:50%; background:#15803D; box-shadow:0 0 0 .5cqw #DCFCE7}
.ba-new .n-cards{grid-template-columns:repeat(4,1fr); margin-top:auto; margin-bottom:2.6cqw}
.ba-old{display:flex; flex-direction:column; justify-content:flex-start}

/* ===== v10: founder band, starting points, two ways to pay ===== */
.fband-sec{padding:1.4rem 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--plum-soft)}
.fband{display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:center}
.headshot.sm{width:96px; height:96px}
.fband-q{font-family:var(--display); font-size:1.2rem; line-height:1.4; margin:0 0 .4rem; color:var(--ink)}
.fband-n{margin:0; color:var(--muted); font-size:.95rem}
.fband-n b{color:var(--ink)}
.starts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem}
.st,.pay{border:1px solid var(--rule); border-radius:14px; padding:1.3rem; background:var(--card); min-width:0}
.st b{display:block; font-family:var(--display); font-size:1.5rem; margin:.3rem 0 .4rem; color:var(--ink)}
.st p,.pay p{margin:0; color:var(--muted)}
.st-k{font-family:var(--display); font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--plum)}
.pays{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem}
.pay h3{margin:.2rem 0 .5rem}
.pay .checks{margin:.9rem 0 0}
.pay.alt{border-color:var(--plum); box-shadow:inset 0 0 0 1px var(--plum)}
.est-intro{padding-bottom:0}
@media (max-width:760px){.starts,.pays{grid-template-columns:1fr} .fband{grid-template-columns:1fr} .headshot.sm{width:72px;height:72px}}
.ba-tag{top:auto !important; bottom:12px}
.ba-new .n-cards{margin-bottom:4.6cqw}
@media (max-width:600px){
  .ba-tag{font-size:.65rem; padding:.15rem .5rem; bottom:6px}
  .ba-tag.r2{left:6px} .ba-tag.l2{right:6px}
  .ba-handle span{width:32px !important; height:32px !important; font-size:.9rem}
  .ba-handle small{font-size:.6rem}
}
@media (max-width:600px){.ba-handle small{top:calc(50% + 20px)}}

/* ===== lead forms ===== */
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
.cform{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1rem; margin-top:1rem; max-width:760px; text-align:left}
.cform label{display:flex; flex-direction:column; gap:.3rem; font-family:var(--display); font-weight:600; font-size:.9rem; min-width:0}
.cform .w{grid-column:1/-1}
.cform input,.cform textarea,.eform input,.eform textarea{font:inherit; font-family:var(--body); font-weight:400; padding:.6rem .75rem; border:1px solid var(--rule); border-radius:10px; background:var(--card); color:var(--ink); min-width:0; width:100%; box-sizing:border-box}
.cform input:focus,.cform textarea:focus,.eform input:focus,.eform textarea:focus{outline:2px solid var(--plum); outline-offset:0; border-color:transparent}
.cf-row{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.cf-msg{font-size:.92rem; color:var(--ink-2)}
.contact .small{margin-top:.9rem}
.eform{display:grid; gap:.5rem; margin-top:1rem}
.eform .sum-cta{width:100%; justify-content:center}
.eform #sMail{text-align:center}
@media (max-width:640px){.cform{grid-template-columns:1fr}}