/* ================================================================
   REPIN ANALYTICS — LANDING COMPONENTS
   Reads only tokens.css. Square surfaces, hairline rules, one brand
   red for "a person decides" and one cyan for data. Motion is
   transform/opacity and is always stilled by reduced motion.
   ================================================================ */

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust:100%;
}
html,body{ margin:0; overflow-x:hidden; overflow-x:clip; }

body{
  background:var(--ink-0);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--fs-16);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ display:block; max-width:100%; height:auto; }
figure{ margin:0; }
a{ color:inherit; }
::selection{ background:rgba(232,57,43,.35); }

:focus-visible{
  outline:2px solid var(--text);
  outline-offset:3px;
  border-radius:var(--radius-ctl);
}

/* one language on screen at a time: the other is removed from layout */
html[data-lang="en"] [lang="it"],
html[data-lang="it"] [lang="en"]{ display:none !important; }

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

.skip-link{
  position:fixed; left:12px; top:-70px; z-index:300;
  padding:10px 16px;
  background:var(--text); color:var(--ink-0);
  font-weight:600; text-decoration:none;
  transition:top var(--t-fast) var(--ease-out);
}
.skip-link:focus{ top:12px; }

/* icons: one stroke style for every glyph on the page */
.ico{
  width:24px; height:24px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:square; stroke-linejoin:miter;
}

/* ---------------- type ---------------- */
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:var(--lh-snug); letter-spacing:var(--track-head); }
h3{ font-size:var(--fs-20); letter-spacing:-.02em; line-height:1.25; }
p{ margin:0 0 var(--s-4); }
em{ font-style:normal; color:var(--text-3); }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

/* ---------------- reveal (JS adds .js first; without JS everything shows) ---------------- */
.js .reveal{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity var(--t-slow) var(--ease-out) var(--d,0s), transform var(--t-slow) var(--ease-out) var(--d,0s);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ---------------- nav ---------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  background:rgba(5,7,10,.86);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:var(--border);
}
.nav__inner{
  max-width:var(--max); height:100%; margin:0 auto;
  padding:0 var(--gutter);
  display:flex; align-items:center; gap:var(--s-5);
}
.brand{
  display:flex; align-items:center; gap:var(--s-3);
  min-height:44px; margin-right:auto;
  color:var(--text); text-decoration:none;
}
.brand__wm{ height:32px; width:auto; }
.brand__tag{
  padding-left:var(--s-3); border-left:var(--border-strong);
  font-size:var(--fs-12); font-weight:600; line-height:1;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-2);
}
.nav__links{ display:flex; gap:var(--s-1); }
.nav__links a{
  display:flex; align-items:center; min-height:44px;
  padding:0 var(--s-3);
  font-size:var(--fs-14); color:var(--text-2); text-decoration:none;
  transition:color var(--t-fast) var(--ease-out);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a[aria-current="true"]{ color:var(--text); box-shadow:inset 0 -2px 0 var(--brand); }

.lang{
  display:inline-flex; padding:2px;
  border:var(--border-strong); border-radius:var(--radius-ctl);
}
.lang button{
  min-width:40px; min-height:34px; padding:0 var(--s-3);
  border:0; border-radius:1px;
  background:none; color:var(--text-2); cursor:pointer;
  font:500 var(--fs-12) var(--font-mono); letter-spacing:.08em;
}
.lang button:hover{ color:var(--text); }
.lang button[aria-pressed="true"]{ background:var(--text); color:var(--ink-0); }

/* ---------------- buttons: square, flat, no glow ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 var(--s-5);
  border:1px solid transparent; border-radius:var(--radius-ctl);
  font:600 var(--fs-14)/1 var(--font-sans); text-decoration:none; cursor:pointer;
  transition:background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.btn--primary{ background:var(--text); color:var(--ink-0); }
.btn--primary:hover{ background:#fff; }
.btn--ghost{ border-color:var(--line-strong); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--text); }
.nav__cta{ min-height:40px; padding:0 var(--s-4); }

/* ================================================== HERO — the sequence, centred
   Markup and classes are shared with landing.js (the sequence).            */
.seq{ position:relative; height:400vh; }
.seq__stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden; isolation:isolate;
}
.hero__slides{
  position:absolute; inset:0; z-index:-2;
  background:var(--ink-0);
  transform-origin:50% 50%;
  will-change:opacity, filter, transform;
}
.hero__photo{ position:absolute; inset:0; margin:0; }
.hero__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 70% 62% at 50% 46%, rgba(5,7,10,.4) 0%, rgba(5,7,10,.8) 68%, rgba(5,7,10,.96) 100%),
    linear-gradient(0deg, var(--ink-0) 0%, rgba(5,7,10,0) 40%);
  will-change:opacity;
}
.seq__canvas{
  position:absolute; left:0; top:0;
  width:100%; height:100%;
  z-index:1; pointer-events:none;
}
.seq__copy{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding-top:calc(var(--nav-h) + var(--s-7));
  padding-bottom:var(--s-7);
  will-change:opacity, transform;
}
.hero__title{
  max-width:17em; margin:0 auto;
  font-size:clamp(2.5rem, 5.6vw, 5.6rem);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:.98;
  text-wrap:balance;
}
.hero__title em{ display:inline; color:var(--brand); }
.hero__sub{
  max-width:34em; margin:var(--s-6) auto 0;
  font-size:clamp(1.05rem, 1.5vw, 1.25rem); line-height:1.5;
  color:var(--text-2);
}
.hero__cta{ display:flex; justify-content:center; margin-top:var(--s-7); }

