/* Symbory — site styles (extracted from the v6 landing page, no longer inline) */
/* ══════════════════════════════════════════════════════════════
   SYMBORY v6 — brand palette per DESIGN.md.
   Changes from v5 are structural: value proposition before
   metaphor, proof before philosophy, objections answered before
   the ask, price on the page.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:oklch(97% 0.008 75); --bg-subtle:oklch(94% 0.01 75); --card:#fff;
  --border:oklch(86% 0.018 60); --text:oklch(25% 0.035 55); --text-secondary:oklch(45% 0.03 55);
  --signature:oklch(38% 0.095 42); --primary-button:oklch(30% 0.095 40);
  --human:oklch(65% 0.09 55); --memory:oklch(48% 0.05 320); --success:oklch(45% 0.08 130);
  --flower-center:oklch(80% 0.14 95);
  --bg-dark:oklch(22% 0.045 38); --text-dark:oklch(89% 0.016 72);
  --text-sec-dark:oklch(74% 0.022 72); --signature-dark:oklch(78% 0.10 62);
  --human-dark:oklch(78% 0.08 55);
  --canopy-3:oklch(58% 0.06 45); --canopy-4:oklch(74% 0.04 50);

  --display:'Source Serif 4',Georgia,serif; --body:'Inter',-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r-md:8px; --r-lg:12px;
  /* tokens the ported legal/pricing rules rely on */
  --on-button:#fff; --radius:4px;
  /* logo handoff tokens (design_handoff_symbory_logo) */
  --pith:#C9971D; --ink:#2E1C14; --muted:#8A7566;
  --sh-sm:0 1px 3px rgba(0,0,0,.06); --sh-md:0 4px 16px rgba(0,0,0,.08);
  --sh-lg:0 12px 40px rgba(0,0,0,.10);
  --gut:clamp(20px,5vw,68px); --max:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:16.5px;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

img{max-width:100%}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.018em;line-height:1.06}

h1{font-size:clamp(30px,3.5vw,48px);font-weight:300;letter-spacing:-.024em}

h2{font-size:clamp(28px,3.9vw,50px)}

h3{font-size:21px;line-height:1.2;font-weight:600;font-family:var(--body);letter-spacing:-.01em}

p{max-width:64ch}

em{font-style:italic;color:var(--signature)}

strong{font-weight:600}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signature);display:inline-flex;align-items:center;gap:10px}

.eyebrow::before{content:"";width:22px;height:1px;background:var(--human)}

.lede{font-size:clamp(17px,1.8vw,20px);color:var(--text-secondary);line-height:1.56}

/* ══ ANNOUNCE BAR — scarcity, stated honestly ══ */
.announce{background:var(--bg-dark);color:var(--text-dark);font-size:13.5px;text-align:center;
  padding:9px 20px}

.announce b{color:var(--human-dark);font-weight:500}

.announce a{color:var(--text-dark);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:oklch(100% 0 0 / .35)}

.announce a:hover{text-decoration-color:var(--human-dark)}

/* ══ NAV ══ */
nav{position:sticky;top:0;z-index:60;background:oklch(97% 0.008 75 / .9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}

.nav-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}

.brand-t{font-family:'Fraunces',var(--display);font-weight:400;font-size:24px;
  letter-spacing:.063em;display:block;line-height:1;color:var(--ink)}

.brand{gap:14px}

.brand-lockup{display:flex;flex-direction:column}

.brand-sub{margin-top:5px}

.brand-sub{
  /* tagline scales at ~0.262 x wordmark size, per the handoff */
  font-family:'Inter Tight',var(--body-font,Inter),sans-serif;font-weight:500;
  font-size:6.3px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--muted);line-height:1;
}

/* name origin — deliberately quieter than the nav tagline */
.brand-origin{font-size:8px;letter-spacing:.11em;opacity:.75;font-style:normal}

@media (max-width:520px){
 .brand-sub{display:none}
}

.mk{flex:none}

.mk path{fill:none;stroke:var(--signature);stroke-width:1.5;stroke-linecap:round}

.mk .pith{fill:var(--pith);stroke:none}

.brand:hover .mk path{stroke:var(--pith)}

.nav-l{display:flex;align-items:center;gap:28px;list-style:none}

