:root{
  --bg:#F4F4F4;
  --surface:#FFFFFF;
  --surface-2:#FAF9F8;
  --border:#E6E3DF;
  --border-strong:#D6CFC7;
  --text:#262826;
  --text-2:#55514C;
  --muted:#6E665E;
  --accent:#EB5E14;
  --accent-light:#FFA834;
  --accent-ink:#C64A0C;
  --accent-ink-hover:#A63D08;
  --accent-soft:#FFF1E4;
  --leaf:#4CAF50;
  --ink:#17130F;
  --radius:22px;
  --radius-sm:14px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --shadow:0 1px 2px rgba(38,30,24,.05), 0 10px 30px -8px rgba(38,30,24,.10);
  --shadow-lg:0 2px 6px rgba(38,30,24,.05), 0 30px 70px -18px rgba(38,30,24,.20);
  --font:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ------------------------------------------------------------- foundations */
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scrollbar-color:#CFC7BE transparent;accent-color:var(--accent-ink);
  caret-color:var(--accent-ink);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#FFD6B8;color:var(--ink)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#D3CBC2;border-radius:12px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#BDB3A8}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:8px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;text-underline-offset:3px}
b{font-weight:500;color:var(--text)}
kbd{font:inherit;font-size:.8em;font-weight:500;background:#fff;border:1px solid var(--border-strong);
  border-bottom-width:2px;border-radius:7px;padding:1px 7px;color:var(--text);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.12em}

.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}

h1,h2,h3{font-weight:500;letter-spacing:-.04em;margin:0;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(40px,4.9vw,70px)}
h2{font-size:clamp(34px,4.2vw,56px)}
p{margin:0;text-wrap:pretty}

/* ----------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:500;line-height:1;padding:12px 20px;border-radius:999px;
  white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease),box-shadow .25s}
.btn:active{transform:scale(.97)}
.btn-lg{font-size:16.5px;padding:16px 26px}
.btn-sm{font-size:13px;padding:8px 14px}
.btn-block{width:100%}
.btn-accent{background:var(--accent-ink);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -6px rgba(198,74,12,.55)}
.btn-accent:hover{background:var(--accent-ink-hover);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 22px -8px rgba(198,74,12,.6)}
.btn-ghost{background:rgba(255,255,255,.55);color:var(--text);border:1px solid var(--border-strong)}
.btn-ghost:hover{background:#fff;border-color:#B9AFA5}

.text-link{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-weight:500;
  color:var(--accent-ink);border-bottom:1.5px solid rgba(198,74,12,.3);padding-bottom:3px;transition:border-color .2s}
.text-link:hover{border-color:var(--accent-ink)}
.text-link .ic{animation:nudge 1.8s var(--ease-io) infinite}
@keyframes nudge{50%{translate:0 3px}}

/* --------------------------------------------------------------------- nav */
.nav{position:fixed;inset:0 0 auto;z-index:60;transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(244,244,244,.78);backdrop-filter:saturate(1.4) blur(16px);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);border-bottom-color:rgba(214,207,199,.6)}
.nav-inner{width:min(1180px,calc(100% - 48px));margin:0 auto;height:68px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;letter-spacing:-.035em}
.brand-mark{width:28px;height:28px;flex:none;transition:transform .5s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-14deg) scale(1.06)}
.brand.small{font-size:17px}
.nav-links{display:flex;gap:4px;margin-left:auto;font-size:15px}
.nav-links a{color:var(--text-2);padding:8px 12px;border-radius:999px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.7)}
.nav-inner > .btn{margin-left:8px}

/* ================================================================ THE PEEL */
section.peel{position:relative;padding:0}
.peel-sticky{position:relative;padding:130px 0 70px}
.peel-grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);align-items:center;gap:40px}

.cap{margin-bottom:44px}
.cap h2{font-size:clamp(34px,3.9vw,54px);margin-bottom:18px}
.cap p{font-size:19px;color:var(--text-2);max-width:30em}
.lede{font-size:19px;color:var(--text-2);max-width:31em;margin-top:24px}
.hero-actions{display:flex;gap:12px;margin:34px 0 18px;flex-wrap:wrap}
.hero-note{color:var(--muted);font-size:14.5px}

