/* ============================================================
   HOLONA · marketing site · canonical brand-as-code tokens v2
   Surfaces dark-first · amber scarce · numerics monospace
   ============================================================ */
:root{
  --bg:#0B0907; --surface:#14110D; --surface-2:#1C1813; --surface-3:#25201A;
  --text:#F4EEDB; --text-2:#C2BAA3; --text-3:#9A9081; --text-4:#6B6457;
  --rule:rgba(244,238,219,0.08); --rule-strong:rgba(244,238,219,0.16);
  --accent:#E89943; --accent-strong:#F2A654; --accent-dim:rgba(232,153,67,0.16);
  --r0:#80C078; --r1:#B5C857; --r2:#E8B543; --r3:#E89943; --r4:#DA7438; --r5:#C73E2D;
  --font-sans:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  --font-serif:'Fraunces',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-sans);
  font-size:15px; line-height:1.6; letter-spacing:0;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-mono);letter-spacing:.04em}
.em{font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--accent)}
.em-soft{font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--text)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px}
@media(max-width:768px){.wrap{padding:0 20px}}

/* ---------- section scaffolding ---------- */
section{padding:96px 0;border-top:1px solid var(--rule)}
.eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);display:flex;align-items:center;gap:10px;margin-bottom:22px;
}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block}
.eyebrow .num{color:var(--accent)}
h2.sec{font-size:34px;font-weight:600;letter-spacing:-.018em;line-height:1.15;max-width:18em}
.lead{color:var(--text-2);font-size:17px;line-height:1.55;max-width:38em;margin-top:18px}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:200;background:rgba(11,9,7,.82);
  backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--rule);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:11px}
.brand .word{font-weight:600;font-size:17px;letter-spacing:.02em}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:13px;color:var(--text-2);transition:color .15s}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:18px}
.beta-badge{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-3);
  display:flex;align-items:center;gap:7px;text-transform:uppercase;
}
.beta-badge .pulse{width:6px;height:6px;border-radius:50%;background:var(--r0);box-shadow:0 0 0 0 rgba(128,192,120,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(128,192,120,.45)}70%{box-shadow:0 0 0 6px rgba(128,192,120,0)}100%{box-shadow:0 0 0 0 rgba(128,192,120,0)}}
@media(max-width:940px){.nav-links{display:none}}
@media(max-width:560px){.nav-right{gap:10px}.beta-badge{display:none}.btn-sm{padding:7px 11px;font-size:12px}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:13.5px;
  font-weight:500;padding:10px 18px;border-radius:6px;cursor:pointer;border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s;white-space:nowrap;
}
.btn-accent{background:var(--accent);color:#0B0907}
.btn-accent:hover{background:var(--accent-strong)}
.btn-secondary{background:transparent;border-color:var(--rule-strong);color:var(--text)}
.btn-secondary:hover{border-color:var(--text-3);background:var(--surface)}
.btn-lg{padding:14px 26px;font-size:15px}
.btn-sm{padding:7px 14px;font-size:12.5px}

/* ---------- hero ---------- */
.hero{padding:84px 0 76px;border-top:none}
.hero h1{
  font-size:54px;font-weight:600;letter-spacing:-.025em;line-height:1.06;max-width:16em;
}
.hero .sub{margin-top:26px;color:var(--text-2);font-size:18px;line-height:1.55;max-width:34em}
.hero .promiseline{margin-top:20px;font-size:18px;color:var(--text);max-width:34em}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:64px;background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.kpi{background:var(--bg);padding:22px 20px}
.kpi .v{font-family:var(--font-mono);font-size:24px;font-weight:500;letter-spacing:.01em;color:var(--text)}
.kpi .v .u{font-size:13px;color:var(--text-3);margin-left:4px}
.kpi .k{font-size:12px;color:var(--text-3);margin-top:7px;line-height:1.45}
@media(max-width:768px){.kpi-row{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:36px}.hero .sub,.hero .promiseline{font-size:16px}}

/* ---------- live agent strip ---------- */
.feed{margin-top:34px;border:1px solid var(--rule);border-radius:8px;background:var(--surface);overflow:hidden}
.feed-head{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--rule);background:var(--surface-2)}
.feed-head .t{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--text-3);text-transform:uppercase}
.feed-head .stream{font-family:var(--font-mono);font-size:10.5px;color:var(--r0);display:flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.08em}
.feed-row{display:grid;grid-template-columns:64px 150px 1fr auto;gap:14px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--rule);font-size:13px}
.feed-row:last-child{border-bottom:none}
.feed-row .time{font-family:var(--font-mono);font-size:11.5px;color:var(--text-4)}
.feed-row .agent{font-family:var(--font-mono);font-size:11.5px;color:var(--accent);letter-spacing:.02em}
.feed-row .desc{color:var(--text-2)}
.rtag{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;padding:3px 8px;border-radius:4px;border:1px solid;text-transform:uppercase}
.r0{color:var(--r0);border-color:rgba(128,192,120,.4);background:rgba(128,192,120,.07)}
.r1{color:var(--r1);border-color:rgba(181,200,87,.4);background:rgba(181,200,87,.07)}
.r2{color:var(--r2);border-color:rgba(232,181,67,.4);background:rgba(232,181,67,.07)}
.r3{color:var(--r3);border-color:rgba(232,153,67,.4);background:rgba(232,153,67,.07)}
.r4{color:var(--r4);border-color:rgba(218,116,56,.4);background:rgba(218,116,56,.08)}
.r5{color:var(--r5);border-color:rgba(199,62,45,.45);background:rgba(199,62,45,.09)}
@media(max-width:768px){.feed-row{grid-template-columns:52px 1fr auto;gap:10px}.feed-row .agent{display:none}}

