/* ═══════════════════════════════════════════════════════════════════════
   FLUNTRO — "INSTRUMENT"
   Non-critical styles. Tokens live in the inlined <style> in index.html.
   See DESIGN.md for the art direction this implements.
   ═══════════════════════════════════════════════════════════════════════ */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── motion primitive: everything enters the same way ────────────── */
.reveal{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity 620ms var(--ease-out),transform 720ms var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ── calibration rail ────────────────────────────────────────────── */
.rail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:120;display:none;
  flex-direction:column;gap:3px;padding:14px 0}
.rail-line{position:absolute;left:9px;top:0;bottom:0;width:1px;background:var(--line)}
.rail a{position:relative;display:flex;align-items:center;gap:10px;height:26px;padding-left:0;
  color:var(--muted);transition:color var(--t) var(--ease)}
.rail a i{width:19px;height:1px;background:var(--line-2);flex:0 0 auto;
  transition:width var(--t) var(--ease),background var(--t) var(--ease)}
.rail a em{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;font-style:normal;opacity:.7;
  transition:opacity var(--t) var(--ease)}
.rail a span{font-size:.76rem;letter-spacing:-.01em;white-space:nowrap;opacity:0;transform:translateX(-6px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.rail a:hover span,.rail a.on span{opacity:1;transform:none}
.rail a:hover,.rail a.on{color:var(--paper)}
.rail a.on i{width:30px;background:var(--accent);box-shadow:0 0 10px var(--glow)}
.rail a.on em{opacity:1;color:var(--accent)}
@media (min-width:1440px){.rail{display:flex}}

/* ── mobile sheet ────────────────────────────────────────────────── */
.sheet[hidden]{display:none}
.sheet{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:24px;
  background:color-mix(in oklab,var(--ink) 82%,transparent);
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  animation:fade 240ms var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-in{display:flex;flex-direction:column;gap:4px;width:min(440px,100%)}
.sheet-in a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:18px 20px;border-radius:var(--r);border:1px solid var(--line);background:var(--ink-2);
  font-size:1.18rem;font-weight:650;letter-spacing:-.03em;min-height:56px}
.sheet-in a .price{font-family:var(--mono);font-size:.84rem;color:var(--signal);font-weight:500}
.sheet-in a:hover{border-color:var(--line-2)}

/* ── hero: picker + readout + rig ────────────────────────────────── */
.picker{list-style:none;margin:0;padding:0;display:grid;gap:7px;max-width:520px}
.picker a{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:14px;
  padding:15px 18px;border-radius:var(--r);border:1px solid var(--line);background:var(--ink-2);
  min-height:56px;position:relative;overflow:hidden;
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),background var(--t) var(--ease)}
.picker a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:50% 50%;transition:transform var(--t) var(--ease)}
.picker a:hover{border-color:color-mix(in oklab,var(--accent) 42%,var(--line));transform:translateX(4px)}
.picker a:hover::before{transform:scaleY(1)}
.pk-name{font-weight:650;letter-spacing:-.025em;font-size:1rem}
.pk-desc{font-size:.86rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-price{font-family:var(--mono);font-size:.9rem;color:var(--signal);letter-spacing:.01em}
.pk-arrow{color:var(--muted);opacity:0;transform:translateX(-5px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.picker a:hover .pk-arrow{opacity:1;transform:none;color:var(--accent)}
@media (max-width:560px){
  .picker a{grid-template-columns:auto 1fr auto auto;gap:11px;padding:14px 15px}
  .pk-desc{display:none}
}

.readout{list-style:none;margin:clamp(30px,5vw,54px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.readout li{padding:18px clamp(12px,1.6vw,22px);border-left:1px solid var(--line);display:flex;
  flex-direction:column;gap:5px}
.readout li:first-child{border-left:0;padding-left:0}
.readout .mono{color:var(--muted);opacity:.75}
.readout b{font-size:.9rem;font-weight:550;letter-spacing:-.015em;line-height:1.35}
.readout b i{color:var(--signal);font-style:normal}
.readout b em{font-style:normal;color:var(--muted);font-size:.82em}
@media (max-width:900px){
  .readout{grid-template-columns:1fr 1fr}
  .readout li{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .readout li:nth-child(-n+2){border-top:0}
  .readout li:nth-child(2n){padding-left:18px;border-left:1px solid var(--line)}
}
@media (max-width:430px){
  .readout{grid-template-columns:1fr}
  .readout li{border-top:1px solid var(--line);padding-left:0!important;border-left:0!important}
  .readout li:first-child{border-top:0}
}

/* the hero rig ---------------------------------------------------- */
.rig{position:relative;display:grid;place-items:center;min-height:clamp(420px,46vw,600px);isolation:isolate}
.rig-halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle,var(--glow),transparent 66%);filter:blur(30px);opacity:.6}
.rig-pad{position:absolute;left:-6%;top:8%;width:min(62%,330px);z-index:1;
  transform:rotate(-8deg) translateZ(0);opacity:.86}
.rig-phone{position:relative;z-index:3;width:min(50%,252px);transform:translateX(14%)}
@media (max-width:980px){
  .rig{min-height:400px;margin-top:10px}
  .rig-pad{left:0;width:min(58%,300px)}
  .rig-phone{transform:translateX(18%)}
}
@media (max-width:560px){
  .rig{min-height:340px}
  .rig-pad{left:-8%;top:12%;width:56%}
  .rig-phone{width:min(54%,190px);transform:translateX(20%)}
}

/* ── device frames (pure CSS, real UI inside) ────────────────────── */
.phone,.pad{position:relative;border-radius:13.5%/6.2%;padding:2.4%;
  background:linear-gradient(150deg,#4a4e57,#0d0f13 34%,#3a3e46 70%,#101318);
  box-shadow:var(--shadow-lift),inset 0 0 0 1px rgba(255,255,255,.13)}
.phone img,.pad img{border-radius:11%/5.1%;width:100%;height:auto;background:#000}
.pad{border-radius:5.4%/4.1%;padding:1.9%}
.pad img{border-radius:3.8%/2.9%}
.phone::before,.phone::after{content:"";position:absolute;border-radius:2px;background:#2c3038}
.phone::before{left:-1.5px;top:19%;width:2px;height:7%}
.phone::after{right:-1.5px;top:24%;width:2px;height:12%}
html[data-theme="light"] .phone,html[data-theme="light"] .pad{
  background:linear-gradient(150deg,#f0eeea,#b9b6b0 36%,#efedea 70%,#c8c5bf);
  box-shadow:var(--shadow-lift),inset 0 0 0 1px rgba(0,0,0,.1)}
html[data-theme="light"] .phone::before,html[data-theme="light"] .phone::after{background:#b3b0aa}

/* ── principles ──────────────────────────────────────────────────── */
.why{padding:clamp(46px,7vw,90px) 0}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{padding:26px 24px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--ink-2);
  position:relative;overflow:hidden;transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(110% 90% at 50% 0%,var(--accent-soft),transparent 62%);
  transition:opacity var(--t-slow) var(--ease)}
.tile:hover{border-color:var(--line-2);transform:translateY(-3px)}
.tile:hover::after{opacity:1}
.tile-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;margin-bottom:18px;
  color:var(--accent);border:1px solid color-mix(in oklab,var(--accent) 34%,transparent);
  background:color-mix(in oklab,var(--accent) 13%,transparent);position:relative;z-index:1}
.tile h3{font-size:1.04rem;letter-spacing:-.03em;margin-bottom:.42em;position:relative;z-index:1}
.tile p{font-size:.9rem;line-height:1.5;position:relative;z-index:1}
@media (max-width:900px){.why-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.why-grid{grid-template-columns:1fr}}

/* ── app sections ────────────────────────────────────────────────── */
.app{position:relative;padding:clamp(60px,9vw,130px) 0;overflow:clip}
.app-glow{position:absolute;z-index:-1;pointer-events:none;left:50%;top:0;transform:translateX(-50%);
  width:min(1400px,120vw);height:52vw;max-height:720px;border-radius:50%;filter:blur(110px);opacity:.15;
  background:var(--accent)}
.app.alt-side .app-glow{opacity:.13}
.sec-head,.app-head{max-width:62ch}
.app.alt-side .app-head{margin-left:auto;text-align:right}
.idx{display:block;margin-bottom:18px;color:var(--accent);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.idx .sep{opacity:.4;padding:0 4px}
.app-head h2{margin-bottom:.42em;letter-spacing:-.048em}
.lede{font-size:clamp(1.02rem,1.4vw,1.14rem);line-height:1.6;max-width:52ch}
.app.alt-side .app-head .lede{margin-left:auto}

/* focus rail: the screenshots, depth-of-field style -------------- */
.focus-rail{position:relative;margin-top:clamp(34px,5vw,64px)}
.rail-track{list-style:none;display:flex;gap:clamp(16px,2.4vw,34px);margin:0;padding:10px max(20px,34vw) 10px
    calc(max((100vw - var(--maxw)) / 2, 0px) + clamp(20px,4vw,40px));
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail-track::-webkit-scrollbar{display:none}
.rail-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r)}
.slide{flex:0 0 auto;width:clamp(178px,20vw,244px);scroll-snap-align:center;
  transform:scale(var(--s,1));opacity:var(--o,1);transform-origin:50% 40%;
  transition:transform 560ms var(--ease-out),opacity 560ms var(--ease-out)}
.slide-pad{width:clamp(300px,34vw,460px);align-self:center}
.cap{margin:18px 2px 0;display:flex;flex-direction:column;gap:4px;font-size:.86rem;color:var(--paper);
  letter-spacing:-.015em}
.cap .mono{color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .slide{transform:none;opacity:1}
}
.rail-hint{position:absolute;right:clamp(20px,4vw,40px);top:-30px;color:var(--muted);opacity:.5}
@media (max-width:700px){.rail-hint{display:none}}

/* the closing row: features + buy -------------------------------- */
.app-foot{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);
  align-items:start;margin-top:clamp(38px,5vw,66px)}
.app.alt-side .app-foot{direction:rtl}
.app.alt-side .app-foot>*{direction:ltr}
.feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.feats li{background:var(--ink);padding:20px 22px;display:flex;flex-direction:column;gap:5px;
  transition:background var(--t) var(--ease)}
.feats li:hover{background:var(--ink-2)}
.feats b{font-size:.96rem;font-weight:600;letter-spacing:-.025em}
.feats span{font-size:.86rem;color:var(--muted);line-height:1.45}
.app-buy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:24px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--ink-2)}
.meta{color:var(--muted);line-height:1.7;letter-spacing:.09em;font-size:.66rem}
.quiet{color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:1px;font-size:.85rem;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.quiet:hover{color:var(--accent);border-color:var(--accent)}
@media (max-width:900px){
  .app-foot{grid-template-columns:1fr}
  .app.alt-side .app-head{text-align:left;margin-left:0}
  .app.alt-side .app-head .lede{margin-left:0}
  .app.alt-side .app-foot{direction:ltr}
}
@media (max-width:540px){.feats{grid-template-columns:1fr}}

/* ── Apple's App Store badge ─────────────────────────────────────────
   Used at the two highest-intent moments only: each app's buy box and the
   closing band. Not in the comparison table or the dock — both are too tight
   to give the badge its clear space, and Apple's guidelines are explicit that
   it must not be cramped or crowded.

   The badge artwork is never recoloured, redrawn or distorted; the two files
   are Apple's own light and dark variants, swapped to whichever contrasts with
   the current theme. */
.store-badge{display:inline-block;line-height:0;border-radius:9px;
  /* Apple asks for clear space of at least 10% of the badge height on all
     sides. The badge renders ~52px tall, so 6px is comfortably past that. */
  padding:6px;margin:-6px;
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.store-badge:hover{transform:translateY(-2px)}
.store-badge:active{transform:translateY(0)}
.store-badge:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.store-badge img{width:168px;height:auto;display:block}
/* Specificity matters here: `.store-badge img` is (0,1,1), so a bare
   `.sb-on-light` at (0,1,0) loses to it and BOTH variants render. Match the
   selector weight so exactly one is ever shown. */
.store-badge .sb-on-light{display:none}
.store-badge .sb-on-dark{display:block}
html[data-theme="light"] .store-badge .sb-on-dark{display:none}
html[data-theme="light"] .store-badge .sb-on-light{display:block}

/* badge + price, side by side: the badge brings recognition, the price keeps
   doing the work the old text button was doing */
.buy-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.buy-price{display:flex;flex-direction:column;gap:1px;margin:0;line-height:1.1}
.buy-price b{font-family:var(--mono);font-size:1.35rem;font-weight:600;letter-spacing:-.03em;
  color:var(--signal)}
.buy-price .mono{color:var(--muted);font-size:.62rem}

/* closing band */
.close-app{display:flex;flex-direction:column;align-items:center;gap:10px}
.close-name{font-size:.95rem;font-weight:650;letter-spacing:-.025em;color:#fff}
.close-price{color:rgba(255,255,255,.72);font-size:.64rem}
html[data-theme="light"] .close-name{color:var(--paper)}
html[data-theme="light"] .close-price{color:var(--muted)}
.close-btns{gap:clamp(20px,3vw,44px)}
@media (max-width:520px){
  .store-badge img{width:150px}
  .buy-row{gap:14px}
}

/* ── section heads elsewhere ─────────────────────────────────────── */
.sec-head{margin-bottom:clamp(30px,4vw,52px)}
.compare{padding:clamp(56px,8vw,116px) 0;position:relative}
.faq{padding:clamp(56px,8vw,116px) 0}

/* ── compare table ───────────────────────────────────────────────── */
.table-scroll{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--ink-2)}
.cmp{width:100%;border-collapse:collapse;min-width:700px}
.cmp th,.cmp td{padding:17px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:.9rem}
.cmp thead th{position:sticky;top:0;z-index:2;background:var(--ink-2);
  box-shadow:inset 0 -2px 0 color-mix(in oklab,var(--accent,transparent) 72%,transparent)}
.cmp thead .idx{margin-bottom:8px}
.cmp thead b{display:block;font-size:1.02rem;font-weight:650;letter-spacing:-.03em}
.th-sub{display:block;font-size:.75rem;color:var(--muted);margin-top:3px}
.cmp tbody th{color:var(--muted);font-family:var(--mono);font-weight:500;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;width:1%}
.cmp tbody td{color:var(--muted);line-height:1.5}
.row-price td b{display:block;font-family:var(--mono);font-size:1.5rem;letter-spacing:-.02em;color:var(--signal);line-height:1.15}
.row-price td span{font-size:.72rem}
.row-cta td{border-bottom:0}
@media (max-width:760px){
  .table-scroll{border:0;background:none;overflow:visible}
  .cmp{min-width:0}
  .cmp,.cmp thead,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block}
  .cmp thead{display:none}
  .cmp tbody{display:grid;gap:12px}
  .cmp tr{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-2);padding:8px 0;overflow:hidden}
  .cmp tbody th{border-bottom:0;padding-bottom:2px}
  .cmp td{border-bottom:0;padding-top:4px;padding-bottom:12px}
  .cmp td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:.62rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--paper);margin-bottom:4px}
  .row-price td b{display:inline-block;font-size:1.2rem;margin-right:8px}
  .row-cta td::before{display:none}
}

/* ── reviews ─────────────────────────────────────────────────────────
   These lived in a separate reviews.css while the standalone /reviews/ page
   rendered the same cards. That page is a redirect stub now, so the split
   bought nothing and cost a file that could be — and was — missed on deploy.
   ──────────────────────────────────────────────────────────────────── */
/* ── reviews ─────────────────────────────────────────────────────── */
.reviews{padding:clamp(56px,8vw,110px) 0;position:relative}
.rv-head{max-width:26ch}

.rv-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 clamp(28px,4vw,44px)}
.rv-stats div{background:var(--ink);padding:22px clamp(14px,2vw,26px);display:flex;flex-direction:column;gap:5px}
.rv-stats b{font-family:var(--mono);font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:600;
  letter-spacing:-.04em;line-height:1;color:var(--paper)}
.rv-stats .mono{color:var(--muted)}
@media (max-width:640px){
  .rv-stats{grid-template-columns:1fr}
  .rv-stats div{padding:16px 0}
}

/* the card — shared by the homepage block and the full wall */
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.rv{display:flex;flex-direction:column;gap:10px;padding:22px 24px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--ink-2);
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease);
  /* 619 cards is a lot of layout and paint. content-visibility lets the browser
     skip the work for anything off-screen while keeping every word in the DOM,
     which is the whole point — crawlers still read it, the browser just does not
     render it until it is close. contain-intrinsic-size stops the scrollbar
     jumping as blocks are realised. */
  content-visibility:auto;
  contain-intrinsic-size:auto 260px}
