/* ============================================================
   realestatechatbot.io — design system
   Language: "quiet luxury" editorial. Ink / bone / brass.
   Deliberately NOT SaaS-blue: every competitor in the SERP
   (chatbot.com, realty-ai, engati, yellow.ai) is blue/purple.
   ============================================================ */

:root{
  /* ground */
  --ink:#0B100F;          /* near-black, green undertone */
  --ink-2:#141B1A;
  --ink-3:#1E2725;
  --paper:#F6F4EF;        /* bone */
  --paper-2:#EFECE4;
  --paper-3:#E4E0D5;

  /* accent — real brass, not yellow gold */
  --brass:#B08D57;
  --brass-lift:#C8A46B;
  --brass-deep:#8A6D3F;

  /* type on ground */
  --on-ink:#F6F4EF;
  --on-ink-mute:#A8B0AD;
  --on-ink-faint:#6E7A77;
  --on-paper:#0B100F;
  --on-paper-mute:#55605C;
  --on-paper-faint:#8A938F;

  --line-ink:rgba(246,244,239,.13);
  --line-paper:rgba(11,16,15,.12);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --sec:clamp(64px,9vw,132px);   /* section rhythm */
  --r:2px;                        /* near-square = editorial, not bubbly */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--on-paper);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  font-feature-settings:'kern' 1,'liga' 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ---------- type scale ---------- */
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.02em;line-height:1.06}
.d1{font-family:var(--serif);font-size:clamp(42px,6.4vw,82px);line-height:1.02;letter-spacing:-.025em}
.d2{font-family:var(--serif);font-size:clamp(32px,4.4vw,56px);line-height:1.06;letter-spacing:-.02em}
.d3{font-family:var(--serif);font-size:clamp(25px,2.8vw,36px);line-height:1.14}
.d4{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.ital{font-style:italic;color:var(--brass)}

.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--brass);margin:0 0 20px;display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);flex:none}
.eyebrow.solo::before{display:none}

.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:var(--on-paper-mute);max-width:60ch}
.on-ink .lede{color:var(--on-ink-mute)}
p{margin:0 0 1.15em}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.on-ink{background:var(--ink);color:var(--on-ink)}
.on-ink h1,.on-ink h2,.on-ink h3{color:var(--on-ink)}
.on-paper-2{background:var(--paper-2)}
.rule{height:1px;background:var(--line-paper);border:0;margin:0}
.on-ink .rule{background:var(--line-ink)}

.grid{display:grid;gap:clamp(24px,3vw,40px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* asymmetric — the anti-template move */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.split-wide{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,72px)}
.sechead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(38px,5vw,64px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:var(--r);border:1px solid transparent;
  font-size:14.5px;font-weight:600;letter-spacing:.012em;cursor:pointer;
  transition:all .28s var(--ease);white-space:nowrap;font-family:inherit;
  min-height:50px;
}
.btn-primary{background:var(--brass);color:#1A1206;border-color:var(--brass)}
.btn-primary:hover{background:var(--brass-lift);border-color:var(--brass-lift);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(176,141,87,.65)}
.btn-ghost{border-color:var(--line-paper);color:var(--on-paper)}
.btn-ghost:hover{border-color:var(--on-paper);transform:translateY(-2px)}
.on-ink .btn-ghost{border-color:var(--line-ink);color:var(--on-ink)}
.on-ink .btn-ghost:hover{border-color:var(--on-ink);background:rgba(246,244,239,.05)}
.btn-lg{padding:18px 34px;font-size:15.5px;min-height:58px}
.btn .arw{transition:transform .28s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.tlink{
  display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
  color:var(--brass);border-bottom:1px solid rgba(176,141,87,.3);padding-bottom:2px;
  transition:border-color .25s var(--ease),gap .25s var(--ease);
}
.tlink:hover{border-color:var(--brass);gap:12px}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:200;background:rgba(11,16,15,.86);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line-ink);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:28px;height:74px}
.logo{display:flex;align-items:center;gap:11px;color:var(--on-ink);font-size:16.5px;font-weight:600;letter-spacing:-.015em;flex:none}
.logo-mk{width:30px;height:30px;flex:none}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:14.5px;font-weight:500;color:var(--on-ink-mute);transition:color .22s var(--ease);position:relative;padding-block:6px}
.nav a:hover,.nav a[aria-current]{color:var(--on-ink)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass)}
.hdr-cta{display:flex;align-items:center;gap:14px;flex:none}
.hdr .btn{padding:11px 20px;min-height:42px;font-size:14px}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--line-ink);border-radius:var(--r);cursor:pointer;padding:0}
.burger span{display:block;width:17px;height:1.5px;background:var(--on-ink);position:relative;transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--on-ink);transition:.3s var(--ease)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