.nav-l a{color:var(--text-secondary);text-decoration:none;font-size:14.5px;transition:color .18s}

.nav-l a:hover{color:var(--signature)}

/* ── Language dropdown ─────────────────────────────────── */
.lang{position:relative;display:flex;align-items:center}
.lang details{position:relative}
.lang summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  padding:7px 10px;border-radius:6px;color:var(--text-secondary);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1;
  border:1px solid transparent;transition:.15s;
}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{color:var(--ink);background:var(--bg-subtle)}
.lang details[open] summary{color:var(--ink);background:var(--bg-subtle);border-color:var(--border)}
.lang .chev{transition:transform .18s}
.lang details[open] .chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:120;min-width:186px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:6px;display:flex;flex-direction:column;
}
.lang-menu a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:5px;
  color:var(--text);text-decoration:none;font-size:14.5px;line-height:1;transition:.13s;
}
.lang-menu a span{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);
  min-width:20px;
}
.lang-menu a:hover{background:var(--bg-subtle);color:var(--signature)}
.lang-menu a[aria-current]{color:var(--ink);font-weight:500;background:var(--bg-subtle)}
.lang-menu a[aria-current] span{color:var(--signature)}

.nav-l .go{background:var(--primary-button);color:#fff;padding:10px 20px;border-radius:9999px;
  font-size:14px;font-weight:500;box-shadow:var(--sh-sm);transition:.2s}

.nav-l .go:hover{color:#fff;transform:translateY(-1px);box-shadow:var(--sh-md)}

/* ══ BUTTONS ══ */
.btn{font-family:var(--body);font-size:15.5px;font-weight:500;text-decoration:none;
  padding:15px 28px;border-radius:9999px;display:inline-flex;align-items:center;gap:9px;
  cursor:pointer;border:1px solid transparent;transition:.2s;white-space:nowrap}

.btn-p{background:var(--primary-button);color:#fff;box-shadow:var(--sh-sm)}

.btn-p:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}

.btn-g{border-color:var(--border);color:var(--text);background:var(--card)}

.btn-g:hover{border-color:var(--signature);color:var(--signature)}

.btn .a{transition:transform .2s}

.btn:hover .a{transform:translateX(3px)}

/* ══ HERO ══ */
.hero{position:relative;padding:clamp(22px,2.6vw,36px) 0 0;overflow:hidden;isolation:isolate}

.forest-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.forest-bg .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;filter:grayscale(.62) contrast(.9) brightness(1.06) sepia(.16);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 30%,rgba(0,0,0,.3) 58%,transparent 84%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 30%,rgba(0,0,0,.3) 58%,transparent 84%);
  transform:scale(1.04);animation:drift 46s ease-in-out infinite alternate}

@keyframes drift{to{transform:scale(1.11) translate3d(-1.4%,-1%,0)}}

.forest-bg .tint{position:absolute;inset:0;background:var(--signature);opacity:.22;
  mix-blend-mode:color;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 84%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 84%)}

.forest-bg .veil{position:absolute;inset:0;background:linear-gradient(to bottom,
  oklch(97% 0.008 75 / .40) 0%,oklch(97% 0.008 75 / .64) 32%,
  oklch(97% 0.008 75 / .92) 64%,oklch(97% 0.008 75 / 1) 86%)}

.mist{position:absolute;left:-25%;right:-25%;pointer-events:none;filter:blur(38px)}

.mist-1{top:24%;height:26%;background:
  radial-gradient(60% 100% at 30% 50%,oklch(99% 0.004 75 / .85),transparent 72%),
  radial-gradient(50% 100% at 72% 46%,oklch(99% 0.004 75 / .6),transparent 74%);
  animation:mist1 34s ease-in-out infinite alternate}

.mist-2{top:42%;height:22%;background:
  radial-gradient(55% 100% at 62% 50%,oklch(99% 0.004 75 / .7),transparent 70%),
  radial-gradient(45% 100% at 18% 54%,oklch(99% 0.004 75 / .5),transparent 72%);
  animation:mist2 44s ease-in-out infinite alternate}

@keyframes mist1{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(5%,-1.5%,0)}}

@keyframes mist2{from{transform:translate3d(4%,0,0)}to{transform:translate3d(-4%,1.5%,0)}}

.hero .wrap{position:relative;z-index:1}

