/* ════════════════════════════════════════════════════════════
   OCTAVO · FORUM · shared site theme
   Black · marble · one red. Classical, premium, alive.
   ════════════════════════════════════════════════════════════ */
:root{
  --bg:#0A0A0C; --bg-2:#0D0D10; --panel:#141417; --panel-2:#19191D;
  --line:rgba(236,232,223,.10); --line-2:rgba(236,232,223,.20); --line-3:rgba(236,232,223,.06);
  --marble:#ECE8DF; --marble-2:#A7A299; --marble-3:#6C685F;
  --red:#D8283A; --red-deep:#A81825; --red-soft:#F0556A; --red-glow:rgba(216,40,58,.5); --red-wash:rgba(216,40,58,.10);
  --oxblood:#4A1014; --oxblood-2:#2A0A0C;
  --f-disp:"Space Grotesk",system-ui,sans-serif;
  --f-head:"Hanken Grotesk",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --f-roman:"Cinzel",Georgia,serif;
  --ease:cubic-bezier(.22,.65,.25,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-y:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overscroll-behavior-y:none}
input,textarea{caret-color:var(--red)}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{
  margin:0;color:var(--marble);
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(255,244,228,.06), transparent 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(216,40,58,.05), transparent 70%),
    var(--bg);
  background-attachment:fixed;
  font-family:var(--f-head);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.005em;
}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.025em;line-height:1.05}
p{margin:0}
img,svg{display:block}

/* ambient */
#hall{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ═══ CINEMATIC HERO (homepage) ═══
   layer order: site-bg → hero-bg image(0) → particles(#hall,1) → foreground mountains(2) → content(sections,2+ later in DOM) */
/* image is set inline by forum.js (per page, from data-hero-bg / data-hero-fg) */
.hero-bg{position:absolute;top:0;left:0;width:100%;height:118vh;z-index:0;pointer-events:none;opacity:.95;will-change:transform,opacity;filter:brightness(.82);
  background-position:50% 18%;background-size:cover;background-repeat:no-repeat}
.hero-fg{position:absolute;top:0;left:0;width:100%;height:118vh;z-index:0;pointer-events:none;opacity:.95;will-change:transform,opacity;filter:brightness(.82);
  background-position:50% 18%;background-size:cover;background-repeat:no-repeat}
@media(max-width:760px){
  .hero-bg,.hero-fg{height:104vh;background-position:34% 16%}
  .hero-fg{opacity:.9}
}
/* mobile: clip any horizontal overflow (safe: the desktop sticky band is off below 920px) */
@media(max-width:920px){
  html,body{overflow-x:hidden;max-width:100%}
}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vign{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(140% 100% at 50% 0%, transparent 46%, rgba(0,0,0,.66) 100%)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(22px,5vw,44px);position:relative;z-index:2}
.z{position:relative;z-index:2}

/* kicker */
.kicker{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-disp);font-size:12px;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--marble-2)}
.kicker::before{content:"";width:30px;height:1px;background:var(--red);box-shadow:0 0 7px var(--red-glow)}
.kicker.center{justify-content:center}
.kicker.center::before{display:none}
.em{font-style:italic;font-weight:400;color:var(--marble-2)}