.mnav{
  position:fixed;inset:0;background:var(--ink);z-index:190;
  padding:112px var(--gut) 40px;display:flex;flex-direction:column;gap:6px;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;overflow-y:auto;
}
.mnav.open{opacity:1;visibility:visible}
.mnav a{font-family:var(--serif);font-size:30px;color:var(--on-ink);padding:13px 0;border-bottom:1px solid var(--line-ink)}
.mnav .btn{margin-top:26px;width:100%}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden;padding-block:clamp(56px,8vw,104px) clamp(64px,9vw,116px)}
.hero::before{
  content:"";position:absolute;top:-30%;right:-14%;width:62vw;height:120%;
  background:radial-gradient(circle at 50% 50%,rgba(176,141,87,.16),transparent 62%);
  pointer-events:none;
}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(40px,5vw,76px);align-items:center}
.hero h1{margin-bottom:26px;max-width:15ch}
.hero .lede{margin-bottom:36px;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px}
.hero-trust{display:flex;flex-wrap:wrap;gap:12px 28px;padding-top:28px;border-top:1px solid var(--line-ink)}
.trust-i{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--on-ink-mute)}
.trust-i svg{color:var(--brass);flex:none}

/* ---------- chat mock (product-as-hero) ---------- */
.chat{
  background:linear-gradient(168deg,#182120,#0E1413);
  border:1px solid rgba(246,244,239,.11);border-radius:6px;
  box-shadow:0 44px 90px -34px rgba(0,0,0,.85),0 0 0 1px rgba(176,141,87,.09);
  overflow:hidden;
}
.chat-bar{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid rgba(246,244,239,.09);background:rgba(246,244,239,.025)}
.chat-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,var(--brass),var(--brass-deep));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#1A1206;flex:none}
.chat-id{flex:1;min-width:0}
.chat-id b{display:block;font-size:13.5px;font-weight:600;color:var(--on-ink);letter-spacing:-.01em}
.chat-id span{display:block;font-size:11.5px;color:var(--on-ink-faint)}
.chat-live{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#7FBF8F;flex:none}
.dot{width:6px;height:6px;border-radius:50%;background:#7FBF8F;animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}
.chat-body{padding:20px 18px;display:flex;flex-direction:column;gap:13px;min-height:326px}
.msg{max-width:85%;padding:12px 15px;border-radius:12px;font-size:14.2px;line-height:1.55;opacity:0;transform:translateY(9px);animation:rise .5s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.msg.them{align-self:flex-start;background:rgba(246,244,239,.075);color:var(--on-ink);border-bottom-left-radius:3px}
.msg.me{align-self:flex-end;background:var(--brass);color:#1A1206;border-bottom-right-radius:3px;font-weight:500}
.msg small{display:block;font-size:11.5px;color:var(--on-ink-faint);margin-top:5px}
/* listing card inside chat = the differentiator vs FAQ bots */
.lcard{display:flex;gap:11px;margin-top:10px;padding:10px;background:rgba(246,244,239,.05);border:1px solid rgba(246,244,239,.09);border-radius:7px}
.lcard img{width:62px;height:50px;object-fit:cover;border-radius:4px;flex:none}
.lcard div{min-width:0}
.lcard b{display:block;font-size:13px;color:var(--on-ink);font-weight:600}
.lcard span{display:block;font-size:11.5px;color:var(--on-ink-faint);margin-top:2px}
.lcard i{display:block;font-size:12.5px;color:var(--brass);font-style:normal;font-weight:600;margin-top:3px}
.typing{display:flex;gap:4px;padding:14px 16px;background:rgba(246,244,239,.075);border-radius:12px;border-bottom-left-radius:3px;align-self:flex-start;width:fit-content}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--on-ink-faint);animation:bounce 1.3s var(--ease) infinite}
.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.42}30%{transform:translateY(-5px);opacity:1}}
.chat-foot{padding:13px 18px;border-top:1px solid rgba(246,244,239,.09);display:flex;align-items:center;gap:11px;background:rgba(246,244,239,.02)}
.chat-foot span{flex:1;font-size:13.5px;color:var(--on-ink-faint)}
.chat-send{width:32px;height:32px;border-radius:50%;background:var(--brass);display:flex;align-items:center;justify-content:center;color:#1A1206;flex:none}

/* stamp badge floating on the chat */
.stamp{
  position:absolute;left:-26px;bottom:34px;background:var(--paper);color:var(--ink);
  padding:13px 17px;border-radius:3px;box-shadow:0 20px 44px -18px rgba(0,0,0,.6);
  display:flex;align-items:center;gap:12px;z-index:3;
}
.stamp b{font-family:var(--serif);font-size:27px;line-height:1;display:block}
.stamp span{font-size:11px;line-height:1.3;color:var(--on-paper-mute);max-width:12ch;display:block}

/* ---------- metric strip ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-paper);border-block:1px solid var(--line-paper)}
.metric{background:var(--paper);padding:clamp(26px,3.4vw,40px) clamp(18px,2vw,28px)}
.metric b{font-family:var(--serif);font-size:clamp(34px,4vw,50px);line-height:1;display:block;margin-bottom:9px;letter-spacing:-.02em}
.metric span{font-size:13.5px;color:var(--on-paper-mute);line-height:1.45;display:block}
.metric i{font-style:normal;color:var(--brass)}

/* ---------- cards ---------- */
.card{
  background:var(--paper);border:1px solid var(--line-paper);border-radius:var(--r);
  padding:clamp(26px,3vw,36px);transition:.32s var(--ease);position:relative;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);border-color:rgba(176,141,87,.5);box-shadow:0 22px 48px -26px rgba(11,16,15,.3)}
