/* Pluto Super Intelligence, home page only.
   Dark system. research.html, privacy.html and terms.html keep styles.css
   and stay light, so their contrast work is untouched.

   Self-hosted faces. One accent colour. Hairline rules.
   Gradients: exactly two radial glows, hero and product shot. Nothing else.
   No JavaScript anywhere. The grain layer is a data: URI, which the existing
   Content-Security-Policy already permits via img-src 'self' data:. */

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("/fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2")}

:root{
  /* surfaces */
  --base:#0B0B0A;            /* near-black, never pure black */
  --band:#111110;            /* alternating section band */
  --raised:#141412;          /* cards, notices, frames */
  --raised-2:#1A1A17;        /* nested surfaces: frame bar, tag chips */

  /* hairlines. non-text, no AA requirement */
  --hair:rgba(255,255,255,.08);
  --hair-strong:rgba(255,255,255,.14);

  /* text. every pair measured, see the table in the deploy notes */
  --text:#F5F3EE;            /* 17.76 base / 16.63 raised / 15.73 raised-2 */
  --text-2:#A8A69E;          /*  8.08      /  7.57       /  7.15 */
  --text-3:#8A8880;          /*  5.55      /  5.19       /  4.91
                                 specified value #74726B measured 4.09 base and
                                 3.83 raised, which fails AA for small text, so
                                 it is lifted here at the same hue and saturation */
  --accent:#E4744A;          /*  6.47      /  6.06       /  5.73 */
  --accent-hi:#EE8A63;       /* hover fill only */
  --green:#7FC98D;           /*  9.98      /  9.35       /  8.84 */
  --on-accent:#0B0B0A;       /*  6.47 on accent fill, 7.92 on hover fill */

  /* aliases so inline styles already in index.html keep resolving */
  --mute:var(--text-3);
  --on-dark-mute:var(--text-3);

  --serif:"IBM Plex Serif",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --wrap:1140px;

  --shadow:0 2px 6px rgba(0,0,0,.36), 0 18px 48px rgba(0,0,0,.42);
  --shadow-lg:0 4px 12px rgba(0,0,0,.42), 0 40px 90px rgba(0,0,0,.55);

  --rhythm:clamp(96px,11vw,150px);
}

*{box-sizing:border-box}
/* overflow-x:clip, not hidden. hidden on html or body makes the element a
   scroll container, which silently kills position:sticky on the nav.
   clip contains the glows without that side effect. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--base);
  overflow-x:clip}
body{margin:0;background:var(--base);color:var(--text-2);font-family:var(--sans);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;text-align:left;overflow-x:clip}

/* fine grain across the base. data: URI, permitted by img-src 'self' data:.
   Sits behind all content, never intercepts pointer events. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
header.nav,main,footer{position:relative;z-index:1}

h1,h2,h3,h4{font-family:var(--serif);color:var(--text);font-weight:600;margin:0;
  overflow-wrap:break-word}
p{margin:0 0 17px}
a{color:var(--accent)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.narrow{max-width:780px}
.skip{position:absolute;left:-9999px;top:0;background:var(--raised);color:var(--text);
  padding:10px 16px;border:1px solid var(--accent);border-radius:8px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ---------- type scale ---------- */
h1{font-size:clamp(42px,7.8vw,76px);line-height:1.05;letter-spacing:-.028em}
h2{font-size:clamp(30px,4.4vw,48px);line-height:1.08;letter-spacing:-.02em}
h3{font-size:25px;line-height:1.2;letter-spacing:-.012em}
h4{font-size:21px;line-height:1.25;letter-spacing:-.008em}
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;margin:0 0 20px}
.lede{font-family:var(--serif);font-style:italic;color:var(--accent);
  font-size:clamp(19px,2vw,23px);line-height:1.5}

/* ---------- nav: thin, sticky, translucent ---------- */
header.nav{position:sticky;top:0;z-index:60;background:rgba(11,11,10,.72);
  backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;gap:14px;height:58px}