/* ---------- generic two-col ---------- */
.twocol{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;margin-top:48px;align-items:start}
@media(max-width:880px){.twocol{grid-template-columns:1fr;gap:36px}}
.prose p{color:var(--text-2);margin-bottom:18px;font-size:15.5px;line-height:1.65}
.prose p strong{color:var(--text);font-weight:600}

/* promises table */
.promises{border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.promises .pr{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid var(--rule);font-size:14px}
.promises .pr:last-child{border-bottom:none}
.promises .pr .n{color:var(--text-2)}
.promises .pr .val{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--accent);padding:3px 10px;border:1px solid var(--accent-dim);border-radius:4px}

/* what HOLONA is NOT */
.notgrid{margin-top:48px;border:1px dashed var(--rule-strong);border-radius:8px;padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}
@media(max-width:768px){.notgrid{grid-template-columns:1fr}}
.notgrid .label{grid-column:1/-1;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.notitem{display:flex;gap:12px;font-size:14px}
.notitem .x{color:var(--r5);font-family:var(--font-mono);flex:none}
.notitem b{color:var(--text);font-weight:600}
.notitem span{color:var(--text-3)}

/* how-it-works 4 cards */
.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
@media(max-width:980px){.loop{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.loop{grid-template-columns:1fr}}
.lcard{border:1px solid var(--rule);border-radius:8px;background:var(--surface);padding:22px;display:flex;flex-direction:column;gap:14px}
.lcard .step{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-3);text-transform:uppercase}
.lcard .step .m{color:var(--text-2)}
.lcard .en{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.lcard .d{font-size:13.5px;color:var(--text-2);line-height:1.55}
.lcard .runs{font-size:12px;color:var(--text-3);line-height:1.5;border-top:1px solid var(--rule);padding-top:12px;margin-top:auto}
.lcard .runs b{color:var(--text-2);font-weight:500}
.lcard .foot{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--text-4)}
.lcard .foot.red{color:var(--r5)}

/* trace decision card */
.trace{margin-top:44px;border:1px solid var(--rule-strong);border-radius:10px;background:var(--surface);overflow:hidden}
.trace-tabs{display:flex;gap:0;border-bottom:1px solid var(--rule);background:var(--surface-2)}
.trace-tabs .tab{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:13px 18px;color:var(--text-3);border-bottom:2px solid transparent}
.trace-tabs .tab.active{color:var(--text);border-bottom-color:var(--accent)}
.trace-meta{font-family:var(--font-mono);font-size:11px;color:var(--text-4);padding:11px 22px;border-bottom:1px solid var(--rule)}
.trow{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:16px 22px;border-bottom:1px solid var(--rule)}
.trow:last-child{border-bottom:none}
.trow .lab{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:flex-start;gap:8px;padding-top:2px}
.trow .body{color:var(--text-2);font-size:14px;line-height:1.6}
.trow .body .mono{color:var(--text);font-size:12.5px}
.trace-foot{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;background:var(--surface-2);font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);flex-wrap:wrap;gap:10px}
.trace-foot .product{color:var(--accent);font-family:var(--font-serif);font-style:italic;font-size:14px}
@media(max-width:680px){.trow{grid-template-columns:1fr;gap:6px}}