/* ═══ HEADER ═══ */
header.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .5s,backdrop-filter .5s,border-color .5s;border-bottom:1px solid transparent}
.nav-in{max-width:var(--max);margin:0 auto;padding:18px clamp(22px,5vw,44px);display:flex;align-items:center;justify-content:space-between;gap:22px;transition:padding .4s}
.nav.shrink{background:rgba(10,10,12,.74);backdrop-filter:blur(16px) saturate(1.1);border-color:var(--line)}
.nav.shrink .nav-in{padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{width:26px;height:26px;flex:none;filter:drop-shadow(0 2px 6px var(--red-glow));transform:translateY(-3px)}
.brand b{font-family:var(--f-roman);font-weight:600;font-size:20px;letter-spacing:.06em;color:var(--marble)}
.navlinks{display:flex;gap:32px;align-items:center}
.navlinks a{font-size:14px;color:var(--marble-2);position:relative;transition:color .3s;letter-spacing:0}
.navlinks a:hover,.navlinks a.active{color:var(--marble)}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-7px;height:1px;width:0;background:var(--red);transition:width .35s var(--ease)}
.navlinks a:hover::after,.navlinks a.active::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:18px}
/* only one CTA on screen at a time: the nav button hides while any in-page CTA is visible */
.nav-cta .btn{transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s,border-color .3s,box-shadow .3s}
.nav.cta-off .nav-cta .btn{opacity:0;transform:translateY(-7px);pointer-events:none}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-head);font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding:14px 28px;border-radius:999px;cursor:pointer;border:1px solid var(--red);background:var(--red);color:#fff;white-space:nowrap;
  position:relative;overflow:hidden;transition:background .3s,border-color .3s,box-shadow .3s,transform .25s var(--ease)}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep);box-shadow:0 16px 44px -14px var(--red-glow);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s var(--ease)}
.btn:hover::after{transform:translateX(130%)}
.btn--ghost{background:transparent;color:var(--marble);border-color:var(--line-2)}
.btn--ghost:hover{background:transparent;border-color:var(--red);color:#fff;box-shadow:none}
.btn--ghost::after{display:none}
.btn--marble{background:var(--marble);color:#16100c;border-color:var(--marble)}
.btn--marble:hover{background:#fff;border-color:#fff;color:#16100c}
.btn--lg{padding:17px 34px;font-size:16px}
/* fancy primary CTA: glossy glowing pill + an automatic shine sweep every ~10s */
.btn--shine{background:linear-gradient(180deg,#E63340,var(--red) 52%,#BE1E2D);border-color:#BE1E2D;
  box-shadow:0 10px 34px -10px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.22)}
.btn--shine:hover{background:linear-gradient(180deg,#E63340,var(--red-deep));border-color:var(--red-deep);
  box-shadow:0 18px 46px -12px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.3)}
.btn--shine::before{content:"";position:absolute;top:-20%;left:0;height:140%;width:55%;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5),transparent 80%);
  transform:translateX(-160%) skewX(-18deg);animation:autoshine 10s ease-in-out infinite}
.btn--shine .ar{transition:transform .3s var(--ease)}
.btn--shine:hover .ar{transform:translateX(4px)}
@keyframes autoshine{0%{transform:translateX(-160%) skewX(-18deg)}9%{transform:translateX(220%) skewX(-18deg)}100%{transform:translateX(220%) skewX(-18deg)}}
.ilink{font-family:var(--f-head);font-weight:500;font-size:14.5px;color:var(--marble-2);display:inline-flex;align-items:center;gap:9px;transition:color .3s;cursor:pointer}
.ilink:hover{color:var(--marble)}
.ilink .ar{transition:transform .3s var(--ease)}
.ilink:hover .ar{transform:translateX(5px)}

/* ═══ SECTIONS / REVEALS ═══ */
section{position:relative;z-index:2}
.band{padding:clamp(80px,12vh,140px) 0}
.band--hair{border-top:none}
.sec-head{margin-bottom:clamp(44px,6vw,72px);max-width:720px}
.sec-head h2{font-family:var(--f-head);font-size:clamp(31px,4.5vw,50px);letter-spacing:-.035em;line-height:1.06;margin-top:22px;font-weight:600}
.sec-head .lead{font-size:clamp(16px,1.5vw,18.5px);color:var(--marble-2);margin-top:24px;line-height:1.6;max-width:48ch}
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal].d1{transition-delay:.12s}[data-reveal].d2{transition-delay:.24s}[data-reveal].d3{transition-delay:.36s}[data-reveal].d4{transition-delay:.48s}