.mark{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
.mark img{width:26px;height:26px;display:block}
.brand{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--text);font-weight:500}
.nav-links{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav-links a{font-size:13.5px;color:var(--text-2);text-decoration:none;position:relative;
  transition:color .16s}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav-links a:not(.btn):hover{color:var(--text)}
.nav-links a:not(.btn):hover::after{transform:scaleX(1)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;
  text-decoration:none;padding:11px 20px;border-radius:10px;border:1px solid transparent;
  transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s}
.btn-solid{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}
.btn-solid:hover{background:var(--accent-hi);border-color:var(--accent-hi);
  transform:translateY(-1px);box-shadow:0 8px 24px rgba(228,116,74,.22)}
.btn-quiet{border-color:var(--hair-strong);color:var(--text-2);background:transparent}
.btn-quiet:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.btn-ghost{color:var(--accent);background:transparent;border-color:var(--hair-strong)}
.btn-ghost:hover{border-color:var(--accent)}

/* ---------- hero, glow 1 of 2 ---------- */
.hero{position:relative;padding:clamp(76px,9.5vw,128px) 0 clamp(44px,5vw,64px);overflow:hidden}
.hero::before{content:"";position:absolute;top:-380px;left:50%;width:min(1280px,150vw);height:900px;
  transform:translateX(-56%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side, rgba(228,116,74,.15), rgba(228,116,74,0) 100%)}
.hero>.wrap{position:relative;z-index:1}
.hero-logo{width:clamp(76px,9vw,108px);height:auto;display:block;margin:0 0 36px}
.hero h1{max-width:15ch}
.hero .lede{margin-top:28px;max-width:50ch}
.hero p.sub{margin-top:26px;max-width:60ch;font-size:17px;color:var(--text-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.hero p.hero-sub{font-size:18px;max-width:58ch}

/* ---------- four tile strip, directly under the hero ----------
   Same surface stack as .stats, so it introduces no new colour pair: a 1px
   --hair grid showing through, tiles on --raised, --raised-2 on hover.
   --text-3 on --raised is 5.19 and on --raised-2 is 4.91; --text-2 is 7.57
   and 7.15. All four are in the measured table at the top of this file. */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(44px,5.5vw,68px);background:var(--hair);
  border:1px solid var(--hair);border-radius:14px;overflow:hidden}
.tile{background:var(--raised);padding:24px 22px;transition:background .2s ease}
.tile:hover{background:var(--raised-2)}
.tile-k{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);font-weight:500;margin:0 0 11px}
.tile p:last-child{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-2)}

/* ---------- comparison table ----------
   The radius lives on the wrapper because border-collapse:collapse ignores
   border-radius on the table itself. The AEDEN column carries a 5% accent
   wash over --raised, which composites to #1E1915. Measured on that surface:
   --text 15.71, --text-2 7.15, --text-3 4.91, --accent 5.72. All clear 4.50. */
.cmp-wrap{margin-top:44px;border:1px solid var(--hair);border-radius:14px;
  overflow:hidden;background:var(--raised)}
.cmp{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px}
.cmp th,.cmp td{padding:15px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--hair);line-height:1.5}
.cmp thead th,.cmp thead td{background:var(--raised-2)}
.cmp thead td{width:24%}
.cmp thead th{font-family:var(--sans);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);font-weight:600}
.cmp thead th.ours{color:var(--accent)}
.cmp tbody th{color:var(--text);font-weight:600;font-family:var(--sans);font-size:14.5px}
.cmp tbody td{color:var(--text-2)}
.cmp tbody td.ours{color:var(--text);background:rgba(228,116,74,.05)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp-note{margin-top:20px;max-width:70ch;font-size:14.5px;color:var(--text-3)}

/* ---------- product shot, glow 2 of 2, overlapping the band edge ---------- */
.shot{position:relative;z-index:2;margin-bottom:calc(-1 * clamp(34px,5vw,72px))}
/* width capped at 100vw so the glow can never be the thing that creates a
   horizontal scrollbar, independent of the clip above */
.shot::before{content:"";position:absolute;top:-90px;left:50%;width:min(1000px,100vw);height:560px;
  transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side, rgba(228,116,74,.09), rgba(228,116,74,0) 100%)}