/* compare table */
.compare{margin-top:46px;border:1px solid var(--rule);border-radius:8px;overflow:hidden;overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;min-width:640px}
table.cmp th,table.cmp td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--rule);font-size:13px}
table.cmp thead th{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);background:var(--surface-2);font-weight:500}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp td.feat{text-align:left;color:var(--text-2);max-width:340px}
table.cmp td.feat b{color:var(--text);font-weight:600;display:block;font-size:13.5px}
table.cmp td.feat span{color:var(--text-4);font-size:12px}
table.cmp th.holona,table.cmp td.holona{background:rgba(232,153,67,.06)}
table.cmp th.holona{color:var(--accent)}
.yes{color:var(--accent);font-size:15px}
.no{color:var(--text-4)}
.part{color:var(--r2);font-family:var(--font-mono);font-size:11px}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
@media(max-width:880px){.tiers{grid-template-columns:1fr}}
.tier{border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:28px;display:flex;flex-direction:column}
.tier.feat{border-color:var(--accent);background:linear-gradient(180deg,rgba(232,153,67,.05),transparent 60%)}
.tier .tl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);display:flex;justify-content:space-between;align-items:center}
.tier .tl .rec{color:var(--accent)}
.tier .name{font-size:20px;font-weight:600;margin-top:14px}
.tier .target{font-size:13px;color:var(--text-3);margin-top:8px;line-height:1.5;min-height:56px}
.tier .price{font-family:var(--font-mono);font-size:30px;font-weight:500;margin-top:18px;color:var(--text)}
.tier .price .per{font-size:13px;color:var(--text-3)}
.tier .price .alt{display:block;font-size:12px;color:var(--text-3);margin-top:6px}
.tier ul{list-style:none;margin:22px 0;display:flex;flex-direction:column;gap:11px}
.tier li{font-size:13.5px;color:var(--text-2);display:flex;gap:10px;line-height:1.4}
.tier li::before{content:"·";color:var(--accent);font-weight:700}
.tier .tcta{margin-top:auto}
.tier .tcta a{font-family:var(--font-mono);font-size:12.5px;color:var(--accent);letter-spacing:.02em}

/* security */
.secblocks{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:46px}
@media(max-width:768px){.secblocks{grid-template-columns:1fr}}
.secblk{border:1px solid var(--rule);border-radius:8px;background:var(--surface);padding:24px}
.secblk h3{font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:18px}
.secblk h3 .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--r0);border:1px solid rgba(128,192,120,.4);padding:2px 7px;border-radius:4px;text-transform:uppercase}
.secblk ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.secblk li{font-size:13.5px;color:var(--text-2);line-height:1.5}
.secblk li code{font-family:var(--font-mono);font-size:12px;color:var(--accent);background:var(--accent-dim);padding:1px 6px;border-radius:3px}
.r5callout{margin-top:18px;border:1px solid var(--rule-strong);border-radius:8px;padding:24px;background:var(--surface-2)}
.r5callout b{color:var(--text)}
.r5callout p{color:var(--text-2);font-size:14.5px;line-height:1.6}

