/* ===========================================================
   QWIN Tech — The Organizational Intelligence Platform
   =========================================================== */

:root{
  --bg:#F6F8FC;
  --surface:#fff;
  --ink:#0D1B3E;
  --body:#27324F;
  --body-strong:#18244A;
  --muted:#434F6B;
  --grey:#626D85;
  --border:#DDE3EE;
  --band:rgba(47,92,255,.08);
  --band-edge:rgba(47,92,255,.18);

  --blue:#2F5CFF;
  --blue-dark:#1E42C9;
  --blue-light:#7FA0FF;
  --blue-tint:#E9EEFF;
  --blue-tint-border:#C4D1FF;

  --navy:#0D1B3E;
  --navy-card:#132449;
  --navy-card-active:#1A2C55;
  --on-navy:#E1E8F4;
  --on-navy-dim:#D3DCEC;

  --green:#0F7B5A;

  --shell:1160px;
  --gutter:24px;
  --r-sm:9px;
  --r-md:10px;
  --r-lg:12px;
  --r-xl:14px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-dark)}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.5}
p,li{margin:0;text-wrap:pretty}
button{font:inherit}
img,svg{display:block}

/* ---------- reveal on scroll ----------
   Everything here is scoped to .js, which the head guard sets. Without it the
   page renders fully visible and unanimated, so a script failure can never
   leave the content hidden. */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.js [data-reveal].in{opacity:1;transform:none}
/* Sections carry a full-bleed background band, so the section itself stays put
   and its contents rise in instead: a moving section would drag its band and
   open a gap against the next one. An animation, as with the stagger below,
   leaves the children's own hover transitions alone. */
.js .section[data-reveal]{opacity:1;transform:none;transition:none}
.js .section[data-reveal]:not(.in) > *{opacity:0}
.js .section[data-reveal].in > *{animation:qwinRise .55s ease backwards}

@keyframes qwinFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fade{animation:qwinFade .3s ease}

/* Staggered children cascade with an animation rather than a transition: these
   cards already spend their transition property on hover colour, and an
   animation leaves that untouched. `both` holds the from-state through the
   delay, so nothing flashes before its turn. */
@keyframes qwinRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.js [data-stagger]:not(.in) > *{opacity:0}
.js [data-stagger].in > *{animation:qwinRise .5s cubic-bezier(.16,.84,.44,1) backwards}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js .section[data-reveal]:not(.in) > *{opacity:1}
  .js .section[data-reveal].in > *{animation:none}
  .js [data-stagger]:not(.in) > *{opacity:1}
  .js [data-stagger].in > *{animation:none}
  .fade{animation:none}
  .layer-links line{transition:none}
  *{transition-duration:.01ms !important}
}

/* ---------- layout primitives ---------- */
.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:72px;padding-bottom:72px}
/* Every other section sits on a faint brand-blue band, bled to the viewport
   edges through border-image's outset, with a hairline at each edge. The band
   is a translucent wash rather than a fill, so the scrolling watermark behind
   it stays as visible as on the open ground. The hero is section 1, so the
   bands start on The Problem. */
main > .section:nth-of-type(even){
  border-image:linear-gradient(var(--band-edge) 1px,var(--band) 1px calc(100% - 1px),var(--band-edge) 0) fill 0//0 100vmax;
}
.section:last-of-type{padding-bottom:88px}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl)}
.panel-navy{background:var(--navy);border-radius:var(--r-xl)}

.eyebrow{font-size:11.5px;font-weight:500;letter-spacing:.1em;color:var(--blue);margin-bottom:11px}
.eyebrow--on-navy{color:var(--blue-light)}

.h2{font-size:clamp(24px,3.4vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.lede{font-size:16px;color:var(--body)}

.sec-head{max-width:700px;margin-bottom:26px}
.sec-head .h2{margin-bottom:12px}
.sec-head .h2:last-child{margin-bottom:0}

.sec-head--split{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;margin-bottom:26px;max-width:none;
}
.sec-head--split > div{max-width:640px}

/* Top-level section heads open each section centred and at display size.
   Scoped to direct children of .section so heads nested in columns (Product
   Commitments) keep their left alignment. */
.section > .sec-head{max-width:780px;margin:0 auto 40px;text-align:center}
.section > .sec-head .eyebrow{
  display:flex;align-items:center;justify-content:center;gap:18px;
  font-size:16px;font-weight:600;letter-spacing:.16em;margin-bottom:16px;
  color:var(--blue-dark); /* --blue drops under 4.5:1 on the tinted bands */
}
/* Hairlines fading in toward the label from either side. */
.section > .sec-head .eyebrow::before,.section > .sec-head .eyebrow::after{
  content:'';flex:none;width:88px;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--blue-tint-border));
}
.section > .sec-head .eyebrow::after{transform:scaleX(-1)}

.section > .sec-head .h2{font-size:clamp(28px,3.9vw,38px);text-wrap:balance;margin-bottom:14px}
.section > .sec-head .lede{font-size:17px;line-height:1.6}
.section > .sec-head--split{flex-direction:column;align-items:center;gap:12px}
.section > .sec-head--split > div{max-width:none}


