/* ==========================================================================
   agentsaw, candidate v6 (v4 cut to six sections)
   A standalone stylesheet for /v2. Does not touch styles.css.

   Design language (fixed before any layout was written, per the guide):
   - Canvas: white, one very light blue-grey tint for alternating bands.
     Committed light page. No theme toggle, so there is one look to judge.
   - Ink: near-black headings, slate body. Electric Blue #1F75FE is the only
     saturated colour at rest (product design system). Signal Red appears
     once, on the one thing that is actually critical.
   - Type: Plus Jakarta Sans for headings, Inter for body, JetBrains Mono for
     small labels only. Same three families as the rest of the brand.
   - Shape: 14 to 22px radii, 1px hairline borders, no drop shadows except one
     soft lift on the hero diagram.
   - Air: wide margins, long line spacing, nothing edge to edge.
   ========================================================================== */

/* Three theme states, same contract as the product app: bare :root is light,
   the media query paints dark for anyone on system default, and the
   data-theme stamps let an explicit choice win in either direction. Every
   colour below is a token, so the hero visual flips with the page. */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --bg-2:#F4F7FC; --bg-3:#EDF2F9; --surface:#FFFFFF;
  --ink:#0B1220; --ink-2:#3E4C64; --ink-3:#6D7C94;
  --line:#E2E9F3; --line-2:#CFDAEA;
  --blue:#1F75FE; --blue-d:#155BCB; --blue-soft:#E9F1FE; --blue-line:#BFD6FF;
  --red:#C42121; --red-soft:#FDECEC; --warn:#B45309; --warn-soft:rgb(180 83 9 / .12);
  --green:#12784A; --green-soft:#E7F6EE;
  --folder:#E6EDF7; --folder-tab:#D3DEEE;
  --ink-caught:#254470; --ink-aim:#123A73;
  --film-bg:#0B1220; --shadow-lg:0 18px 44px rgb(11 18 32 / .10);
  /* the ask and the footer are dark panels in both themes, so they carry
     their own set rather than inverting with --ink */
  --panel-dark:#0B1220; --panel-dark-fg:#C7D3E6; --panel-dark-hi:#FFFFFF;
  --panel-dark-mut:#8FA1BC; --panel-dark-accent:#7FB0FF;
  --display:"Plus Jakarta Sans",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --r:14px; --r-l:22px; --pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#050914; --bg-2:#0A111F; --bg-3:#111A2C; --surface:#0A111F;
    --ink:#F8FAFC; --ink-2:#CBD5E1; --ink-3:#94A3B8;
    --line:rgb(255 255 255 / .10); --line-2:rgb(255 255 255 / .20);
    --blue:#4F92FF; --blue-d:#1F75FE; --blue-soft:rgb(31 117 254 / .16); --blue-line:rgb(31 117 254 / .42);
    --red:#FF8888; --red-soft:rgb(230 46 46 / .18); --warn:#FBBF24; --warn-soft:rgb(245 158 11 / .18);
    --green:#6EE7A8; --green-soft:rgb(34 197 94 / .16);
    --folder:rgb(255 255 255 / .09); --folder-tab:rgb(255 255 255 / .16);
    --ink-caught:#BFD6FF; --ink-aim:#CFE0FF;
    --film-bg:#05080F; --shadow-lg:0 18px 44px rgb(0 0 0 / .5);
    --panel-dark:#0A111F; --panel-dark-fg:#CBD5E1; --panel-dark-hi:#F8FAFC;
    --panel-dark-mut:#94A3B8; --panel-dark-accent:#7FB0FF;
  }
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#050914; --bg-2:#0A111F; --bg-3:#111A2C; --surface:#0A111F;
  --ink:#F8FAFC; --ink-2:#CBD5E1; --ink-3:#94A3B8;
  --line:rgb(255 255 255 / .10); --line-2:rgb(255 255 255 / .20);
  --blue:#4F92FF; --blue-d:#1F75FE; --blue-soft:rgb(31 117 254 / .16); --blue-line:rgb(31 117 254 / .42);
  --red:#FF8888; --red-soft:rgb(230 46 46 / .18); --warn:#FBBF24; --warn-soft:rgb(245 158 11 / .18);
  --green:#6EE7A8; --green-soft:rgb(34 197 94 / .16);
  --folder:rgb(255 255 255 / .09); --folder-tab:rgb(255 255 255 / .16);
  --ink-caught:#BFD6FF; --ink-aim:#CFE0FF;
  --film-bg:#05080F; --shadow-lg:0 18px 44px rgb(0 0 0 / .5);
  --panel-dark:#0A111F; --panel-dark-fg:#CBD5E1; --panel-dark-hi:#F8FAFC;
  --panel-dark-mut:#94A3B8; --panel-dark-accent:#7FB0FF;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink-2);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--blue-d);text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.wrap{padding:0 20px}}

