/* cavnar.ai — the marketing site's one stylesheet (redesign 10/6/26).
   Dark like the product. Ember (#c84b2f) is spent on one thing at a time:
   the core, the live connection, the primary button. Motion runs on
   transform and opacity only; reduced motion shows every section finished. */

:root{
  color-scheme:dark;
  --bg:#0b0907;--bg2:#120f0c;--card:#1a1612;--card2:#211b16;
  --line:rgba(240,235,224,.08);--line2:rgba(240,235,224,.14);
  --ink:#f0ebe0;--ink2:rgba(240,235,224,.72);--ink3:rgba(240,235,224,.48);
  --ember:#c84b2f;--ember2:#e8956a;--ember3:#f6c39b;--emberglow:rgba(200,75,47,.35);
  --good:#4ead7a;--bad:#e3333f;
  --display:'Clash Display','Helvetica Neue',Arial,sans-serif;
  --body:'Apfel Grotezk','Helvetica Neue',Arial,sans-serif;
  --num:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.3,1.35,.5,1);
  --gutter:clamp(20px,5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;word-spacing:.06em;text-wrap:balance;margin:0}
p{margin:0}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--gutter)}
.kick{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ember2)}
:focus-visible{outline:2px solid var(--ember2);outline-offset:3px;border-radius:6px}

/* Page transitions between the site's pages: the nav holds still, the page
   crossfades (cross-document View Transitions; browsers without them just
   navigate). */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:var(--ease)}

/* ── nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding-top:env(safe-area-inset-top,0px);transition:background .35s ease,border-color .35s ease;border-bottom:1px solid transparent}
.nav.solid{background:rgba(11,9,7,.78);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-color:var(--line)}
.nav .in{display:flex;align-items:center;gap:28px;height:68px}
.nav .wm{display:block;height:22px;width:auto}
@media (max-width:560px){.nav .wm{height:19px}}
.nav .links{display:flex;gap:26px;margin-left:auto;font-size:14px}
.nav .links a{color:var(--ink2);text-decoration:none;transition:color .2s}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--ink)}
.nav .menu{display:none;margin-left:auto;background:none;border:1px solid var(--line2);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:13.5px}
@media (max-width:860px){
  .nav .links{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;gap:0;padding:8px var(--gutter) 18px;background:rgba(11,9,7,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
  .nav .links a{padding:12px 0;font-size:16px}
  .nav.open .links{display:flex}
  .nav .menu{display:inline-flex}
  .nav .cta-sm{display:none}
}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:999px;font-family:var(--body);font-weight:700;font-size:15px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s ease,background .3s ease,border-color .3s ease}
.btn.p{background:var(--ember);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 34px -12px var(--emberglow)}
.btn.p:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 18px 44px -12px rgba(200,75,47,.62)}
.btn.p:active{transform:translateY(0) scale(.98)}
.btn.s{background:rgba(240,235,224,.03);color:var(--ink);border:1px solid var(--line2)}
.btn.s:hover{background:var(--card);border-color:rgba(240,235,224,.24)}
.btn.sm{padding:9px 16px;font-size:13.5px}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}

/* ── reveals: staggered, once ── */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.rv.shown{opacity:1;transform:none}

/* ── sections ── */
.sec{position:relative;padding-block:clamp(88px,12vw,160px)}
.sec + .sec{border-top:1px solid var(--line)}
.sh{max-width:760px}
.sh h2{font-size:clamp(36px,5vw,64px);line-height:1.02;margin-top:14px}
.sh p{margin-top:18px;font-size:clamp(16px,1.5vw,19px);color:var(--ink2);max-width:600px}
.center{text-align:center;margin-inline:auto}
.center p{margin-inline:auto}

/* ── 1 hero ── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding-block:140px 90px}
.hero .glow{position:absolute;inset:-10% -10% auto;height:120%;background:radial-gradient(42% 46% at 50% 40%,rgba(200,75,47,.18),transparent 70%);pointer-events:none}
#motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%}
/* the reveal state is .shown, never .in: .in is a wrapper class here, and a
   revealed element once took the hero wrapper's column layout */