/* icon sizing — lucide copies the placeholder's class onto the generated <svg> */
.i-14{width:14px;height:14px}
.i-15{width:15px;height:15px}
.i-16{width:16px;height:16px}
.i-17{width:17px;height:17px}
.i-18{width:18px;height:18px}
.i-19{width:19px;height:19px}
.i-20{width:20px;height:20px}
.ico{display:inline-flex;flex:none}

/* square icon tiles */
.tile{flex:none;display:inline-flex;align-items:center;justify-content:center}
.tile--30{width:30px;height:30px;border-radius:var(--r-sm)}
.tile--32{width:32px;height:32px;border-radius:var(--r-md)}
.tile--36{width:36px;height:36px;border-radius:var(--r-md)}

/* collapsible bodies: JS drives max-height from scrollHeight */
.collapse{max-height:0;overflow:hidden;transition:max-height .3s ease}
.collapse--slow{transition:max-height .4s ease}
.collapse--slower{transition:max-height .45s ease}

/* ===========================================================
   Parallax backdrop
   One watermark for the whole page: the mark's own geometry, blown up and
   pinned to the viewport in the page ground. The whole mark drifts against the
   scroll while each ring turns about the shared centre by its own amount, so
   the mark winds and unwinds as you read without any ring ever crossing its
   neighbours.
   Purely decorative: aria-hidden, pointer-events:none, and being fixed at
   z-index:-1 it can never move or cover the content it sits behind — the hero
   and the cards pass over it, the open page ground lets it through.
   =========================================================== */

/* A soft wash so the flat page ground has some depth. z-index:-1 keeps it above
   the body background but below every in-flow element. */
.wash{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(47,92,255,.08), transparent 62%),
    radial-gradient(820px 520px at 4% 18%, rgba(127,160,255,.07), transparent 64%),
    radial-gradient(900px 700px at 60% 108%, rgba(47,92,255,.05), transparent 60%);
}

/* Fixed, so it is never clipped by a section and never widens the page. It
   hangs off the right edge, clear of the shell's text column at any width. */
.mark-bg{
  position:fixed;z-index:-1;pointer-events:none;
  width:640px;right:-165px;top:10vh;
  line-height:0;color:var(--blue);opacity:.14;
  will-change:transform;
}
.mark-bg svg{width:100%;height:auto;overflow:visible}
/* Rings pivot about the mark's own centre rather than each ring's own box. */
.mark-bg g{transition:none;transform-box:view-box;transform-origin:60px 60px}

@media (max-width:900px){
  .mark-bg{width:380px;right:-135px;top:16vh;opacity:.11}
}

/* Motion is the decoration here, so reduced-motion drops it to a still
   watermark rather than removing it. */
@media (prefers-reduced-motion:reduce){
  .mark-bg,
  .mark-bg g{transform:none !important}
}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:60}
.progress__bar{height:3px;background:var(--blue);width:0}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 2px rgba(13,27,62,.05);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-top:13px;padding-bottom:13px;
}
.brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
/* The mark stands on its own — the design system retires the icon tile and
   lets the ring geometry carry the brand. Its three arcs are brand-coloured,
   so it needs the light ground it sits on here. */