.seq__ctrl{
  position:absolute; left:0; right:0;
  top:calc(var(--nav-h) + var(--s-4));
  z-index:3;
  padding:0 var(--gutter);
}
.seq__phases{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:6px clamp(12px, 2.4vw, 32px);
  margin:0; padding:0; list-style:none;
  font:500 var(--fs-12)/1 var(--font-mono);
  letter-spacing:.12em; text-transform:uppercase;
}
.seq__phase{
  display:inline-flex; align-items:center;
  margin:-6px -4px; padding:6px 4px;
  background:none; border:0; border-radius:0;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:var(--text-3); cursor:pointer;
  transition:color var(--t-base) var(--ease-out);
}
.seq__phase::before{
  content:""; display:inline-block;
  width:6px; height:6px; margin-right:var(--s-2);
  background:currentColor; opacity:.5; vertical-align:middle;
}
.seq__phase:hover, .seq__phase.is-done{ color:var(--text-2); }
.seq__phase.is-on{ color:var(--text); }
.seq__phase.is-on::before{ background:var(--brand); opacity:1; }
.seq__phase:focus-visible{ outline:1px solid var(--data); outline-offset:3px; }
.seq__track{ position:relative; height:2px; margin-top:var(--s-3); background:var(--line); overflow:hidden; }
.seq__track i{ position:absolute; inset:0; background:var(--text); transform:scaleX(0); transform-origin:left center; }

/* the agent: the question, its tool calls, the answer */
.chat{
  position:absolute; right:4%; bottom:8%; z-index:3;
  width:min(380px, 36vw);
  padding:var(--s-4);
  background:rgba(10,14,20,.94);
  border:var(--border-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  font-size:var(--fs-14); line-height:1.45;
  text-align:left;
}
.js .chat{ opacity:0; }
.chat__head{
  display:flex; align-items:center; gap:var(--s-2);
  margin-bottom:var(--s-3); padding-bottom:var(--s-3);
  border-bottom:var(--border);
  font:500 var(--fs-12)/1.2 var(--font-mono);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3);
}
.chat__dot{ width:7px; height:7px; background:var(--ok); }
.chat__state{ margin-left:auto; color:var(--text-2); }
.chat__steps{
  list-style:none; margin:0 0 var(--s-2); padding:0;
  display:grid; gap:var(--s-2);
}
.js .tool{ opacity:0; }
.tool{
  display:grid; grid-template-columns:10px minmax(0, 1fr); gap:var(--s-3);
  padding:var(--s-3);
  background:var(--ink-2); border:var(--border);
}
.tool__state{
  width:8px; height:8px; margin-top:6px;
  border:1px solid var(--text-3); background:transparent;
}
.tool.is-running .tool__state{
  background:var(--data); border-color:var(--data);
  animation:toolPulse 1s var(--ease-out) infinite;
}
.tool.is-done .tool__state{ background:var(--ok); border-color:var(--ok); }
@keyframes toolPulse{
  0%, 100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.5); opacity:.4; }
}
.tool__body{ display:block; min-width:0; }
.tool__name{ font:500 var(--fs-12)/1.3 var(--font-mono); color:var(--data); }
.tool__text{ display:block; margin-top:2px; color:var(--text-2); font-size:var(--fs-14); line-height:1.4; }
.tool__result{
  display:block; margin-top:var(--s-1);
  font:500 var(--fs-12)/1.4 var(--font-mono); color:var(--ok);
  transition:opacity var(--t-base) var(--ease-out);
}
.chat__msg{ margin:0 0 var(--s-2); padding:var(--s-3); min-height:3em; }
.chat__msg--user{ margin-left:16%; background:var(--text); color:var(--ink-0); }
.chat__msg--bot{ margin-right:8%; background:var(--ink-2); border:var(--border); color:var(--text-2); }
.typed.is-typing::after{
  content:"▍"; margin-left:2px;
  color:var(--brand);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* the result, printed */
.paper{
  position:absolute; right:4%; top:14%; z-index:3;
  width:min(380px, 36vw);
  padding:var(--s-5);
  background:rgba(5,7,10,.94);
  border:var(--border-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  font-family:var(--font-mono);
}
.js .paper{ opacity:0; }
.paper__head{
  margin:0 0 var(--s-4);
  font:600 var(--fs-12)/1 var(--font-mono);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3);
}
.paper__line{ margin:0 0 var(--s-3); font-size:var(--fs-14); line-height:1.5; color:var(--text); }
.paper__line--src{
  margin-top:var(--s-4); padding-top:var(--s-3);
  border-top:var(--border);
  font-size:var(--fs-12); color:var(--text-3);
}
.paper__print{
  margin-top:var(--s-4); min-height:40px; padding:0 var(--s-4);
  border:var(--border-strong); border-radius:var(--radius-ctl);
  background:none; color:var(--text); cursor:pointer;
  font:600 var(--fs-12) var(--font-mono); letter-spacing:.06em;
  transition:border-color var(--t-fast) var(--ease-out);
}
.paper__print:hover{ border-color:var(--text); }

/* ================================================== TICKER — sources, one line */
.ticker{
  overflow:hidden;
  border-block:var(--border);
  background:var(--ink-1);
}
.ticker__track{
  display:flex; width:max-content;
  animation:ticker 48s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__list{ display:flex; list-style:none; margin:0; padding:0; }
.ticker__list li{
  padding:var(--s-4) var(--s-6);
  font:500 var(--fs-12)/1 var(--font-mono);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-2); white-space:nowrap;
  border-right:var(--border);
}
@keyframes ticker{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}

/* ================================================== SECTIONS */
.sec{
  position:relative;
  padding:clamp(96px, 14vh, 160px) 0;
  border-top:var(--border);
}
.sec--frontier{ padding:clamp(128px, 20vh, 200px) 0; }
.sec-index{
  display:flex; align-items:center; gap:var(--s-3);
  margin:0 0 var(--s-6);
  font:500 var(--fs-12)/1 var(--font-mono);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3);
}
.sec-index__n{ color:var(--text); }
.sec-index::after{ content:""; flex:1; height:1px; background:var(--line); }