/* ───── nav ───── */
/* the bar was hard-coded white, which stayed white in dark mode */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:70px}
/* Wordmark: the blade sits tight to the last letter and rides at cap height,
   the way a mark reads as part of the word rather than as a separate object. */
.wordmark{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.02em;display:flex;align-items:center;gap:0}
.wordmark .saw{color:var(--blue)}
.wordmark .mk{width:10px;height:10px;margin-left:0.5px;color:var(--blue);align-self:flex-start;margin-top:2px;flex:none}
footer .wordmark .mk{color:var(--blue)}
.nav-links{display:flex;gap:20px;margin-left:8px;white-space:nowrap}
.nav-links a{color:var(--ink-2);font-size:14.5px;font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav .spacer{flex:1}
.persona{display:flex;align-items:center;gap:2px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--pill);padding:3px}
.p-seg{font-family:var(--mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3);padding:5px 11px;border-radius:var(--pill);transition:color .12s var(--ease),background .12s var(--ease)}
.p-seg:hover{color:var(--ink-2)}
.p-seg.active{background:var(--blue-soft);color:var(--blue-d)}
.theme-toggle{width:34px;height:34px;display:grid;place-items:center;cursor:pointer;background:none;border:1px solid var(--line);border-radius:var(--pill);color:var(--ink-3);transition:color .12s var(--ease),border-color .12s var(--ease)}
.theme-toggle:hover{color:var(--ink);border-color:var(--line-2)}
.theme-toggle svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:720px){.persona{display:none}}
@media(max-width:1080px){.nav-links{display:none}}

/* ───── buttons ───── */
.btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;
  font-family:var(--body);font-weight:600;font-size:16.5px;letter-spacing:-.01em;
  padding:15px 28px;border-radius:var(--pill);transition:background .18s var(--ease),transform .18s var(--ease);
}
.btn:hover{background:var(--blue-d);transform:translateY(-1px)}
.btn.sm{font-size:15px;padding:10px 20px}
.btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lnk{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:16px;color:var(--blue-d)}
.lnk:hover{color:var(--blue)}
.lnk svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ───── shared section furniture ───── */
.sec{padding:96px 0}
.sec.tint{background:var(--bg-2);border-block:1px solid var(--line)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
h2{font-family:var(--display);font-weight:800;color:var(--ink);font-size:clamp(30px,3.6vw,44px);line-height:1.12;letter-spacing:-.028em;max-width:20ch}
h2 .q{color:var(--blue)}
.lead{font-size:19px;line-height:1.62;color:var(--ink-2);max-width:64ch;margin-top:20px}
.note{font-size:15.5px;line-height:1.62;color:var(--ink-3);max-width:70ch}
@media(max-width:720px){.sec{padding:68px 0}}

/* ───── hero ───── */
.hero{padding:84px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:44px}.hero{padding:56px 0 56px}}
h1{
  font-family:var(--display);font-weight:800;color:var(--ink);
  font-size:clamp(36px,4.6vw,58px);line-height:1.06;letter-spacing:-.034em;
}
h1 .q{color:var(--blue)}
.hero .lead{font-size:19.5px;margin-top:26px;max-width:56ch}
.hero-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:36px}
.micro{font-size:14.5px;color:var(--ink-3);margin-top:16px}
.assure{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--pill);
  padding:9px 16px;font-size:14.5px;color:var(--ink-2);font-weight:500;
}
.assure svg{width:15px;height:15px;stroke:var(--blue);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* hero diagram card */
.dia{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:26px 24px 20px;box-shadow:var(--shadow-lg)}
.dia-cap{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.dia-cap b{color:var(--ink-2);font-weight:600}

/* ───── proof band ───── */
.band{border-bottom:1px solid var(--line);background:var(--bg-2)}
.band .wrap{display:flex;align-items:center;gap:14px 34px;flex-wrap:wrap;padding-block:22px}
.band .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.band .tools{display:flex;gap:22px;flex-wrap:wrap}
.band .tool{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink)}
.band .tool i{width:6px;height:6px;border-radius:50%;background:var(--blue);display:inline-block}
.band .tool.dim{color:var(--ink-3);font-weight:500}
.band .tool.dim i{background:var(--line-2)}
.band .push{margin-left:auto}
@media(max-width:860px){.band .push{margin-left:0}}

/* ───── the story ───── */
.story{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
@media(max-width:820px){.story{grid-template-columns:1fr}}
.day{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:30px 28px}
.day .when{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--blue);margin-bottom:14px}
.day h3{font-family:var(--display);font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-.02em;margin-bottom:12px}
.day p{font-size:16px;line-height:1.62}
.day p + p{margin-top:12px}
.day .file{font-family:var(--mono);font-size:13.5px;background:var(--bg-3);border-radius:6px;padding:1px 7px;color:var(--ink)}
.after{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.after{grid-template-columns:1fr}}
.pane{border-radius:var(--r-l);padding:28px}
.pane h3{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;margin-bottom:11px}
.pane p{font-size:16px;line-height:1.6}
.pane.quiet{background:var(--bg-3);border:1px solid var(--line)}
.pane.quiet h3{color:var(--ink)}
.pane.caught{background:var(--blue-soft);border:1px solid var(--blue-line)}
.pane.caught h3{color:var(--blue-d)}
.pane.caught p{color:var(--ink-caught)}

/* ───── three-up ───── */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media(max-width:900px){.three{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:30px 26px}
.sec.tint .card{background:var(--surface)}
.card .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--blue);margin-bottom:14px}
.card h3{font-family:var(--display);font-weight:700;font-size:19.5px;color:var(--ink);letter-spacing:-.02em;margin-bottom:11px;line-height:1.25}
.card p{font-size:16px;line-height:1.6}