.brand__mark{
  flex:none;width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
}
.brand__name{font-size:16.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand__name em{font-style:normal;color:var(--blue)}

.nav{display:flex;align-items:center;gap:6px;flex:none}
.nav__link{
  font-size:13px;white-space:nowrap;padding:7px 10px;border-radius:var(--r-md);
  color:var(--muted);background:transparent;font-weight:400;
  transition:color .15s ease,background .15s ease;
}
.nav__link:hover{color:var(--ink)}
.nav__link.is-active{color:var(--ink);background:var(--blue-tint);font-weight:600}
.nav__cta{margin-left:8px}

.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);
  color:var(--ink);cursor:pointer;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:500;border-radius:var(--r-md);
  padding:12px 20px;border:1px solid transparent;cursor:pointer;
  transition:opacity .15s ease,background .15s ease;
}
.btn--primary{color:#fff;background:var(--blue)}
.btn--primary:hover{color:#fff;opacity:.9}
.btn--ghost{color:var(--ink);background:var(--surface);border-color:var(--border)}
.btn--ghost:hover{color:var(--ink);background:var(--bg)}
.btn--sm{font-size:13px;padding:9px 15px;gap:6px}

/* Neutral reset for the many interactive cards. These are buttons so touch and
   keyboard can reach them; the flex column undoes the browser's habit of
   centring a button's content, which would float short cards mid-row. */
.plain{
  text-align:left;cursor:pointer;background:none;border:none;padding:0;
  color:inherit;font:inherit;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
}

/* disclosure buttons */
.disclosure{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:13.5px;font-weight:500;border-radius:var(--r-md);padding:10px 16px;
  transition:background .15s ease;
}
.disclosure--navy{
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);
}
.disclosure--navy:hover{background:rgba(255,255,255,.14)}
.disclosure--light{
  color:var(--ink);background:var(--bg);border:1px solid var(--border);
  padding:10px 15px;margin-top:22px;
}
.disclosure--light:hover{background:var(--blue-tint)}
.disclosure--link{
  color:var(--blue);background:none;border:none;padding:14px 0 0;
  font-size:13px;gap:6px;
}

/* ---------- hero ---------- */

/* A navy ground, the same navy as the Why Now and Principles panels, so the
   page opens on its strongest colour. A blue glow sits behind the diagram's
   hub and a softer one low on the left; the header's white bar separates
   cleanly from it. The mark on the hub keeps its light plate, as the logo
   needs a light ground. */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(760px 480px at 80% 30%, rgba(47,92,255,.45), transparent 65%),
    radial-gradient(620px 420px at 0% 100%, rgba(127,160,255,.18), transparent 70%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-card) 55%, var(--navy-card-active) 100%);
}
/* A dot grid behind the diagram, faded out toward the copy so the headline
   still sits on clean ground. */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(rgba(199,210,229,.22) 1.1px, transparent 1.6px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(560px 440px at 76% 42%, #000, transparent 72%);
  mask-image:radial-gradient(560px 440px at 76% 42%, #000, transparent 72%);
}
.hero__inner{position:relative;padding-top:64px;padding-bottom:56px}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:40px;align-items:center;margin-bottom:44px;
}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:500;color:var(--blue-tint-border);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(196,209,255,.3);border-radius:999px;
  padding:6px 12px;letter-spacing:.02em;margin-bottom:22px;
}
.hero__title{
  font-size:clamp(30px,3.8vw,46px);font-weight:600;letter-spacing:-.028em;
  line-height:1.15;margin-bottom:18px;color:#fff;
}
.hero__sub{font-size:17.5px;color:var(--on-navy);margin-bottom:30px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.hero .btn--ghost{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
.hero .btn--ghost:hover{color:#fff;background:rgba(255,255,255,.12)}
.hero :focus-visible{outline-color:var(--blue-light)}

/* ---------- hero diagram ----------
   The headline drawn: five kinds of work orbiting one hub, joined by links the
   page draws in as it loads. Chips are HTML so their labels and icons come from
   the same data and type stack as everything else; only the links are SVG,
   sized to the box and measured from the chips themselves. */
.orbit{position:relative;isolation:isolate;aspect-ratio:1/.84;min-height:300px}

/* A wash behind the hub, so the centre reads as the lit part of the diagram.
   It breathes slowly, like the hub is taking in what arrives. */
.orbit::before{
  content:'';position:absolute;left:50%;top:48%;width:80%;height:80%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle, rgba(127,160,255,.35), rgba(47,92,255,0) 68%);
}
.js .orbit::before{animation:qwinBreathe 5s ease-in-out infinite}
@keyframes qwinBreathe{
  0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(.94)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
}
.orbit__links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit__link{
  fill:none;stroke:#6F8EF5;stroke-width:2.25;stroke-linecap:round;
  transition:stroke-dashoffset 1s ease;
}
.orbit__pulse{fill:#9DB4FF;stroke:rgba(157,180,255,.25);stroke-width:7}
.orbit__pulse--soft{fill:var(--blue-light)}

.orbit__hub{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:13px;
  width:min(46%,190px);text-align:center;
}
.orbit__mark{
  width:84px;height:84px;border-radius:22px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,#fff,#EEF2FF);
  border:1px solid var(--blue-tint-border);
  box-shadow:0 12px 24px -12px rgba(13,27,62,.3);
}
.orbit__mark svg{width:48px;height:48px}
.orbit__hub-label{
  font-size:12px;font-weight:600;color:var(--body-strong);line-height:1.4;
  background:rgba(255,255,255,.92);border:1px solid var(--border);
  border-radius:999px;padding:5px 12px;
  box-shadow:0 4px 10px -6px rgba(13,27,62,.3);
}

.orbit__slot{position:absolute;transform:translate(-50%,-50%)}
.orbit__chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:8px 14px 8px 8px;white-space:nowrap;
  font-size:12.5px;font-weight:600;color:var(--ink);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.5);
}
.orbit__chip .tile{width:26px;height:26px;border-radius:50%}
.js .orbit__chip{animation:qwinFloat 6.5s ease-in-out infinite}

/* Each chip drifts on its own clock, so the diagram breathes instead of
   pulsing in unison. The drift is a loop rather than a bob, and the shadow
   opens as the chip rises, so the lift reads as depth. Amplitude stays under
   half a chip's height, so the chip always covers the end of its link. */
@keyframes qwinFloat{
  0%,100%{transform:translate(0,0);box-shadow:0 10px 22px -10px rgba(0,0,0,.5)}
  33%{transform:translate(6px,-13px);box-shadow:0 22px 30px -14px rgba(0,0,0,.45)}
  66%{transform:translate(-5px,-6px);box-shadow:0 16px 26px -12px rgba(0,0,0,.48)}
}

@media (max-width:1080px){
  .hero__grid{gap:32px}
  .orbit{min-height:270px}
}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:34px;margin-bottom:34px}
  .orbit{width:100%;max-width:430px;margin:0 auto}
}
@media (max-width:640px){
  .orbit{min-height:250px}
  .orbit__mark{width:62px;height:62px;border-radius:16px}
  .orbit__mark svg{width:36px;height:36px}
  .orbit__chip{font-size:11.5px;padding:6px 11px 6px 6px;gap:6px}
  .orbit__chip .tile{width:22px;height:22px}
}