.h-display{
  font-size:clamp(2.6rem, 5.6vw, 5.4rem);
  font-weight:700;
  letter-spacing:-.045em; line-height:.98;
  max-width:15em;
}
.lede{
  max-width:40em; margin:var(--s-5) 0 0;
  font-size:clamp(1.05rem, 1.5vw, 1.2rem); line-height:1.55;
  color:var(--text-2);
}

/* ---------------- 01 FRONTIER — the statement and the proof ---------------- */
.statement{
  max-width:21em; margin:0;
  font-size:clamp(2.3rem, 4.9vw, 4.8rem);
  font-weight:650;
  letter-spacing:-.042em; line-height:1.03;
}
.statement .w{ color:var(--text-3); transition:color var(--t-base) var(--ease-out); }
.statement .w.is-lit{ color:var(--text); }
.statement__note{
  max-width:38em; margin:var(--s-6) 0 0;
  font-size:var(--fs-16); color:var(--text-2);
}
.hero__stats{
  display:flex; flex-wrap:wrap; gap:clamp(24px, 4vw, 56px);
  max-width:var(--max);
  margin:var(--s-7) 0 0; padding:var(--s-5) 0 0;
  border-top:var(--border-strong);
}
.hero__stats > div{ min-width:0; }
.hero__stats dt{ margin:0; }
.hero__stats .num{
  display:block;
  font-size:clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight:600; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
.hero__stats dd{
  margin:var(--s-2) 0 0;
  font:500 var(--fs-12)/1.4 var(--font-mono);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3);
}
.stats__src{
  margin:var(--s-4) 0 0;
  font:400 var(--fs-12)/1.5 var(--font-mono);
  color:var(--text-3);
}

/* ---------------- 02 THE GAP — four examples that unfold with the scroll ---------------- */
.gscenes{ margin-top:var(--s-7); }
.gscenes__cap{ max-width:44em; margin:var(--s-4) 0 0; color:var(--text-2); }

/* a scene is a tall block; on a desktop its stage is pinned while the reader scrolls through it */
.gscene{ position:relative; height:180svh; }
.gscene__pin{
  position:sticky; top:calc(var(--nav-h) + var(--s-4));
  min-height:calc(100svh - var(--nav-h) - var(--s-7));
  display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  gap:clamp(32px, 5vw, 80px); align-items:center;
}
.gscene__stage{
  position:relative; width:100%; aspect-ratio:4 / 3;
  overflow:hidden; border:var(--border-strong); background:var(--ink-0);
}
.gscene__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; --k:1; }
@media (max-width: 960px){
  .gscene__svg{ --k:1.7; }
  .gscene__svg .geo-place, .gscene__svg .geo-tag, .gscene__svg .geo-district{ display:none; }
}