.rv:hover{border-color:var(--line-2);transform:translateY(-2px)}
.rv-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rv-stars{color:var(--signal);letter-spacing:.16em;font-size:.8rem;line-height:1}
.rv-title{margin:0;font-size:1rem;font-weight:650;letter-spacing:-.025em;line-height:1.3;color:var(--paper)}
.rv-body{margin:0;font-size:.92rem;line-height:1.55;color:var(--muted);flex:1 1 auto;
  overflow-wrap:anywhere}
.rv-body.clamp{display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rv-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--line);font-size:.8rem}
.rv-who{font-weight:600;letter-spacing:-.01em}
.rv-where{color:var(--muted);font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase}

.rv-more{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:clamp(24px,3vw,36px) 0 0}
.rv-more .meta{margin:0;max-width:44ch}


/* the complete wall, on the homepage */
.rv-highlights{margin-bottom:clamp(40px,6vw,72px)}
.rv-all{border-top:1px solid var(--line);padding-top:clamp(30px,4vw,48px)}
.rv-all-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:0 0 20px;
  font-size:1.15rem;font-weight:650;letter-spacing:-.03em}
.rv-all-head .meta{margin:0;color:var(--muted)}
.rv-jump{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 clamp(28px,4vw,44px);
  padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rv-jump a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;
  border:1px solid var(--line);font-size:.8rem;color:var(--muted);text-decoration:none;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.rv-jump a:hover{color:var(--paper);border-color:var(--line-2)}
.rv-jump em{font-style:normal;font-family:var(--mono);font-size:.66rem;opacity:.7}
.rv-country{margin:0 0 clamp(34px,5vw,56px);scroll-margin-top:96px}
.rv-country h2{display:flex;align-items:center;gap:12px;margin:0 0 18px;
  font-size:1.2rem;font-weight:650;letter-spacing:-.03em}
.rv-country h2 em{font-style:normal;color:var(--muted);margin-left:auto}
.rv-flag{font-size:1.05em;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.faq-head{position:sticky;top:110px;margin-bottom:0}
.faq-list{display:grid;gap:6px}
.faq-list details{border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2);overflow:hidden;
  transition:border-color var(--t) var(--ease)}
.faq-list details[open]{border-color:color-mix(in oklab,var(--accent) 34%,var(--line))}
.faq-list summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:18px 22px;font-size:1rem;font-weight:600;letter-spacing:-.028em;min-height:56px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary i{position:relative;width:12px;height:12px;flex:0 0 auto;opacity:.55}
.faq-list summary i::before,.faq-list summary i::after{content:"";position:absolute;background:currentColor;border-radius:2px;
  transition:transform 320ms var(--ease)}
.faq-list summary i::before{left:0;top:5px;width:12px;height:2px}
.faq-list summary i::after{left:5px;top:0;width:2px;height:12px}
.faq-list details[open] summary i{opacity:1;color:var(--accent)}
.faq-list details[open] summary i::after{transform:rotate(90deg) scaleX(0)}
.faq-list details>div{padding:0 22px 20px;animation:slip 320ms var(--ease-out)}
@keyframes slip{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.faq-list p{font-size:.95rem;line-height:1.65}
.faq-list a{color:var(--accent);border-bottom:1px solid color-mix(in oklab,var(--accent) 40%,transparent)}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-head{position:static}}

/* ── the makers ──────────────────────────────────────────────────── */
.makers{padding:clamp(56px,8vw,110px) 0;position:relative}
.makers-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,4.5vw,64px);align-items:center}
/* The slash already carries meaning on this page — it separates the parts of
   every section index. Reusing it here reads as the system, not as punctuation. */