/* ═══ PAGE HERO (inner pages) ═══ */
.phero{padding:clamp(140px,20vh,210px) 0 clamp(40px,6vh,70px)}
.phero h1{font-family:var(--f-head);font-size:clamp(40px,6vw,72px);font-weight:600;letter-spacing:-.04em;line-height:1;margin-top:24px}
.phero h1 .em{color:var(--marble-2)}
.phero .sub{font-size:clamp(16px,1.5vw,19px);color:var(--marble-2);max-width:54ch;margin-top:26px;line-height:1.6}
.phero .sub b{color:var(--marble);font-weight:600}

/* ═══ PROSE ═══ */
.prose{max-width:64ch}
.prose p{color:var(--marble-2);font-size:17px;line-height:1.75;margin-bottom:1.2em}
.prose p b,.prose strong{color:var(--marble);font-weight:600}
.prose h3{font-family:var(--f-head);font-size:24px;font-weight:600;margin:1.8em 0 .5em;letter-spacing:-.02em;color:var(--marble)}
.prose .drop::first-letter{font-family:var(--f-roman);font-size:3.4em;line-height:.8;float:left;color:var(--red);margin:.06em .12em 0 0;font-weight:700}

/* ═══ GRID CARDS ═══ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gcard{position:relative;padding:30px 28px;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:background .4s,border-color .4s,transform .45s var(--ease),box-shadow .45s}
.gcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(120% 80% at 50% -10%, var(--red-wash), transparent 60%)}
.gcard:hover{background:var(--panel-2);border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 26px 54px -30px rgba(0,0,0,.85)}
.gcard:hover::before{opacity:1}
.gcard .gn{position:relative;font-family:var(--f-mono);font-size:12px;color:var(--red);letter-spacing:.12em;margin-bottom:18px}
.gcard h3,.gcard h4{position:relative;font-family:var(--f-head);font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.gcard h3{font-size:22px}.gcard h4{font-size:19px}
.gcard p{position:relative;color:var(--marble-2);font-size:14.5px;line-height:1.62}

/* soft modern panel (was a double-ruled certificate) */
.cert{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px}
.cert>*{position:relative;z-index:1}

/* version ladder */
.ladder{display:grid;gap:8px;max-width:780px}
.ver{display:grid;grid-template-columns:60px 1fr auto;gap:20px;align-items:center;font-family:var(--f-mono);font-size:13px;
  padding:15px 20px;border:1px solid var(--line);border-radius:12px;background:rgba(236,232,223,.015);transition:border-color .3s,background .3s}
.ver:hover{border-color:var(--line-2);background:rgba(236,232,223,.035)}
.ver .v{color:var(--marble-2)}.ver .d{color:var(--marble-2);font-family:var(--f-head);font-size:14px}.ver .t{color:var(--marble-3);font-size:11px}
.ver.live{border-color:rgba(216,40,58,.4);background:var(--red-wash)}.ver.live .v{color:var(--red);font-weight:600}

/* ═══ AI CONSOLE · macOS window, ChatGPT-style chat ═══ */
.console{position:relative;border-radius:14px;background:var(--panel);
  border:1px solid var(--line-2);box-shadow:0 44px 90px -42px rgba(0,0,0,.92);overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .4s}
.console.dragging{transition:none;box-shadow:0 70px 130px -38px rgba(0,0,0,.95);z-index:50}
.console.returning{transition:transform .82s cubic-bezier(.22,1.15,.36,1),box-shadow .5s;box-shadow:0 44px 90px -42px rgba(0,0,0,.92);z-index:50}

/* macOS title bar (grab handle) */
.con-top{position:relative;display:flex;align-items:center;height:42px;padding:0 16px;border-bottom:1px solid var(--line);
  background:rgba(20,20,24,.65);cursor:grab;touch-action:none;user-select:none}