/* the base map is real: coast, streets, rail and district outlines from OpenStreetMap */
.gscene__svg .geo-coast{ fill:none; stroke:rgba(242,245,248,.34); stroke-width:calc(.35 * var(--k)); }
.gscene__svg .geo-minor{ fill:none; stroke:rgba(242,245,248,.12); stroke-width:calc(.14 * var(--k)); }
.gscene__svg .geo-major{ fill:none; stroke:rgba(242,245,248,.3); stroke-width:calc(.3 * var(--k)); }
.gscene__svg .geo-rail{ fill:none; stroke:rgba(242,245,248,.5); stroke-width:calc(.3 * var(--k)); }
.gscene__svg .geo-region{ fill:none; stroke:rgba(242,245,248,.55); stroke-width:calc(.3 * var(--k)); }
.gscene__svg .geo-place{ font:500 2.6px var(--font-sans); fill:rgba(242,245,248,.72); paint-order:stroke; stroke:#05070A; stroke-width:.7px; }
.gscene__svg .geo-tag{ font:600 2.9px var(--font-sans); fill:var(--text); paint-order:stroke; stroke:#05070A; stroke-width:.8px; }
.gscene__svg .geo-district{ font:600 3.2px var(--font-sans); fill:var(--text); paint-order:stroke; stroke:#05070A; stroke-width:.9px; }

/* the data layers: cyan is found in the data; a dashed white ring is missing from it */
.gscene__svg .geo-stop{ fill:var(--data); }
.gscene__svg .geo-mall{ fill:none; stroke:var(--text); stroke-width:calc(.35 * var(--k)); }
.gscene__svg .geo-cross{ fill:var(--text); opacity:.6; }
.gscene__svg .geo-route{ fill:none; stroke:var(--data); stroke-width:calc(.22 * var(--k)); opacity:.45; }
.gscene__svg .geo-hit{ fill:none; stroke:var(--data); stroke-width:calc(.85 * var(--k)); stroke-linecap:round; stroke-linejoin:round; }
.gscene__svg .geo-pick{ fill:rgba(92,200,242,.16); stroke:var(--data); stroke-width:calc(.9 * var(--k)); }
.gscene__svg .geo-plus{ fill:none; stroke:var(--data); stroke-width:calc(1 * var(--k)); }
.gscene__svg .geo-gapring{ fill:none; stroke:var(--text); stroke-width:calc(.35 * var(--k)); stroke-dasharray:1.1 1.1; }

.gscene__tag, .gscene__key{
  position:absolute; z-index:2;
  padding:6px 8px;
  background:rgba(5,7,10,.86); border:var(--border);
  font:500 11px/1.2 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-2);
}
.gscene__tag{ left:var(--s-4); top:var(--s-4); }
.gscene__key{ left:var(--s-4); bottom:var(--s-4); display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); max-width:calc(100% - 2 * var(--s-4)); }
.gkey{ display:inline-flex; align-items:center; gap:6px; }
.gkey__ico{ width:12px; height:12px; flex:none; overflow:visible; }
.gkey__ico .k-box{ fill:rgba(92,200,242,.2); stroke:var(--data); stroke-width:1.2; }
.gkey__ico .k-dot{ fill:var(--data); }
.gkey__ico .k-w{ fill:var(--text); }
.gkey__ico .k-sq{ fill:none; stroke:var(--text); stroke-width:1.2; }
.gkey__ico .k-line{ stroke:var(--data); stroke-width:2.2; stroke-linecap:round; }
.gkey__ico .k-thin{ stroke:var(--data); stroke-width:1; stroke-linecap:round; }
.gkey__ico .k-plus{ fill:none; stroke:var(--data); stroke-width:1.6; }
.gkey__ico .k-ring{ fill:none; stroke:var(--text); stroke-width:1.1; stroke-dasharray:2 1.6; }
@media (max-width: 960px){
  .gscene__key{ left:var(--s-2); bottom:var(--s-2); max-width:calc(100% - 2 * var(--s-2)); padding:4px 6px; font-size:9px; gap:4px 10px; }
}
@media (min-width: 961px) and (max-height: 760px){
  .gscene__pin{ top:calc(var(--nav-h) + var(--s-2)); }
  .gscene__idx{ margin-bottom:var(--s-3); }
  .gscene__q{ font-size:clamp(22px, 2.2vw, 28px); margin-bottom:var(--s-2); }
  .gscene__d{ font-size:15px; margin-bottom:var(--s-3); }
  .gscene__src{ margin-bottom:var(--s-3); }
  .gscene__src li{ padding:4px 7px; }
  .gscene__note{ margin-bottom:var(--s-2); padding:var(--s-2) var(--s-3); }
  .gscene__k{ margin-bottom:var(--s-1); }
  .gscene__note p{ font-size:14px; line-height:1.4; }
}


/* each layer waits for its level: 2 adds the sources, 3 adds the answer and the gap */
.js .gscene .gs-2, .js .gscene .gs-3{ opacity:0; transition:opacity var(--t-slow) var(--ease-out); }
.js .gscene[data-level="2"] .gs-2,
.js .gscene[data-level="3"] .gs-2,
.js .gscene[data-level="3"] .gs-3{ opacity:1; }

.gscene__text{ min-width:0; }
.gscene__idx{
  margin:0 0 var(--s-4);
  font:500 var(--fs-12)/1 var(--font-mono);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-3);
}
.gscene__n{ margin-right:var(--s-3); color:var(--text); }
.gscene__q{
  margin:0 0 var(--s-3);
  font-size:clamp(26px, 2.8vw, 40px); font-weight:650;
  letter-spacing:-.03em; line-height:1.08;
}
.gscene__d{ margin:0 0 var(--s-5); max-width:30em; color:var(--text-2); }
.gscene__src{
  display:flex; flex-wrap:wrap; gap:var(--s-2);
  list-style:none; margin:0 0 var(--s-5); padding:0;
}
.gscene__src li{
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:6px 9px; background:var(--ink-1); border:var(--border);
  font:500 11px/1 var(--font-mono); color:var(--text-2);
}
.gscene__src .ico{ width:14px; height:14px; color:var(--data); }
.gscene__note{ margin:0 0 var(--s-3); padding:var(--s-3) var(--s-4); }
.gscene__ans{ border-left:2px solid var(--data); background:rgba(92,200,242,.06); }
.gscene__gap{ border:1px dashed var(--text-2); }
.gscene__k{
  display:block; margin-bottom:var(--s-2);
  font:500 10px/1 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--text-3);
}
.gscene__note p{ margin:0; font-size:var(--fs-16); line-height:1.45; color:var(--text); }

/* phones and tablets stack each scene; reduced motion shows every layer at once */
@media (max-width: 960px), (prefers-reduced-motion: reduce){
  .gscene{ height:auto; }
  .gscene + .gscene{ margin-top:var(--s-9); }
  .gscene__pin{ position:static; height:auto; display:block; }
  .gscene__stage{ margin-bottom:var(--s-6); }
}
@media (prefers-reduced-motion: reduce){
  .js .gscene .gs-2, .js .gscene .gs-3{ opacity:1; }
}