.makers h2 .sep{color:var(--accent);font-weight:400;padding:0 .12em;
  display:inline-block;transform:translateY(-.04em)}
.makers-photo{margin:0;position:relative}
.makers-photo img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);
  /* Warm the snapshot slightly toward the page rather than letting a raw
     phone photo sit on the chassis looking pasted in. */
  filter:saturate(.94) contrast(1.02);
  box-shadow:var(--shadow-lift)}
.makers-photo figcaption{position:absolute;left:14px;bottom:14px;color:#fff;
  padding:7px 13px;border-radius:99px;background:rgba(6,8,12,.62);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.makers-lede{font-size:clamp(1.14rem,1.9vw,1.5rem);line-height:1.45;letter-spacing:-.028em;
  color:var(--paper);margin:0 0 26px;max-width:30ch}
.makers-people{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.makers-people li{display:flex;flex-direction:column;gap:3px;padding:14px 20px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--ink-2);min-width:170px;
  transition:border-color var(--t) var(--ease)}
.makers-people li:hover{border-color:var(--line-2)}
.makers-name{font-weight:650;letter-spacing:-.025em;font-size:1rem}
.makers-role{color:var(--accent)}
.makers-note{font-size:.98rem;line-height:1.6;max-width:48ch;margin:0 0 24px}
@media (max-width:900px){
  .makers-grid{grid-template-columns:1fr;gap:26px}
  .makers-photo{max-width:520px}
}

/* ── customer quote ──────────────────────────────────────────────── */
.quote{margin:20px 0 0;padding:18px 20px;border-radius:var(--r);border:1px solid var(--line);
  border-left:2px solid var(--accent);background:var(--ink)}
.quote blockquote{margin:0 0 10px;font-size:.95rem;line-height:1.55;color:var(--paper);
  letter-spacing:-.015em}
.quote blockquote::before{content:"\201C";color:var(--accent);font-size:1.4em;line-height:0;
  vertical-align:-.28em;margin-right:2px}
.quote figcaption{font-size:.82rem;color:var(--muted)}
.quote figcaption .mono{color:var(--paper)}

/* ── close ───────────────────────────────────────────────────────── */
.close{padding:0 0 clamp(50px,7vw,96px)}
.close-card{position:relative;overflow:hidden;text-align:center;border-radius:var(--r-xl);
  padding:clamp(46px,7vw,92px) clamp(22px,4vw,54px);border:1px solid var(--line);background:var(--ink-2)}
.close-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:.5}
.close-rings i{position:absolute;border-radius:50%;border:1px solid var(--line-2)}
.close-rings i:nth-child(1){width:min(360px,62vw);aspect-ratio:1}
.close-rings i:nth-child(2){width:min(560px,86vw);aspect-ratio:1;opacity:.7}
.close-rings i:nth-child(3){width:min(780px,116vw);aspect-ratio:1;opacity:.4}
.close-card .idx,.close-card h2,.close-card .lede,.close-btns{position:relative;z-index:1}
.close-card .idx{color:var(--muted)}
.close-card h2{max-width:19ch;margin:0 auto .4em}
.close-card .lede{margin:0 auto 30px;max-width:46ch}
.close-btns{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}