.shot .frame{box-shadow:var(--shadow-lg)}

/* ---------- sections, full-bleed hairline dividers ---------- */
section{padding:var(--rhythm) 0;border-bottom:1px solid var(--hair)}
section.on-dark{background:var(--band);border-bottom:1px solid var(--hair)}
#approach{padding-top:calc(var(--rhythm) + clamp(34px,5vw,72px))}
section:last-of-type{border-bottom:0}

.two{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(44px,6vw,80px);align-items:start}
.body-lg{font-size:17px}
.body-lg p:last-child{margin-bottom:0}
b,strong{color:var(--text);font-weight:600}

/* ---------- principles ---------- */
.principles{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:22px}
.principles li{display:grid;grid-template-columns:28px 1fr;gap:16px;font-size:16px}
.principles .n{font-family:var(--serif);color:var(--accent);font-size:15px;padding-top:2px}

/* ---------- stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;margin-top:52px;background:var(--hair);
  border:1px solid var(--hair);border-radius:14px;overflow:hidden}
.stat{background:var(--raised);padding:28px 24px;transition:background .2s ease}
.stat:hover{background:var(--raised-2)}
.stat b{display:block;font-family:var(--serif);font-weight:600;color:var(--text);
  font-size:clamp(34px,3.8vw,46px);line-height:1.05;letter-spacing:-.024em}
.stat span{display:block;margin-top:10px;font-size:12.5px;color:var(--text-3);line-height:1.45;
  font-family:var(--sans)}

/* ---------- browser frame ---------- */
.frame{border:1px solid var(--hair-strong);border-radius:14px;overflow:hidden;
  background:var(--raised);box-shadow:var(--shadow)}
.frame-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--raised-2);
  border-bottom:1px solid var(--hair)}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);flex:none}
.frame-url{margin-left:8px;font-size:11.5px;color:var(--text-3);background:var(--base);
  border:1px solid var(--hair);border-radius:99px;padding:3px 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(340px,60%)}
.frame img{display:block;width:100%;height:auto}

/* ---------- feature rows ---------- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center;
  margin-top:clamp(52px,6vw,76px)}
.frow.flip>.frow-media{order:-1}
.frow h3,.frow h4{margin-bottom:12px}
.frow p{font-size:15.5px}
.frow p:last-child{margin-bottom:0}

/* ---------- timeline ---------- */
.timeline{list-style:none;padding:0;margin:48px 0 0;border-top:1px solid var(--hair)}
.timeline li{display:grid;grid-template-columns:210px 1fr;gap:32px;padding:28px 0;
  border-bottom:1px solid var(--hair);transition:background .2s ease}
.timeline .when{font-family:var(--serif);color:var(--accent);font-size:15.5px;font-weight:600}
.timeline .what{font-size:16px}
.timeline .what b{color:var(--text);font-weight:600;display:block;margin-bottom:3px}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:48px}
.card{border:1px solid var(--hair);border-radius:16px;background:var(--raised);padding:32px;
  display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--hair-strong)}
.card.feature{background:var(--raised);border-color:var(--hair-strong)}
.card.wide{grid-column:1 / -1}
.card-top{display:flex;align-items:center;gap:11px;margin-bottom:16px;flex-wrap:wrap}
.tag{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;
  border-radius:99px;border:1px solid var(--hair-strong);color:var(--text-3);
  background:var(--raised-2);font-family:var(--sans)}
.tag.live{border-color:rgba(127,201,141,.4);color:var(--green)}
.tag.beta{border-color:rgba(228,116,74,.42);color:var(--accent)}
.tag.research{border-color:var(--hair-strong);color:var(--text-3)}
.card p{font-size:15.5px;margin:0 0 15px}
.card ul{margin:0 0 20px;padding-left:19px;font-size:15px}
.card ul li{margin:8px 0}
.card .actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;padding-top:6px}

/* ---------- disclosure blocks ---------- */
.notice{border:1px solid rgba(228,116,74,.34);background:var(--raised-2);border-radius:12px;
  padding:20px 22px;font-size:14.5px;margin:0 0 18px;color:var(--text-2)}