.hero h1{max-width:none;margin:0 0 20px}

/* the <br> holds the 2-line break on desktop; below that let it reflow freely.
   No &nbsp; in the markup — it makes the heading unshrinkable and blows out
   the grid column on small screens. */
.hero h1{text-wrap:balance}

@media (max-width:820px){
 .hero h1 br{display:none}
}

.hero-sub{margin-top:16px;max-width:56ch;line-height:1.5}

.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;align-items:center}

.microtrust{margin-top:11px;font-size:13.5px;color:var(--text-secondary)}

.hero-cols{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(28px,4vw,52px);margin-top:8px;align-items:center;
  padding-bottom:clamp(44px,6vw,80px)}

/* ══ LIVE EMPLOYEE CONTEXT — timeline card ═══════════════════ */
.ctx{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);padding:20px 22px 22px;
  margin-right:calc(-1 * (max(0px,(100vw - var(--max))/2) + var(--gut)));
  border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}

.ctx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:4px;flex-wrap:wrap}

.ctx-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signature)}

.ctx-name{font-family:var(--display);font-size:17px;letter-spacing:-.015em;margin-top:5px;
  color:var(--ink)}

.ctx-badge{font-size:11px;color:var(--text-secondary);border:1px solid var(--border);
  border-radius:100px;padding:5px 12px;white-space:nowrap;background:var(--bg-subtle)}

.ctx-line{list-style:none;margin:0;padding:0 0 0 22px;position:relative}

.ctx-line::before{content:"";position:absolute;left:4px;top:18px;bottom:14px;width:1px;
  background:var(--border)}

.ctx-node{position:relative;padding:14px 0 2px}

.ctx-node::before{content:"";position:absolute;left:-22px;top:19px;width:9px;height:9px;
  border-radius:50%;background:var(--card);border:2px solid var(--canopy-4)}

.ctx-node:first-child::before{border-color:var(--signature)}

.ctx-now::before{border-color:var(--pith);background:var(--pith);
  box-shadow:0 0 0 4px color-mix(in oklch, var(--pith) 22%, transparent)}

.ctx-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}

.ctx-meta > span:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--text-secondary)}

.ctx-tag{font-size:10.5px;font-weight:500;padding:2px 9px;border-radius:100px;
  background:color-mix(in oklch, var(--signature) 10%, var(--card));color:var(--signature)}

.ctx-tag-alt{background:var(--bg-subtle);color:var(--text-secondary)}

.ctx-tag-live{background:color-mix(in oklch, var(--pith) 20%, var(--card));color:#7a5c10}

.ctx-node h3{font-family:var(--display);font-weight:400;font-size:15.5px;line-height:1.2;
  letter-spacing:-.01em;margin-bottom:5px;color:var(--ink)}

.ctx-node p{font-size:12.8px;color:var(--text-secondary);line-height:1.45;max-width:46ch}

@media (max-width:980px){

  .ctx{margin-right:0;border-right:1px solid var(--border);border-radius:var(--r-lg)}
}

.shotframe-bar i{width:8px;height:8px;border-radius:50%;background:var(--border)}

.shotframe img{display:block;width:100%;height:auto}

/* ══ SECTIONS ══ */
section.band{padding:clamp(56px,7.5vw,104px) 0}

/* px, not ch — `ch` here resolves against the 16.5px body size, not the display
   size of the h2 inside, which collapsed these headings to ~240px wide. */
.head{max-width:660px}

.head h2{margin:16px 0 18px;max-width:22ch}

.head .lede{max-width:62ch}

/* Split head: headline left, supporting prose right — stops the band from
   sitting in a single left column with dead space beside it. */
.head.split{max-width:none;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:end}

.head.split h2{margin:16px 0 0;max-width:18ch}

#trust .head.split h2{font-size:clamp(26px,3.2vw,40px);max-width:24ch}

.head.split .lede{max-width:52ch;padding-bottom:4px}

@media (max-width:900px){

  .head.split{grid-template-columns:1fr;gap:18px;align-items:start}

  .head.split .lede{max-width:62ch}
}

.center .eyebrow{justify-content:center}

.center .lede{margin-inline:auto}

/* ══ COST STRIP — the problem, quantified in the buyer's terms ══ */
.cost{background:var(--bg-subtle);border-block:1px solid var(--border)}

.until{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:36px 0 -20px}

.closer{font-family:var(--display);font-size:clamp(19px,2.1vw,26px);line-height:1.3;
  letter-spacing:-.015em;color:var(--ink);margin-top:30px;max-width:34ch}

.cost-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}

