/* The per-feature pages. One stylesheet for all ten, and for /framemotion.
 *
 * Tokens are lifted from index.html so these pages belong to the site rather
 * than merely resembling it. AutoCut's structure (hero → three steps → the
 * rest of the toolbox) at malloy's weight: lots of air, one idea per band, no
 * ornament that is not carrying information.
 */
:root{
  --ink:#062A31; --muted:#5F7B82; --faint:#8CA5AB;
  --paper:#F4F9FB; --card:#FFFFFF; --line:#E1EDF1; --line2:#D2E2E8;
  --cyan:#00D4FF; --cyan-mid:#00C1DB; --teal:#00A2BA; --deep:#027989; --playhead:#4095F2;
  --g1:#00E0A6; --g2:#00997A; --gtint:#E9FBF5; --gedge:#BFEFDD;
  --brand:linear-gradient(145deg,#2ADCFB 0%,#00B8D9 42%,#028BA0 100%);
  --brand-hi:linear-gradient(145deg,#4CE4FF 0%,#00C6E6 42%,#039BB2 100%);
  --sh-xs:0 1px 2px rgba(6,42,49,.05);
  --sh-sm:0 1px 2px rgba(6,42,49,.05), 0 2px 6px rgba(6,42,49,.04);
  --sh-md:0 2px 4px rgba(6,42,49,.04), 0 8px 20px -6px rgba(6,42,49,.09);
  --sh-brand:0 1px 2px rgba(2,90,105,.28), 0 8px 18px -6px rgba(2,121,137,.42);
  --ease:cubic-bezier(.22,.9,.3,1);
}

/* ══ PAGE TRANSITIONS — cross-document, CSS only. See the note in index.html. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fpOut .18s var(--ease) both}
::view-transition-new(root){animation:fpIn .22s var(--ease) both}
@keyframes fpOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes fpIn{from{opacity:0;transform:translateY(8px)}}

/* ══ THE LOAD-IN (owner-asked: "each page should animate in smoothly piece by
   piece when you like boot it"). ⚠️ IT IS A PURE CSS STAGGER, NOT AN
   OBSERVER: `animation-delay` on a handful of bands costs nothing, cannot
   block paint, and — critically — nothing is left invisible if something goes
   wrong, because `both` holds the END state and there is no JavaScript that
   has to run for the content to appear. An IntersectionObserver reveal (which
   the home page uses for scrolling) would hide above-the-fold content until a
   script ran, which is the one failure mode worth designing out on a page
   whose whole job is to be read. */
.rise{animation:rise .5s var(--ease) both}
.fh .eyebrow{animation-delay:.02s} .fh h1{animation-delay:.07s}
.fh .promise{animation-delay:.12s} .fh .lede{animation-delay:.17s}
.fh .fh-cta{animation-delay:.22s}  .fh .fine{animation-delay:.27s}
.how .lab{animation-delay:.06s} .how h2{animation-delay:.1s}
.step:nth-child(1){animation-delay:.16s}
.step:nth-child(2){animation-delay:.24s}
.step:nth-child(3){animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:rgba(0,193,219,.22)}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}

/* ── nav ── */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:24px;height:62px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16.5px;letter-spacing:-.3px}
.logo svg{width:26px;height:26px;flex-shrink:0}
.logo span{font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;letter-spacing:.3px;
  color:var(--teal);margin-left:-2px}
.nav-l{display:flex;gap:22px;margin-left:auto;font-size:13.5px;font-weight:700;color:var(--muted)}
.nav-l a{transition:color .16s var(--ease)}
.nav-l a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:700;font-size:13.5px;
  letter-spacing:-.15px;padding:11px 19px;border-radius:11px;border:1px solid transparent;cursor:pointer;
  position:relative;isolation:isolate;transition:all .16s var(--ease);white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--sh-brand);border-color:rgba(2,90,105,.35);
  text-shadow:0 1px 1px rgba(2,60,70,.18)}
.btn-primary::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%)}
.btn-primary:hover{transform:translateY(-1.5px);background:var(--brand-hi)}
.btn-ghost{background:var(--card);border-color:var(--line2);color:var(--muted);box-shadow:var(--sh-xs)}
.btn-ghost:hover{border-color:#A9CFD9;color:var(--ink);box-shadow:var(--sh-sm);transform:translateY(-1.5px)}
@media (max-width:640px){ .nav-l{display:none} }

/* ── hero ── */
.fh{padding:74px 0 54px;text-align:center;background:
  radial-gradient(900px 340px at 50% -60px, #E9F8FC 0%, rgba(233,248,252,0) 70%), var(--card);
  border-bottom:1px solid var(--line)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--deep);background:var(--card);border:1px solid var(--line);
  padding:7px 15px;border-radius:20px;box-shadow:var(--sh-xs);margin-bottom:22px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--g1);box-shadow:0 0 8px rgba(0,224,166,.7)}
.fh h1{font-size:clamp(38px,6vw,60px);font-weight:800;letter-spacing:-2.4px;line-height:1.04}
.promise{font-size:clamp(17px,2.4vw,21px);font-weight:700;color:var(--deep);margin-top:14px;letter-spacing:-.4px}
.lede{max-width:600px;margin:16px auto 0;font-size:15px;font-weight:600;color:var(--muted);line-height:1.68}
.fh-cta{display:flex;gap:11px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.fine{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--faint);margin-top:16px}