/* ── footer ──────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:clamp(40px,6vw,66px) 0 32px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:34px}
.foot h4{margin-bottom:16px;color:var(--muted)}
.foot nav{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.foot nav a{font-size:.9rem;color:var(--muted);transition:color var(--t) var(--ease)}
.foot nav a:hover{color:var(--paper)}
.foot-brand .brand{margin-bottom:12px}
.foot-base{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;
  gap:8px 28px;justify-content:space-between}
.foot-base p{color:var(--muted);opacity:.8}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ── the dock (mobile buy bar) ───────────────────────────────────── */
.dock[hidden]{display:none}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:140;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(112%);transition:transform 420ms var(--ease-out)}
.dock.up{transform:none}
.dock-in{display:flex;align-items:center;gap:12px;max-width:620px;margin-inline:auto;padding:9px 9px 9px 18px;
  border-radius:99px;border:1px solid var(--line-2);background:color-mix(in oklab,var(--ink-2) 86%,transparent);
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:0 22px 60px -26px rgba(0,0,0,.95)}
.dock-idx{margin:0;flex:0 0 auto}
.dock-name{font-size:.92rem;font-weight:650;letter-spacing:-.028em;flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;flex:0 0 auto}
.dock-price b{font-family:var(--mono);font-size:.9rem;color:var(--signal)}
.dock-price i{font-size:.56rem;color:var(--muted);letter-spacing:.1em}
@media (min-width:981px){.dock{display:none}}