/* ---------------- 03 SECTORS — accordion of photographs ---------------- */
.acc{
  display:flex;
  height:clamp(460px, 62vh, 600px);
  margin-top:var(--s-7);
  border:var(--border-strong);
  background:var(--ink-1);
}
.acc__item{
  position:relative;
  flex:0 0 72px;
  overflow:hidden;
  border-left:var(--border);
  transition:flex-basis var(--t-scene) var(--ease-out);
}
.acc__item:first-child{ border-left:0; }
.acc__item.is-open{ flex-basis:calc(100% - 6 * 72px); }

.acc__btn{
  position:absolute; inset:0; z-index:4;
  padding:0; border:0; background:none; cursor:pointer;
  color:inherit;
}
.acc__item.is-open .acc__btn{ pointer-events:none; }
.acc__btn:focus-visible{ outline-offset:-4px; }

.acc__n{
  position:absolute; z-index:3;
  left:var(--s-4); top:var(--s-4);
  font:500 var(--fs-12)/1 var(--font-mono);
  letter-spacing:.1em; color:var(--text-3);
  transition:color var(--t-base) var(--ease-out);
}
.acc__item.is-open .acc__n{ color:var(--text); }

.acc__name{
  position:absolute; z-index:3;
  left:var(--s-4); bottom:var(--s-6);
  font-size:var(--fs-20); font-weight:650; letter-spacing:-.02em;
  white-space:nowrap; color:var(--text);
  writing-mode:vertical-rl; transform:rotate(180deg);
}
.acc__item.is-open .acc__name{
  top:var(--s-7); bottom:auto; left:var(--s-4);
  font-size:var(--fs-32); letter-spacing:-.03em;
  writing-mode:horizontal-tb; transform:none;
}

.acc__panel{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
  transition:opacity var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}
.acc__item.is-open .acc__panel{
  opacity:1; visibility:visible;
  transition:opacity var(--t-slow) var(--ease-out) var(--t-base), visibility 0s;
}
.acc__fig{ position:absolute; inset:0; margin:0; }
.acc__fig img{ width:100%; height:100%; object-fit:cover; }
.acc__fig::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(5,7,10,.94) 0%, rgba(5,7,10,.25) 52%, rgba(5,7,10,.55) 100%);
}
.acc__fig figcaption{
  position:absolute; z-index:2; right:var(--s-4); top:var(--s-4);
  padding:6px 8px;
  background:rgba(5,7,10,.7);
  font:500 var(--fs-12)/1 var(--font-mono); letter-spacing:.06em;
  color:var(--text-2);
}
.acc__text{
  position:absolute; z-index:3;
  left:var(--s-4); right:var(--s-4); bottom:var(--s-5);
  max-width:46ch; margin:0;
  font-size:var(--fs-18); line-height:1.45; color:var(--text);
}

/* ---------------- 04 PRODUCT — slides that advance by time ---------------- */
.slides{
  margin-top:var(--s-7);
  border:var(--border-strong);
  background:var(--ink-1);
}
.slides__stage{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:var(--ink-0);
}
.slides__item{
  position:absolute; inset:0; margin:0;
  opacity:0; transition:opacity var(--t-slow) var(--ease-out);
  pointer-events:none;
}
.slides__item.is-on{ opacity:1; pointer-events:auto; }
.slides__item img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  padding:clamp(8px, 2vw, 20px);
}
.slides__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--s-7) var(--s-6) var(--s-4);
  background:linear-gradient(0deg, rgba(5,7,10,.94), rgba(5,7,10,0));
  color:var(--text);
  font-size:clamp(.92rem, 1.4vw, 1.05rem); font-weight:500;
}
.slides__bar{ position:absolute; left:0; right:0; bottom:0; z-index:2; height:2px; background:var(--line); overflow:hidden; }
.slides__bar i{ position:absolute; inset:0; background:var(--text); transform:scaleX(0); transform-origin:left center; }
.slides.is-timed .slides__bar i{ animation:sfill 6s linear both; }
.slides:hover .slides__bar i{ animation-play-state:paused; }
@keyframes sfill{ to{ transform:scaleX(1); } }