.con-top.grabbing{cursor:grabbing}
.con-dots{display:flex;gap:8px}
.con-dots span{width:12px;height:12px;border-radius:50%}
.con-dots .d-r{background:#FF5F57}.con-dots .d-y{background:#FEBC2E}.con-dots .d-g{background:#28C840}
.con-title{position:absolute;left:0;right:0;text-align:center;font-family:var(--f-head);font-size:12.5px;color:var(--marble-3);pointer-events:none;padding:0 90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* body: a chat thread that auto-shifts up; never user-scrollable */
.con-body{padding:20px 20px 6px;height:clamp(300px,38vh,376px);overflow:hidden;display:flex;flex-direction:column;gap:2px}
.con-body>*{flex:none}   /* keep natural height so the thread shifts up instead of squashing */

/* user bubble: appears instantly, like a sent message */
.con-msg-you{align-self:flex-end;max-width:82%;background:var(--red);color:#fff;border-radius:16px 16px 5px 16px;
  padding:10px 15px;font-size:15px;line-height:1.45;margin-bottom:16px;flex:none;animation:msgIn .32s var(--ease-out)}
.con-msg-you.hide{display:none}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* thinking indicator */
.con-think{display:flex;gap:5px;align-self:flex-start;padding:4px 4px 16px;flex:none}
.con-think.hide{display:none}
.con-think span{width:7px;height:7px;border-radius:50%;background:var(--marble-3);animation:think 1.2s infinite}
.con-think span:nth-child(2){animation-delay:.18s}.con-think span:nth-child(3){animation-delay:.36s}
@keyframes think{0%,65%,100%{opacity:.3;transform:translateY(0)}32%{opacity:1;transform:translateY(-4px)}}

/* assistant answer */
.ans{font-size:15.5px;line-height:1.7;color:var(--marble);min-height:24px}
.ans .w{opacity:0;filter:blur(3px);transition:opacity .3s,filter .3s}.ans .w.on{opacity:1;filter:none}
.chip{display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:10px;font-weight:600;color:var(--red);
  background:var(--red-wash);border:1px solid rgba(216,40,58,.4);border-radius:999px;padding:1px 7px;margin:0 2px;vertical-align:1px;
  transform:scale(.4);opacity:0;transition:transform .35s var(--ease),opacity .25s,color .3s,background .3s,box-shadow .3s}
.chip.pop{transform:scale(1);opacity:1}.chip.hot{color:#fff;background:var(--red);box-shadow:0 0 14px var(--red-glow);border-color:var(--red)}
.srcs{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);display:grid;gap:8px}
.srcs-h{font-family:var(--f-mono);font-size:11px;color:var(--marble-3);letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between}
.src{display:grid;grid-template-columns:auto 1fr;gap:11px;padding:10px 12px;border-radius:12px;border:1px solid transparent;opacity:0;transform:translateX(9px);transition:all .42s var(--ease)}
.src.show{opacity:1;transform:none}.src.hot{border-color:rgba(216,40,58,.34);background:var(--red-wash)}
.src .sn{font-family:var(--f-mono);font-size:11px;color:var(--red);font-weight:600}
.src .sr{font-family:var(--f-mono);font-size:11px;color:var(--marble-3);display:block;margin-bottom:3px}
.src .sq{font-size:13px;color:var(--marble-2);font-style:italic;line-height:1.42}

/* the refusal */
.refuse{display:none}.refuse.on{display:block;animation:fade .5s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.withheld{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.18em;color:var(--red);background:var(--red-wash);border:1px solid rgba(216,40,58,.45);padding:6px 12px;border-radius:999px;margin-bottom:15px}
.clash{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.clash>div{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.clash .sr{font-family:var(--f-mono);font-size:10.5px;color:var(--marble-3);display:flex;justify-content:space-between;margin-bottom:8px}.clash .sr b{color:var(--red);font-weight:500}
.clash .sq{font-size:13.5px;color:var(--marble);font-style:italic;line-height:1.46}
.refuse-note{margin-top:14px;font-size:13.5px;color:var(--marble-2);line-height:1.5}

/* the prompt foot */
.con-foot{padding:6px 16px 16px}
.con-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:11px}
.con-chip{font-family:var(--f-head);font-size:12.5px;font-weight:500;color:var(--marble-2);background:rgba(236,232,223,.04);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;transition:color .2s,border-color .2s,background .2s;white-space:nowrap}
.con-chip:hover{color:var(--marble);border-color:var(--line-2);background:rgba(236,232,223,.07)}
.con-inputbar{display:flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:16px;padding:7px 7px 7px 16px;transition:border-color .25s,box-shadow .25s}
.con-inputbar:focus-within{border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash)}
.con-inputbar input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--marble);font-family:var(--f-head);font-size:14.5px}
.con-inputbar input::placeholder{color:var(--marble-3)}
.con-send{width:36px;height:36px;border-radius:50%;border:0;background:var(--red);color:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:background .2s,transform .2s}
.con-send:hover{background:var(--red-deep);transform:scale(1.06)}

/* ═══ STELE (pricing tablet) ═══ */
.stele{position:relative;max-width:560px;margin:0 auto;background:linear-gradient(180deg,var(--panel-2),var(--bg-2));
  border:1px solid var(--line-2);border-radius:18px;padding:clamp(34px,4vw,52px);text-align:center;overflow:hidden}
.stele::before{content:"";position:absolute;inset:8px;border:1px solid var(--line-3);border-radius:3px;pointer-events:none}
.stele .z2{position:relative;z-index:1}
.price-amt{display:flex;align-items:baseline;gap:7px;justify-content:center;margin:10px 0}
.price-amt .cur{font-family:var(--f-disp);font-size:36px;color:var(--red)}
.price-amt .n{font-family:var(--f-disp);font-size:clamp(74px,11vw,104px);font-weight:700;line-height:.9;color:var(--marble)}
.price-amt .per{font-family:var(--f-mono);font-size:12.5px;color:var(--marble-3);align-self:flex-end;margin-bottom:16px;line-height:1.4;text-align:left}
.price-list{list-style:none;padding:0;margin:24px auto 0;display:grid;gap:12px;max-width:42ch;text-align:left}
.price-list li{display:flex;gap:12px;align-items:baseline;color:var(--marble-2);font-size:15px}
.price-list li .ck{color:var(--red);font-family:var(--f-mono);font-size:12px}

/* ═══ FAQ ═══ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:0 22px;transition:border-color .3s,background .3s}
.faq details[open]{border-color:var(--line-2);background:var(--panel-2)}
.faq summary{list-style:none;cursor:pointer;padding:21px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--f-head);font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--marble);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq summary .pm{font-family:var(--f-mono);color:var(--red);font-size:20px;transition:transform .3s}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans-x{padding:0 0 22px;color:var(--marble-2);font-size:15.5px;line-height:1.65;max-width:64ch}

/* ═══ WAX SEALS (security certifications) ═══ */
.seals{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.seal{width:118px;height:118px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:radial-gradient(circle at 38% 32%, #E23B49, #B01A28 55%, #7E1320);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.25), inset 0 -6px 12px rgba(0,0,0,.4), 0 12px 30px -10px rgba(216,40,58,.5);
  position:relative;color:#fff;text-align:center;font-family:var(--f-disp);transition:transform .4s var(--ease)}
.seal::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(255,255,255,.35);border-radius:50%}
.seal:hover{transform:translateY(-5px) rotate(-3deg)}
.seal .sm{font-size:18px;font-weight:700;letter-spacing:.04em;line-height:1}
.seal .sl{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.1em;color:rgba(255,255,255,.85)}

/* ═══ FORM (pilot petition) ═══ */
.field{display:block;margin-bottom:20px}
.field label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--marble-3);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;
  padding:14px 15px;font-family:var(--f-head);font-size:15px;color:var(--marble);outline:none;transition:border-color .25s,box-shadow .25s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash)}