.on-ink .card{background:var(--ink-2);border-color:var(--line-ink)}
.on-ink .card:hover{background:var(--ink-3);box-shadow:0 22px 48px -26px rgba(0,0,0,.7)}
.card-n{font-family:var(--serif);font-size:15px;color:var(--brass);margin-bottom:16px;display:block}
.card h3{margin-bottom:11px}
.card p{color:var(--on-paper-mute);font-size:15.3px;margin-bottom:0}
.on-ink .card p{color:var(--on-ink-mute)}
.card .tlink{margin-top:auto;padding-top:20px;align-self:flex-start}
.card-ico{width:38px;height:38px;color:var(--brass);margin-bottom:20px}

/* step cards with connector */
.steps{counter-reset:s}
.step{position:relative;padding-left:66px}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:-4px;font-family:var(--serif);font-size:34px;color:var(--brass);line-height:1;
}
.step::after{content:"";position:absolute;left:17px;top:38px;bottom:-30px;width:1px;background:var(--line-paper)}
.on-ink .step::after{background:var(--line-ink)}
.step:last-child::after{display:none}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px);align-items:start}
/* NOTE: light plans sit inside an .on-ink section — they MUST re-assert dark text
   or every non-heading string inherits bone-on-bone and disappears. */
.plan{background:var(--paper);border:1px solid var(--line-paper);padding:clamp(28px,3vw,38px);border-radius:var(--r);display:flex;flex-direction:column;height:100%;color:var(--on-paper)}
.on-ink .plan h3,.plan h3{color:var(--on-paper)}
.on-ink .plan.feat h3{color:var(--on-ink)}
.plan .plan-price{color:var(--on-paper)}
.plan.feat .plan-price{color:var(--on-ink)}
.plan.feat{background:var(--ink);color:var(--on-ink);border-color:var(--ink);position:relative}
.plan.feat h3{color:var(--on-ink)}
.plan-tag{position:absolute;top:-1px;right:22px;background:var(--brass);color:#1A1206;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:6px 12px}
.plan-price{font-family:var(--serif);font-size:clamp(38px,4.4vw,54px);line-height:1;margin:18px 0 5px;letter-spacing:-.02em}
.plan-price sub{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--on-paper-mute);vertical-align:baseline;bottom:0}
.plan.feat .plan-price sub{color:var(--on-ink-mute)}
.plan-sub{font-size:13.5px;color:var(--on-paper-mute);margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--line-paper)}
.plan.feat .plan-sub{color:var(--on-ink-mute);border-color:var(--line-ink)}
.plan ul{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:12px}
.plan li{font-size:14.6px;line-height:1.5;display:flex;gap:11px;color:var(--on-paper-mute)}
.plan.feat li{color:var(--on-ink-mute)}
.plan li svg{color:var(--brass);flex:none;margin-top:4px}
.plan .btn{width:100%;margin-top:auto}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-paper);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:14.6px;min-width:560px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line-paper)}
th{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--on-paper-faint);background:var(--paper-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--paper-2)}
td strong{font-weight:600}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line-paper)}
.faq details{border-bottom:1px solid var(--line-paper)}
.faq summary{
  padding:24px 46px 24px 0;cursor:pointer;list-style:none;position:relative;
  font-size:17.5px;font-weight:500;letter-spacing:-.01em;transition:color .22s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brass)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:31px;width:10px;height:10px;
  border-right:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:35px}