.slides__controls{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  border-top:var(--border);
}
.slides__btn{
  width:44px; height:44px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:var(--border-strong); border-radius:var(--radius-ctl);
  background:none; color:var(--text); cursor:pointer;
  font-size:var(--fs-16);
  transition:border-color var(--t-fast) var(--ease-out);
}
.slides__btn:hover{ border-color:var(--text); }
.slides__count{
  min-width:4.5em;
  font:500 var(--fs-12)/1 var(--font-mono); color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.slides__dots{ display:flex; gap:2px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.slides__dot{
  width:28px; height:40px; padding:0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.slides__dot::before{
  content:""; width:8px; height:2px;
  background:var(--line-strong);
  transition:background var(--t-base) var(--ease-out), width var(--t-base) var(--ease-out);
}
.slides__dot[aria-current="true"]::before{ background:var(--text); width:18px; }

/* ---------------- 05 ANYWHERE — web, laptop, mobile ---------------- */
.devices{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .5fr);
  gap:clamp(20px, 3vw, 40px);
  align-items:end;
  margin-top:var(--s-8);
}
.device{ margin:0; }
.device__browser{ border:var(--border-strong); background:var(--ink-1); }
.device__bar{
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 var(--s-3);
  border-bottom:var(--border); background:var(--ink-2);
}
.device__bar i{ width:8px; height:8px; border:1px solid var(--line-strong); }
.device__bar b{ margin-left:var(--s-3); font:500 11px/1 var(--font-mono); color:var(--text-3); }
.device__browser img{ width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:top left; }
.device__screen{ border:var(--border-strong); background:var(--ink-0); padding:10px; }
.device__screen img{ width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:top left; }
.device__base{
  height:12px; margin:0 -5%;
  background:linear-gradient(#1b2430, #0f151d);
  border:var(--border); border-top:0;
}
.device__phone{
  width:100%; max-width:240px; margin:0 auto;
  padding:6px;
  border:1px solid var(--line-strong);
  border-radius:30px;
  background:var(--ink-1);
}
.device__phone img{ width:100%; aspect-ratio:390 / 844; object-fit:cover; object-position:top; border-radius:24px; }
.device figcaption{ margin-top:var(--s-5); }
.device__k{
  font:500 var(--fs-12)/1 var(--font-mono);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--text-3);
}
.device h3{
  margin:var(--s-2) 0;
  font-size:var(--fs-32); font-weight:650; letter-spacing:-.03em; line-height:1.1;
}
.device p{ margin:0; max-width:28em; color:var(--text-2); }

/* ---------------- 06 FLOW — icons, logos, arrows that carry the data ---------------- */
.flow{ margin-top:var(--s-7); }
.flow__stage{
  padding:var(--s-6);
  border:var(--border-strong);
  background:var(--ink-1);
}
.flow__head{ display:flex; align-items:center; gap:var(--s-4); margin:0 0 var(--s-5); }
.flow__n{ font:500 var(--fs-12)/1 var(--font-mono); letter-spacing:var(--track-label); color:var(--text-3); }
.flow__head h3{ margin:0; font-size:var(--fs-24); font-weight:650; letter-spacing:-.025em; }
.flow__wm{ margin-left:auto; height:20px; width:auto; }
.flow__grid{ display:grid; gap:var(--s-3); }
.flow__grid--4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.flow__grid--core{
  grid-template-columns:minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items:stretch;
}
.flow__card{
  display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-4);
  background:var(--ink-2); border:var(--border);
}
.flow__top{ display:flex; align-items:center; justify-content:space-between; min-height:32px; }
.flow__card .ico{ width:28px; height:28px; color:var(--text); }
.flow__logo{ height:26px; width:auto; }
.flow__card h4{ margin:0; font-size:var(--fs-16); font-weight:600; letter-spacing:-.01em; }
.flow__card p{ margin:0; font-size:var(--fs-14); line-height:1.45; color:var(--text-2); }
.flow__tags{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.flow__tags li{
  padding:4px 7px;
  border:var(--border);
  font:500 11px/1.2 var(--font-mono);
  color:var(--text-2);
}
.flow__hop{ display:flex; align-items:center; justify-content:center; color:var(--data); }
.flow__hop svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; }
.flow__hop path{ stroke-dasharray:4 4; animation:flowdash .9s linear infinite; }
.flow__arrow{ width:24px; height:72px; margin:0 auto; color:var(--data); }
.flow__arrow svg{ width:100%; height:100%; overflow:visible; }
.fa-line{ stroke:var(--data); stroke-width:1.5; stroke-dasharray:6 6; animation:flowdash 1s linear infinite; }
.fa-head{ fill:none; stroke:var(--data); stroke-width:1.5; }
.flow__gate{
  display:flex; align-items:center; gap:var(--s-4);
  padding:var(--s-5) var(--s-6);
  border:1px solid var(--brand);
  background:rgba(232,57,43,.06);
}
.flow__gate .ico{ width:32px; height:32px; color:var(--brand); }
.flow__gate p{ margin:0; font-size:var(--fs-16); color:var(--text); }
.flow__gate p b{ font-weight:600; }
@keyframes flowdash{ to{ stroke-dashoffset:-12; } }

/* ---------------- 07 PRINCIPLES ---------------- */
.principles{
  list-style:none; margin:var(--s-7) 0 0; padding:0;
  border-top:var(--border-strong);
}
.principle{
  display:grid;
  grid-template-columns:minmax(0, 72px) minmax(0, 1.1fr) minmax(0, 1fr);
  gap:var(--s-5);
  align-items:baseline;
  padding:var(--s-6) 0;
  border-bottom:var(--border);
}
.principle__n{ font:500 var(--fs-12)/1 var(--font-mono); letter-spacing:var(--track-label); color:var(--text-3); }
.principle h3{ font-size:var(--fs-32); font-weight:650; letter-spacing:-.03em; line-height:1.1; }
.principle p{ margin:0; font-size:var(--fs-16); color:var(--text-2); }

/* ---------------- CTA ---------------- */
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(128px, 20vh, 200px) 0;
}
.cta__bg{ position:absolute; inset:0; z-index:-2; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; }
/* the photograph rises out of the card above: its top starts in the page colour, so there is no seam */
.cta__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, var(--ink-0) 0%, rgba(5,7,10,.86) 55%, rgba(5,7,10,.5) 100%),
    linear-gradient(180deg, var(--ink-0) 0%, rgba(5,7,10,0) 46%),
    linear-gradient(0deg, var(--ink-0) 0%, rgba(5,7,10,0) 40%);
}
.cta__title{
  font-size:clamp(3rem, 8vw, 7.2rem);
  font-weight:700; letter-spacing:-.05em; line-height:.92;
  max-width:10em;
}
.cta__title em{ display:block; color:var(--text-3); }
.cta__lede{
  max-width:36em; margin:var(--s-5) 0 0;
  font-size:clamp(1.05rem, 1.5vw, 1.2rem); line-height:1.5; color:var(--text-2);
}
.cta__row{ display:flex; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-6); }