.peel-art{position:relative;width:min(100%,610px);aspect-ratio:1;justify-self:center;perspective:1100px}
.peel-tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s var(--ease)}
.fruit{width:100%;height:100%;overflow:visible;display:block}
.fruit .pon{transition:opacity .22s ease}

.peel-file{position:absolute;left:50%;top:50%;width:25%;padding:8px 8px 10px;border-radius:14px;
  background:rgba(255,255,255,.9);box-shadow:0 18px 40px -12px rgba(30,40,50,.35),0 2px 6px rgba(0,0,0,.08);
  display:flex;flex-direction:column;align-items:center;gap:7px;opacity:0;pointer-events:none;
  transform:translate(-50%,-50%);will-change:transform,opacity}
.peel-file img{width:100%;aspect-ratio:1.25;object-fit:cover;border-radius:8px}
.peel-file span{font-size:12.5px;font-weight:500;color:var(--text)}

.peel-result{position:absolute;left:50%;bottom:-2%;display:flex;align-items:center;gap:10px;white-space:nowrap;
  background:#231F1B;color:#fff;padding:11px 18px 11px 11px;border-radius:999px;font-size:15px;
  box-shadow:0 20px 40px -14px rgba(20,16,12,.55);opacity:0;transform:translate(-50%,16px);pointer-events:none}