/* about */
.aboutmeta{border:1px solid var(--rule);border-radius:8px;background:var(--surface);padding:8px 0}
.aboutmeta .m{display:flex;justify-content:space-between;padding:13px 22px;border-bottom:1px solid var(--rule);font-size:13.5px}
.aboutmeta .m:last-child{border-bottom:none}
.aboutmeta .m .k{color:var(--text-3);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.aboutmeta .m .v{color:var(--text-2)}

/* demo */
.demo{margin-top:44px;border:1px dashed var(--rule-strong);border-radius:10px;padding:54px 30px;text-align:center}
.demo .play{font-size:26px;color:var(--accent);margin-bottom:16px}
.demo .l{font-size:16px;color:var(--text)}
.demo .s{font-family:var(--font-mono);font-size:12px;color:var(--text-4);margin-top:10px;letter-spacing:.04em}

/* waitlist */
.waitlist{text-align:center;border-top:1px solid var(--rule)}
.waitlist h2{font-size:38px;font-weight:600;letter-spacing:-.02em;line-height:1.12}
.waitlist .wsub{color:var(--text-2);font-size:16px;margin-top:18px}
form.wl{margin:30px auto 0;max-width:860px;text-align:left}
.form-step{display:none}
.form-step-active{display:block}
.field-label,.field span{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:8px;
}
.email-row{display:flex;gap:10px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
form.wl input,form.wl select,form.wl textarea{
  font-family:var(--font-sans);font-size:14px;background:var(--surface);border:1px solid var(--rule-strong);
  color:var(--text);padding:13px 16px;border-radius:6px;width:100%;
}
form.wl select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
form.wl textarea{resize:vertical;min-height:104px}
.email-row input{width:320px;max-width:80vw}
form.wl input:focus,form.wl select:focus,form.wl textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.question-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
.question-head .mono{font-size:11.5px;color:var(--text-3);text-transform:uppercase}
.text-button{border:none;background:none;color:var(--accent);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.question-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:20px}
.field-wide{grid-column:1/-1}
.seller-questions .btn{display:flex;margin:4px auto 0}
@media(max-width:680px){.question-grid{grid-template-columns:1fr}.question-head{align-items:flex-start;flex-direction:column}.email-row{justify-content:flex-start}.email-row input{max-width:100%}.seller-questions .btn{width:100%;justify-content:center}}
.wl-note{font-family:var(--font-mono);font-size:11.5px;color:var(--text-4);margin-top:16px}
.wl-ok{color:var(--r0);font-size:14px;margin-top:18px;display:none}

/* footer */
footer{border-top:1px solid var(--rule);padding:64px 0 40px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
@media(max-width:768px){.fgrid{grid-template-columns:1fr 1fr;gap:32px}}
.fcol h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);margin-bottom:16px}
.fcol a{display:block;font-size:13.5px;color:var(--text-2);margin-bottom:11px;transition:color .15s}
.fcol a:hover{color:var(--text)}
.fbrand .tagline{color:var(--text-3);font-size:14px;max-width:20em;margin-top:14px;line-height:1.5}
.fbottom{display:flex;justify-content:space-between;margin-top:48px;padding-top:24px;border-top:1px solid var(--rule);font-family:var(--font-mono);font-size:11px;color:var(--text-4);flex-wrap:wrap;gap:10px}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- prose / legal pages ---------- */
.page-head{padding:80px 0 8px}
.page-head h1{font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.page-head .pmeta{font-family:var(--font-mono);font-size:11.5px;color:var(--text-4);margin-top:16px;letter-spacing:.04em}
.legal{display:grid;grid-template-columns:220px 1fr;gap:56px;padding:48px 0 96px}
@media(max-width:880px){.legal{grid-template-columns:1fr;gap:32px}}
.toc{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:10px}
@media(max-width:880px){.toc{position:static}}
.toc .toc-h{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-4);margin-bottom:6px}
.toc a{font-size:12.5px;color:var(--text-3);transition:color .15s}
.toc a:hover{color:var(--text)}
.legal-body{max-width:46em}
.legal-body h2{font-size:20px;font-weight:600;margin:42px 0 14px;letter-spacing:-.01em}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:15px;font-weight:600;margin:26px 0 10px}
.legal-body p{color:var(--text-2);margin-bottom:14px;font-size:14.5px;line-height:1.7}
.legal-body ul{margin:0 0 14px 18px;color:var(--text-2);font-size:14.5px;line-height:1.7}
.legal-body li{margin-bottom:8px}
.legal-body strong{color:var(--text);font-weight:600}
.legal-body a{color:var(--accent)}
.legal-body code{font-family:var(--font-mono);font-size:12.5px;color:var(--accent);background:var(--accent-dim);padding:1px 6px;border-radius:3px}
.legal-body table{width:100%;border-collapse:collapse;margin:18px 0;border:1px solid var(--rule)}
.legal-body th,.legal-body td{padding:11px 14px;border-bottom:1px solid var(--rule);font-size:13.5px;text-align:left;vertical-align:top}
.legal-body th{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);background:var(--surface-2);font-weight:500}
.legal-body td{color:var(--text-2)}
.legal-note{border:1px dashed var(--rule-strong);border-radius:8px;padding:18px 22px;margin:0 0 28px;font-size:13.5px;color:var(--text-2);line-height:1.65}
.legal-note b{color:var(--text)}

/* ---------- 404 ---------- */
.err{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-top:none;position:relative}
.err .code{font-family:var(--font-serif);font-style:italic;font-size:120px;color:var(--accent);line-height:1}
.err h1{font-size:24px;font-weight:600;margin-top:18px}
.err p{color:var(--text-2);margin-top:12px;max-width:30em}
.err .ctas{display:flex;gap:14px;margin-top:30px}
.err .wm{position:absolute;bottom:24px;right:24px;width:120px;height:120px;opacity:.12;color:var(--text)}