.faq-a{padding:0 60px 26px 0;color:var(--on-paper-mute);font-size:16px;max-width:74ch}
.faq-a p:last-child{margin-bottom:0}

/* ---------- limits (E-E-A-T) ---------- */
.limits{background:var(--paper-2);border-left:2px solid var(--brass);padding:clamp(26px,3vw,38px)}
.limits ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:13px}
.limits li{color:var(--on-paper-mute);font-size:15.6px;line-height:1.6}
.limits li strong{color:var(--on-paper);font-weight:600}

/* ---------- cta band ---------- */
.cta{background:var(--ink);color:var(--on-ink);text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 118%,rgba(176,141,87,.22),transparent 62%)}
.cta-in{position:relative;z-index:2;max-width:720px;margin:0 auto}
.cta h2{margin-bottom:20px}
.cta .lede{margin:0 auto 34px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- breadcrumb ---------- */
.crumb{padding-block:22px;font-size:13.2px;color:var(--on-paper-faint);display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.crumb a{color:var(--on-paper-mute);transition:color .2s}
.crumb a:hover{color:var(--brass)}
.crumb span{color:var(--on-paper-faint)}

/* ---------- page hero (inner pages) ---------- */
.phero{background:var(--ink);color:var(--on-ink);padding-block:clamp(52px,7vw,84px);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;top:-40%;right:-10%;width:52vw;height:140%;background:radial-gradient(circle,rgba(176,141,87,.13),transparent 62%)}
.phero-in{position:relative;z-index:2;max-width:900px}
.phero h1{margin-bottom:22px}
.answer{font-size:clamp(17px,1.5vw,19.5px);line-height:1.62;color:var(--on-ink-mute);max-width:62ch}

/* ---------- prose ---------- */
.prose{max-width:none}
.prose h2{font-family:var(--serif);font-size:clamp(27px,3vw,38px);margin:clamp(48px,5vw,68px) 0 18px;letter-spacing:-.02em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;font-weight:600;margin:34px 0 12px;letter-spacing:-.01em}
.prose p{color:var(--on-paper-mute);font-size:16.6px;line-height:1.72;max-width:74ch}
.prose ul,.prose ol{color:var(--on-paper-mute);font-size:16.6px;line-height:1.72;padding-left:22px;max-width:74ch}
.prose li{margin-bottom:10px}
.prose strong{color:var(--on-paper);font-weight:600}
.prose .tbl-wrap,.prose .limits{margin-block:32px}

/* TOC */
.toc{background:var(--paper-2);padding:26px 30px;border-radius:var(--r);margin-bottom:44px}
.toc b{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-paper-faint);display:block;margin-bottom:14px}
.toc ol{margin:0;padding-left:19px;columns:2;column-gap:32px}
.toc li{margin-bottom:8px;font-size:14.8px}
.toc a{color:var(--on-paper-mute);transition:color .2s}
.toc a:hover{color:var(--brass)}

/* article layout */
.art{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(36px,5vw,72px);align-items:start}
.aside{position:sticky;top:104px}
.aside-card{background:var(--ink);color:var(--on-ink);padding:30px;border-radius:var(--r)}
.aside-card h4{font-family:var(--serif);font-size:23px;color:var(--on-ink);margin-bottom:11px}
.aside-card p{font-size:14.5px;color:var(--on-ink-mute);margin-bottom:20px}
.aside-card .btn{width:100%}

/* related mesh */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel{padding:22px;border:1px solid var(--line-paper);border-radius:var(--r);transition:.28s var(--ease);display:block}
.rel:hover{border-color:var(--brass);transform:translateY(-3px)}
.rel b{display:block;font-size:15.6px;font-weight:600;margin-bottom:6px;letter-spacing:-.01em}
.rel span{font-size:13.6px;color:var(--on-paper-mute);line-height:1.5}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:var(--on-ink-mute);padding-block:clamp(56px,7vw,84px) 34px}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,52px);padding-bottom:48px;border-bottom:1px solid var(--line-ink)}
.ftr-brand p{font-size:14.6px;color:var(--on-ink-mute);max-width:34ch;margin:18px 0 0}
.ftr h5{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink);margin:0 0 18px}
.ftr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.ftr li a{font-size:14.4px;color:var(--on-ink-mute);transition:color .22s}
.ftr li a:hover{color:var(--brass)}
.ftr-bot{padding-top:26px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.2px;color:var(--on-ink-faint)}