.notice b{color:var(--text);display:block;margin-bottom:6px;font-family:var(--sans);
  font-size:13px;letter-spacing:.02em;font-weight:600}
.quiet-note{background:var(--raised-2);border:1px solid var(--hair);border-radius:12px;
  padding:18px 20px;font-size:14.5px;margin:0 0 18px;color:var(--text-2)}
.quiet-note b{color:var(--text)}

/* ---------- research ---------- */
.paper{border:1px solid var(--hair);border-radius:16px;background:var(--raised);overflow:hidden;
  margin-top:48px;transition:border-color .22s ease,box-shadow .22s ease}
.paper:hover{border-color:var(--hair-strong);box-shadow:var(--shadow)}
.paper-head{padding:34px 36px;border-bottom:1px solid var(--hair);background:var(--raised-2)}
.paper-head h3{max-width:38ch;font-size:24px}
.paper-head .meta{font-size:12.5px;color:var(--text-3);margin:12px 0 0}
.paper-body{padding:32px 36px}
.paper-body p{font-size:15.5px}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin:28px 0}
.result{border-left:2px solid var(--accent);padding-left:15px}
.result b{display:block;font-family:var(--serif);font-size:24px;color:var(--text);letter-spacing:-.014em}
.result span{font-size:12.5px;color:var(--text-3)}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:48px}
.person{border:1px solid var(--hair);border-radius:16px;padding:32px;background:var(--raised);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.person:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--hair-strong)}
.person h3{font-size:21px}
.person .role{font-size:12.5px;color:var(--accent);letter-spacing:.05em;margin:4px 0 0}
.person p:last-child{font-size:15px;margin:14px 0 0}

.contact-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* body-copy links get a persistent rule that strengthens on hover */
.body-lg a{text-decoration:none;position:relative}
.body-lg a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;opacity:.42;transition:opacity .2s ease}
.body-lg a:hover::after{opacity:1}

/* ---------- footer ---------- */
footer{padding:72px 0 56px;border-top:1px solid var(--hair)}
.foot-grid{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.foot-col{min-width:150px}
.foot-col h2{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 14px;font-weight:500}
.foot-col a{display:block;font-size:14.5px;color:var(--text-2);text-decoration:none;margin:7px 0;
  position:relative;width:fit-content;transition:color .16s}
.foot-col a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.foot-col a:hover{color:var(--text)}
.foot-col a:hover::after{transform:scaleX(1)}
.foot-bottom{margin-top:52px;padding-top:26px;border-top:1px solid var(--hair);display:flex;
  flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--text-3)}

a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;
  border-radius:6px}

/* ---------- scroll-driven reveal, progressive enhancement ----------
   Default state is fully visible. The animation attaches only where
   animation-timeline is supported AND motion is not reduced, so content
   can never be stranded invisible. No JavaScript involved. */
@keyframes rise-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{animation:rise-in linear both;animation-timeline:view();
      animation-range:entry 4% cover 26%}
  }
}

/* ============================================================
   Page split additions. Everything below was added when the
   single landing page became a company page plus /aeden.html,
   /vio.html, /founder.html and /brand.html. No token values
   above were changed.
   ============================================================ */

/* ---------- nav: current page and product-page links ---------- */
/* .page marks a link to a whole page rather than an anchor on this one.
   .current is the page you are already on: the rule that the others only
   show on hover is drawn permanently, and the label sits at full text
   contrast. aria-current="page" carries the same information to AT. */
.nav-links a.current{color:var(--text)}
/* .68 rather than .55: this underline is a state indicator, so it is held to
   the 3.0 non-text minimum. At .55 it measured 2.66 against --base and failed.
   At .68 it measures 3.44. */
.nav-links a.current:not(.btn)::after{transform:scaleX(1);opacity:.68}

/* ---------- product mark ---------- */
/* The contour mark is never rendered below 96px. .hero-logo alone floors at
   76px, which is under that line, so the product-mark variant raises it. */
