/* Kilnflo — shared site styles */

:root{
  --porcelain:#F1EADB; --card:#F7F1E4; --ink:#231C17; --mut:#7C6F60; --line:#E0D6C2;
  --ember:#E24E1B; --ember-hot:#FFAE5C; --kiln:#1A1613; --kiln-card:#241D17; --paper:#EFE6D6; --ash:#998B79;
  --glaze:#3E6E5E; --glaze-soft:#E4EEE9;
}
*{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Gabarito","Helvetica Neue",system-ui,sans-serif;
  background:var(--porcelain); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
img{ max-width:100%; }
a{ color:inherit; }
.shell{ max-width:1320px; margin:0 auto; padding:0 clamp(20px,5vw,56px); }

/* full-bleed band: background runs edge to edge, content stays readable via an
   inner .shell (wider than the default, for a layered "band is roomier than the
   text column beneath it" feel) */
.band{ width:100%; }
.band .shell{ max-width:1480px; }

/* nav */
nav{ display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.lockup{ display:inline-flex; align-items:baseline; font-weight:700; font-size:31px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.lockup svg{ width:.54em; height:.54em; transform:translateY(.012em); }
.navlinks{ display:flex; gap:26px; align-items:center; }
.navlinks a{ color:var(--mut); text-decoration:none; font-weight:500; font-size:15.5px; }
.navlinks a:hover, .navlinks a.active{ color:var(--ink); }
.navlinks a.btn, .navlinks a.btn:hover{ color:#fff; }
.btn{ display:inline-block; background:var(--ember); color:#fff; text-decoration:none; font-weight:600; padding:11px 22px; border-radius:12px; font-size:15.5px; letter-spacing:-.01em; border:1px solid var(--ember); cursor:pointer; }
.btn:hover{ background:#C6410F; border-color:#C6410F; }
.btn.ghost{ background:transparent; color:var(--paper); border:1px solid #3A2F24; }
.btn.ghost:hover{ background:#241D17; }
.btn.ghost.onlight{ color:var(--ink); border-color:var(--line); }
.btn.ghost.onlight:hover{ background:var(--card); }
.btn.sm{ padding:9px 16px; font-size:14px; }
.btn.block{ display:block; text-align:center; width:100%; }

/* mobile nav toggle */
.navtoggle{ display:none; background:none; border:1px solid var(--line); border-radius:10px; width:40px; height:40px; align-items:center; justify-content:center; color:var(--ink); }
@media (max-width:720px){
  .navlinks{ position:fixed; inset:0 0 auto 0; background:var(--porcelain); flex-direction:column; align-items:flex-start; gap:0; padding:80px 24px 24px; transform:translateY(-110%); transition:transform .28s ease; z-index:40; height:100vh; overflow:auto; border-bottom:1px solid var(--line); }
  .navlinks.open{ transform:translateY(0); }
  .navlinks a{ width:100%; padding:14px 0; border-bottom:1px solid var(--line); font-size:17px; }
  .navlinks .btn{ margin-top:16px; }
  .navtoggle{ display:flex; }
}

/* hero — full-bleed band, background runs edge to edge */
.hero{ background:var(--kiln); color:var(--paper); padding:clamp(56px,9vw,116px) 0; text-align:center; position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--ember) 13%, transparent), transparent 70%); pointer-events:none; }
.hero .shell{ position:relative; }
.hero h1{ font-size:clamp(38px,6.4vw,72px); font-weight:800; letter-spacing:-.03em; line-height:1.02; }
.hero h1 .fl{ color:var(--ember-hot); }
.hero p.sub{ font-size:clamp(17px,2.2vw,21px); color:var(--ash); max-width:44ch; margin:20px auto 0; }
.hero .cta{ margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero .mark{ width:clamp(64px,9vw,92px); height:auto; margin:0 auto 26px; display:block; }
.hero.small{ text-align:left; padding:clamp(48px,7vw,80px) 0; }
.hero.small h1{ font-size:clamp(34px,5.4vw,58px); }
.hero.small p.sub{ margin:18px 0 0; }
.hero .kicker{ color:var(--ember-hot); }

/* homepage hero: split copy + real-product preview, not centered/generic */
.hero.split2{ text-align:left; }
.hero.split2 .herogrid{ display:grid; grid-template-columns:1fr .92fr; gap:clamp(32px,6vw,64px); align-items:center; }
.hero.split2 h1{ font-size:clamp(36px,5.4vw,58px); }
.hero.split2 p.sub{ margin:18px 0 0; }
.hero.split2 .cta{ justify-content:flex-start; margin-top:30px; }
.hero.split2 .badge{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ash); background:rgba(239,230,214,.08); border:1px solid rgba(239,230,214,.18); padding:6px 12px; border-radius:20px; margin-bottom:20px; }
.hero.split2 .badge .d{ width:6px; height:6px; border-radius:50%; background:#3E8F5C; }
.hero.split2 .browserframe{ box-shadow:0 24px 60px -24px rgba(0,0,0,.5); }
@media (max-width:820px){ .hero.split2 .herogrid{ grid-template-columns:1fr; } }

/* sections */
section{ padding:clamp(64px,9vw,120px) 0 0; }
.kicker{ font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); font-weight:700; margin-bottom:10px; }
h2{ font-size:clamp(28px,3.8vw,40px); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
h2.center{ margin:0 auto; text-align:center; }
.lead{ color:var(--mut); font-size:17px; margin-top:12px; }
.lead.center{ margin-left:auto; margin-right:auto; text-align:center; }

.grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:34px; }
.grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; margin-top:34px; }
.feat{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; }
.feat .fhead{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.feat .ic{ width:22px; height:22px; flex-shrink:0; color:var(--ember); }
.feat .ic svg{ width:100%; height:100%; display:block; }
.feat h3{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
.feat p{ font-size:14.5px; color:var(--mut); }

/* bento variant — a true 3x3 grid (9 cells), tile weight varies (2/3 or 1/3
   width) but every row always sums to 3 columns, per 2026 pattern. Row flow
   (not dense) so DOM order fully controls placement — the dark "draws
   attention" tiles are spread across separate rows deliberately. */
.grid3.bento{ grid-auto-flow:row; }
@media (min-width:760px){
  .grid3.bento{ grid-template-columns:repeat(3,1fr); }
  .grid3.bento .feat.big{ grid-column:span 2; display:flex; flex-direction:column; justify-content:center; }
}
.feat.dark{ background:var(--kiln); color:var(--paper); border-color:var(--kiln); padding:28px; }
.feat.dark .ic{ width:30px; height:30px; color:var(--ember-hot); }
.feat.dark h3{ font-size:19px; }
.feat.dark p{ color:var(--ash); font-size:15px; max-width:46ch; }

/* warm-accent alternative to .dark — draws the eye via colour/border/scale
   instead of a heavy dark mass, so it sits comfortably next to light tiles */
.feat.accent{ background:color-mix(in srgb, var(--ember) 9%, var(--card)); border:1px solid color-mix(in srgb, var(--ember) 30%, var(--line)); border-top:3px solid var(--ember); padding:26px 28px; }
.feat.accent .ic{ width:30px; height:30px; }
.feat.accent h3{ font-size:19px; }
.feat.accent p{ font-size:15px; max-width:56ch; }

/* --- temporary comparison scaffold (options demo) --- */
.demolabel{ font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin:44px 0 4px; padding-top:28px; border-top:2px dashed var(--line); }
.demogrid{ display:grid; gap:16px; margin-top:20px; grid-template-columns:1fr; }
@media (min-width:760px){
  .demogrid.g4{ grid-template-columns:repeat(4,1fr); }
  .demogrid.g4 .s2{ grid-column:span 2; }
  .demogrid.g4 .s4{ grid-column:span 4; }
  .demogrid.g3{ grid-template-columns:repeat(3,1fr); }
  .demogrid.g3 .s2{ grid-column:span 2; }
}
.demogrid .feat{ margin:0; }
.demogrid.strips{ gap:12px; }
.stripcard{ display:flex; align-items:flex-start; gap:20px; }
.stripcard .ic{ width:34px; height:34px; flex-shrink:0; margin-top:2px; }
.stripcard h3{ font-size:18px; margin-bottom:4px; }
.stripcard p{ font-size:14.5px; max-width:64ch; }
.stripcard.feat.accent, .stripcard.feat.dark{ padding:22px 28px; }
.demogrid.stripbottom{ margin-top:12px; grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .demogrid.stripbottom{ grid-template-columns:repeat(5,1fr); } }
.feat.big.dark p{ max-width:56ch; }

/* quick-nav chip strip (features page) */
.quicknav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.quicknav a{ display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:30px; padding:9px 16px 9px 12px; text-decoration:none; color:var(--ink); font-size:13.5px; font-weight:600; transition:border-color .15s ease, background .15s ease; }
.quicknav a:hover{ border-color:var(--ember); background:var(--porcelain); }
.quicknav .ic{ width:17px; height:17px; color:var(--ember); flex-shrink:0; }
.quicknav .ic svg{ width:100%; height:100%; display:block; }

/* scroll-driven reveal — native CSS, no JS. Elements simply appear (opacity:1
   via the base .feat/.pillar rules) in browsers without animation-timeline
   support, so this is a progressive enhancement, never a dependency. */
@supports (animation-timeline: view()) {
  .feat{ animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  .pillar > div{ animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  .pillar > div.art{ animation-range: entry 8% cover 42%; }
  @keyframes reveal-up{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:translateY(0); } }
  @media (prefers-reduced-motion: reduce){ .feat, .pillar > div{ animation:none; } }
}

/* pull-quote divider band */
.divider{ background:var(--kiln); color:var(--paper); padding:clamp(48px,8vw,84px) 0; margin-top:clamp(64px,9vw,120px); text-align:center; }
.divider p{ font-size:clamp(19px,2.6vw,27px); font-weight:700; letter-spacing:-.015em; line-height:1.4; max-width:34ch; margin:0 auto; }
.divider p .accent{ color:var(--ember-hot); }

/* pillar section icon + alternating panel */
.pillar .tagrow{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.pillar .tagrow .ic{ width:19px; height:19px; color:var(--ember); flex-shrink:0; }
.pillar .tagrow .ic svg{ width:100%; height:100%; display:block; }
.pillar .tagrow h3.tag{ margin-bottom:0; }
.pillar:nth-of-type(even){
  background:var(--card); border-radius:24px; border-top:none; margin-top:0;
  padding-top:clamp(32px,5vw,48px); padding-bottom:clamp(32px,5vw,48px);
  /* bleed the tinted panel wider than the text column without shifting the
     content itself — margin and padding are equal and opposite, so the grid's
     content box lines up exactly with the odd (unpadded) sections above/below it */
  padding-left:clamp(24px,4vw,40px); padding-right:clamp(24px,4vw,40px);
  margin-left:calc(-1 * clamp(24px,4vw,40px)); margin-right:calc(-1 * clamp(24px,4vw,40px));
}
.pillar:nth-of-type(odd):not(:first-of-type){ margin-top:0; }

/* product preview — hand-built mockup of the real dashboard, matching potter's actual
   design tokens (clay-red accent, stage names, kiln states), not a photo or AI image */
.browserframe{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 18px 40px -20px rgba(35,28,23,.35); }
.browserframe .chrome{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--porcelain); border-bottom:1px solid var(--line); }
.browserframe .chrome .dot{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.browserframe .chrome .urlbar{ flex:1; margin-left:6px; background:var(--card); border:1px solid var(--line); border-radius:7px; padding:5px 10px; font-size:11.5px; color:var(--mut); font-family:ui-monospace,"SF Mono",monospace; }
.browserframe .screen{ padding:18px 20px 22px; background:#FBF6EA; }
.pv-title{ font-size:11.5px; font-weight:700; color:var(--mut); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.pv-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:var(--card); border:1px solid var(--line); border-radius:10px; margin-bottom:8px; font-size:13px; }
.pv-row:last-child{ margin-bottom:0; }
.pv-row .who{ display:flex; align-items:center; gap:9px; font-weight:600; color:var(--ink); }
.pv-row .swatch{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pv-row .swatch.online{ background:#3E8F5C; }
.pv-row .swatch.load{ background:var(--ember); }
.pv-row .swatch.off{ background:var(--ash); }
.pv-badge{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; letter-spacing:.02em; }
.pv-badge.ready{ background:color-mix(in srgb, var(--glaze) 16%, transparent); color:var(--glaze); }
.pv-badge.queue{ background:color-mix(in srgb, var(--ember) 14%, transparent); color:var(--ember); }
.pv-badge.mut{ background:var(--line); color:var(--mut); }

/* "not fully released yet" badge — used sparingly, on features still being built */
.badge-soon{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.01em; color:var(--ember); background:color-mix(in srgb, var(--ember) 13%, transparent); border:1px solid color-mix(in srgb, var(--ember) 32%, transparent); padding:3px 10px; border-radius:20px; white-space:nowrap; }
.badge-soon .d{ width:5px; height:5px; border-radius:50%; background:var(--ember); flex-shrink:0; }
.fhead .badge-soon, .tagrow .badge-soon{ margin-left:auto; }
.soonnote{ font-size:13px; color:var(--mut); font-style:italic; margin-top:10px; }
li.soon{ opacity:.75; }
li.soon .badge-soon{ margin-left:8px; vertical-align:middle; padding:2px 8px; font-size:10px; }

/* pillar blocks (features page) */
.pillar{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); align-items:center; padding:clamp(40px,6vw,64px) 0; border-top:1px solid var(--line); }
.pillar:first-of-type{ border-top:none; }
.pillar.rev > div:first-child{ order:2; }
.pillar.rev .art{ order:1; }
.pillar h3.tag{ color:var(--ember); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:10px; }
.pillar h2{ max-width:none; }
.pillar p{ color:var(--mut); font-size:16px; margin-top:14px; max-width:46ch; }
.pillar ul{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:9px; }
.pillar li{ font-size:14.5px; color:var(--mut); padding-left:24px; position:relative; }
.pillar li::before{ content:""; position:absolute; left:0; top:.5em; width:12px; height:12px; border-radius:50%; background:color-mix(in srgb,var(--ember) 18%,transparent); box-shadow:inset 0 0 0 3.5px var(--ember); }
@media (max-width:760px){ .pillar{ grid-template-columns:1fr; } .pillar.rev > div:first-child, .pillar.rev .art{ order:0; } }

/* steps */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:36px; counter-reset:step; }
.step{ position:relative; padding-top:8px; }
.step::before{ counter-increment:step; content:counter(step); display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--kiln); color:var(--paper); font-weight:700; font-size:14px; margin-bottom:16px; }
.step h4{ font-size:16.5px; font-weight:700; margin-bottom:6px; }
.step p{ font-size:14px; color:var(--mut); }

/* pricing */
.currency-bar{ display:flex; justify-content:flex-end; align-items:center; gap:14px; flex-wrap:wrap; }
.currency-bar-note{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--mut); }
.currency-bar-note[hidden]{ display:none; }
.currency-bar-note a{ color:var(--ember); font-weight:700; text-decoration:none; white-space:nowrap; }
.currency-bar select{ font:inherit; font-weight:700; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:inherit; }
.pillrow{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }
.pill{ font-size:13px; font-weight:600; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:6px 14px; color:var(--ink); font-variant-numeric:tabular-nums; }
.pill b{ color:var(--ember); font-weight:800; }
.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:16px; align-items:stretch; }
.plan{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px 28px; display:flex; flex-direction:column; position:relative; }
.plan.hot{ background:var(--kiln); color:var(--paper); border-color:var(--kiln); }
.plan .tag{ position:absolute; top:-11px; left:28px; background:var(--ember); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 12px; border-radius:20px; }
.plan .tag.soon{ background:color-mix(in srgb, var(--ember) 15%, var(--card)); color:var(--ember); border:1px solid color-mix(in srgb, var(--ember) 32%, transparent); }
.plan.hot .tag.soon{ background:rgba(239,230,214,.9); color:var(--ember); border:1px solid transparent; }
.btn.soon{ background:var(--line); color:var(--mut); border-color:var(--line); cursor:pointer; }
.btn.soon:hover{ background:var(--line); border-color:var(--ember); color:var(--ink); }
.btn.soon:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.plan.hot .btn.soon{ background:rgba(239,230,214,.14); color:var(--ash); border-color:rgba(239,230,214,.2); }
.plan h3{ font-size:19px; font-weight:700; }
.plan .who{ font-size:13.5px; color:var(--mut); margin-top:2px; line-height:1.4; min-height:2.8em; }
.plan.hot .who{ color:var(--ash); }
.price{ font-size:44px; font-weight:800; letter-spacing:-.03em; margin:18px 0 2px; font-variant-numeric:tabular-nums; }
.price small{ font-size:15px; font-weight:500; color:var(--mut); letter-spacing:0; }
.plan.hot .price small{ color:var(--ash); }
.plan ul{ list-style:none; padding:0; margin:18px 0 26px; display:grid; gap:9px; }
.plan li{ font-size:14.5px; color:var(--mut); padding-left:24px; position:relative; }
.plan.hot li{ color:var(--ash); }
.plan li::before{ content:""; position:absolute; left:0; top:.42em; width:12px; height:12px; border-radius:50%; background:color-mix(in srgb,var(--ember) 18%,transparent); box-shadow:inset 0 0 0 3.5px var(--ember); }
.plan .btn{ margin-top:auto; text-align:center; }
.finenote{ font-size:13px; color:var(--mut); margin-top:16px; text-align:center; }
.submit-hint{ font-size:13px; color:var(--mut); margin:8px 0 0; min-height:1.4em; }
.finenote + .finenote{ margin-top:4px; }

/* reverse pricing calculator */
.calcwrap{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:34px; align-items:stretch; }
@media (max-width:820px){ .calcwrap{ grid-template-columns:1fr; } }

.periodgroup{ display:flex; gap:8px; margin-top:6px; }
.periodgroup button{ flex:1; font:inherit; font-size:13.5px; font-weight:600; padding:9px 10px; border-radius:10px; border:1px solid var(--line); background:var(--porcelain); color:var(--mut); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.periodgroup button:hover{ border-color:var(--ember); }
.periodgroup button.active{ background:var(--ember); border-color:var(--ember); color:#fff; }

.field .hint{ display:block; font-size:12.5px; color:var(--mut); font-weight:500; margin-top:6px; }
.field .prefix-input{ position:relative; }
.field .prefix-input span{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--mut); font-weight:600; }
.field .prefix-input input{ width:100%; padding-left:27px; }

.calcresults{ background:var(--kiln); color:var(--paper); border-radius:20px; padding:clamp(24px,4vw,32px); display:flex; flex-direction:column; gap:20px; }
.calcresults .rtitle{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ash); }
.calcstats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.calcstat{ background:rgba(239,230,214,.06); border:1px solid rgba(239,230,214,.14); border-radius:14px; padding:16px; }
.calcstat .n{ font-size:27px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ember-hot); }
.calcstat .l{ font-size:12.5px; color:var(--ash); margin-top:4px; }
.calcstat .l2{ font-size:11.5px; color:var(--ash); opacity:.7; margin-top:2px; min-height:1.4em; }
.calccompare{ border-top:1px solid rgba(239,230,214,.16); padding-top:16px; display:flex; flex-direction:column; gap:10px; }
.calccompare .row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px; }
.calccompare .row .k{ color:var(--ash); }
.calccompare .row .v{ font-weight:700; font-variant-numeric:tabular-nums; }
.calcsavings{ background:color-mix(in srgb, var(--glaze) 24%, transparent); border:1px solid color-mix(in srgb, var(--glaze) 48%, transparent); border-radius:14px; padding:16px 18px; }
.calcsavings .n{ font-size:21px; font-weight:800; color:#8FD3B4; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.calcsavings p{ font-size:13px; color:var(--ash); margin-top:6px; }
.calcsavings.warn{ background:color-mix(in srgb, var(--ember) 20%, transparent); border-color:color-mix(in srgb, var(--ember) 45%, transparent); }
.calcsavings.warn .n{ color:var(--ember-hot); }

/* faq */
.faq{ margin-top:30px; display:grid; gap:2px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--line); }
.faq details{ background:var(--card); padding:18px 22px; }
.faq summary{ cursor:pointer; font-weight:700; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--ember); font-size:22px; font-weight:400; flex-shrink:0; transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ color:var(--mut); font-size:14.5px; margin-top:12px; max-width:64ch; }

/* comparison table */
.tablewrap{ overflow-x:auto; margin-top:34px; border:1px solid var(--line); border-radius:16px; }
table.compare{ width:100%; border-collapse:collapse; min-width:640px; background:var(--card); }
table.compare th, table.compare td{ text-align:left; padding:14px 18px; font-size:14.5px; border-bottom:1px solid var(--line); }
table.compare th{ font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--mut); font-weight:700; }
table.compare td.yes{ color:var(--glaze); font-weight:700; }
table.compare tr:last-child td{ border-bottom:none; }

/* about */
.value{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px; }
.value h3{ font-size:16.5px; font-weight:700; margin-bottom:8px; }
.value p{ font-size:14.5px; color:var(--mut); }
.pull{ font-size:clamp(20px,2.6vw,26px); font-weight:700; letter-spacing:-.015em; line-height:1.4; color:var(--ink); max-width:60ch; }
.pull .accent{ color:var(--ember); }

/* contact */
.contact{ background:var(--kiln); color:var(--paper); padding:clamp(56px,9vw,96px) 0; text-align:center; margin-top:clamp(64px,9vw,120px); }
.contact h2{ margin:0 auto; }
.contact p{ color:var(--ash); max-width:44ch; margin:14px auto 0; font-size:16.5px; }
.contact .cta{ margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.contact .em{ display:block; margin-top:18px; font-size:15px; color:var(--ash); }
.contact .em a{ color:var(--ember-hot); text-decoration:none; font-weight:600; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,48px); margin-top:34px; align-items:start; }
@media (max-width:760px){ .split{ grid-template-columns:1fr; } }

.formcard{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:clamp(24px,4vw,34px); }
.field{ display:grid; gap:6px; margin-bottom:16px; }
.field label, .field .label{ font-size:13.5px; font-weight:700; color:var(--ink); }
.field input, .field select, .field textarea{ font:inherit; padding:11px 13px; border-radius:10px; border:1px solid var(--line); background:var(--porcelain); color:var(--ink); }
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--ember); outline-offset:1px; }

footer{ padding:34px 0 40px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; color:var(--mut); font-size:13.5px; }
footer .quiet{ font-style:normal; }
footer .flinks{ display:flex; gap:18px; flex-wrap:wrap; }
footer .flinks a{ text-decoration:none; color:var(--mut); }
footer .flinks a:hover{ color:var(--ink); }

@media (max-width:560px){ .navlinks a.hidesm{ display:none; } }