/* ---------- live demo ---------- */
.demo-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:start}
.demo-chat{position:sticky;top:98px}
.demo-chat .chat-body{min-height:400px;max-height:min(56vh,520px);overflow-y:auto;scroll-behavior:smooth}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px}
.chip{
  font-family:inherit;font-size:12.8px;line-height:1.3;padding:8px 13px;cursor:pointer;
  background:rgba(246,244,239,.055);border:1px solid rgba(246,244,239,.13);color:var(--on-ink-mute);
  border-radius:99px;transition:.25s var(--ease);text-align:left;
}
.chip:hover{background:rgba(176,141,87,.16);border-color:var(--brass);color:var(--on-ink)}
.chat-input{display:flex;align-items:center;gap:10px;padding:13px 14px 13px 18px;border-top:1px solid rgba(246,244,239,.09);background:rgba(246,244,239,.02)}
.chat-input input{
  flex:1;min-width:0;background:none;border:0;outline:none;color:var(--on-ink);
  font-family:inherit;font-size:14.6px;padding:8px 0;
}
.chat-input input::placeholder{color:var(--on-ink-faint)}
.chat-send-btn{
  width:38px;height:38px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:var(--brass);color:#1A1206;display:flex;align-items:center;justify-content:center;
  transition:.25s var(--ease);
}
.chat-send-btn:hover{background:var(--brass-lift);transform:scale(1.06)}
.demo-side{display:flex;flex-direction:column;gap:20px}
.watch{border:1px solid var(--line-paper);padding:clamp(24px,3vw,32px);border-radius:var(--r)}
.watch ol{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:14px}
.watch li{font-size:15px;line-height:1.6;color:var(--on-paper-mute)}
.watch li strong{color:var(--on-paper);font-weight:600}
.msg .lcard{display:flex}
@media (max-width:1080px){
  .demo-grid{grid-template-columns:1fr}
  .demo-chat{position:static}
}

/* ============================================================
   PREMIUM LAYER — texture, motion, depth
   ============================================================ */

/* ---- 1. grain. the single biggest "expensive" tell ---- */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---- 2. aurora — STATIC warm light behind the photo.
   It used to drift on a 26s loop; combined with the moving hero image that
   produced a second layer of perceptible motion. Now it's a still glow. ---- */
.aurora{position:absolute;inset:-30% -10%;pointer-events:none;z-index:0;filter:blur(80px);opacity:.4}
.aurora i{position:absolute;display:block;border-radius:50%}
.aurora i:nth-child(1){width:46vw;height:46vw;background:radial-gradient(circle,rgba(176,141,87,.45),transparent 68%);top:2%;right:4%}
.aurora i:nth-child(2){width:38vw;height:38vw;background:radial-gradient(circle,rgba(122,139,127,.28),transparent 68%);bottom:4%;right:26%}
.aurora i:nth-child(3){width:30vw;height:30vw;background:radial-gradient(circle,rgba(200,164,107,.24),transparent 68%);top:32%;left:-4%}