/* ---------------- FOOTER ---------------- */
.foot{
  padding:var(--s-8) 0 var(--s-7);
  border-top:var(--border);
  background:var(--ink-0);
}
.foot__inner{
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap:var(--s-6);
}
.foot__brand .brand__wm{ height:24px; }
.foot h3{ margin:0 0 var(--s-3); font:500 var(--fs-12)/1 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-3); }
.foot p{ margin:0 0 var(--s-3); font-size:var(--fs-14); line-height:1.6; color:var(--text-2); }
.foot a{ color:var(--text); text-decoration-color:var(--line-strong); text-underline-offset:3px; }
.foot a:hover{ text-decoration-color:var(--text); }
.foot__fine{ color:var(--text-3) !important; font-size:var(--fs-12) !important; margin-top:var(--s-4) !important; }

/* ---------------- SUPRORA CARD — placement only; its styles live in assets/suprora/ ---------------- */
.suprora-slot{ padding-top:var(--s-7); padding-bottom:var(--s-8); }

/* ================================================== RESPONSIVE */
@media (max-width: 1080px){
  .nav__links{ display:none; }
}

@media (max-width: 960px){
  .acc{ flex-direction:column; height:auto; }
  .acc__item{ flex:0 0 auto; height:64px; border-left:0; border-top:var(--border); }
  .acc__item:first-child{ border-top:0; }
  .acc__item.is-open{ flex-basis:auto; height:480px; }
  .acc__n, .acc__item.is-open .acc__n{ top:50%; bottom:auto; transform:translateY(-50%); }
  .acc__name{
    top:50%; bottom:auto; left:56px;
    transform:translateY(-50%);
    writing-mode:horizontal-tb;
    font-size:var(--fs-18);
  }
  .acc__item.is-open .acc__name{ top:var(--s-7); left:var(--s-4); transform:none; font-size:var(--fs-24); }
  .acc__item.is-open .acc__n{ top:var(--s-4); transform:none; }
  .devices{ grid-template-columns:1fr; }
  .device--phone{ max-width:260px; }
  .flow__grid--4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .flow__grid--core{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .flow__hop{ display:none; }
  .principle{ grid-template-columns:minmax(0, 56px) minmax(0, 1fr); }
  .principle p{ grid-column:2; }
  .chat{ width:min(420px, 62vw); }
  .paper{ width:min(420px, 62vw); }
  .foot__inner{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}

@media (max-width: 760px){
  .seq__ctrl{ display:none; }
  .chat{ left:4%; right:4%; width:auto; bottom:3%; padding:var(--s-3); }
  .chat__head{ font-size:.6rem; letter-spacing:.04em; margin-bottom:var(--s-2); padding-bottom:var(--s-2); }
  .chat__msg{ padding:var(--s-2) var(--s-3); min-height:0; margin-bottom:var(--s-2); }
  .tool{ padding:var(--s-2) var(--s-3); }
  .tool__text{ display:none; }
  .paper{ left:4%; right:4%; width:auto; top:52%; }
}

@media (max-width: 620px){
  body{ font-size:15px; }
  .nav__cta{ display:none; }
  .nav__inner{ gap:var(--s-3); }
  .brand__tag{ display:none; }
  .hero__cta .btn, .cta__row .btn{ width:100%; }
  .hero__stats{ gap:var(--s-5) var(--s-6); }
  .sec{ padding:var(--s-9) 0; }
  .slides__stage{ aspect-ratio:4 / 3; }
  .slides__dots{ display:none; }
  .slides__count{ margin-left:auto; }
  .flow__grid--4, .flow__grid--core{ grid-template-columns:1fr; }
  .flow__stage{ padding:var(--s-5); }
  .flow__gate{ padding:var(--s-4); }
  .principle{ grid-template-columns:1fr; gap:var(--s-3); }
  .principle p{ grid-column:auto; }
  .foot__inner{ grid-template-columns:1fr; }
}

/* ================================================== REDUCED MOTION
   Nothing moves. The sequence's final frame lays out as a static page,
   the story shows all three layers, the slides show the first frame.   */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .slides__bar{ display:none; }

  .seq{ height:auto; }
  .seq__stage{
    position:relative; height:auto; min-height:100svh;
    display:flex; flex-direction:column; gap:var(--s-7);
    padding:calc(var(--nav-h) + var(--s-8)) 0 var(--s-8);
  }
  .seq__copy{ position:relative; inset:auto; padding:0; order:0; }
  .seq__canvas{ position:relative; left:auto; top:auto; width:100%; height:min(70vh, 680px); order:1; }
  .chat{ order:2; position:relative; left:auto; right:auto; top:auto; bottom:auto; width:min(560px, 92%); margin:0 auto; }
  .paper{ order:3; position:relative; left:auto; right:auto; top:auto; bottom:auto; width:min(560px, 92%); margin:0 auto; }
  .seq__ctrl{ display:none; }
}

/* ================================================== PRINT — the result prints alone */
@media print{
  body *{ visibility:hidden !important; }
  .paper, .paper *{ visibility:visible !important; }
  .paper{
    position:fixed; left:0; top:0; right:auto; bottom:auto;
    width:100%; background:#fff; color:#000;
    border:0; box-shadow:none; opacity:1 !important;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .paper *{ color:#000 !important; }
  .paper__print{ display:none !important; }
}

/* ================================================== REVISION — highlights, ribbon, examples, sector controls */

/* the three keywords sit in sharp boxes that draw in, one after another */
.hero__title mark.hl{
  position:relative;
  background:none; color:inherit;
  padding:0 .14em;
  white-space:nowrap;
}
.hero__title mark.hl::before{
  content:""; position:absolute;
  inset:-.1em -.06em -.06em -.06em;
  border:2px solid var(--text);
  clip-path:inset(0 100% 0 0);
  animation:boxIn 1.1s var(--ease-out) forwards;
  animation-delay:calc(.45s + var(--k, 0) * .5s);
}
@keyframes boxIn{ to{ clip-path:inset(0 0 0 0); } }

/* the assistant's status label scans, so the run reads as live */
.chat__state{
  position:relative; overflow:hidden;
  padding:4px 6px;
  border:var(--border-strong);
  color:var(--text);
}
.chat__state::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(232,57,43,.45), transparent);
  transform:translateX(-100%);
  animation:scan 2.6s linear infinite;
}
@keyframes scan{ to{ transform:translateX(100%); } }

/* the ribbon: two groups, each at least a full screen wide, so there is never a gap */
.ticker__group{ display:flex; flex:none; }

/* sector controls: progress for the panel on screen, and next / previous */
.acc-wrap{ margin-top:var(--s-7); }
.acc-wrap .acc{ margin-top:var(--s-4); }
.acc__ctrl{ display:flex; align-items:center; gap:var(--s-3); }
.acc__count{
  font:500 12px/1 var(--font-mono);
  letter-spacing:.1em; color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.acc__sp{ flex:1; }
.acc__nav{
  height:40px; padding:0 var(--s-4);
  border:var(--border-strong); border-radius:var(--radius-ctl);
  background:none; color:var(--text); cursor:pointer;
  font:600 13px/1 var(--font-sans);
  transition:border-color var(--t-fast) var(--ease-out);
}
.acc__nav:hover{ border-color:var(--text); }
.acc__bar{ position:relative; height:2px; margin-top:var(--s-4); background:var(--line); overflow:hidden; }
.acc__bar i{ position:absolute; inset:0; background:var(--text); transform:scaleX(0); transform-origin:left center; }
.acc-wrap.is-timed .acc__bar i{ animation:afill 6.5s linear both; }
.acc-wrap:hover .acc__bar i{ animation-play-state:paused; }
@keyframes afill{ to{ transform:scaleX(1); } }

/* ---------------- LOG IN — a pop-up on the platform's own account ---------------- */
.nav__login{ min-height:40px; padding:0 var(--s-4); }
.login{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:var(--s-4); }
.login[hidden]{ display:none; }
.login__scrim{ position:absolute; inset:0; background:rgba(5,7,10,.8); animation:loginFade var(--t-base) var(--ease-out) both; }
.login__card{
  position:relative; width:min(440px, 100%); max-height:100%; overflow:auto;
  padding:var(--s-6); background:var(--ink-1); border:var(--border-strong);
  animation:loginIn var(--t-base) var(--ease-out) both;
}
@keyframes loginFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes loginIn{ from{ opacity:0; transform:translate3d(0,12px,0); } to{ opacity:1; transform:none; } }
.login__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-4); }
.login__head h2{ margin:0; font-size:var(--fs-32); font-weight:650; letter-spacing:-.03em; line-height:1.1; }
.login__close{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border:var(--border-strong); border-radius:var(--radius-ctl); background:transparent; color:var(--text);
  font:400 22px/1 var(--font-sans); cursor:pointer;
}
.login__close:hover{ border-color:var(--text); }
.login__lede{ margin:0 0 var(--s-5); font-size:15px; line-height:1.5; color:var(--text-2); }
.login__form{ display:grid; gap:var(--s-4); }
.login__field{ display:grid; gap:var(--s-2); }
.login__label{ font:500 var(--fs-12)/1 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-3); }
.login__field input{
  width:100%; min-height:48px; padding:0 var(--s-3);
  background:var(--ink-0); border:var(--border-strong); border-radius:var(--radius-ctl);
  color:var(--text); font:400 16px/1.2 var(--font-sans);
}
.login__field input:focus-visible{ outline:2px solid var(--data); outline-offset:2px; }
.login__error{ margin:0; font-size:14px; line-height:1.45; color:var(--warn); }
.login__error[hidden]{ display:none; }
.login__submit{ width:100%; }
.login__submit[disabled]{ opacity:.6; cursor:progress; }
.login .btn:focus-visible, .login__close:focus-visible{ outline:2px solid var(--data); outline-offset:2px; }
html.login-open{ overflow:hidden; }
@media (max-width: 620px){
  .login__card{ padding:var(--s-5); }
}