.field textarea{resize:vertical;min-height:110px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* ═══════════════════════ RED TEMPLE FOOTER · flat silhouette ═══════════════════════ */
.forum-footer{position:relative;z-index:3;margin-top:clamp(48px,7vh,100px);
  background:transparent;color:#F3E9DC;overflow:hidden}
.ff-in{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,44px)}

/* pediment · glossy red triangle with a soft glow */
.ff-pediment{position:relative;height:clamp(52px,6.5vw,86px);margin-top:clamp(20px,3vw,36px)}
.ff-pediment .tri{position:absolute;inset:0;background:linear-gradient(180deg,#E63340,var(--red) 62%,#C01F2E);
  clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 -4px 30px var(--red-glow))}
.ff-pediment .tri::after{content:"";position:absolute;left:8%;right:8%;top:30%;bottom:9%;background:#0B0A0B;clip-path:polygon(50% 0,100% 100%,0 100%)}
.ff-pediment .motto{position:absolute;left:0;right:0;bottom:11%;text-align:center;z-index:3;font-family:var(--f-roman);
  font-weight:700;letter-spacing:.22em;color:#fff;font-size:clamp(11px,1.6vw,16px);text-shadow:0 1px 8px rgba(0,0,0,.4)}

/* architrave · glossy red bar carrying the wordmark, with a glow */
.ff-frieze{height:clamp(46px,5.6vw,72px);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#E63340,var(--red) 55%,#C71F30);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.14), inset 0 -4px 0 #0B0A0B, 0 0 54px -10px var(--red-glow)}
.ff-frieze b{font-family:var(--f-roman);font-weight:700;letter-spacing:clamp(.18em,2vw,.46em);font-size:clamp(28px,6.5vw,66px);color:#F6EFE2;
  padding-left:.46em;text-shadow:0 2px 18px rgba(0,0,0,.32)}
.ff-frieze .v8{color:#0B0A0B;margin-left:.18em;text-shadow:none}

/* colonnade · glossy red columns with a glow, softly-lit dark bays */
.ff-colonnade{display:grid;grid-template-columns:30px 1fr 30px 1fr 30px 1fr 30px 1fr 30px;align-items:stretch;min-height:clamp(128px,15vw,178px);
  background:radial-gradient(130% 90% at 50% 0%, rgba(216,40,58,.06), transparent 58%), #0B0A0B}
.ff-col{position:relative;box-shadow:0 0 24px -8px rgba(216,40,58,.4);
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(11,10,11,.5) 7px 9px, transparent 9px 19px),
    linear-gradient(180deg,#E13140,var(--red) 30%,#B81C2B)}
.ff-col::before,.ff-col::after{content:"";position:absolute;left:-5px;right:-5px;height:8px}
.ff-col::before{top:0;background:#E2333F;box-shadow:0 1px 0 rgba(11,10,11,.6)}
.ff-col::after{bottom:0;background:#A81825;box-shadow:0 -1px 0 rgba(11,10,11,.6)}
.ff-bay{padding:30px 22px 28px;display:flex;flex-direction:column;gap:13px}
.ff-bay h5{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,233,220,.55);margin:0 0 4px}
.ff-bay a{color:rgba(243,233,220,.86);font-size:14.5px;transition:color .25s,padding-left .25s,text-shadow .25s;width:fit-content;white-space:nowrap}
.ff-bay a:hover{color:#fff;padding-left:6px;text-shadow:0 0 12px rgba(216,40,58,.45)}
.ff-bay .bigwm{display:flex;align-items:center;gap:10px;font-family:var(--f-roman);font-weight:700;font-size:22px;letter-spacing:.06em;color:#F3ECDD}
.ff-bay .bigwm .mk{width:24px}
.ff-bay .tag{font-family:var(--f-head);font-size:13.5px;color:rgba(243,233,220,.6);line-height:1.5}
.ff-bay .ff-cta{margin-top:6px}

/* stylobate · flat red steps widening downward */
.ff-stylobate{position:relative}
.ff-step{height:11px;background:linear-gradient(180deg,#E13140,var(--red));box-shadow:inset 0 2px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(11,10,11,.55)}
.ff-step.s2{margin:0 -3%;background:#C0212F}
.ff-step.s3{margin:0 -6%;background:#A81825}
/* colophon \u2014 framed by a Greek-key meander frieze (temple above is untouched) */
.ff-colophon{position:relative;background:#0B0A0B}
.ff-frieze-band{height:34px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='34'%20viewBox='0%200%2044%2034'%3E%3Cg%20fill='none'%20stroke='%23D8283A'%20stroke-width='4'%3E%3Cpath%20d='M0%2030%20H44'/%3E%3Cpath%20d='M4%2030%20V4%20H36%20V22%20H16%20V16%20H24'/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat-x;background-position:center;background-size:44px 34px}
.ff-frieze-band.flip{transform:scaleY(-1)}
.ff-base{max-width:1080px;margin:0 auto;padding:clamp(28px,4vw,46px) clamp(20px,5vw,44px);
  display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;
  font-family:var(--f-mono);font-size:12px;color:rgba(243,233,220,.62)}
.ff-base-row{display:flex;gap:28px;align-items:center;flex-wrap:wrap;justify-content:center;letter-spacing:.06em}
.ff-base-row>span{white-space:nowrap}
.ff-base .scrolls{display:flex;gap:22px}
.ff-base a{transition:color .25s}
.ff-base a:hover{color:#fff}
.ff-colo-note{font-family:var(--f-head);font-size:13.5px;color:rgba(243,233,220,.5);max-width:62ch;line-height:1.65;letter-spacing:0}
.ff-colo-note b{color:rgba(243,233,220,.78);font-weight:600}

/* powered by VALE · glowing horseman (radial halo + drop-shadow, identical on every page) */
/* follow us · social icons */
.ff-social{display:flex;align-items:center;gap:15px;margin-top:2px}
.ff-social span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,233,220,.45)}
.ff-social a{display:inline-flex;color:rgba(243,233,220,.62);transition:color .25s,transform .25s}
.ff-social a:hover{color:var(--red);transform:translateY(-2px)}

.vale-credit{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:4px;cursor:pointer;text-decoration:none;transition:transform .25s var(--ease)}
.vale-credit:hover{transform:translateY(-1px)}
.vale-credit:hover span{color:rgba(243,233,220,.72)}
.vale-credit::before{content:"";position:absolute;left:13px;top:50%;width:40px;height:40px;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(216,40,58,.38) 0%,rgba(216,40,58,.12) 45%,transparent 70%);
  animation:valehalo 3.4s ease-in-out infinite}
.vale-credit img{position:relative;width:26px;height:auto;animation:valeglow 3.4s ease-in-out infinite}
.vale-credit span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(243,233,220,.45)}
.vale-credit b{color:var(--red);font-weight:600}
@keyframes valeglow{0%,100%{filter:drop-shadow(0 0 5px rgba(216,40,58,.55));opacity:.88}50%{filter:drop-shadow(0 0 14px rgba(216,40,58,1));opacity:1}}
@keyframes valehalo{0%,100%{opacity:.25;transform:translate(-50%,-50%) scale(.85)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.1)}}

@media(max-width:860px){
  .ff-colonnade{grid-template-columns:30px 1fr 30px;min-height:0}
  .ff-colonnade .ff-col:nth-of-type(n+4){display:none}
  .ff-colonnade .ff-bay{grid-column:2}
}

/* ═══ MOBILE-ONLY NATIVE FEATURES (desktop unaffected) ═══ */
/* share button in the footer "Follow us" row (shown by JS only on touch + navigator.share) */
.ff-share{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;
  color:rgba(243,233,220,.62);transition:color .25s,transform .25s}
.ff-share:hover{color:var(--red);transform:translateY(-2px)}
.ff-share[hidden]{display:none}

/* kill mobile double-tap zoom + iOS long-press selection/callout (the main sources of jank) */
.btn,.con-chip,.con-send,.ff-share,.hs-dots i{touch-action:manipulation}
.chip{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media(pointer:coarse){
  .con-top{touch-action:auto;cursor:default}   /* console isn't draggable on touch, so let the title bar scroll the page */
}

/* long-press citation peek (touch only) */
.chip-peek{position:fixed;z-index:90;background:var(--panel-2);border:1px solid rgba(216,40,58,.34);border-radius:13px;
  padding:11px 13px;box-shadow:0 24px 54px -22px rgba(0,0,0,.9);pointer-events:none;
  opacity:0;transform:translateY(6px) scale(.97);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.chip-peek.below{transform:translateY(-6px) scale(.97)}
.chip-peek.on{opacity:1;transform:none}
.chip-peek .cp-ref{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--red);margin-bottom:5px}
.chip-peek .cp-q{display:block;font-size:13px;font-style:italic;line-height:1.45;color:var(--marble)}

/* ─── mobile: center the main content + give it room to breathe ─── */
@media(max-width:760px){
  .kicker{justify-content:center;letter-spacing:.2em}
  .kicker::before{display:none}
  .sec-head{text-align:center;margin-left:auto;margin-right:auto;margin-bottom:clamp(30px,7vw,48px)}
  .sec-head .lead{margin-left:auto;margin-right:auto}
  .phero{text-align:center}
  .phero .sub{margin-left:auto;margin-right:auto}
  /* block-center feature lists: the column sits in the middle, the text still reads left */
  .inc,.price-list{margin-left:auto;margin-right:auto;width:-moz-max-content;width:max-content;max-width:100%;text-align:left}
  .pilot-grid>div:first-child,.price-grid>div:first-child{text-align:center}
  .pilot-grid h1,.price-grid h1,.pilot-grid .sub,.price-grid .sub{margin-left:auto;margin-right:auto}

  /* spacing rhythm so nothing feels squished */
  .band{padding:clamp(64px,11vh,104px) 0}
  .proof2,.grid-3,.grid-4,.commit-grid{gap:14px}
  .hero .cta{gap:14px;margin-top:30px}
  .hero-demo{margin-top:clamp(36px,6vh,64px)}
}

/* ─── compact, centered footer for phones (desktop temple untouched) ─── */
@media(max-width:760px){
  .forum-footer{margin-top:clamp(30px,8vw,52px)}
  /* the pediment is hidden below, so give the top CTA button room before the red frieze bar */
  .forum-footer>.ff-in:first-child{padding-bottom:clamp(34px,9vw,52px)}
  .ff-pediment,.ff-stylobate,.ff-colo-note{display:none}            /* drop the tall decorative bands + the long note */
  .ff-frieze{height:46px;box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -3px 0 #0B0A0B,0 0 40px -12px var(--red-glow)}
  .ff-frieze b{font-size:30px;letter-spacing:.24em}

  .ff-colonnade{display:flex;flex-wrap:wrap;gap:26px 14px;min-height:0;padding:28px 22px 24px;text-align:center;
    background:radial-gradient(130% 90% at 50% 0%, rgba(216,40,58,.06), transparent 58%),#0B0A0B}
  .ff-colonnade .ff-col{display:none}                                /* hide the decorative columns */
  .ff-colonnade .ff-bay{padding:0;flex:1 1 0;min-width:0;gap:10px;align-items:center}
  .ff-colonnade .ff-bay:nth-child(2){flex:0 0 100%;gap:9px;margin-bottom:2px}  /* brand bay spans the full row */
  .ff-bay .bigwm{font-size:21px;justify-content:center}
  .ff-bay .bigwm .mk{width:21px}
  .ff-bay .tag{font-size:13px;line-height:1.5;margin:0 auto;max-width:34ch}
  .ff-bay .tag:last-child{display:none}                              /* drop the second latin tag line */
  .ff-bay h5{margin-bottom:3px;font-size:10px}
  .ff-bay a{font-size:12.5px;white-space:normal}
  .ff-bay a:hover{padding-left:0;color:#fff}

  .ff-base{padding:22px clamp(20px,5vw,44px) 30px;gap:14px}
  .ff-base-row{gap:18px}
}

/* ═══ RESPONSIVE / MOTION ═══ */
@media(max-width:920px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .navlinks{display:none}
  .clash,.form-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .ans .w{opacity:1!important;filter:none!important}.chip{opacity:1!important;transform:none!important}.src{opacity:1!important;transform:none!important}
  #hall{display:none}
}