.hero-logo.product-mark{width:clamp(96px,13vw,168px);margin-bottom:32px}
/* Small-size use takes the single-ring derivative, not this one. */
/* The VIO lockup is portrait, the burst sitting over the wordmark, so it is
   sized by height rather than width. That keeps the top of the eyebrow level
   with where it sits under the square AEDEN mark instead of letting a tall
   lockup push the whole hero down. */
.hero-logo.vio-mark{width:auto;height:clamp(120px,16vw,192px);margin-bottom:32px}
.card-mark{width:40px;height:40px;display:block;flex:none}

/* ---------- figure caption under a framed screenshot ---------- */
.frame-cap{margin:12px 0 0;font-size:12.5px;color:var(--text-3);line-height:1.5}
figure.frame{margin:0}
figure.frame .frame-cap{padding:11px 14px;margin:0;background:var(--raised-2);
  border-top:1px solid var(--hair)}

/* ---------- corridor link lists ---------- */
.corridors{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.corridors li{border-bottom:1px solid var(--hair)}
.corridors li:first-child{border-top:1px solid var(--hair)}
.corridors a{display:block;padding:11px 2px;font-size:15px;color:var(--text-2);
  text-decoration:none;transition:color .16s ease,padding-left .18s ease}
.corridors a:hover{color:var(--accent);padding-left:8px}

/* ---------- solo founder block ---------- */
/* One person, so the two-column .people grid would leave a hole. */
.person.solo{max-width:none}
.person.solo .role{margin-bottom:2px}

/* ---------- brand page asset tiles ---------- */
.asset-tile{display:flex;align-items:center;justify-content:center;min-height:230px;
  padding:32px;border:1px solid var(--hair);border-radius:16px;background:var(--raised)}
.asset-tile img{display:block;height:auto;max-width:100%}

/* ---------- motion layer ----------
   Four effects, all scroll-driven CSS except the stat count-up, which is the
   one and only reason /motion.js exists. Every effect is wrapped in
   @supports (animation-timeline: view()) and
   @media (prefers-reduced-motion: no-preference), so the un-animated state is
   the finished state: Firefox and any reduced-motion user get the page fully
   laid out and fully readable, with nothing to wait for.
   Nothing loops. Nothing bounces. Nothing delays reading. */

/* 1. cards brighten their border slowly on hover, in addition to the lift.
      Brightness only, no hue: the terracotta accent stays for controls. */
.card,.person{transition:transform .22s ease,box-shadow .22s ease,border-color .55s ease}
/* .34 rather than a subtler .24: measured 3.11 against --raised, which clears
   the 3.0 non-text minimum. At .24 it measured 2.15 and did not. */
.card:hover,.person:hover{border-color:rgba(255,255,255,.34)}

/* 2. timeline: a line down the left edge that draws as the list scrolls in,
      and entries that rise in sequence. The sequence is not scripted, each
      entry simply animates against its own position in the viewport. */
.timeline{position:relative;padding-left:26px;border-top:0}
.timeline li:first-child{border-top:1px solid var(--hair)}
.timeline::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  /* tail at .62, not .25: measured 3.10 against --base and so clears the 3.0
     non-text minimum along the whole length. It still reads as a fade. */
  background:linear-gradient(var(--accent),rgba(228,116,74,.62));
  transform-origin:top;border-radius:2px}

@keyframes line-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* 3. parallax on product screenshots. Ten pixels of travel in total. The
      1.2% scale exists so the frame never shows an edge gap at the extremes. */
@keyframes shift-y{
  from{transform:translateY(5px) scale(1.012)}
  to{transform:translateY(-5px) scale(1.012)}
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .timeline::before{animation:line-draw linear both;animation-timeline:view();
      animation-range:entry 15% cover 55%}
    .timeline li{animation:rise-in linear both;animation-timeline:view();
      animation-range:entry 5% cover 20%}
    .parallax{animation:shift-y linear both;animation-timeline:view();
      animation-range:cover}
  }
}

/* 4. stat count-up. The markup carries the final, formatted value and nothing
      else does, so with JavaScript blocked, failing or never firing, the
      numbers are simply there. motion.js reads them off the page and plays
      them forward once. tabular-nums keeps the column from reflowing while
      the digits change. */