.peel-result b{color:#fff}
.peel-result .num{color:#B6AA9E;font-size:13.5px}
.dot-ok{width:26px;height:26px;border-radius:50%;background:var(--leaf);display:grid;place-items:center;font-size:14px}

.scroll-cue{position:absolute;left:50%;bottom:26px;translate:-50% 0;display:none;flex-direction:column;
  align-items:center;gap:9px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.scroll-cue i{width:1.5px;height:38px;background:linear-gradient(var(--border-strong),transparent);
  position:relative;overflow:hidden;border-radius:2px}
.scroll-cue i::after{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;
  background:var(--accent-ink);border-radius:2px;animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{to{transform:translateY(62px)}}

/* scroll-driven version, only when scripting is available */
.js .peel{height:430vh}
.js .peel-sticky{position:sticky;top:0;height:100vh;height:100svh;padding:68px 0 0;display:flex;
  align-items:center;overflow:hidden}
.js .peel-copy{position:relative;min-height:440px}
.js .cap{position:absolute;left:0;right:0;top:50%;margin:0;opacity:0;visibility:hidden;
  transform:translate3d(0,calc(-50% + 34px),0);filter:blur(8px);
  transition:opacity .45s ease,transform .8s var(--ease),filter .5s ease,visibility 0s linear .5s}
.js .cap.is-past{transform:translate3d(0,calc(-50% - 34px),0)}
.js .cap.is-on{opacity:1;visibility:visible;transform:translate3d(0,-50%,0);filter:blur(0);
  transition:opacity .6s ease .12s,transform 1s var(--ease) .08s,filter .6s ease .12s,visibility 0s}
.js .scroll-cue{display:flex;transition:opacity .4s}
.js .fruit{animation:breathe 7s ease-in-out infinite}
.js .peel.is-moving .fruit{animation-play-state:paused}
@keyframes breathe{50%{translate:0 -7px;scale:1.012}}

/* ==================================================================== DEMO */
section{padding:120px 0}
.demo-section{padding-top:60px}
.section-head{max-width:680px;margin:0 auto 52px;text-align:center}
.section-head h2{margin-bottom:18px}
.section-head p{color:var(--text-2);font-size:18px}

.stage{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.stage-bar{display:flex;align-items:center;gap:7px;padding:0 16px;height:44px;
  border-bottom:1px solid var(--border);background:var(--surface-2)}
.dot{width:11px;height:11px;border-radius:50%;background:#E2DDD7}
.dot:first-child{background:#F2C1AA}
.stage-title{margin-left:10px;font-size:13.5px;color:var(--muted);font-weight:500}
.keycaps{margin-left:auto;display:flex;gap:6px}
.cap-key{font-size:12px;font-weight:500;color:var(--muted);background:#fff;border:1px solid var(--border-strong);
  border-bottom-width:2px;border-radius:7px;padding:2px 9px;transition:background .12s,color .12s,border-color .12s,transform .12s}
.cap-key.on{background:var(--accent-ink);border-color:var(--accent-ink-hover);color:#fff;transform:translateY(1px)}
.stage-reset{margin-left:14px;background:none;border:none;font:inherit;font-size:13.5px;font-weight:500;
  color:var(--accent-ink);cursor:pointer;padding:6px 4px}
.stage-reset:hover{text-decoration:underline}

.desktop{position:relative;height:560px;overflow:hidden;touch-action:none;
  background:
    radial-gradient(900px 420px at 72% 12%,rgba(255,255,255,.85),rgba(255,255,255,0) 60%),
    radial-gradient(700px 500px at 18% 88%,rgba(214,231,240,.85),rgba(214,231,240,0) 65%),
    linear-gradient(168deg,#CFE2EF 0%,#E2ECF3 45%,#F3F6F7 100%)}
.desktop::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(120,150,170,.18)}

.icons{position:absolute;inset:0}
.file{position:absolute;width:104px;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:8px 4px;border-radius:12px;cursor:grab;user-select:none;-webkit-user-select:none;
  transition:background .15s,opacity .15s}
.file:hover{background:rgba(255,255,255,.55)}
.file.picked{opacity:.3}
.file-art{width:62px;height:62px;position:relative;display:grid;place-items:center;
  filter:drop-shadow(0 4px 8px rgba(40,60,75,.28))}
.file-art img{width:60px;height:60px;object-fit:cover;border-radius:6px;border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);background:#fff}
.doc{width:48px;height:60px;background:#fff;border-radius:5px;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.doc::before{content:"";position:absolute;top:0;right:0;border-width:0 14px 14px 0;border-style:solid;
  border-color:#DFE6EB #F4F7F9}
.doc-lines{position:absolute;left:8px;right:8px;top:20px;display:flex;flex-direction:column;gap:4px}
.doc-lines i{display:block;height:3px;border-radius:2px;background:#DDE4E9}
.doc-lines i:nth-child(2){width:70%}
.badge{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;
  letter-spacing:.06em;color:#fff;padding:2px 6px;border-radius:4px}
.file-name{font-size:12.5px;color:#22303A;text-align:center;line-height:1.25;
  text-shadow:0 1px 2px rgba(255,255,255,.9);word-break:break-word}

.hint{position:absolute;left:150px;top:10px;width:230px;pointer-events:none;z-index:3;transition:opacity .35s}
.hint.gone{opacity:0}
.hint-text{font-family:"Caveat",var(--font);font-size:28px;color:#4F5F68;display:block;transform:rotate(-4deg)}
.hint-arrow{width:86px;margin-left:8px;transform:scaleX(-1) rotate(8deg)}

.ghost{position:absolute;z-index:40;pointer-events:none;opacity:.94;transform:translate(-50%,-50%) rotate(-4deg) scale(.95);
  filter:drop-shadow(0 14px 22px rgba(30,50,65,.32))}
.ghost .file{position:static;background:rgba(255,255,255,.72)}

.wheel{position:absolute;z-index:30;width:330px;height:330px;pointer-events:none;transform:translate(-50%,-50%);
  animation:wheelIn .26s var(--ease);filter:drop-shadow(0 24px 40px rgba(20,16,12,.35))}
@keyframes wheelIn{from{opacity:0;transform:translate(-50%,-50%) scale(.82) rotate(-10deg)}}
.petal-label{pointer-events:none;font-family:var(--font);font-weight:700;letter-spacing:.02em}
.wheel .bloom{transform-box:view-box;transform-origin:180px 180px;animation:petalIn .42s var(--ease) both}
@keyframes petalIn{from{opacity:0;transform:scale(.62) rotate(-18deg)}}
.wheel path{transition:fill .14s}

.tip{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:35;background:rgba(23,19,15,.92);
  color:#fff;font-size:13.5px;padding:9px 16px;border-radius:999px;box-shadow:var(--shadow);white-space:nowrap;
  animation:rise .3s var(--ease)}
@keyframes rise{from{opacity:0;transform:translate(-50%,8px)}}

.hud{position:absolute;right:18px;bottom:18px;z-index:36;display:flex;align-items:center;gap:13px;
  background:rgba(32,28,25,.95);color:#fff;padding:13px 14px 13px 13px;border-radius:16px;
  box-shadow:0 18px 40px -12px rgba(20,30,40,.4);min-width:280px;animation:rise-r .35s var(--ease)}
@keyframes rise-r{from{opacity:0;transform:translateY(12px) scale(.97)}}
.hud-icon{width:28px;height:28px;border-radius:50%;background:#3A342F;display:grid;place-items:center;font-size:15px;flex:none}
.hud.done .hud-icon{background:var(--leaf);animation:pop .4s var(--ease)}
.hud.warn .hud-icon{background:#A9741A}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.12)}}
.spin{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hud-text{flex:1;display:flex;flex-direction:column;align-items:flex-start;line-height:1.3;min-width:0}
.hud-text strong{font-weight:500;font-size:15px}
.hud-text span{font-size:12.5px;color:#C4B9AE;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-bar{width:100%;height:4px;border-radius:3px;background:#453E39;margin-top:8px;overflow:hidden}
.hud-bar i{display:block;height:100%;width:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent-light),var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .15s}
.hud.done .hud-bar,.hud.warn .hud-bar{display:none}

.dialog-layer{position:absolute;inset:0;z-index:38;display:flex;align-items:center;justify-content:center;
  background:rgba(28,36,42,.3);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fade .25s ease}
@keyframes fade{from{opacity:0}}
.dialog{width:min(420px,88%);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden;text-align:left;animation:dlgIn .4s var(--ease)}
@keyframes dlgIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
.dlg-head{height:48px;display:flex;align-items:center;justify-content:center;position:relative;
  border-bottom:1px solid var(--border);font-weight:500}
.dlg-close{position:absolute;left:10px;top:10px;width:28px;height:28px;border:none;background:none;border-radius:8px;
  font-size:15px;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.dlg-close:hover{background:var(--surface-2);color:var(--text)}
.dlg-body{padding:18px 20px}
.dlg-value{text-align:center;font-size:24px;font-weight:500;letter-spacing:-.02em;margin-bottom:10px}
.dlg-foot{display:flex;justify-content:flex-end;gap:10px;padding:13px 20px;border-top:1px solid var(--border);background:var(--surface-2)}
.dlg-note{font-size:13px;color:var(--muted);margin-top:12px}
.dlg-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:6px}
input[type=range]{width:100%;accent-color:var(--accent-ink)}
.crop-area{position:relative;background:#17161A;border-radius:12px;overflow:hidden;margin:0 auto;touch-action:none}
.crop-area img{width:100%;height:100%;opacity:.55;pointer-events:none;display:block}
.crop-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.45);cursor:move}
.crop-box::after{content:"";position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;background:#fff;
  border-radius:3px;cursor:nwse-resize}

.drop-overlay{position:absolute;inset:0;background:rgba(255,241,228,.9);border:2px dashed var(--accent);display:none;
  align-items:center;justify-content:center;z-index:45;font-size:19px;font-weight:500;color:var(--accent-ink)}
.stage.dragging .drop-overlay{display:flex}

.stage-foot{text-align:center;color:var(--muted);font-size:14.5px;margin:22px auto 0;max-width:62em}

/* =================================================================== TOOLS */
.tools-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:72px;align-items:center}
.tools-lede{color:var(--text-2);font-size:18px;margin-top:20px;max-width:31em}
.tool-list{margin-top:40px;border-top:1px solid var(--border-strong)}
.tool{position:relative;display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font:inherit;color:inherit;padding:20px 0;border-bottom:1px solid var(--border)}
.tool b{display:flex;align-items:center;justify-content:space-between;font-size:21px;letter-spacing:-.025em;
  color:#8A8279;transition:color .3s}
.tool:hover b{color:var(--text-2)}
.tool.is-on b{color:var(--text)}
.tool-desc{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s var(--ease),opacity .35s ease}
.tool-desc > span{overflow:hidden;color:var(--text-2);font-size:15.5px;max-width:34em}
.tool.is-on .tool-desc{grid-template-rows:1fr;opacity:1}
.tool-desc > span::before{content:"";display:block;height:8px}
.tool-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.tool-bar i{display:block;height:100%;background:var(--accent-ink);transform:scaleX(0);transform-origin:left}
.tool-list.auto .tool.is-on .tool-bar i{animation:fill var(--dwell,5.5s) linear forwards}
.tool-list.auto.paused .tool.is-on .tool-bar i{animation-play-state:paused}
.tool-list:not(.auto) .tool.is-on .tool-bar i{transform:scaleX(1);transition:transform .5s var(--ease)}
@keyframes fill{to{transform:scaleX(1)}}
.tools-more{margin-top:24px;color:var(--muted);font-size:15px}

.tools-screen{position:relative;aspect-ratio:1/1.04;border-radius:28px;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 0%,#3A2A1F 0%,#1B1714 55%,#15120F 100%);
  box-shadow:0 40px 80px -30px rgba(40,24,12,.45),0 0 0 1px rgba(255,255,255,.04) inset}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:34px;opacity:0;
  clip-path:inset(100% 0 0 0);transform:translateY(22px) scale(1.03);
  transition:clip-path .8s var(--ease),transform 1s var(--ease),opacity 0s linear .8s}
.shot.is-on{opacity:1;z-index:2;clip-path:inset(0 0 0 0);transform:none;
  transition:clip-path .8s var(--ease),transform 1s var(--ease),opacity 0s}
.shot.was-on{opacity:1;z-index:1;clip-path:inset(0 0 0 0);transform:scale(.97);filter:brightness(.6);
  transition:transform .8s var(--ease),filter .8s ease}

/* ================================================================= FORMATS */
.formats-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.formats-head p{color:var(--text-2);font-size:18px;max-width:26em;justify-self:end}
.fmt-table{margin:0;border-top:1px solid var(--border-strong)}
.fmt-row{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--border);
  align-items:center}
.fmt-row dt{font-size:21px;font-weight:500;letter-spacing:-.025em;transition:color .25s}
.fmt-row:hover dt{color:var(--accent-ink)}
.fmt-row dd{margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fmt-row dd span{font-size:14px;font-weight:500;padding:6px 12px;border-radius:999px;background:#fff;
  border:1px solid var(--border);transition:border-color .25s,background .25s,transform .35s var(--ease)}
.fmt-row:hover dd span{border-color:#F0CDB4}
.fmt-row dd span:hover{background:var(--accent-soft);transform:translateY(-2px)}
.fmt-row dd em{font-style:normal;color:var(--muted);font-size:14.5px;padding:0 4px}

/* ================================================================= PRIVACY */
.routes{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--border);
  border-radius:28px;box-shadow:var(--shadow);overflow:hidden}
.route{margin:0;padding:34px 36px 38px}
.route + .route{border-left:1px solid var(--border)}
.route svg{width:100%;height:auto;display:block;margin-bottom:22px}
.route svg text{font-family:var(--font);font-size:12.5px;fill:var(--muted)}
.route .dev rect,.route .dev path{fill:none;stroke:#9A928A;stroke-width:1.7;stroke-linecap:round}
.route .dev circle{fill:#9A928A}
.route .dev-on rect,.route .dev-on path{stroke:var(--accent-ink)}
.route .wire{fill:none;stroke:#CFC7BE;stroke-width:1.7;stroke-dasharray:3 7;stroke-linecap:round;
  animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-20}}
.route .packet{fill:#8A8279;transform-box:view-box;animation:travel 2.8s var(--ease-io) infinite}
@keyframes travel{0%{transform:translateX(0);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translateX(112px);opacity:0}}
.route .orbit{fill:none;stroke:#F2D3BE;stroke-width:1.5;stroke-dasharray:2 4}
.route .packet-on{fill:var(--accent);transform-box:view-box;transform-origin:180px 59px;animation:orbit 3.4s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.routes:not(.in-view) *{animation-play-state:paused !important}
.route figcaption{color:var(--text-2);font-size:15.5px}
.route figcaption b{display:block;font-size:21px;letter-spacing:-.025em;margin-bottom:6px}

/* ================================================================= PRICING */
.price-card{width:min(470px,100%);margin:0 auto;background:var(--surface);border:1px solid var(--border);
  border-radius:28px;padding:32px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.price-card::before{content:"";position:absolute;inset:-40% -30% auto auto;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,168,52,.22),rgba(255,168,52,0) 70%);pointer-events:none}
.price-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:18px;border-bottom:1px solid var(--border);position:relative}
.price-head span{font-weight:500;font-size:17px}
.price-head b{font-size:40px;letter-spacing:-.045em;color:var(--accent-ink);line-height:1}
.price-list{list-style:none;padding:0;margin:22px 0 26px;display:flex;flex-direction:column;gap:11px;position:relative}
.price-list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--text-2)}
.price-list .ic{color:var(--leaf);margin-top:.28em;font-size:16px}
.price-foot{margin-top:16px;font-size:13.5px;color:var(--muted);text-align:center}

/* ================================================================== FOOTER */
.footer{background:var(--surface);border-top:1px solid var(--border);padding:44px 0}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.footer p{color:var(--muted);font-size:14.5px}
.credit{font-size:13px}

/* ============================================================== RESPONSIVE */
@media (max-width:980px){
  section{padding:84px 0}
  .nav-links{display:none}
  .nav-inner > .btn{margin-left:auto}
  .peel-grid{grid-template-columns:1fr;gap:46px}
  .peel-result{bottom:-5%;font-size:14px;padding:9px 15px 9px 9px}
  .dot-ok{width:22px;height:22px;font-size:12px}
  .peel-art{order:-1;width:min(74vw,36vh);width:min(74vw,36svh)}
  .js .peel{height:380vh;height:380svh}
  .js .peel-sticky{align-items:flex-start;padding-top:74px}
  .js .peel-copy{min-height:300px}
  .js .cap{top:0;transform:translate3d(0,28px,0)}
  .js .cap.is-past{transform:translate3d(0,-28px,0)}
  .js .cap.is-on{transform:none}
  .cap p,.lede{font-size:17px}
  .lede{margin-top:16px}
  .hero-actions{margin:24px 0 14px}
  .scroll-cue{display:none !important}
  .desktop{height:600px}
  .wheel{width:280px;height:280px}
  .hud{left:14px;right:14px;min-width:0}
  .hint{left:auto;right:14px;top:6px;width:190px}
  .tools-grid{grid-template-columns:1fr;gap:44px}
  .formats-head{grid-template-columns:1fr;gap:18px}
  .formats-head p{justify-self:start}
  .fmt-row{grid-template-columns:1fr;gap:12px}
  .routes{grid-template-columns:1fr}
  .route + .route{border-left:0;border-top:1px solid var(--border)}
}
@media (max-width:520px){
  .wrap,.nav-inner{width:calc(100% - 32px)}
  .btn-lg{padding:15px 20px;font-size:15.5px}
  .hero-actions .btn{flex:1 1 auto}
  .hero-note{display:none}
  .lede{font-size:16px}
  .cap p{font-size:16px}
  .cap h2{font-size:32px;margin-bottom:12px}
  .route{padding:26px 22px 30px}
  .price-card{padding:24px}
}

/* ========================================================== REDUCED MOTION */
/* The device asked for less motion: the scroll story still plays, but captions
   only crossfade, nothing idles, and decorative loops stop. */
.motion-gentle{scroll-behavior:auto}
.motion-gentle .cap,
.motion-gentle .cap.is-past,
.motion-gentle .cap.is-on{filter:none !important;transform:translate3d(0,-50%,0) !important;
  transition:opacity .35s ease,visibility 0s linear .35s !important}
.motion-gentle .cap.is-on{transition:opacity .35s ease,visibility 0s !important}
.motion-gentle .fruit,
.motion-gentle .text-link .ic,
.motion-gentle .scroll-cue i::after,
.motion-gentle .route *{animation:none !important}
.motion-gentle .peel-tilt{transition:none}
.motion-gentle .shot{clip-path:none;transform:none;transition:opacity .25s ease}
.motion-gentle .shot.was-on{transform:none;filter:none}
.motion-gentle .tool-desc{transition:opacity .2s ease}
.motion-gentle .wheel,.motion-gentle .dialog,.motion-gentle .hud,.motion-gentle .tip{animation:none}
@media (max-width:980px){
  .motion-gentle .cap,.motion-gentle .cap.is-past,.motion-gentle .cap.is-on{transform:none !important}
}
@media (prefers-reduced-motion:reduce){
  html:not(.js) *{animation:none !important;transition:none !important}
}

.motion-toggle{position:absolute;right:24px;bottom:22px;z-index:5;font:inherit;font-size:13px;font-weight:500;
  color:var(--text-2);background:rgba(255,255,255,.8);border:1px solid var(--border-strong);border-radius:999px;
  padding:8px 14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.motion-toggle:hover{background:#fff;color:var(--text);border-color:#B9AFA5}
@media (max-width:980px){.motion-toggle{right:16px;bottom:16px}}