/* Light mode wants the aura as a whisper, not a wash — at dark-mode opacity
   the three coatings turn the paper candy-coloured. */
html[data-theme="light"] .aura i{opacity:.17}
html[data-theme="light"] .aura .a2{opacity:.13}
html[data-theme="light"] .aura .a3{opacity:.10}
html[data-theme="light"] .app-glow{opacity:.09}
html[data-theme="light"] .rig-halo{opacity:.35}

/* ── theme icon swap ─────────────────────────────────────────────── */
.i-sun{display:none}
html[data-theme="light"] .i-sun{display:block}
html[data-theme="light"] .i-moon{display:none}

/* ── preferences ─────────────────────────────────────────────────── */
@media (prefers-contrast:more){
  :root{--line:rgba(255,255,255,.3);--line-2:rgba(255,255,255,.5);--muted:#C6CCD5}
  html[data-theme="light"]{--line:rgba(20,18,14,.34);--line-2:rgba(20,18,14,.55);--muted:#3B414B}
  .slide{opacity:1!important}
}
@media (prefers-reduced-motion:reduce){
  .aura i,.app-glow{animation:none!important}
  .rail-track{scroll-behavior:auto}
}
@media print{.nav,.rail,.dock,.sheet,#prog,.aura,.app-glow,.rail-hint{display:none!important}}