/* ───── the "nothing catches it" table ───── */
.rows{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--surface)}
.row{display:grid;grid-template-columns:250px 1fr 128px;gap:24px;padding:24px 26px;border-top:1px solid var(--line);align-items:center}
.row:first-child{border-top:none}
.row.head{background:var(--bg-2);padding-block:13px;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.row.ours{background:var(--blue-soft)}
.row .what{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.015em}
.row .who{font-size:14px;color:var(--ink-3);margin-top:3px}
.row .why{font-size:15.5px;line-height:1.58}
.row .why b{color:var(--ink);font-weight:600}
.verdict{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;font-family:var(--mono);letter-spacing:.06em;padding:6px 12px;border-radius:var(--pill)}
.verdict.clear{background:var(--green-soft);color:var(--green)}
.verdict.caught{background:var(--red-soft);color:var(--red)}
.verdict svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:820px){
  .row{grid-template-columns:1fr;gap:12px;padding:22px}
  .row.head{display:none}
}
.pull{margin-top:34px;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.3vw,26px);line-height:1.4;color:var(--ink);letter-spacing:-.02em;max-width:58ch;border-left:3px solid var(--blue);padding-left:26px}
.pull span{color:var(--blue)}

/* ───── watch it happen ───── */
.film{margin-top:40px;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:var(--film-bg);box-shadow:var(--shadow-lg)}
.film video{display:block;width:100%;height:auto}

/* ───── trust ───── */
.keep{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;margin-top:44px}
@media(max-width:820px){.keep{grid-template-columns:1fr}}
.keep .arrow{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:13px;color:var(--ink-3);font-family:var(--mono);letter-spacing:.04em;text-align:center;max-width:150px}
.keep .arrow svg{width:26px;height:26px;stroke:var(--line-2);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:820px){.keep .arrow{flex-direction:row;max-width:none}.keep .arrow svg{transform:rotate(90deg)}}
.chip{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13px;font-family:var(--mono);letter-spacing:.04em;padding:6px 12px;border-radius:var(--pill);background:var(--bg-3);color:var(--ink-2)}
.chip.on{background:var(--blue-soft);color:var(--blue-d)}

/* ───── faq ───── */
.faq{margin-top:40px;border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:18.5px;color:var(--ink);letter-spacing:-.018em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 0 24px;font-size:16.5px;line-height:1.68;max-width:74ch}
.faq .a b{color:var(--ink);font-weight:600}