/* ---- 3. announcement ticker ---- */
.ticker{background:linear-gradient(90deg,#0B100F,#171F1D,#0B100F);border-bottom:1px solid rgba(176,141,87,.22);overflow:hidden;position:relative;z-index:210}
.ticker-in{display:flex;align-items:center;justify-content:center;gap:11px;height:38px;font-size:12.4px;letter-spacing:.04em;color:var(--on-ink-mute)}
.ticker b{color:var(--brass);font-weight:600}
/* STATIC. Two previous attempts (translate-jump, then crossfade) both read as
   blinking — the crossfade left ~2s dead gaps between messages. A top bar is
   peripheral vision; anything that changes there is a distraction, not a feature. */
.ticker-in{flex-wrap:wrap;gap:8px 14px}
.ticker-sep{color:var(--on-ink-faint)}
.ticker-msg{color:var(--on-ink-mute)}
@media (max-width:620px){
  .ticker-in{height:auto;padding-block:9px;font-size:11.6px;justify-content:center;text-align:center}
  .ticker-hide-sm{display:none}
}

/* ---- 4. header states ---- */
.hdr{transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.hdr.stuck{background:rgba(9,13,12,.96);box-shadow:0 14px 44px -22px rgba(0,0,0,.9);border-bottom-color:rgba(176,141,87,.26)}
.hdr.stuck .hdr-in{height:64px}
.hdr-in{transition:height .4s var(--ease)}
/* nav underline draws in */
.nav a::before{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:right;transition:transform .38s var(--ease);
}
.nav a:hover::before{transform:scaleX(1);transform-origin:left}
.logo-mk{transition:transform .5s var(--ease),filter .5s var(--ease)}
.logo:hover .logo-mk{transform:rotate(-8deg) scale(1.08);filter:drop-shadow(0 0 12px rgba(176,141,87,.6))}

/* shine sweep on primary buttons */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);
}
.btn-primary:hover::after{animation:sweep .85s var(--ease)}
@keyframes sweep{to{left:135%}}

/* scroll progress */
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--brass-deep),var(--brass-lift));z-index:999;transition:width .12s linear}

/* ---- 5. CINEMATIC HERO ---- */
.hero{padding-block:clamp(34px,4.6vw,68px) clamp(64px,8vw,110px)}
/* full-bleed photograph + scrim. This is what separates flagship from minimal. */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* NO Ken Burns. A large background photo that scales continuously shimmers and
   judders on most displays — it read as "vibrating" and caused eye strain.
   A still, well-composed photograph is the more premium choice anyway. */
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 62%;
  filter:saturate(.74) contrast(1.05);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(102deg,#070A0A 6%,rgba(7,10,10,.94) 34%,rgba(7,10,10,.62) 62%,rgba(7,10,10,.86) 100%),
    linear-gradient(180deg,rgba(7,10,10,.9),transparent 26%,rgba(7,10,10,.72));
}
.hero .d1{font-size:clamp(44px,7vw,92px);text-shadow:0 4px 40px rgba(0,0,0,.5)}
/* glass treatment on the chat over photography */
.chat{background:linear-gradient(168deg,rgba(24,33,32,.82),rgba(10,14,13,.9));backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)}

/* ---- capability strip — STATIC.
   Was a scrolling marquee. Translating serif text at low speed produces
   sub-pixel judder (it read as "vibrating"), and the edge fade masks clipped
   words mid-render. A static wrapping pill row shows everything at once. ---- */
.marq{background:var(--ink);border-block:1px solid var(--line-ink);padding:clamp(22px,3vw,34px) 0}
.marq-track{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px;width:100%}
.marq-track span{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:13.4px;font-weight:500;letter-spacing:.01em;color:var(--on-ink-mute);
  background:rgba(246,244,239,.045);border:1px solid rgba(246,244,239,.1);
  border-radius:99px;padding:9px 16px;transition:.28s var(--ease);
}
.marq-track span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex:none}
.marq-track span:hover{background:rgba(176,141,87,.13);border-color:rgba(176,141,87,.45);color:var(--on-ink)}
@media (max-width:620px){.marq-track span{font-size:12.4px;padding:8px 13px}}

/* ---- full-bleed showcase ---- */
.showcase{position:relative;min-height:clamp(430px,58vw,620px);display:flex;align-items:flex-end;overflow:hidden}
.showcase-img{position:absolute;inset:0;z-index:0}
.showcase-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.showcase-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,10,10,.62) 0%,rgba(7,10,10,.2) 34%,rgba(7,10,10,.94) 100%)}
.showcase-in{position:relative;z-index:2;width:100%;padding-block:clamp(40px,5vw,68px)}
.glass{
  background:rgba(12,17,16,.62);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(246,244,239,.14);border-radius:4px;padding:clamp(26px,3.2vw,40px);
}
.glass-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.glass-row b{font-family:var(--serif);font-size:clamp(30px,3.6vw,46px);color:var(--on-ink);display:block;line-height:1;margin-bottom:8px}
.glass-row span{font-size:14px;color:var(--on-ink-mute);line-height:1.5;display:block}
@media (max-width:760px){.glass-row{grid-template-columns:1fr;gap:22px}}
.hero-in{position:relative;z-index:2}
/* staggered entrance */
.rise{opacity:0;transform:translateY(24px);animation:riseIn .95s var(--ease) forwards}
@keyframes riseIn{to{opacity:1;transform:none}}
.hero .eyebrow{animation-delay:.05s}
.hero h1{animation-delay:.15s}
.hero .lede{animation-delay:.3s}
.hero-cta{animation-delay:.42s}
.hero-trust{animation-delay:.54s}
/* headline word shimmer on the accent */
.ital{position:relative;display:inline-block}
.ital::after{
  content:"";position:absolute;left:0;right:0;bottom:.12em;height:2px;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);
  transform:scaleX(0);transform-origin:left;animation:underline 1.3s var(--ease) .9s forwards;
}
@keyframes underline{to{transform:scaleX(1)}}