/* ── section furniture ── */
.lab{font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--faint)}
.how{padding:64px 0}
.how h2{font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-1.4px;margin:8px 0 38px}

/* ── the three steps ── */
.steps{display:flex;gap:16px;align-items:stretch}
.step{flex:1;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;
  display:flex;flex-direction:column;box-shadow:var(--sh-sm);
  transition:box-shadow .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)}
.step:hover{box-shadow:var(--sh-md);border-color:#CBE2E9;transform:translateY(-3px)}
.step .n{font-family:ui-monospace,Menlo,monospace;font-size:10px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.step h3{font-size:15.5px;font-weight:800;letter-spacing:-.4px;margin-bottom:7px}
.step p{font-size:13px;font-weight:600;color:var(--muted);line-height:1.62}
@media (max-width:800px){ .steps{flex-direction:column} }

/* ── the diagrams ─────────────────────────────────────────────────────────
   The visual guide the owner asked to prefer over text. Every class here is
   set by build-feature-pages.js's diagram library; the colours live here so
   ten pages cannot drift apart. */
.viz{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:16px}
.viz svg{width:100%;height:auto;display:block}
.viz .tk{fill:#E4EEF2}
.viz .cl{fill:#B9DEE8}
.viz .cl.on{fill:var(--cyan-mid)}
.viz .cl.mm{fill:#9FD3E2}
.viz .cl.vf{fill:#A9B8F2}
.viz .bd{fill:#3A4046}
.viz .lay{fill:#C9D6F7;stroke:#8FA6E8;stroke-width:1}
.viz .gap{fill:#F3C9C0}
.viz .keep{fill:none;stroke:var(--g2);stroke-width:1.6;stroke-dasharray:3 2}
.viz .wd rect{fill:#CFDDE3}
.viz .cut{stroke:var(--playhead);stroke-width:1.8;stroke-linecap:round}
.viz .tie{stroke:#8FA6E8;stroke-width:1.4;stroke-dasharray:2 2}
.viz .mark{stroke:var(--deep);stroke-width:2;stroke-linecap:round}
.viz .wv{stroke:var(--teal);stroke-width:1.6;fill:none;stroke-linejoin:round}
.viz .wv2{stroke:var(--teal);stroke-width:1.4;fill:none;stroke-linejoin:round}
.viz .bed{stroke:#9AC7A8;stroke-width:2;fill:none}
.viz .line{stroke:var(--deep);stroke-width:1;stroke-dasharray:4 3}
.viz .lbl{font-family:ui-monospace,Menlo,monospace;font-size:7.5px;fill:var(--faint)}
.viz .fr{fill:none;stroke:var(--line2);stroke-width:2}
.viz .fr.on{stroke:var(--teal)}
.viz .zbox{fill:none;stroke:var(--cyan-mid);stroke-width:1.6;stroke-dasharray:4 3}
.viz .arr{stroke:var(--cyan-mid);stroke-width:1.4;fill:none;stroke-linecap:round}
.viz .sub{fill:#CFE6EE}
.viz .eye circle{fill:none;stroke:var(--deep);stroke-width:1.4}
.viz .eye .pu{fill:var(--deep);stroke:none}
.viz .card rect{fill:#E4EEF2}
.viz .card .win{fill:#CDEAF2;stroke:var(--teal);stroke-width:1.6}
.viz .tick{stroke:var(--g2);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.viz .folder path{fill:#E4EEF2;stroke:var(--line2);stroke-width:1}
.viz .flow{stroke:var(--faint);stroke-width:1.4;stroke-dasharray:3 3}
.viz .arrhd{fill:var(--faint)}
.viz .box{fill:var(--card);stroke:var(--line2);stroke-width:1.4}
.viz .ln rect{fill:#D8E5EA}
.viz .car{stroke:var(--teal);stroke-width:1.8}
.viz .ph{stroke:var(--playhead);stroke-width:2}
.viz .phh{fill:var(--playhead)}

/* ── the honest box ── */
.honest{padding:0 0 60px}
.hbox{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gedge);
  border-radius:14px;padding:22px 24px;box-shadow:var(--sh-xs)}
.hbox .lab{margin-bottom:8px}
.hbox p:last-child{font-size:14px;font-weight:600;color:var(--muted);line-height:1.68}

/* ── the rest of the toolbox ── */
.more{padding:52px 0 64px;background:var(--card);border-top:1px solid var(--line)}
.more .lab{margin-bottom:18px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.mcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  transition:all .18s var(--ease)}
.mcard:hover{background:var(--card);border-color:#A9CFD9;box-shadow:var(--sh-sm);transform:translateY(-2px)}
.mcard b{display:block;font-size:14px;font-weight:800;letter-spacing:-.3px}
.mcard span{display:block;font-size:12px;font-weight:600;color:var(--faint);line-height:1.5;margin:4px 0 8px}
.mcard em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--deep)}

/* ── footer: one line, same as the home page ── */
footer{padding:26px 0;background:var(--card);border-top:1px solid var(--line)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:11.5px;font-weight:600;color:var(--faint)}
.foot-links{display:flex;gap:16px}
.foot-links a{transition:color .16s var(--ease)}
.foot-links a:hover{color:var(--deep)}