.orb{position:relative;width:168px;height:168px;margin-bottom:40px}
@media (max-width:560px){.orb{width:132px;height:132px;margin-bottom:30px}}
.orb .c{position:absolute;inset:0;box-shadow:0 0 110px 26px rgba(200,75,47,.34)}
.orb .r{position:absolute;border-radius:50%;border:1px solid rgba(240,235,224,.075)}
.orb .r1{inset:-48px}
.orb .r2{inset:-104px;border-style:dashed;border-color:rgba(240,235,224,.06)}
.orb .r3{inset:-170px;border-color:rgba(240,235,224,.04)}
.orb .r2 .sp{position:absolute;inset:0;animation:spin 80s linear infinite}
.orb .r2 i,.orb .r3 i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--ember2);box-shadow:0 0 14px var(--ember)}
.orb .r2 i{top:-3px;left:calc(50% - 3px)}
.orb .r3 .sp{position:absolute;inset:0;animation:spin 140s linear infinite reverse}
.orb .r3 i{bottom:12%;left:6%;opacity:.7}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero h1{font-size:clamp(46px,8vw,104px);line-height:.96;max-width:1040px}
/* The one animated gradient: a slow shimmer across "for restaurants." */
.hero h1 .g{background:linear-gradient(100deg,#f6c39b 0%,#e8956a 30%,#c84b2f 55%,#e8956a 78%,#f6c39b 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 9s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero .sub{margin-top:26px;font-size:clamp(17px,1.7vw,20px);color:var(--ink2);max-width:620px}
.hero .ctas{margin-top:38px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-self:stretch}
.hero .mods{margin-top:64px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:860px}
.hero .mods span{font-size:13px;color:var(--ink3);padding:7px 13px;border-radius:999px;border:1px solid var(--line)}
.scrollhint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:22px;height:36px;border-radius:12px;border:1px solid var(--line2);z-index:2}
.scrollhint i{position:absolute;left:50%;top:8px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--ink3);animation:hint 2.2s var(--ease) infinite}
@keyframes hint{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(12px);opacity:0}}