@media (prefers-reduced-motion:reduce){
  .js .orbit__chip,.js .orbit::before{animation:none}
  .js .art .qa,.ql{animation:none !important}
}

.grid{display:grid;gap:12px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr);gap:14px}
.grid--5{grid-template-columns:repeat(5,1fr)}

.pillar{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:18px 20px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.pillar:hover{box-shadow:0 4px 6px -1px rgba(13,27,62,.1)}
.pillar.is-open{background:var(--bg);border-color:var(--blue)}
.pillar__icon{margin-bottom:12px}
.pillar__title{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.pillar__body{font-size:12.5px;color:var(--muted);line-height:1.55}
.pillar__cue{font-size:11.5px;color:var(--blue);margin-top:8px;font-weight:500}

/* ---------- problem ---------- */
.counter{font-size:12.5px;color:var(--muted);white-space:nowrap}

.split{display:grid;gap:20px;align-items:start}
.split--tabs{grid-template-columns:300px 1fr}
.split--aside{grid-template-columns:1fr 400px}
.split--principles{grid-template-columns:1fr 380px}

.tablist{display:flex;flex-direction:column;gap:8px}
.tab{
  display:flex;gap:11px;align-items:center;
  background:transparent;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px 15px;cursor:pointer;text-align:left;
  transition:background .15s ease,border-color .15s ease;
}
.tab:hover{background:rgba(255,255,255,.6)}
.tab.is-active{background:var(--surface);border-color:var(--blue)}
.tab__title{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.tab__n{flex:none;min-width:20px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--grey)}
.tab.is-active .tab__n{color:var(--blue)}

.detail{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:30px 32px;min-height:268px;
}
/* Text beside the symptom's illustration; the example runs full width below. */
.detail__layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:28px;align-items:start;margin-bottom:20px}
.detail__title{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:14px}
.detail__art{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}

/* Illustrations scale to their box; the viewBox keeps the proportions. */
.art{display:block}
.art svg{display:block;width:100%;height:auto}

/* Illustrations play in: each .qa part starts at its own offset (set inline
   by illustrations.js) and settles into the finished picture, once its
   section has been revealed. The Problem panel rebuilds its SVG on every tab
   switch, so its scenes replay each time. */
.js .art .qa{
  transform-box:fill-box;transform-origin:center;
  animation:qwinSettle .7s cubic-bezier(.2,.75,.25,1) both;
}
.js .section:not(.in) .art .qa{animation-play-state:paused}
@keyframes qwinSettle{
  from{opacity:0;transform:translate(var(--dx),var(--dy)) scale(var(--s))}
  to{opacity:1;transform:none}
}

/* Loops. In the Problem panel and the Knowledge Advantage callout every .ql
   part starts moving on its own, --lb after the scene is shown so the
   entrance lands first; the panel rebuilds
   its SVG on each tab switch, so entrance and loop replay together. Elsewhere
   they sit still until their card is hovered, focused, opened (Why Now) or
   selected (How It Works), or hovered (Product Commitments).
   Each part's inline --ld staggers it against the others. */
.ql{transform-box:fill-box;transform-origin:center}
.detail__art{--lb:1.1s}
.callout__art{--lb:1.5s}
.js .section:not(.in) .art .ql{animation-play-state:paused}
.ql-type{transform-origin:left center}
.ql-travel{opacity:0}
:is(.shift:hover,.shift:focus-visible,.shift.is-open,.layer:hover,.layer.is-active,.commit:hover,.detail__art,.callout__art) .ql-type{animation:qwinType 1.6s ease-in-out calc(var(--lb,0s) + var(--ld,0s)) infinite}
:is(.shift:hover,.shift:focus-visible,.shift.is-open,.layer:hover,.layer.is-active,.commit:hover,.detail__art,.callout__art) .ql-spin{animation:qwinSpin 2.4s linear calc(var(--lb,0s) + var(--ld,0s)) infinite}
:is(.shift:hover,.shift:focus-visible,.shift.is-open,.layer:hover,.layer.is-active,.commit:hover,.detail__art,.callout__art) .ql-bob{animation:qwinBob 1.4s ease-in-out calc(var(--lb,0s) + var(--ld,0s)) infinite}
:is(.shift:hover,.shift:focus-visible,.shift.is-open,.layer:hover,.layer.is-active,.commit:hover,.detail__art,.callout__art) .ql-twinkle{animation:qwinTwinkle 1.2s ease-in-out calc(var(--lb,0s) + var(--ld,0s)) infinite}
:is(.shift:hover,.shift:focus-visible,.shift.is-open,.layer:hover,.layer.is-active,.commit:hover,.detail__art,.callout__art) .ql-breathe{animation:qwinBreatheSm 1.8s ease-in-out calc(var(--lb,0s) + var(--ld,0s)) infinite}
:is(.shift:hover,.shift:focus-visible,.shift.is-open,.layer:hover,.layer.is-active,.commit:hover,.detail__art,.callout__art) .ql-travel{animation:qwinTravel 1.8s linear calc(var(--lb,0s) + var(--ld,0s)) infinite}
:is(.shift:hover,.shift:focus-visible,.shift.is-open,.layer:hover,.layer.is-active,.commit:hover,.detail__art,.callout__art) .ql-nudge{animation:qwinNudge 1s ease-in-out calc(var(--lb,0s) + var(--ld,0s)) infinite}
:is(.shift:hover,.shift:focus-visible,.shift.is-open,.layer:hover,.layer.is-active,.commit:hover,.detail__art,.callout__art) .ql-pop{animation:qwinPop 1.6s ease-in-out calc(var(--lb,0s) + var(--ld,0s)) infinite}
:is(.shift:hover,.shift:focus-visible,.shift.is-open,.layer:hover,.layer.is-active,.commit:hover,.detail__art,.callout__art) .ql-apart{animation:qwinApart 2s ease-in-out calc(var(--lb,0s) + var(--ld,0s)) infinite}
:is(.shift:hover,.shift:focus-visible,.shift.is-open,.layer:hover,.layer.is-active,.commit:hover,.detail__art,.callout__art) .ql-sway{animation:qwinSway 2.2s ease-in-out calc(var(--lb,0s) + var(--ld,0s)) infinite}
:is(.shift:hover,.shift:focus-visible,.shift.is-open,.layer:hover,.layer.is-active,.commit:hover,.detail__art,.callout__art) .ql-drift{animation:qwinDrift 1.8s ease-in calc(var(--lb,0s) + var(--ld,0s)) infinite}
:is(.shift:hover,.shift:focus-visible,.shift.is-open,.layer:hover,.layer.is-active,.commit:hover,.detail__art,.callout__art) .ql-march{animation:qwinMarch .9s linear calc(var(--lb,0s) + var(--ld,0s)) infinite}
@keyframes qwinApart{0%,100%{transform:none}50%{transform:translate(var(--ax),var(--ay))}}
@keyframes qwinSway{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
/* Slips away in its direction and fades, then is back in place to go again. */
@keyframes qwinDrift{0%{transform:none;opacity:1}85%{transform:translate(var(--ax),var(--ay));opacity:0}100%{transform:none;opacity:0}}
/* Dashes running along the path, so the line reads as moving. */
@keyframes qwinMarch{to{stroke-dashoffset:-20}}
:is(.shift:hover,.shift:focus-visible,.shift.is-open,.layer:hover,.layer.is-active,.commit:hover,.detail__art,.callout__art) .ql-rise{animation:qwinRiseBar 1.6s ease-in-out calc(var(--lb,0s) + var(--ld,0s)) infinite}
.ql-rise{transform-origin:center bottom}
@keyframes qwinRiseBar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.7)}}
@keyframes qwinType{0%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
@keyframes qwinSpin{to{transform:rotate(360deg)}}
@keyframes qwinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes qwinTwinkle{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes qwinBreatheSm{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes qwinNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes qwinPop{0%,40%,100%{transform:scale(1);opacity:1}20%{transform:scale(1.45);opacity:.7}}
/* A signal running the link from the person to the AI, along its curve. */
@keyframes qwinTravel{
  0%{transform:translate(0,0);opacity:0}
  8%{opacity:1}
  25%{transform:translate(23px,6.5px)}
  50%{transform:translate(44.5px,8.8px)}
  75%{transform:translate(68px,8.5px)}
  92%{opacity:1}
  100%{transform:translate(92px,6px);opacity:0}
}
.detail__body{font-size:15px;color:var(--body);line-height:1.65;margin-bottom:18px}
.example{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:16px 18px;
}
.example__label{
  font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;
}
.example__text{font-size:14px;color:var(--body-strong);line-height:1.6}

.costs{padding:24px 26px;margin-top:20px}
.costs__head{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.costs__title{font-size:15.5px;font-weight:600}
.costs__hint{font-size:12.5px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{
  font-size:13px;font-weight:500;color:var(--body);background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-md);padding:8px 13px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.chip:hover{border-color:var(--grey)}
.chip.is-active{color:#fff;background:var(--navy);border-color:var(--navy)}
.costs__body{
  font-size:14.5px;color:var(--body-strong);line-height:1.6;
  border-top:1px solid var(--border);padding-top:16px;
}

/* ---------- why now ---------- */
.whynow{padding:42px 44px 38px}
.shifts{margin-bottom:28px}
.shift{
  background:var(--navy-card);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:20px 22px;cursor:pointer;text-align:left;
  transition:background .2s ease,border-color .2s ease;
}
.shift:hover{background:var(--navy-card-active)}
.shift.is-open{background:var(--navy-card-active);border-color:var(--blue)}
.shift{overflow:hidden}
.shift__art{
  margin:-20px -22px 16px;padding:8px 0 2px;
  background:rgba(127,160,255,.07);border-bottom:1px solid rgba(255,255,255,.1);
}
.shift__title{font-size:14.5px;font-weight:600;color:#fff;margin-bottom:6px}
.shift__body{font-size:13px;color:var(--on-navy-dim);line-height:1.6}
.shift__cue{font-size:11.5px;color:var(--blue-light);margin-top:9px;font-weight:500}

.bullets{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 32px;padding-top:22px}
.bullets--wide{gap:12px 36px}
.bullet{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55}
.bullet__icon{color:var(--blue);margin-top:3px}
.bullet--on-navy{color:var(--on-navy)}
.bullet--light{color:var(--body-strong)}

/* ---------- platform ---------- */
.cmp{padding:26px 28px}
.switch{
  display:inline-flex;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-md);padding:3px;margin-bottom:22px;max-width:100%;
}
.switch__btn{
  font-size:13px;font-weight:500;color:var(--muted);background:transparent;
  border:none;border-radius:8px;padding:8px 15px;cursor:pointer;box-shadow:none;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.switch__btn.is-active{color:var(--ink);background:var(--surface);box-shadow:0 1px 2px rgba(13,27,62,.12)}
.cmp__title{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:12px}
.cmp__a{font-size:15px;color:var(--body);line-height:1.65;margin-bottom:14px}
.cmp__b{font-size:15px;color:var(--muted);line-height:1.65}

.aside{padding:24px 26px}
.aside__title{font-size:14.5px;font-weight:600;margin-bottom:6px}
.aside__sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.checklist{display:flex;flex-direction:column;gap:10px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--body);line-height:1.55}
.check__icon{color:var(--blue);margin-top:3px}

/* ---------- how it works ---------- */
/* The connector SVG sits behind the cards; only the gaps between them show the
   line, so the rail reads as one thread passing through the layer. */
.layers-wrap{position:relative;margin-bottom:22px}
.layers{margin-bottom:0}
.layer-links{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.layer-links line{
  stroke:var(--blue-tint-border);stroke-width:2;stroke-linecap:round;
  transition:stroke-dashoffset .6s ease;
}
.layer{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 18px 16px;cursor:default;
  transition:background .18s ease,border-color .18s ease;
}
/* Positioned so the cards outrank the absolutely-positioned connector SVG in
   paint order — otherwise the rail draws over the card faces instead of
   threading behind them. */
.layers .layer{position:relative}
.layer__art{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);
  margin-bottom:12px;transition:background .18s ease,border-color .18s ease;
}
.layer__title{font-size:13.5px;font-weight:600;color:var(--ink)}
.layer__body{font-size:12.5px;color:var(--muted);line-height:1.55}
.layer.is-active{background:var(--navy);border-color:var(--navy)}
.layer.is-active .layer__art{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.layer.is-active .layer__title{color:#fff}
.layer.is-active .layer__body{color:var(--on-navy-dim)}

.scenarios{display:flex;flex-direction:column;gap:10px}
.scenario{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  overflow:hidden;transition:border-color .15s ease;
}
.scenario.is-open{border-color:var(--blue)}
.scenario__btn{
  width:100%;display:flex;align-items:center;gap:14px;
  background:none;border:none;padding:19px 24px;cursor:pointer;text-align:left;
}
.scenario__when{flex:1;font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.scenario__cue{font-size:12px;color:var(--muted);letter-spacing:.06em}
.scenario.is-open .scenario__cue{visibility:hidden}
.scenario__chevron{color:var(--muted)}
.scenario__then{font-size:14.5px;color:var(--body);line-height:1.65;padding:0 24px 22px}
.scenario .collapse{transition:max-height .35s ease}

/* ---------- knowledge advantage ---------- */
.adv-grid{margin-bottom:20px;gap:16px}
.adv{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:24px 26px;transition:border-color .18s ease,box-shadow .18s ease;
}
.adv.is-active{border-color:var(--blue)}
.adv__from{font-size:12.5px;color:var(--muted);margin-bottom:9px}
.adv__to-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.adv__to-row .ico{color:var(--blue)}
.adv__to{font-size:16px;font-weight:600;letter-spacing:-.01em}
.adv__body{font-size:13.5px;color:var(--body);line-height:1.6}

.callout{
  background:var(--blue-tint);border:1px solid var(--blue-tint-border);
  border-radius:var(--r-xl);padding:22px 26px;display:flex;gap:14px;align-items:flex-start;
}
.callout{align-items:center;gap:26px}
.callout__art{flex:none;width:220px}
.callout p{font-size:14.5px;color:var(--body-strong);max-width:840px;line-height:1.6}
.callout strong{font-weight:600}

/* ---------- principles ---------- */
.prin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.prin-tab{
  display:flex;gap:11px;align-items:center;
  background:transparent;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px 16px;cursor:pointer;text-align:left;
  transition:background .15s ease,border-color .15s ease;
}
.prin-tab:hover{background:rgba(255,255,255,.6)}
.prin-tab.is-active{background:var(--surface);border-color:var(--blue)}
.prin-tab__n{font-size:11.5px;font-weight:600;color:var(--grey);flex:none}
.prin-tab.is-active .prin-tab__n{color:var(--blue)}
.prin-tab__title{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}

.prin-detail{padding:28px 30px;min-height:230px}
.prin-detail__n{font-size:12px;font-weight:600;color:var(--blue-light);letter-spacing:.08em;margin-bottom:14px}
.prin-detail__title{font-size:21px;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.3;margin-bottom:12px}
.prin-detail__body{font-size:14.5px;color:var(--on-navy);line-height:1.65}

/* ---------- commitments ---------- */
.commit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.commit{
  display:flex;flex-direction:column;gap:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px 14px 18px;transition:border-color .18s ease;
}
.commit:hover{border-color:var(--blue-tint-border)}
.commit__art{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md)}
.commit__text{font-size:14px;font-weight:500;color:var(--body-strong);line-height:1.5;padding:0 4px}

/* ---------- trust ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* app.js gives these grids a min-height tall enough for their tallest open
   card; rows pack to the top so that spare room sits below the cards rather
   than stretching them. */
.shifts,.layers,.adv-grid,.trust-grid{align-content:start}
.trust{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:22px 24px;transition:border-color .18s ease;
}
.trust.is-active{border-color:var(--green)}
.trust__icon{color:var(--green);background:#E7F5F0;margin-bottom:14px}
.trust__title{font-size:14.5px;font-weight:600;margin-bottom:7px}
.trust__body{font-size:13px;color:var(--muted);line-height:1.6}

/* ---------- vision / horizons ---------- */
.horizons{padding:30px 32px 26px}
.stepper{display:flex;align-items:center;margin-bottom:26px}
.step{display:flex;align-items:center;flex:1}
.step:last-child{flex:none}
.step:last-child .step__line{display:none}
.step__btn{
  display:flex;align-items:center;gap:10px;
  background:none;border:none;padding:0;cursor:pointer;
}
.step__dot{
  flex:none;width:28px;height:28px;border-radius:99px;
  background:var(--surface);color:var(--grey);border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:600;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.step.is-done .step__dot{background:var(--blue);color:#fff;border-color:var(--blue)}
.step__label{font-size:13px;font-weight:400;color:var(--muted);white-space:nowrap}
.step.is-current .step__label{font-weight:600;color:var(--ink)}
.step__line{flex:1;height:1px;background:var(--border);margin:0 14px;min-width:14px}
.step.is-past .step__line{background:var(--blue)}

.horizon{padding-bottom:22px;border-bottom:1px solid var(--border)}
.horizon__title{
  font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.3;
  margin-bottom:12px;max-width:700px;
}
.horizon__body{font-size:15px;color:var(--body);line-height:1.65;max-width:760px}

/* ---------- mission / vision ---------- */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mv{padding:32px 34px}
.mv__lead{font-size:17px;color:var(--ink);line-height:1.6}
.mv__more{font-size:14.5px;color:var(--body);line-height:1.65;padding-top:14px}

/* ---------- CTA + demo form ---------- */
.cta{padding:48px 44px}
.cta .h2{color:#fff;margin-bottom:14px}
.cta__sub{font-size:16.5px;color:var(--on-navy);margin-bottom:22px}
.cta__grid{display:grid;grid-template-columns:1fr 460px;gap:44px;align-items:center}
.cta__copy{padding-top:6px}
.cta__points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cta__points li{
  position:relative;padding-left:26px;
  font-size:14.5px;line-height:1.6;color:var(--on-navy-dim);
}
/* The tick is drawn in CSS rather than as an icon: these bullets are decorative
   reinforcement, and a lucide node per line would be three more DOM subtrees to
   re-render on every state change. */
.cta__points li::before{
  content:'';position:absolute;left:2px;top:6px;width:9px;height:5px;
  border-left:2px solid var(--blue-light);border-bottom:2px solid var(--blue-light);
  transform:rotate(-45deg);
}

.demo-form{
  background:var(--surface);border-radius:var(--r-xl);
  padding:28px 28px 24px;text-align:left;
}
.demo-form__title{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.demo-form__hint{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:20px}
.demo-form__fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.demo-form__submit{width:100%;justify-content:center;margin-bottom:12px}
.demo-form__submit[disabled]{opacity:.6;cursor:default}
.demo-form__legal{font-size:12px;color:var(--grey);line-height:1.5}

/* A field spans both columns unless it asks to sit half-width. */
.field{grid-column:1 / -1;display:flex;flex-direction:column;gap:6px}
.field--half{grid-column:span 1}
.field__label{font-size:12.5px;font-weight:600;color:var(--body-strong)}
.field__label span{font-weight:400;color:var(--grey)}
.field__input{
  font:inherit;font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:10px 12px;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field__input::placeholder{color:var(--grey)}
.field__input:hover{border-color:var(--blue-light)}
.field__input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,92,255,.16)}
textarea.field__input{resize:vertical;min-height:88px;line-height:1.55}
select.field__input{
  appearance:none;cursor:pointer;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field__hint{font-size:12px;color:var(--grey);line-height:1.5}
.field__error{font-size:12px;font-weight:500;color:#B91C1C;line-height:1.5}
.field.is-invalid .field__input{border-color:#B91C1C}
.field.is-invalid .field__input:focus{box-shadow:0 0 0 3px rgba(185,28,28,.14)}

/* One status line carries every outcome, so the live region announces once. */
.demo-form__status{font-size:13px;line-height:1.55;margin-bottom:12px;padding:10px 12px;border-radius:var(--r-md)}
.demo-form__status--error{color:#B91C1C;background:#FEF2F2;border:1px solid #FBD5D5}
.demo-form__status--busy{color:var(--body);background:var(--bg);border:1px solid var(--border)}
.demo-form__status--note{color:var(--body-strong);background:var(--blue-tint);border:1px solid var(--blue-tint-border)}

/* The success panel replaces the fields in place: the heading it puts focus on
   is what tells a screen reader the submission landed. */
.demo-form--done{display:flex;align-items:center;justify-content:center}
.demo-done{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:18px 6px;
}
.demo-done:focus{outline:none}
.demo-done__tick{
  width:44px;height:44px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:#E7F5F0;color:var(--green);
}
.demo-done__title{font-size:18px;font-weight:600;margin-bottom:8px}
.demo-done__body{font-size:14px;color:var(--body);line-height:1.6;max-width:320px;margin:0 auto}

/* ---------- footer ---------- */
.footer{background:var(--surface);border-top:1px solid var(--border)}
.footer__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;padding-top:32px;padding-bottom:32px;
}
.footer__name{font-size:13.5px;font-weight:600;margin-bottom:3px}
.footer__tag{font-size:12.5px;color:var(--muted)}
.footer__copy{font-size:12px;color:var(--muted);margin-top:8px}
.footer__links{display:flex;flex-wrap:wrap;gap:22px}
.footer__links a{font-size:13px;color:var(--muted)}
.footer__links a:hover{color:var(--ink)}

/* ---------- accessibility ---------- */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.panel-navy :focus-visible,.whynow :focus-visible{outline-color:var(--blue-light)}
/* The demo form is a light card inside the navy panel, so it takes the light
   ground's focus colour back. */
.demo-form :focus-visible{outline-color:var(--blue)}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--blue);color:#fff;padding:10px 16px;border-radius:0 0 var(--r-md) 0;
  font-size:13px;font-weight:500;
}
.skip-link:focus{left:0;color:#fff}

/* ===========================================================
   Responsive
   =========================================================== */

@media (max-width:1080px){
  .split--aside,.split--principles{grid-template-columns:1fr}
  .grid--5{grid-template-columns:repeat(3,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .aside{order:-1}
}

@media (max-width:900px){
  .section{padding-top:56px;padding-bottom:56px}
  .section:last-of-type{padding-bottom:64px}
  .hero__inner{padding-top:46px;padding-bottom:40px}

  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--surface);border-bottom:1px solid var(--border);
    padding:12px var(--gutter) 18px;
    box-shadow:0 8px 16px -8px rgba(13,27,62,.18);
  }
  .nav.is-open{display:flex}
  .nav__link{padding:11px 12px;font-size:14px}
  .nav__cta{margin-left:0;justify-content:center;margin-top:6px}
  .nav-toggle{display:inline-flex}
  .header__inner{position:relative}

  .grid--4{grid-template-columns:repeat(2,1fr)}
  .split--tabs{grid-template-columns:1fr}
  .detail{min-height:0}
  .whynow{padding:32px 26px 30px}
  .grid--3{grid-template-columns:1fr}
  .commit-grid{grid-template-columns:repeat(2,1fr)}
  .mv-grid{grid-template-columns:1fr}
  .cmp,.aside,.costs{padding:22px 22px}
  .horizons{padding:24px 22px 22px}
  .detail{padding:24px 22px}
  .mv{padding:26px 24px}
  .cta{padding:36px 24px}
  .cta__grid{grid-template-columns:1fr;gap:30px}
  .demo-form{padding:24px 22px 20px}
}

@media (max-width:640px){
  :root{--gutter:18px}
  .grid--4,.grid--5,.trust-grid,.commit-grid,.prin-grid{grid-template-columns:1fr}
  .bullets{grid-template-columns:1fr}
  .sec-head--split{flex-direction:column;align-items:flex-start;gap:10px}
  .section > .sec-head .eyebrow{font-size:14px;gap:12px}
  .section > .sec-head .eyebrow::before,.section > .sec-head .eyebrow::after{width:28px}
  .hero__sub{font-size:16.5px}
  .btn{width:100%;justify-content:center}
  .hero__actions .btn{flex:1 1 100%}
  .demo-form__fields{grid-template-columns:1fr}
  .field--half{grid-column:1 / -1}
  .switch{width:100%}
  .switch__btn{flex:1;padding:8px 10px}

  .stepper{flex-direction:column;align-items:flex-start;gap:14px}
  .step{flex:none;width:100%}
  .step__line{display:none}
  .step:last-child .step__line{display:none}

  .scenario__btn{padding:16px 18px;flex-wrap:wrap}
  .scenario__cue{display:none}
  .scenario__then{padding:0 18px 18px 18px}
  .detail__title{font-size:17px}
  .detail__layout{grid-template-columns:1fr;gap:18px}
  .layer__art{max-width:280px}
  .detail__art{order:-1;max-width:340px}
  .callout{flex-direction:column;align-items:flex-start;gap:14px}
  .horizon__title{font-size:19px}
}