/* chat: parallax shell + hover-lit messages */
.chat-shell{position:relative;z-index:2;transform-style:preserve-3d;transition:transform .5s var(--ease);animation:riseIn 1s var(--ease) .3s forwards;opacity:0}
.chat{position:relative;overflow:visible}
.chat::before{
  content:"";position:absolute;inset:-1px;border-radius:7px;pointer-events:none;z-index:-1;
  background:linear-gradient(150deg,rgba(176,141,87,.55),transparent 42%,transparent 62%,rgba(176,141,87,.28));
  opacity:.85;
}
.chat-body{position:relative;overflow:hidden;border-radius:0}
/* .seq is added by JS only — without JS every message stays visible */
.chat-body.seq .msg{opacity:0;animation:none}
.chat-body.seq .msg.show{animation:rise .55s var(--ease) forwards}
.msg{transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.msg.them:hover{transform:translateX(4px);background:rgba(246,244,239,.11);box-shadow:0 0 0 1px rgba(176,141,87,.42),0 12px 30px -14px rgba(176,141,87,.5)}
.msg.me:hover{transform:translateX(-4px);box-shadow:0 12px 30px -12px rgba(176,141,87,.85)}
.lcard{transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.lcard:hover{transform:translateY(-2px);border-color:rgba(176,141,87,.6);background:rgba(176,141,87,.09)}
.lcard img{transition:transform .5s var(--ease)}
.lcard:hover img{transform:scale(1.08)}

/* floating side chips around the chat */
.chip-float{
  position:absolute;z-index:4;display:flex;align-items:center;gap:9px;
  background:rgba(15,21,20,.9);backdrop-filter:blur(10px);
  border:1px solid rgba(176,141,87,.32);border-radius:99px;padding:9px 15px;
  font-size:12.4px;font-weight:600;color:var(--on-ink);white-space:nowrap;
  box-shadow:0 16px 40px -18px rgba(0,0,0,.9);
  opacity:0;animation:riseIn .8s var(--ease) forwards;
}
.chip-float svg{color:var(--brass);flex:none}
.chip-float.a{top:12%;left:-34px;animation-delay:1.1s}
.chip-float.b{bottom:26%;right:-26px;animation-delay:1.35s}
/* chips no longer bob — that was a third layer of perpetual motion */
.float-y{animation:none}

.stamp{animation:riseIn .8s var(--ease) 1.55s forwards;opacity:0}

/* ---- 6. card depth ---- */
.card{overflow:hidden;isolation:isolate}
.card::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(176,141,87,.13),transparent 62%);
}
.card:hover::after{opacity:1}
.card-ico{transition:transform .45s var(--ease)}
.card:hover .card-ico{transform:translateY(-3px) scale(1.07)}

/* metric counters */
.metric{position:relative;overflow:hidden}
.metric::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
}
.metric.in::before{transform:scaleX(1)}
.metric b{font-variant-numeric:tabular-nums}

/* plan lift */
.plan{transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.plan:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.plan.feat{box-shadow:0 26px 60px -28px rgba(176,141,87,.4)}

/* section entrance for headings */
.sechead .d2{animation:none}

/* ============================================================
   IMAGERY LAYER — colour comes from real photography, not from
   inventing a second brand accent. Photos run at full saturation
   on light grounds; only the dark hero/showcase scrims desaturate.
   ============================================================ */

/* photo-topped card */
.pcard{
  background:#fff;border:1px solid var(--line-paper);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;transition:.36s var(--ease);text-decoration:none;color:inherit;
}
.pcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(11,16,15,.4);border-color:rgba(176,141,87,.5)}
.pcard-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.06)}
.pcard-tag{
  position:absolute;top:13px;left:13px;z-index:2;
  background:rgba(11,16,15,.82);backdrop-filter:blur(8px);color:var(--paper);
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:7px 11px;border-radius:99px;
}
.pcard-body{padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;flex:1}
.pcard-body h3{margin-bottom:10px}
.pcard-body p{color:var(--on-paper-mute);font-size:15.2px;margin-bottom:0}
.pcard-body .tlink{margin-top:auto;padding-top:20px;align-self:flex-start}