.cg{padding:28px 26px;border-right:1px solid var(--border)}

.cg:last-child{border-right:none}

.cg-t{font-family:var(--display);font-size:23px;line-height:1.18;color:var(--text);
  letter-spacing:-.015em}

.cg-l{font-size:14.5px;color:var(--text-secondary);margin-top:10px;line-height:1.5}

/* ══ FEATURES ══ */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}

.f{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:26px 24px 28px;transition:.28s}

.f:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--canopy-4)}

.f-i{width:38px;height:38px;border-radius:9px;background:var(--bg-subtle);display:flex;
  align-items:center;justify-content:center;margin-bottom:16px;color:var(--signature)}

.f h3{margin-bottom:8px}

.f p{font-size:14.5px;color:var(--text-secondary);line-height:1.55}

/* ══ MANIFESTO (dark, photo) ══ */
.dark{background:var(--bg-dark);color:var(--text-dark);position:relative;overflow:hidden}

.dark h2{color:var(--text-dark)}

.dark em{color:var(--human-dark)}

.dark .eyebrow{color:var(--signature-dark)}

.dark .eyebrow::before{background:var(--human-dark)}

.dark .lede{color:var(--text-sec-dark)}

.dark .wrap{position:relative;z-index:1}





.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:42px}

.vsc{border:1px solid oklch(100% 0 0 / .16);border-radius:var(--r-lg);overflow:hidden;
  background:oklch(100% 0 0 / .03)}

.vsc-h{padding:15px 20px;border-bottom:1px solid oklch(100% 0 0 / .16);display:flex;
  align-items:baseline;gap:11px}

.vsc-h .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-sec-dark)}

.vsc-h .n{font-family:var(--display);font-size:24px}

.vsc li{list-style:none;padding:14px 20px;border-bottom:1px solid oklch(100% 0 0 / .09);
  font-size:15px;line-height:1.46;display:flex;gap:11px;align-items:flex-start}

.vsc li:last-child{border-bottom:none}

.vsc li i{font-style:normal;flex:none;width:15px;font-size:13px;line-height:1.5}

.factory{opacity:.6}

.factory .n{color:var(--text-sec-dark)}

.factory li{color:var(--text-sec-dark)}

.factory li i{color:oklch(60% 0.11 30)}

.forest .n{color:var(--signature-dark)}

.forest li i{color:var(--signature-dark)}

.forest li b{font-weight:600;color:var(--text-dark)}

.manifesto-q{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(21px,2.6vw,32px);line-height:1.28;max-width:none;margin-top:40px;
  color:var(--text-dark)}

/* ══ OBJECTIONS ══ */
.obj{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:42px}

.ob{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 26px 28px}

.ob h3{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px;line-height:1.3}

.ob h3::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pith);
  flex:none;margin-top:7px}

.ob p{font-size:14.5px;color:var(--text-secondary);line-height:1.58}

.ob p strong{display:block;margin-bottom:8px;color:var(--ink);font-weight:600}

.pricing-faq p strong{display:block;margin-bottom:6px;color:var(--ink);font-weight:600}

.t-p span{font-family:var(--body);font-size:14px;color:var(--text-secondary)}

.price-note b{color:var(--text);font-weight:500}

/* slim pricing band — a signpost, not a section */
.priceband{background:var(--bg-subtle);border-block:1px solid var(--border);
  padding:clamp(28px,3.4vw,44px) 0}

.priceband-in{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,4vw,48px);flex-wrap:wrap}

.priceband h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.015em;color:var(--ink)}

.priceband p{font-size:15px;color:var(--text-secondary);margin-top:7px;max-width:56ch}

.priceband .btn{flex:none}

/* ══ CTA ══ */
.cta{text-align:center}

.cta h2{max-width:18ch;margin:16px auto 0}

.cta .lede{max-width:52ch;margin:18px auto 0}

form.j{display:flex;gap:10px;max-width:450px;margin:28px auto 0;flex-wrap:wrap}