.stat b{font-variant-numeric:tabular-nums}

/* ---------- responsive ---------- */
/* The nav now carries two product pages that are primary destinations, so the
   old rule that hid every link below 960px is gone. Links drop in tiers,
   least important first, and AEDEN and VIO survive to 320px. Anchor links to
   sections of the front page go first, because the footer repeats them.
   Widths below are the measured point at which each tier stops fitting. */
@media(max-width:960px){
  .two,.cards,.people,.frow{grid-template-columns:1fr}
  .frow{gap:32px}
  .frow.flip>.frow-media{order:0}
  .card.wide{grid-column:auto}
}
/* tier 2, from 940px: drop the two front-page anchors, keep four page links */
@media(max-width:940px){
  .nav-links{gap:18px}
  /* any nav link whose target is an anchor on the front page */
  .nav-links a[href*="#"]:not(.btn){display:none}
}
/* tier 3, from 740px: keep only the two product pages and the CTA */
@media(max-width:740px){
  .nav-links{gap:14px}
  .nav-links a:not(.btn):not(.page){display:none}
}
/* the tile strip. The binding measurement is the longest label, "Why it
   matters now", which is 151px in Inter 500 at 10.5px with .16em tracking.
   Four across gives each tile (vw - 69) / 4 - 44 px of text column, so it
   drops below 151 at 849px. The tier is set at 880 to keep margin. */
@media(max-width:880px){
  .tiles{grid-template-columns:1fr 1fr}
}
/* two across still fits at 560, with 214px of text column against the 151 it
   needs, so this tier is not an overflow fix. It is set because the longest
   tile runs to seven lines at that width while the shortest runs to two, and
   two very unequal columns read worse than one stack. */
@media(max-width:560px){
  .tiles{grid-template-columns:1fr}
}
/* the comparison table stops being a table below 700px and becomes five
   stacked blocks. thead is removed from the flow rather than hidden with
   display:none on the row, so the column names survive as td::before
   labels and the row headers still read in order. */
@media(max-width:700px){
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cmp tbody tr{border-bottom:1px solid var(--hair)}
  .cmp tbody tr:last-child{border-bottom:0}
  .cmp tbody th{border-bottom:0;padding-bottom:4px}
  .cmp tbody td{border-bottom:0;padding-top:4px;padding-bottom:10px}
  .cmp tbody tr td:last-child{padding-bottom:18px}
  .cmp tbody td::before{content:attr(data-col);display:block;font-family:var(--sans);
    font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);
    margin-bottom:4px}
  .cmp tbody td.ours{background:none;border-left:2px solid rgba(228,116,74,.62);
    padding-left:14px;margin-left:18px}
}
@media(max-width:700px){
  .timeline li{grid-template-columns:1fr;gap:7px;padding:24px 0}
  .timeline{padding-left:20px}
  .wrap{padding:0 20px}
  .paper-head,.paper-body{padding:26px 22px}
  .card,.person{padding:26px}
  .foot-bottom{flex-direction:column;gap:9px}
  .frame-url{max-width:52%}
  .shot{margin-bottom:calc(-1 * clamp(20px,4vw,34px))}
  .asset-tile{min-height:180px;padding:24px}
}
@media(max-width:560px){
  .results,.stats{grid-template-columns:1fr}
}
/* measured in the site's own Inter face: mark + wordmark + two page links +
   the solid CTA needs 544px, so the wordmark now goes at 560px rather than
   the 460px the old five-link nav allowed. */
@media(max-width:560px){
  .brand{display:none}
}
/* measured: "Chandrasekara." set in IBM Plex Serif 600 at the 42px h1 floor is
   325px wide, which overflows a 320px viewport. Below 420px the floor drops. */
@media(max-width:420px){
  h1{font-size:34px}
}
/* below 400px the CTA drops to "Open" so it cannot push the nav wider than
   the viewport. The destination is unchanged and the link still reads. */
@media(max-width:400px){
  .cta-word{display:none}
  .btn{padding:11px 16px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .card:hover,.person:hover,.btn:hover{transform:none}
}