/* ───── aim line ───── */
.aim{margin-top:38px;background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:var(--r-l);padding:30px 32px;font-family:var(--display);font-weight:600;font-size:clamp(19px,2.2vw,24px);line-height:1.42;color:var(--ink-aim);letter-spacing:-.02em}

/* ───── final ask ───── */
.ask{background:var(--panel-dark);color:var(--panel-dark-fg);padding:96px 0}
.ask h2{color:var(--panel-dark-hi);max-width:24ch}
.ask h2 .q{color:var(--panel-dark-accent)}
.ask .lead{color:var(--panel-dark-fg)}
.ask .kicker{color:var(--panel-dark-accent)}
.who-card{
  margin-top:44px;background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .12);
  border-radius:var(--r-l);padding:30px 32px;display:flex;gap:32px;justify-content:space-between;flex-wrap:wrap;align-items:center;
}
.who-name{font-family:var(--display);font-weight:700;font-size:17.5px;color:var(--panel-dark-hi)}
.who-role{font-size:14.5px;color:var(--panel-dark-mut)}
.who-role a{color:var(--panel-dark-accent)}
.who-card .right{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ask .lines{font-size:14.5px;color:var(--panel-dark-mut);display:flex;flex-direction:column;gap:4px}
.ask .lines a{color:var(--panel-dark-fg)}

/* ───── footer ───── */
footer{background:var(--panel-dark);border-top:1px solid rgb(255 255 255 / .09);padding:40px 0;color:var(--panel-dark-mut);font-size:14.5px}
footer .wrap{display:flex;gap:26px;justify-content:space-between;flex-wrap:wrap}
footer .wordmark{color:var(--panel-dark-hi)}
footer p{max-width:60ch;margin-top:12px;line-height:1.6}
footer a{color:var(--panel-dark-fg)}

/* ───── reveal ───── */
.rev{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}

/* ==========================================================================
   v6 additions
   Three changes on top of the v4 sheet: the wrapping fix for every heading,
   the quotable line under the hero headline, and the trust strip that
   replaced a whole section.
   ========================================================================== */

/* --- the stranded last word ---------------------------------------------
   Browsers wrap greedily: line one fills, line two fills, and whatever is
   left lands alone on line three. balance evens the lines out before they
   are drawn, which is what kills the orphan. Unsupported browsers wrap
   exactly as they do today, so there is nothing to fall back to. The ch
   measures keep the break in the same place across widths. */
h1,h2,h3{text-wrap:balance}
.lead,.note,p,figcaption,.dia-cap{text-wrap:pretty}
/* Two lines is the target, so the measure and the size are set together:
   a 15ch measure balanced a 39-character headline into three even lines,
   which fixed the orphan but not the shape. */
h1{font-size:clamp(32px,3.9vw,50px);max-width:21ch;line-height:1.08}
h2{font-size:clamp(26px,3.0vw,38px);max-width:21ch;line-height:1.16}
.hero-grid{grid-template-columns:1.12fr .88fr}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}

/* --- the line they repeat ------------------------------------------------
   Sits between the headline and the paragraph, set above body size so it
   reads as the takeaway rather than as the first sentence of the copy. */
.oneline{
  margin-top:22px;max-width:34ch;
  font-size:clamp(18px,2vw,21px);line-height:1.42;font-weight:500;
  color:var(--ink);letter-spacing:-.015em;text-wrap:balance;
}
/* A short rule instead of extra weight. Bolder type made this a second
   headline fighting the first; a rule marks it as the takeaway and lets it
   sit at 500 without competing. */
.oneline::before{content:"";display:block;width:34px;height:2px;background:var(--blue);margin-bottom:16px}
.hero .lead{margin-top:18px;font-size:18px}

/* --- trust strip (was a section) ---------------------------------------- */
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.chip-t{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);
  padding:11px 18px;font-size:15px;color:var(--ink-2);font-weight:500;
}
.sec.tint .chip-t{background:var(--surface)}
.chip-t svg{width:15px;height:15px;stroke:var(--blue);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* --- the film now lives inside the case --------------------------------- */
.case-film{margin-top:22px;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:var(--film-bg);box-shadow:var(--shadow-lg)}
.case-film video{display:block;width:100%;height:auto}

/* Credential in the band, on a light surface. It was set on the dark ask
   panel, where a purple mark on near-black was effectively invisible. */
.cred{display:inline-flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-3)}
.cred img{opacity:.9;height:26px;width:auto}
.cred b{color:var(--ink-2);font-weight:600}
@media(max-width:900px){.cred{margin-left:0}}