form.j input{flex:1;min-width:200px;background:var(--card);border:1px solid var(--border);
  border-radius:9999px;padding:14px 22px;font-family:var(--body);font-size:15px;color:var(--text)}

form.j input:focus{outline:none;border-color:var(--signature)}

.risk{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:20px;
  font-size:13.5px;color:var(--text-secondary)}

.risk span{display:flex;align-items:center;gap:7px}

.risk span::before{content:"✓";color:var(--success);font-weight:600}

.alt{margin:18px auto 0;font-size:14.5px;color:var(--text-secondary)}

.alt a{color:var(--signature)}

/* ══ FOOTER ══ */
footer{border-top:1px solid var(--border);padding:34px 0}

.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:14.5px}

.foot a{color:var(--text-secondary);text-decoration:none}

.foot a:hover{color:var(--signature)}

.foot-t{font-family:var(--display);font-style:italic;color:var(--signature)}

/* ══ MOTION ══ */
.u{opacity:0;transform:translateY(16px);animation:u .85s cubic-bezier(.2,.78,.25,1) forwards}

.u1{animation-delay:.06s}

.u3{animation-delay:.3s}

.u4{animation-delay:.42s}

@keyframes u{to{opacity:1;transform:none}}

.rev{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.78,.25,1)}

.rev.on{opacity:1;transform:none}

.r1{transition-delay:.1s}

.r2{transition-delay:.2s}

@media (prefers-reduced-motion:reduce){

  *{animation:none!important;transition:none!important}

  .u,.rev{opacity:1;transform:none}

  .forest-bg .shot{transform:scale(1.04)}
}

/* ══ RESPONSIVE ══ */
@media (max-width:980px){
  .hero-cols{grid-template-columns:1fr}
  .cost-grid,.feat,.vs,.obj{grid-template-columns:1fr}
  .cg{border-right:none;border-bottom:1px solid var(--border)}
  .cg:last-child{border-bottom:none}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .t{border-bottom:1px solid var(--border)}
}

@media (max-width:760px){

  /* keep navigation reachable on phones: brand + CTA on row one,
     links wrap onto row two rather than disappearing */
  .nav-in{height:auto;flex-wrap:wrap;padding-block:10px;row-gap:8px}

  .nav-l{order:3;width:100%;justify-content:flex-start;gap:18px;flex-wrap:wrap;
    font-size:13.5px;border-top:1px solid var(--border);padding-top:9px}

      /* trigger + CTA share one row so the header stays short */
  .lang{order:3;margin-top:2px}
  .lang summary{padding:11px 12px;font-size:12px}
  .lang-menu{right:auto;left:0}
  .nav-l li:last-child{order:4;flex:1;margin-top:2px;width:auto}

  /* ── Language dropdown ─────────────────────────────────── */
.lang{position:relative;display:flex;align-items:center}
.lang details{position:relative}
.lang summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  padding:7px 10px;border-radius:6px;color:var(--text-secondary);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1;
  border:1px solid transparent;transition:.15s;
}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{color:var(--ink);background:var(--bg-subtle)}
.lang details[open] summary{color:var(--ink);background:var(--bg-subtle);border-color:var(--border)}
.lang .chev{transition:transform .18s}
.lang details[open] .chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:120;min-width:186px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:6px;display:flex;flex-direction:column;
}
.lang-menu a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:5px;
  color:var(--text);text-decoration:none;font-size:14.5px;line-height:1;transition:.13s;
}
.lang-menu a span{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);
  min-width:20px;
}
.lang-menu a:hover{background:var(--bg-subtle);color:var(--signature)}
.lang-menu a[aria-current]{color:var(--ink);font-weight:500;background:var(--bg-subtle)}
.lang-menu a[aria-current] span{color:var(--signature)}

.nav-l .go{display:flex;justify-content:center;width:100%;padding:11px 15px;font-size:14px}
}

@media (max-width:700px){

  .forest-bg .shot{object-position:50% 30%}

  .forest-bg .veil{background:linear-gradient(to bottom,oklch(97% 0.008 75 / .5) 0%,
    oklch(97% 0.008 75 / .82) 30%,oklch(97% 0.008 75 / 1) 62%)}

  .mist{display:none}
}

/* ══════════════════════════════════════════════════════════════
   Legal + pricing page styles, ported from the pre-v6 stylesheet.
   Token names are unchanged, so these inherit the v6 palette.
   ══════════════════════════════════════════════════════════════ */