/* ── 2 problem ── */
.prob h2{font-size:clamp(36px,5.2vw,68px);line-height:1.04}
.prob h2 .x{color:var(--ink3)}
.silos{margin:64px auto 0;max-width:980px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:760px){.silos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.silo{padding:22px 20px;border-radius:18px;background:var(--card);border:1px dashed var(--line2);text-align:left;transition:border-color .8s ease,background .8s ease,transform .8s var(--ease)}
.silo b{display:block;font-size:15px}
.silo span{display:block;margin-top:6px;font-size:13.5px;color:var(--ink3)}
.silos.joined .silo{border-style:solid;border-color:rgba(232,149,106,.38);background:linear-gradient(180deg,rgba(200,75,47,.08),rgba(200,75,47,.02))}
.prob .then{margin-top:46px;font-size:clamp(18px,1.8vw,21px);color:var(--ink2)}
.prob .then b{color:var(--ink);font-weight:700}

/* ── 3 schedule generator ── */
.sched{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(36px,5vw,72px);align-items:center;margin-top:0}
@media (max-width:960px){.sched{grid-template-columns:1fr}}
.sched h2{font-size:clamp(36px,4.6vw,60px);line-height:1.02;margin-top:14px}
.sched .lede{margin-top:18px;color:var(--ink2);font-size:18px;max-width:460px}
.steps{margin-top:30px;display:flex;flex-direction:column}
.steps div{display:flex;gap:14px;align-items:center;padding:10px 0;color:var(--ink3);font-size:16px;transition:color .6s ease}
.steps i{width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);flex:none;display:flex;align-items:center;justify-content:center;transition:background .5s ease,border-color .5s ease,box-shadow .5s ease}
.steps .on{color:var(--ink)}
.steps .on i{background:var(--good);border-color:var(--good);box-shadow:0 0 16px rgba(78,173,122,.45)}
.steps .on i::after{content:'';width:8px;height:4px;border-left:2px solid var(--bg);border-bottom:2px solid var(--bg);transform:rotate(-45deg) translate(1px,-1px)}
.board-wrap{position:relative}
.board-wrap::before{content:'';position:absolute;inset:8% 4% -6%;background:radial-gradient(50% 50% at 50% 60%,rgba(200,75,47,.28),transparent 70%);filter:blur(30px);z-index:-1}
.board{padding:20px;border-radius:22px;background:var(--bg2);border:1px solid var(--line2);box-shadow:0 60px 120px -70px rgba(0,0,0,.9)}
.board .bt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.board .bt b{font-family:var(--display);font-weight:600;font-size:18px}
.board .bt span{font-size:12.5px;color:var(--ink3)}
.board .bt .live{display:inline-flex;align-items:center;gap:7px}
.board .bt .live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ember2);box-shadow:0 0 10px var(--ember);animation:breathe 2s ease-in-out infinite}
.grid7{display:grid;grid-template-columns:96px repeat(7,minmax(0,1fr));gap:4px;font-size:11.5px}
.grid7 .h{text-align:center;color:var(--ink3);font-weight:700;letter-spacing:.1em;padding:6px 0 9px}
.grid7 .p{color:var(--ink2);padding:8px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid7 .c{height:32px;border-radius:8px}
.grid7 .s{display:flex;align-items:center;justify-content:center;font-family:var(--num);font-size:10.5px;color:var(--ink2);background:rgba(200,75,47,.14);border:1px solid rgba(200,75,47,.32);opacity:0;transform:scale(.82);transition:opacity .45s ease,transform .55s var(--spring),background .5s ease,border-color .5s ease}
.grid7 .s.shown{opacity:1;transform:none}
.grid7 .s.ot{background:rgba(227,51,63,.16);border-color:rgba(227,51,63,.5);color:#ffb3b8}
.grid7 .s.moved{background:rgba(78,173,122,.15);border-color:rgba(78,173,122,.5);color:#bfe8d1}
@media (max-width:560px){.grid7{grid-template-columns:64px repeat(7,minmax(0,1fr));gap:3px}.grid7 .s{font-size:0}.grid7 .c{height:26px}}
.meters{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.meters{grid-template-columns:1fr}}
.meter{position:relative;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);min-width:0}
.meter .k{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.meter .v{font-family:var(--num);font-size:28px;font-weight:600;margin-top:5px;line-height:1}
.meter .v small{font-size:13px;color:var(--ink3);margin-left:2px;font-weight:500}
.meter .t{height:5px;margin-top:10px;border-radius:3px;background:rgba(240,235,224,.08);position:relative;overflow:hidden}
.meter .t i{position:absolute;inset:0 auto 0 0;width:100%;transform:scaleX(0);transform-origin:left;border-radius:3px;background:linear-gradient(90deg,var(--ember),var(--ember2));transition:transform 1.4s var(--ease)}
.meter .t b{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink2)}
.meter .s{font-size:12px;color:var(--ink3);margin-top:7px}
.meter .ring{position:absolute;right:12px;top:12px;width:56px;height:56px}
.meter .ring svg{transform:rotate(-90deg);display:block}
.meter .ring .tr{fill:none;stroke:rgba(240,235,224,.08);stroke-width:6}
.meter .ring .fg{fill:none;stroke:var(--good);stroke-width:6;stroke-linecap:round;stroke-dasharray:151;stroke-dashoffset:151;transition:stroke-dashoffset 1.6s var(--ease)}
.illus{margin-top:12px;font-size:12px;color:var(--ink3)}

/* ── 4 everything connected ── */
.conn{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,5vw,64px);align-items:center}
@media (max-width:960px){.conn{grid-template-columns:1fr}.conn .stage{order:2}}
.conn h2{font-size:clamp(36px,4.6vw,60px);line-height:1.02;margin-top:14px}
.conn .lede{margin-top:16px;color:var(--ink2);font-size:18px}
.stage{position:relative;width:100%;max-width:600px;aspect-ratio:1;margin:0 auto}
.stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stage .lnk{fill:none;stroke:rgba(240,235,224,.07);stroke-width:1.2;transition:stroke .5s ease}
.stage .lnk.lit{stroke:var(--ember2);stroke-width:2;filter:drop-shadow(0 0 6px rgba(232,149,106,.7))}
.stage .spoke{stroke:rgba(240,235,224,.035)}
.stage .pulse{fill:#fff;opacity:0;filter:drop-shadow(0 0 6px #fff)}
.stage .orbitring{fill:none;stroke:rgba(240,235,224,.05);stroke-dasharray:2 7}
/* The dot, not the dot-and-label stack, sits on the point the lines end at */
.node{position:absolute;transform:translate(-50%,-7px);display:flex;flex-direction:column;align-items:center;gap:8px;width:118px;text-align:center;pointer-events:none}
.node i{width:14px;height:14px;border-radius:50%;background:#2a221c;border:1px solid var(--line2);transition:background .45s ease,border-color .45s ease,box-shadow .45s ease,transform .45s var(--spring)}
.node span{font-size:12.5px;color:var(--ink3);transition:color .45s ease;line-height:1.25}
.node.on i{background:var(--ember2);border-color:var(--ember2);transform:scale(1.25);box-shadow:0 0 0 6px rgba(232,149,106,.12),0 0 24px var(--ember)}
.node.on span{color:var(--ink)}
/* Centred with margins: its breathing animation owns transform. */
.core{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;box-shadow:0 0 80px 16px rgba(200,75,47,.3)}
.corel{position:absolute;left:50%;top:calc(50% + 62px);transform:translateX(-50%);font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:0;color:var(--ink2);white-space:nowrap;padding:2px 8px;border-radius:999px;background:rgba(11,9,7,.72)}
@media (max-width:560px){.node{width:84px}.node span{font-size:10.5px}.core{width:70px;height:70px;margin:-35px 0 0 -35px}.corel{top:calc(50% + 48px)}}
.chains{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.chain{display:block;width:100%;padding:17px 19px;border-radius:16px;background:var(--card);border:1px solid var(--line);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .4s ease,background .4s ease,transform .4s var(--ease)}
.chain:hover{border-color:var(--line2)}
.chain.on{border-color:rgba(232,149,106,.5);background:linear-gradient(180deg,rgba(200,75,47,.11),rgba(200,75,47,.03))}
.chain .ttl{font-weight:700;font-size:15.5px}
.chain ol{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 4px;font-size:13.5px;color:var(--ink3)}
.chain li{transition:color .35s ease}
.chain li:not(:last-child)::after{content:'\2192';margin-left:5px;color:var(--ink3)}
.chain li.lit{color:var(--ember2)}

/* ── 5 learning ── */
.learn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(36px,5vw,64px);align-items:end}
@media (max-width:960px){.learn{grid-template-columns:1fr}}
.learn h2{font-size:clamp(36px,4.6vw,60px);line-height:1.02;margin-top:14px}
.learns{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.learns span{font-size:14.5px;color:var(--ink3);padding:11px 13px;border-radius:12px;border:1px solid var(--line);transition:color .5s ease,border-color .5s ease,background .5s ease}
.learns span.on{color:var(--ink);border-color:rgba(232,149,106,.35);background:rgba(200,75,47,.06)}
.chart{position:relative;display:flex;flex-direction:column;padding:24px;border-radius:22px;background:var(--bg2);border:1px solid var(--line2)}
.chart .plot{flex:1;display:flex;align-items:center;min-height:0}
.chart .ct{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}
.chart .ct b{font-size:14.5px}
.chart .ct span{font-size:12px;color:var(--ink3)}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .ax{stroke:rgba(240,235,224,.07)}
.chart .ln{fill:none;stroke:url(#lg);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.4s var(--ease)}
.chart .ar{fill:url(#la);opacity:0;transition:opacity 1.2s ease 1.1s}
.chart text{fill:var(--ink3);font-size:11px;font-family:var(--num)}
.chart .edits rect{fill:rgba(240,235,224,.13);transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .8s var(--ease)}
.chart .dot{fill:var(--ember3);opacity:0;transition:opacity .4s ease 2.2s}
/* Data flowing in: a few motes drift into the curve's start, the one place
   on the page that says "it learns from what you do". */
#learnmotes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:22px}

/* ── 6 results ── */
.res .kpis{margin:52px auto 0;max-width:960px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:760px){.res .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{padding:26px 18px;border-radius:18px;background:var(--card);border:1px solid var(--line);text-align:left}
.kpi b{display:block;font-family:var(--num);font-size:clamp(36px,4vw,46px);font-weight:600;line-height:1}
.kpi span{display:block;margin-top:10px;font-size:13.5px;color:var(--ink3)}
.res .who{margin-top:16px;font-size:16px;color:var(--ink3)}
.res .fine{margin:22px auto 0;font-size:13px;color:var(--ink3);max-width:640px}

/* ── integrations + trust ── */
.plug{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:46px}
@media (max-width:860px){.plug{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plug div{padding:20px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.plug b{display:block;font-size:15.5px}
.plug span{display:block;margin-top:6px;font-size:13.5px;color:var(--ink3)}
.trust{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--ink3)}
.trust span::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--good);margin-right:8px;vertical-align:2px}

/* ── 7 demo ── */
.demo{position:relative;overflow:hidden}
.demo .bg{position:absolute;inset:auto -20% -40% -20%;height:90%;background:radial-gradient(45% 55% at 50% 100%,rgba(200,75,47,.24),transparent 70%);pointer-events:none;will-change:transform}
.demo .grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
@media (max-width:960px){.demo .grid{grid-template-columns:1fr}}
.demo h2{font-size:clamp(40px,6vw,80px);line-height:.98;margin-top:14px}
.demo .lede{margin-top:20px;font-size:18px;color:var(--ink2);max-width:460px}
.demo ul{margin:28px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;color:var(--ink2)}
.demo li{display:flex;gap:12px;align-items:flex-start}
.demo li::before{content:'';flex:none;width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--ember2)}
.demo .mail{margin-top:28px;font-size:15px;color:var(--ink3)}
.form{padding:28px;border-radius:22px;background:var(--bg2);border:1px solid var(--line2)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border-radius:12px;background:var(--card);border:1px solid var(--line2);color:var(--ink);font:inherit;font-size:15px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ember2);box-shadow:0 0 0 3px rgba(232,149,106,.15)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--ink3);margin:4px 0 18px}
.consent input{margin-top:3px;accent-color:var(--ember)}
.form .btn{width:100%}
.form .ok,.form .err{display:none;margin-top:14px;font-size:14.5px}
.form .ok{color:var(--good)}
.form .err{color:#ff9aa0}

/* ── footer ── */
.foot{border-top:1px solid var(--line);padding-block:40px calc(40px + env(safe-area-inset-bottom,0px))}
.foot .in{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--ink3)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{color:var(--ink3);text-decoration:none}
.foot a:hover{color:var(--ink)}

/* ── about ── */
.page-hero{padding-block:170px 60px}
.page-hero h1{font-size:clamp(44px,7vw,92px);line-height:.98;max-width:900px}
.page-hero .sub{margin-top:24px;font-size:19px;color:var(--ink2);max-width:640px}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,72px)}
@media (max-width:860px){.story{grid-template-columns:1fr}}
.story blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-.015em}
.story .t{display:flex;flex-direction:column;gap:18px;color:var(--ink2);font-size:17px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:60px}
@media (max-width:860px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.facts div{padding:22px 20px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.facts b{display:block;font-family:var(--num);font-size:34px;font-weight:600;line-height:1}
.facts span{display:block;margin-top:10px;font-size:14px;color:var(--ink3)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .grid7 .s{opacity:1;transform:none}
  #motes,#learnmotes{display:none}
}

/* ── pricing ── */
.bill{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--card);border:1px solid var(--line);margin-top:30px}
.bill button{font:inherit;font-size:14px;font-weight:700;padding:9px 18px;border-radius:999px;border:0;background:transparent;color:var(--ink3);cursor:pointer;transition:background .3s ease,color .3s ease}
.bill button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.bill small{font-weight:700;color:var(--ember2);margin-left:6px}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:48px}
@media (max-width:1060px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tiers{grid-template-columns:1fr}}
.tier{position:relative;display:flex;flex-direction:column;padding:26px 22px;border-radius:20px;background:var(--card);border:1px solid var(--line);transition:transform .4s var(--ease),border-color .4s ease}
.tier:hover{transform:translateY(-3px);border-color:var(--line2)}
.tier.top{border-color:rgba(232,149,106,.45);background:linear-gradient(180deg,rgba(200,75,47,.12),rgba(200,75,47,.02) 60%),var(--card)}
.tier .badge{position:absolute;top:-11px;left:22px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--ember);color:#fff}
.tier h3{font-size:22px}
.tier .who{margin-top:6px;font-size:14px;color:var(--ink3);min-height:42px}
.tier .price{margin-top:20px;font-family:var(--num);font-size:42px;font-weight:600;line-height:1}
.tier .price small{font-size:15px;font-weight:500;color:var(--ink3);margin-left:3px}
.tier .setup{margin-top:8px;font-size:13.5px;color:var(--ink3)}
.tier ul{list-style:none;margin:22px 0 26px;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14.5px;color:var(--ink2)}
.tier li{display:flex;gap:10px}
.tier li::before{content:'';flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--ember2)}
.tier .btn{margin-top:auto}
.terms-line{margin-top:20px;font-size:14px;color:var(--ink3)}
.mods4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:44px}
@media (max-width:760px){.mods4{grid-template-columns:1fr}}
.mod{padding:24px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.mod h3{font-size:21px}
.mod p{margin-top:8px;color:var(--ink2);font-size:15px}
.mod ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mod li{font-size:12.5px;color:var(--ink3);padding:5px 10px;border-radius:999px;border:1px solid var(--line)}
.faq{margin-top:40px;max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:22px 0;font-size:17px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--num);color:var(--ink3);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--ink2);max-width:700px}

/* The ember (hero and orbit core): a lit sphere, not a flat disc. A deep
   body with a warm key light top-left and a dark terminator; a slow molten
   swirl under the surface (the only motion: it reads as "alive"); a fine
   grain and a specular highlight on top; a thin rim where light wraps the
   edge. Everything stays inside the circle. */
.ember{border-radius:50%;overflow:hidden;isolation:isolate;animation:breathe 6s ease-in-out infinite;
  background:
    radial-gradient(circle at 32% 26%,#ffe9d6 0%,#fbc79c 8%,#f09d6c 20%,transparent 44%),
    radial-gradient(circle at 72% 80%,rgba(48,8,2,.92) 0%,rgba(48,8,2,.4) 34%,transparent 58%),
    radial-gradient(circle at 46% 44%,#e4825a 0%,#cc5636 40%,#952f17 70%,#3d0f05 100%);
  box-shadow:0 0 120px 30px rgba(200,75,47,.36),0 0 34px 2px rgba(232,149,106,.22),inset 0 0 0 1px rgba(255,214,186,.18),inset -16px -20px 40px rgba(24,4,1,.6),inset 12px 14px 30px rgba(255,214,186,.2)}
/* a molten swirl moving under the surface */
/* clipped to the circle itself: Safari doesn't clip a blurred or blended
   child to its parent's rounded corners, and the square showed */
.ember::before{content:'';position:absolute;inset:0;border-radius:50%;z-index:-1;clip-path:circle(50% at 50% 50%);
  background:
    conic-gradient(from 10deg at 50% 50%,rgba(255,196,150,0) 0deg,rgba(255,186,132,.75) 55deg,rgba(120,26,8,0) 120deg,rgba(255,214,170,.55) 200deg,rgba(110,24,8,0) 260deg,rgba(255,170,120,.6) 320deg,rgba(255,196,150,0) 360deg);
  filter:blur(5px);mix-blend-mode:overlay;opacity:.8;animation:spin 26s linear infinite}
/* glass on top: a sharp specular highlight, a second soft glint, the rim
   where light wraps the edge, and a fine grain */
.ember::after{content:'';position:absolute;inset:0;border-radius:50%;clip-path:circle(50% at 50% 50%);
  background:
    radial-gradient(ellipse 22% 13% at 33% 22%,rgba(255,255,255,.95),rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 40% 26% at 36% 28%,rgba(255,240,226,.32),rgba(255,240,226,0) 70%),
    radial-gradient(circle at 66% 72%,transparent 56%,rgba(255,150,100,.42) 64%,rgba(255,150,100,0) 69%),
    radial-gradient(circle,transparent 66%,rgba(255,200,170,.18) 71%,transparent 73%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .82 0 0 0 0 .66 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){.ember,.ember::before{animation:none}}

/* ── Ask Cavnar AI: the restaurant's own CFO ── */
.ask{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);gap:clamp(36px,5vw,72px);align-items:center}
@media (max-width:960px){.ask{grid-template-columns:1fr}}
.ask h2{font-size:clamp(36px,4.6vw,60px);line-height:1.02;margin-top:14px}
.ask .lede{margin-top:18px;color:var(--ink2);font-size:18px;max-width:470px}
.qs{margin-top:28px;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.q{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink2);font:inherit;font-size:15px;cursor:pointer;text-align:left;transition:border-color .3s ease,background .3s ease,color .3s ease,transform .3s var(--ease)}
.q:hover{border-color:var(--line2);color:var(--ink);transform:translateX(3px)}
.q[aria-pressed="true"]{border-color:rgba(232,149,106,.5);background:rgba(200,75,47,.1);color:var(--ink)}
.q::before{content:'\2197';font-size:13px;color:var(--ember2)}
.ask .mem{margin-top:22px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink3)}
.ask .mem::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 10px rgba(78,173,122,.5)}
.chat{position:relative;border-radius:24px;background:var(--bg2);border:1px solid var(--line2);box-shadow:0 60px 120px -70px rgba(0,0,0,.9);overflow:hidden}
.chat::before{content:'';position:absolute;inset:-40% -10% auto;height:70%;background:radial-gradient(50% 50% at 50% 100%,rgba(200,75,47,.14),transparent 70%);pointer-events:none}
.chat .top{position:relative;display:flex;align-items:center;gap:11px;padding:16px 20px;border-bottom:1px solid var(--line)}
.chat .top .mini{position:relative;width:22px;height:22px;flex:none}
.chat .top b{font-size:14.5px}
.chat .top span{margin-left:auto;font-size:12px;color:var(--ink3)}
.chat .body{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 20px 24px;min-height:330px}
.msg{max-width:88%;padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.55}
.msg.me{align-self:flex-end;background:var(--card2);border:1px solid var(--line);border-bottom-right-radius:6px;color:var(--ink)}
.msg.ai{align-self:flex-start;background:rgba(240,235,224,.03);border:1px solid var(--line);border-bottom-left-radius:6px;color:var(--ink2)}
.msg.ai b{font-family:var(--num);font-weight:600;color:var(--ink)}
.msg.ai b.hot{color:var(--ember2)}
.msg .w{opacity:0;transition:opacity .25s ease}
.msg .w.on{opacity:1}
.dots{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;border-radius:18px;border:1px solid var(--line)}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--ember2);animation:dot 1.1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s var(--ease)}
.srcs.on{opacity:1;transform:none}
.srcs span{font-size:12px;color:var(--ink3);padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(240,235,224,.02)}
.srcs span::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ember2);margin-right:7px;vertical-align:2px}
.chat .foot2{position:relative;display:flex;align-items:center;gap:10px;margin:0 16px 16px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);font-size:14px;color:var(--ink3)}
.chat .foot2 .caret{width:2px;height:16px;background:var(--ember2);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chat .top .mini .ember{position:absolute;inset:0;box-shadow:0 0 14px 2px rgba(200,75,47,.45),inset -3px -4px 8px rgba(24,4,1,.55)}

/* ── The Ember Core (ember-core.js, 10/7/26): Cavnar AI's intelligence,
   drawn by one WebGL renderer wherever an element carries data-core — the
   hero, the problem's join, the schedule's drafter, the platform's centre,
   Ask Cavnar AI and the demo — into a canvas on that anchor. The canvases
   and the data streams scroll with the page and never take a click. Each anchor keeps its CSS .ember under it:
   hidden only once WebGL is live (html.core-live), so no WebGL, a lost
   context or a failed compile still shows the old sphere. ── */
/* each core's canvas sits on its anchor and scrolls with the page */
.core-cv{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;max-height:none;pointer-events:none;visibility:visible;z-index:1}
#core-streams{position:absolute;left:0;top:0;pointer-events:none;z-index:59;overflow:visible}
.core-live [data-core].ember,.core-live [data-core] .ember{visibility:hidden;animation:none}
.core-live .orb .r{display:none}
.pcore{position:relative;width:72px;height:72px;margin:58px auto 0}
.pcore .ember,.dcore .ember,.lcore .ember{position:absolute;inset:0}
.dcore{position:relative;width:84px;height:84px;margin:0 0 30px}
.board .bt .live .lcore{position:relative;display:inline-block;width:16px;height:16px;flex:none;font-style:normal}
.board .bt .live.has-core::before{display:none}
.stage .spoke{transition:stroke .5s ease}
.stage .spoke.feed{stroke:rgba(232,149,106,.55);stroke-width:1.6;filter:drop-shadow(0 0 5px rgba(232,149,106,.6))}
.stage .feeddot{fill:#fff1e4;filter:drop-shadow(0 0 6px #e8956a)}
@media (prefers-reduced-motion:reduce){#core-streams{display:none}}

/* ── The scroll story (10/8/26) ──
   The Ember Thread: one ember line leaves the hero and runs down a rail in
   the gutter, drawn to a reading line 60% down the screen, branching into
   each core as it is reached (site.js). It is in page coordinates and sits
   behind the content (main is lifted above it), so it scrolls natively and
   passes under cards and words, never over them. */
main{position:relative;z-index:1}
.thread-layer,#thread{position:absolute;left:0;top:0;pointer-events:none;z-index:0;overflow:visible}
#thread .track{fill:none;stroke:rgba(240,235,224,.08);stroke-width:1.2;stroke-dasharray:2 7}
#thread .lit,#thread-lit .lit{fill:none;stroke:var(--ember2);stroke-width:1.6;stroke-linecap:round;opacity:.9}
#thread .br{fill:none;stroke:var(--ember2);stroke-width:1.4;stroke-linecap:round;opacity:.85;transition:stroke-dashoffset .7s var(--ease)}
/* the head: fixed on the reading line (60% down the screen), on the rail */
.thread-head{position:fixed;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(circle,#fff4e8 0%,#f2b183 30%,rgba(200,75,47,0) 70%)}
.thread-head.on{opacity:1}
/* the veil: fixed from the reading line down, in the page's own colour, over
   the lit rail and under the dashed track — the lit line ends at the head
   whatever the scroll speed, because the browser places both */
/* The veil rides in the page, sticky on the reading line, not fixed: iOS 26
   Safari ends fixed layers at its floating toolbar while the page draws on
   behind it, so a fixed veil let the lit rail show under the toolbar after
   a scroll back up (10/8/26). The track spans the page; the veil sticks. */
.thread-litclip{position:absolute;top:0;left:0;width:2px;overflow:hidden;pointer-events:none;z-index:0;view-timeline-name:--rail;view-timeline-axis:block}
.thread-litline{display:block;width:1.6px;height:100%;margin-left:.2px;border-radius:1px;background:var(--ember2);opacity:.9;transform:translateY(-100%);animation:threadLit linear both;animation-timeline:--rail}
@keyframes threadLit{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.thread-veil-track{position:absolute;left:0;top:0;width:8px;pointer-events:none;z-index:0}
.thread-veil{position:-webkit-sticky;position:sticky;top:60vh;width:8px;height:100vh;background:var(--bg)}
@media (prefers-reduced-motion:reduce){.thread-veil-track,.thread-head{display:none}.thread-litline{animation:none;transform:none}}
/* The Schedule Generator builds as you scroll: on a desktop tall enough to
   hold it, the section pins and the scroll scrubs the build (and unbuilds it
   on the way back); on a phone it scrubs as the board crosses the screen. */
/* a touch tighter here so a 900px-tall laptop can hold the pinned build */
@media (min-width:961px){.sec.scrub .sched h2{font-size:clamp(40px,3.8vw,54px)}}
/* .pinned is set by site.js only when the section's content fits the
   screen under the nav; otherwise it scrubs in place. */
@media (min-width:961px) and (prefers-reduced-motion:no-preference){
  .sec.scrub.pinned{height:250vh;padding-block:0}
  .sec.scrub.pinned .pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:68px;box-sizing:border-box}
  .sec.scrub.pinned .pin > .wrap{width:100%}
}
.sec.scrub .meter .t i,.sec.scrub .ring .fg{transition-duration:.3s}
/* Headlines that catch: the key words heat from cream to ember, left to right,
   as the heading crosses the screen (scroll-driven where supported, else once
   on view). */
.ig{background:linear-gradient(90deg,var(--ember3) 0%,var(--ember2) 20%,var(--ember) 40%,#fff2e4 46.5%,var(--ink) 52%,var(--ink) 100%);background-size:240% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;transition:background-position 1.6s var(--ease)}
.ig.lit{background-position:0 0}
@supports (animation-timeline: view()){
  .ig{transition:none;animation:igcatch linear both;animation-timeline:view();animation-range:entry 35% cover 45%}
}
@keyframes igcatch{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.ig{animation:none;transition:none;background-position:0 0}}