/* ==========================================================================
   HERO VISUAL
   Ambient, not a diagram. Folders sit along the bottom and most of the traffic
   moves between them, because that is where this actually goes wrong; a few
   symbols rise to the cloud. The watcher in the middle carries the mark, and
   throws a saw at anything moving while marked, on a folder hop just as
   readily as on the way out.

   Travellers ride CSS offset-path, so the arcs are real curves rather than
   faked with easing. Gated behind @supports: where offset-path is missing the
   travellers stay hidden and the composition still stands on its own.
   ========================================================================== */
.viz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:14px;box-shadow:var(--shadow-lg);--dur:14.2s}
.viz svg{display:block;width:100%;height:auto}
.viz .route{fill:none;stroke:var(--line-2);stroke-width:1.3;stroke-dasharray:3 9;opacity:.55}
.viz .folder{fill:var(--folder)}
.viz .folder-tab{fill:var(--folder-tab)}
.viz .cloud{fill:var(--blue-soft)}
.viz .scan{fill:var(--blue);opacity:0;transform-box:fill-box;transform-origin:center;animation:scan 4.6s ease-out infinite}
/* the watcher: flat and geometric, so it sits with the folders and the cloud
   rather than reading as clip art dropped on top of them */
.viz .fig{animation:float 5.4s ease-in-out infinite}
.viz .cape{fill:var(--blue);opacity:.28}
.viz .arm,.viz .torso,.viz .head{fill:var(--blue)}
.viz .visor{fill:var(--surface);opacity:.92}
/* the emblem is a symbol, not a working part: it does not turn */
.viz .emblem{color:var(--surface)}
.viz .file{fill:var(--surface);stroke:var(--line-2);stroke-width:1.4}
.viz .file-line{stroke:var(--line-2);stroke-width:1.4;stroke-linecap:round}
.viz .marked .file{stroke:var(--red);fill:var(--red-soft)}
.viz .marked .file-line{stroke:var(--red);opacity:.5}
.viz .dot{fill:var(--red)}
.viz .t,.viz .throw{opacity:0;offset-rotate:0deg}
.viz .throw{color:var(--blue)}
.viz .stop{fill:none;stroke:var(--red);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.viz .spin-fast{transform-box:fill-box;transform-origin:center;animation:spin .5s linear infinite}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes scan{0%{opacity:.16;transform:scale(1)}70%{opacity:0;transform:scale(3.4)}100%{opacity:0;transform:scale(3.4)}}
@keyframes ride{0%{offset-distance:0%}26%{offset-distance:100%}100%{offset-distance:100%}}
@keyframes tfade{0%,1%{opacity:0}6%{opacity:1}28%{opacity:1}33%{opacity:0}100%{opacity:0}}
@keyframes sride{0%{offset-distance:0%}6%{offset-distance:100%}100%{offset-distance:100%}}
@keyframes sfade{0%{opacity:0}2%{opacity:1}6%{opacity:1}11%{opacity:0}100%{opacity:0}}
@keyframes ring{0%,24%{opacity:0;transform:scale(.4)}27%{opacity:.9;transform:scale(1)}34%{opacity:0;transform:scale(1.7)}100%{opacity:0;transform:scale(1.7)}}

@supports (offset-path: path("M 0 0 L 1 1")){
  .viz .t{animation:ride var(--dur) linear infinite,tfade var(--dur) linear infinite;animation-delay:var(--d),var(--d)}
  .viz .throw{animation:sride var(--dur) linear infinite,sfade var(--dur) linear infinite;animation-delay:var(--d),var(--d)}
  .viz .stop{animation:ring var(--dur) linear infinite;animation-delay:var(--d)}

  @media (prefers-reduced-motion: reduce){
    .viz .t{animation:none;opacity:1;offset-distance:46%}
    .viz .throw,.viz .stop,.viz .scan{animation:none;opacity:0}
    .viz .fig{animation:none}
  }
}

/* footer link rows added when this became the homepage */
.foot-links{margin-top:14px;font-size:14px}
.foot-links a{color:var(--panel-dark-fg)}
.foot-ai{margin-top:10px;font-size:13.5px;opacity:.75}

/* the Coller mark is purple on transparent, so it needs a light plate to stay
   legible once the band goes dark */
.cred img{background:#fff;border-radius:6px;padding:3px 7px}