body.legal-page { overflow-x: visible; }

.container    { max-width: 1100px; margin: 0 auto; }

.pricing-section { background: var(--bg); }

.pricing-center  { text-align: center; }

.pricing-card {
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px 32px;
  background: var(--card);
  position: relative;
  transition: border-color 0.25s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.pricing-card:hover {
  border-color: color-mix(in oklch, var(--signature) 35%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.09);
}

.pricing-card.featured {
  border-color: var(--signature);
  background: color-mix(in oklch, var(--signature) 5%, var(--card));
}

.pricing-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--primary-button);
  color: var(--on-button);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 100px;
  white-space: nowrap;
}

.pricing-tier {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.pricing-price sup { font-size: 24px; vertical-align: super; }

.pricing-period { font-size: 13px; color: var(--text-secondary); margin-bottom: 32px; }

.pricing-divider { height: 1px; background: var(--border); margin: 24px 0; }

.pricing-features li {
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pricing-features li::before {
  content: '✓';
  color: var(--signature);
  font-size: 11px;
  margin-top: 3px;
  flex-shrink: 0;
}

.pricing-features li.muted { color: var(--text-secondary); opacity: 0.6; }

.pricing-features li.muted::before { content: '—'; color: var(--text-secondary); }

.pricing-cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 64px;
  align-items: stretch;
}

.pricing-cards-4 .pricing-card { display: flex; flex-direction: column; padding: 32px 24px; }

.pricing-cards-4 .pricing-spec { flex-grow: 1; }

.pricing-spec { display: flex; flex-direction: column; text-align: left; }

.pricing-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  font-size: 13px;
}

.pricing-spec-row + .pricing-spec-row { border-top: 1px solid var(--border); }

.pricing-spec-label { color: var(--text-secondary); }

.pricing-spec-value { color: var(--text); font-weight: 500; text-align: right; }

.pricing-card.featured .pricing-spec-value { color: var(--signature); }

.pricing-price-slot { margin-top: 18px; }

.pricing-price-amount {
  font-family: 'Source Serif 4', serif;
  font-size: 32px;
  color: var(--text);
  line-height: 1.1;
}

.pricing-price-unit {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-secondary);
  margin-left: 2px;
}

.pricing-price-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
}

.pricing-card.featured .pricing-price-amount { color: var(--signature); }

.pricing-extra {
  margin-top: 14px;
  font-size: 13px;
  color: var(--signature);
  text-align: left;
}

.pricing-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.pricing-count-pre {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.pricing-count-num {
  font-family: 'Source Serif 4', serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
}

.pricing-count-unit {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.pricing-card.featured .pricing-count-num { color: var(--signature); }

.pricing-users strong { color: var(--text); font-weight: 500; }

.pricing-card-foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.pricing-card.featured .pricing-card-foot { color: var(--signature); }

.pricing-enterprise {
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px 48px;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.pricing-enterprise-title { font-family: 'Source Serif 4', serif; font-size: 24px; color: var(--text); margin-bottom: 8px; }

.pricing-enterprise-desc { font-size: 14px; color: var(--text-secondary); max-width: 480px; line-height: 1.7; }

.pricing-faq {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.pricing-faq details {
  border-bottom: 1px solid var(--border);
}

.pricing-faq details:first-of-type { border-top: 1px solid var(--border); }

.pricing-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 32px 22px 0;
  position: relative;
  font-size: 16px;
  color: var(--text);
  transition: color 0.2s;
}

.pricing-faq summary::-webkit-details-marker { display: none; }

.pricing-faq summary:hover { color: var(--signature); }

.pricing-faq summary::after {
  content: '+';
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);
}

.pricing-faq details[open] summary::after { content: '–'; }

.pricing-faq details p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  padding: 0 40px 24px 0;
  margin: 0;
}

.legal-status {
  border: 1px solid color-mix(in oklch, var(--signature) 30%, var(--border));
  border-left: 3px solid var(--signature);
  border-radius: 8px;
  background: var(--bg-subtle);
  padding: 18px 22px;
  margin: 0 0 40px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.legal-status strong { color: var(--text); font-weight: 500; }

.legal-updated {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 12px;
}

.legal-body { padding: 56px 24px 96px; }

.legal-title { margin-bottom: 40px; }

.legal-title h1 { font-size: 30px; margin-top: 12px; }

.legal-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  max-width: 980px;
  margin: 0 auto;
}

.legal-toc {
  position: sticky;
  top: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal-toc a {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s;
}

.legal-toc a:hover { color: var(--signature); }

.legal-content h2 {
  font-size: 26px;
  margin-top: 64px;
  margin-bottom: 16px;
  scroll-margin-top: 150px;
}

.legal-content h2:first-child,
.legal-title + h2 { margin-top: 0; }

.legal-content h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  margin-top: 28px;
  margin-bottom: 10px;
  color: var(--text);
}

.legal-content p {
  color: var(--text-secondary);
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 14px;
}

.legal-content ul {
  margin: 0 0 16px 0;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 15.5px;
  line-height: 1.75;
}

.legal-content li { margin-bottom: 6px; }

.legal-content strong { color: var(--text); font-weight: 600; }

.legal-content a { color: var(--signature); }

.legal-note {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--signature);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 14.5px;
  color: var(--text-secondary);
  margin: 20px 0;
}