/* tinted icon chip — small hits of colour */
.ico-chip{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;flex:none;
}
.ico-brass{background:rgba(176,141,87,.15);color:var(--brass-deep)}
.ico-sage {background:rgba(104,133,113,.16);color:#4E7059}
.ico-slate{background:rgba(72,96,118,.14);color:#3E5A73}
.ico-clay {background:rgba(168,101,74,.14);color:#8E4F33}
.on-ink .ico-brass{color:var(--brass-lift)}
.on-ink .ico-sage{background:rgba(127,191,143,.14);color:#8FCBA0}
.on-ink .ico-slate{background:rgba(120,160,196,.14);color:#8FB6D6}
.on-ink .ico-clay{background:rgba(210,140,110,.14);color:#D89877}

/* alternating feature row: image one side, copy the other */
.feat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,72px);align-items:center}
.feat-row + .feat-row{margin-top:clamp(56px,7vw,104px)}
.feat-row:nth-child(even) .feat-media{order:-1}
.feat-media{position:relative;border-radius:5px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 34px 70px -34px rgba(11,16,15,.45)}
.feat-media img{width:100%;height:100%;object-fit:cover}
/* floating stat pill over the photo */
.pill{
  position:absolute;bottom:18px;left:18px;right:18px;z-index:2;
  background:rgba(255,255,255,.93);backdrop-filter:blur(14px);
  border-radius:4px;padding:15px 18px;display:flex;align-items:center;gap:14px;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.45);
}
.pill b{font-family:var(--serif);font-size:29px;line-height:1;color:var(--ink);flex:none}
.pill span{font-size:13.4px;line-height:1.45;color:var(--on-paper-mute)}
.feat-list{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:13px}
.feat-list li{display:flex;gap:12px;font-size:15.6px;line-height:1.55;color:var(--on-paper-mute)}
.feat-list svg{color:var(--brass);flex:none;margin-top:4px}

/* step with a screenshot/photo */
.stepshot{border-radius:5px;overflow:hidden;aspect-ratio:3/2;margin-bottom:22px;box-shadow:0 22px 46px -26px rgba(11,16,15,.4)}
.stepshot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.step-card:hover .stepshot img{transform:scale(1.05)}
.step-card{display:flex;flex-direction:column}
.step-n{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:50%;background:var(--brass);color:#1A1206;font-size:13.5px;font-weight:700;
  margin-bottom:14px;flex:none;
}

/* light section variant — brightness balance against the dark blocks */
.on-white{background:#fff}
@media (max-width:880px){
  .feat-row{grid-template-columns:1fr}
  .feat-row:nth-child(even) .feat-media{order:0}
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ============ responsive ============ */
@media (max-width:1180px){
  .chip-float.a{left:-14px}
  .chip-float.b{right:-8px}
}
@media (max-width:1080px){
  .chip-float{display:none}
  .hero-in,.split,.split-wide{grid-template-columns:1fr}
  .hero-in{gap:52px}
  .art{grid-template-columns:1fr}
  .aside{position:static}
  .sechead{grid-template-columns:1fr;align-items:start;gap:18px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .stamp{left:auto;right:16px;bottom:-18px}
}
@media (max-width:900px){
  .nav,.hdr-cta .btn-ghost{display:none}
  .burger{display:flex}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .ftr-top{grid-template-columns:1fr 1fr}
  .ftr-brand{grid-column:1/-1}
  .related{grid-template-columns:1fr}
}
@media (max-width:680px){
  body{font-size:16.4px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .toc ol{columns:1}
  .hero-cta .btn{width:100%}
  .chat-body{min-height:290px}
  .stamp{position:static;margin-top:16px;width:fit-content}
  .metrics{grid-template-columns:1fr}
  .faq summary{font-size:16.4px;padding-right:38px}
  .step{padding-left:52px}
  .step::before{font-size:27px}
  .step::after{left:13px}
}