.legal-quote {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 15px;
  font-style: italic;
  color: var(--text);
  margin: 16px 0 20px;
}

.legal-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 48px 0;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 20px;
  font-size: 14.5px;
}

.legal-table th, .legal-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.legal-table th {
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.legal-table td { color: var(--text-secondary); }

@media (max-width: 600px) {

  .included-panel { padding: 8px 24px; }

  .included-row { gap: 14px; }

  .pricing-faq summary { font-size: 15px; }
}

@media (max-width: 1024px) {

  .pricing-cards-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {

  .pricing-cards-4 { grid-template-columns: 1fr; }

  .pricing-enterprise { flex-direction: column; text-align: center; padding: 32px 24px; }
}

@media (max-width: 768px) {

  nav { padding: 16px 20px; }

  .nav-links.nav-open { display: flex; }

  .nav-links li { width: 100%; }

  .nav-links a {
    display: block;
    padding: 14px 28px;
    font-size: 16px;
    color: var(--text-secondary);
  }


  .hero { padding: 130px 20px 0; }
}

@media (max-width: 860px) {

  .legal-layout { grid-template-columns: 1fr; }

  .legal-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 8px;
  }
}

/* Shared blocks still used by pricing.html (section titles, buttons,
   cookie banner), ported from the pre-v6 stylesheet. */

.btn-primary {
  background: var(--primary-button);
  color: var(--on-button);
  padding: 14px 32px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  font-family: 'Inter', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary:hover { background: var(--primary-button-hover); transform: translateY(-1px); }

.container-sm { max-width: 780px; margin: 0 auto; }

.section-title {
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.section-body {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 580px;
  margin-top: 20px;
  font-weight: 400;
}

.included-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 0;
}

.included-row + .included-row { border-top: 1px solid var(--border); }

.included-row-icon { flex-shrink: 0; color: var(--signature); margin-top: 3px; }

.included-row-text { font-size: 14px; color: var(--text-secondary); line-height: 1.7; text-align: left; }

.included-row-text strong { color: var(--text); font-weight: 500; }

.cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2000;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 30px 70px -20px rgba(0,0,0,0.35);
  display: none;
  flex-direction: column;
  gap: 14px;
}

.cookie-banner.visible { display: flex; }

.cookie-banner p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
}

.cookie-banner a { color: var(--signature); text-decoration: underline; }

.cookie-banner-actions { display: flex; gap: 10px; justify-content: flex-end; }

.cookie-banner-actions button {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  border: none;
}

.cookie-accept { background: var(--primary-button); color: var(--on-button); }

.cookie-accept:hover { background: var(--primary-button-hover); }

.cookie-decline {
  background: transparent;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary);
}

.cookie-decline:hover { color: var(--text); border-color: var(--text-secondary) !important; }

@media (max-width: 600px) {

  .included-panel { padding: 8px 24px; }

  .included-row { gap: 14px; }

  .pricing-faq summary { font-size: 15px; }
}

@media (max-width: 600px) {

  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px; }

  .cookie-banner-actions { flex-direction: column-reverse; }

  .cookie-banner-actions button { width: 100%; }
}