/* =====================================================================
   SCROLL STORY — the shared chassis
   Used by realaize.html and werkr.html on top of brand.css + main.css.

   What lives here is everything the two product stories have in common:
   the blueprint palette, the pinned runway, the progress rail, the copy
   column, the stacked canvas, the card and metric primitives, the dark
   intro, the light closing claim, and the responsive and reduced-motion
   skeletons. What each page adds in its own stylesheet is only its
   scenes — the drawings and the layouts particular to its argument.

   The performance contract is the site's: the scroll runtime writes
   custom properties, and the properties are only ever consumed by
   `transform` and `opacity`. Nothing that forces layout is animated.
   ===================================================================== */

.st-page{
  /* The two hues the blueprint is built from, as bare rgb triples so that
     every hairline below can mix its own alpha out of them. A page that
     wants a different accent — lestate-real is copper rather than blue —
     redefines these two and inherits the whole vocabulary. */
  --st-hue:     127,199,255;   /* linework */
  --st-hue-a:   74,144,255;    /* accent */

  --st-bg:      #081118;   /* page floor */
  --st-bg-2:    #0b1218;   /* the lighter end of the wash */
  --st-blue:    rgb(var(--st-hue-a));   /* primary — active state, current selection */
  --st-print:   rgb(var(--st-hue));     /* blueprint linework */
  --st-ink:     #e6f1ff;   /* muted white, the reading colour */
  --st-ink-2:   #7f8b98;   /* secondary grey */
  --st-green:   #9edb63;   /* validated, completed, improved — only there */
  --st-warn:    #e69b5b;   /* deficit. Used sparingly or not at all. */

  --st-line:    rgba(var(--st-hue),.16);
  --st-line-2:  rgba(var(--st-hue),.30);
  --st-glass:   rgba(15,28,43,.62);
  --st-glass-2: rgba(20,36,54,.78);

  /* Runway per frame. Long enough that a frame can be read, short enough
     that no part of it is scrolled through with nothing happening — the
     timing windows in the page's own script are laid end to end across
     exactly this. */
  --st-step: 115vh;
}

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

/* The dark surfaces bring their own blueprint grid — the site's own grid
   is a black hairline and disappears completely on this background. */
.st-intro,.st-story{
  position:relative;color:var(--st-ink);
  background:
    linear-gradient(180deg,var(--st-bg) 0%,var(--st-bg-2) 55%,var(--st-bg) 100%);
}
.st-intro::before,.st-story::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right,rgba(var(--st-hue),.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(var(--st-hue),.045) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 100%);
          mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 100%);
}

/* =====================================================================
   INTRO
   ===================================================================== */
.st-intro{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:120px 0 96px;overflow:hidden;
}
.st-intro-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
/* the anchor object of the story, already drawn, standing off to the
   side of the claim rather than behind it */
.st-intro-draw{
  position:absolute;inset:0;opacity:.26;
  transform:translate3d(20%,4%,0) scale(.74);
}
.st-intro-draw svg{width:100%;height:100%}
.st-intro-wash{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 60% at 20% 40%,rgba(8,17,24,.94) 30%,rgba(8,17,24,.2) 100%),
    radial-gradient(90% 70% at 78% 78%,rgba(var(--st-hue-a),.10),transparent 70%),
    linear-gradient(180deg,rgba(8,17,24,.9) 0%,transparent 26%,transparent 62%,rgba(8,17,24,.92) 100%);
}
.st-intro-inner{position:relative;z-index:2}
.st-intro-copy{max-width:640px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}

/* The wordmarks are dark ink on transparent — the same lockups the
   platform panel on the homepage sits on white. Over the blueprint they
   take the nav's treatment for the Lestate mark and go solid white. */
.st-wordmark{
  height:26px;width:auto;max-width:none;object-fit:contain;object-position:left center;
  filter:brightness(0) invert(1);
}
.st-eyebrow{
  margin:0;font-size:11.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--st-print);
}
.st-h1{
  font-size:clamp(32px,4.6vw,58px);line-height:1.06;font-weight:700;letter-spacing:-2px;
  color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.st-h1 .line{display:block;overflow:hidden}
.st-h1 .line>span{display:block;transform:translateY(110%);animation:lineUp 1.05s var(--ease) forwards}
.st-h1 .line:nth-child(1)>span{animation-delay:.14s}
.st-h1 .line:nth-child(2)>span{animation-delay:.26s}
.st-intro-sub{margin:0;font-size:17px;line-height:1.6;color:rgba(230,241,255,.72);max-width:560px}
.st-intro-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.st-intro-cta .btn-quiet{
  color:#a9c8ff;background:rgba(var(--st-hue-a),.2);
  border-color:rgba(140,180,255,.28);box-shadow:none;
}
.st-intro-cta .btn-quiet:hover{background:rgba(var(--st-hue-a),.34);color:#fff}
.st-intro-cta .btn-ghost{color:#fff;background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.18)}
.st-intro-cta .btn-ghost:hover{background:rgba(255,255,255,.21)}

.st-intro-scroll{
  position:absolute;right:var(--pad);bottom:8vh;z-index:2;
  display:flex;align-items:center;gap:12px;
  font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(230,241,255,.5);
}
.st-rail-run{display:block;width:70px;height:2px;background:rgba(var(--st-hue),.2);position:relative;overflow:hidden}
.st-rail-run i{
  position:absolute;inset:0;background:var(--st-print);transform:translateX(-100%);
  animation:railRun 2.2s var(--ease-io) infinite;
}

/* =====================================================================
   THE STORY — runway, pin, three column frame
   ===================================================================== */
.st-story{height:calc(6 * var(--st-step) + 100svh)}
.st-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;z-index:1;
  display:flex;align-items:stretch;
}
.st-grid{
  position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:96px var(--pad) 44px;
  display:grid;grid-template-columns:26px minmax(0,320px) minmax(0,1fr);
  gap:0 48px;align-items:center;
}

/* ---------- progress rail ---------- */
.st-rail{
  position:relative;align-self:center;list-style:none;margin:0;padding:0;
  height:min(392px,58vh);
  display:flex;flex-direction:column;justify-content:space-between;
}
.st-rail li{
  position:relative;z-index:1;width:26px;height:26px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--st-bg);
  border:1px solid rgba(var(--st-hue),.18);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.st-rail-n{
  font-size:9.5px;font-weight:700;letter-spacing:.5px;color:var(--st-ink-2);
  font-variant-numeric:tabular-nums;transition:color .45s var(--ease);
}
.st-rail li.done{border-color:rgba(var(--st-hue),.4)}
.st-rail li.done .st-rail-n{color:rgba(var(--st-hue),.86)}
.st-rail li.on{border-color:var(--st-blue);box-shadow:0 0 0 4px rgba(var(--st-hue-a),.14)}
.st-rail li.on .st-rail-n{color:#fff}
.st-rail-line{
  position:absolute;left:13px;top:13px;bottom:13px;width:1px;margin-left:-.5px;
  background:rgba(var(--st-hue),.16);z-index:0;
}
.st-rail-line i{
  position:absolute;inset:0;background:var(--st-blue);
  transform:scaleY(var(--p,0));transform-origin:top;
}

/* ---------- copy: six statements in one cell ---------- */
.st-copy{display:grid;align-self:center}
.st-say{
  grid-area:1 / 1;display:flex;flex-direction:column;gap:14px;align-self:center;
  opacity:var(--o,0);
  transform:translate3d(0,var(--y,0px),0);
  will-change:transform,opacity;
}
.st-label{
  margin:0;display:flex;align-items:center;gap:10px;
  font-size:10.5px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--st-print);
}
.st-label b{
  font-variant-numeric:tabular-nums;color:var(--st-blue);
  padding-right:10px;border-right:1px solid var(--st-line-2);
}
.st-say h3{
  font-size:clamp(24px,2.5vw,34px);line-height:1.13;letter-spacing:-1.1px;
  font-weight:700;color:#fff;
}
.st-body{margin:0;font-size:14.5px;line-height:1.62;color:rgba(230,241,255,.62);max-width:40ch}

/* ---------- the canvas: every scene in one cell ---------- */
.st-canvas{position:relative;display:grid;align-self:stretch;min-width:0}
.st-layer{grid-area:1 / 1;position:relative;min-width:0;will-change:transform,opacity}

/* =====================================================================
   BLUEPRINT LINEWORK
   One vocabulary for every drawing on either page. --solid is how far
   the survey has become a model: nothing is ever fully drawn at rest.
   ===================================================================== */
.bp{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.bp-ground{stroke:rgba(var(--st-hue),.26);stroke-width:1.2}
.bp-hatch{stroke:rgba(var(--st-hue),.13);stroke-width:1}
.bp-out{stroke:rgba(230,241,255,calc(.34 + var(--solid,0) * .5));stroke-width:1.5}
.bp-line{stroke:rgba(var(--st-hue),calc(.16 + var(--solid,0) * .3));stroke-width:1}
.bp-win{
  stroke:rgba(var(--st-hue),calc(.18 + var(--solid,0) * .42));stroke-width:1;
  fill:rgba(var(--st-hue-a),calc(var(--solid,0) * .07));
}
.bp-bar{stroke:rgba(var(--st-hue),calc(.1 + var(--solid,0) * .26));stroke-width:.8}
.bp-far{stroke:rgba(var(--st-hue),.1);stroke-width:1}
.bp-dim{stroke:rgba(var(--st-hue),.3);stroke-width:1;stroke-dasharray:3 4}
.bp-txt{fill:rgba(var(--st-hue),.66);stroke:none;font-size:9px;font-weight:700;letter-spacing:1px}
/* what the drawing gains, in the two tones the palette allows */
.bp-add{stroke:rgba(158,219,99,.85);stroke-width:1.4;fill:rgba(158,219,99,.1)}
.bp-add-l{stroke:rgba(158,219,99,.55);stroke-width:1;fill:none}
.bp-cy{stroke:rgba(var(--st-hue),.85);stroke-width:1.3;fill:rgba(var(--st-hue),.09)}
.bp-cy-l{stroke:rgba(var(--st-hue),.5);stroke-width:1;fill:none}
.bp-env{stroke:rgba(var(--st-hue),.6);stroke-width:1.2;stroke-dasharray:5 4;fill:none}
.bp-pv{stroke:rgba(158,219,99,.75);stroke-width:1;fill:rgba(var(--st-hue-a),.22)}
/* a surveyed dimension is a result of the analysis, so it arrives with it */
.bp-dims{opacity:var(--solid,0)}
.st-intro-draw .bp-dims{display:none}   /* a dimension needs a drawing to belong to */

/* =====================================================================
   SURFACES — cards, metric tables, leader-line lists
   ===================================================================== */
.st-card{
  position:relative;border-radius:10px;
  background:var(--st-glass);border:1px solid rgba(var(--st-hue),.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.st-card-n{
  font-size:8.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--st-print);
}
.st-metrics{margin:0;display:flex;flex-direction:column;gap:0}
.st-metrics>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:4px 0;border-top:1px solid rgba(var(--st-hue),.09);
}
.st-metrics>div:first-child{border-top:none}
.st-metrics dt{font-size:8.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--st-ink-2)}
.st-metrics dd{
  margin:0;font-size:12px;font-weight:700;color:var(--st-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.st-metrics dd.st-hi{color:var(--st-blue)}

/* A column of findings beside the drawing, each on its own leader line.
   --p drives the list, --k staggers the row, --vis cross-fades one whole
   list out as the next takes its place. */
.st-list{
  position:absolute;right:0;top:50%;width:37%;min-width:172px;max-width:216px;
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px;
  transform:translateY(-50%);
}
.st-list li{
  --ck:clamp(0,calc(var(--p,0) * 6.4 - var(--k) * .62),1);
  position:relative;display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:6px;
  background:var(--st-glass);border:1px solid rgba(var(--st-hue),.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:calc(var(--ck) * var(--vis,1));
  transform:translate3d(calc((1 - var(--ck)) * 20px),0,0);
}
.st-list li::before{
  content:"";position:absolute;left:-22px;top:50%;width:18px;height:1px;
  background:rgba(var(--st-hue),.3);
  transform:scaleX(var(--ck));transform-origin:right;
}
.st-list svg{
  width:14px;height:14px;flex:none;fill:none;stroke:var(--st-print);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8;
}
.st-list b{
  font-size:11.5px;font-weight:700;color:#fff;letter-spacing:-.1px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.st-list span{
  font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:var(--st-ink-2);
  margin-left:auto;text-align:right;
}
.st-list li[data-tone="green"]{border-color:rgba(158,219,99,.28)}
.st-list li[data-tone="green"] b{color:var(--st-green)}
.st-list li[data-tone="green"]::before{background:rgba(158,219,99,.4)}
.st-list li[data-tone="green"] svg{stroke:var(--st-green)}
.st-list li[data-tone="cyan"] b{color:var(--st-print)}

/* =====================================================================
   CLOSING CLAIM — back on the site's own canvas
   The blueprint is the demonstration. The conclusion belongs to Lestate
   Real, so it takes the warm near-white, the architectural grid and the
   type of every other section on the site.
   ===================================================================== */
.st-outro{position:relative;padding:var(--sec-pad) 0}
.st-outro-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:30px}
.st-outro-mark{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.st-outro-mark img{height:24px;width:auto;max-width:none;object-fit:contain}
.st-outro-claim{
  margin:0;font-size:12px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--blue-accent);
}
.st-outro-h{font-size:clamp(26px,3.2vw,42px);letter-spacing:-1.2px;max-width:20ch}

/* --- the four claims, as a specification, not as four cards ---
   These were rounded tiles with a fill, a border, a shadow and a hover
   lift: four of them in a row is the single most generic shape on the
   web, and on a site whose whole language is measured linework it read
   as decoration bolted on at the end. Same four claims, same icons, same
   order — set as a ruled table instead. One rule across the top, one
   hairline between columns, nothing enclosing anything. */
.st-benefits{
  list-style:none;margin:10px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--ink-5);
}
/* Two columns: the icon holds the first, the title and the body share
   the second. The icon used to sit above the title, which made it the
   first thing the eye met in each column and turned four sentences into
   four badges. */
/* align-content, because the four columns stretch to the tallest of
   them and an auto row in a stretched grid takes a share of the slack:
   without it the gap under a one line title grew to fill the column */
.st-benefits li{
  position:relative;display:grid;grid-template-columns:17px minmax(0,1fr);
  align-content:start;gap:9px 10px;padding:22px 30px 24px 0;
}
.st-benefits li+li{padding-left:30px}
.st-benefits li+li::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--hair);
}
.st-benefits svg{
  width:17px;height:17px;align-self:start;margin-top:2px;
  fill:none;stroke:var(--blue-accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.st-benefits b{font-size:14.5px;font-weight:700;letter-spacing:-.2px;line-height:1.3}
/* Four narrow columns: one of the titles wraps and the others do not, so
   the row of bodies came out ragged. Two lines of space for every title
   puts all four on the same line, which is what a table is for. Only at
   the four column width — wider cells below it do not need it. */
@media (min-width:1081px){ .st-benefits b{min-height:2.6em} }
/* the row's own body, not any span inside the heading — werkr marks the
   German terms in its titles with <span lang="de"> and they must stay
   part of the heading rather than drop to body grey */
.st-benefits li>span{grid-column:2;font-size:13.5px;line-height:1.6;color:var(--ink-3)}

/* =====================================================================
   THE HAND-OVER BAND — identical on all three pillar pages
   ---------------------------------------------------------------------
   Every one of these pages is one layer of a three layer group, and the
   band at the foot of it says so. It used to be a paragraph beside three
   buttons, and the buttons were different on every page, so the same
   idea arrived in a different shape each time and none of the shapes
   said anything.

   It is one object now: a claim, the two links that make sense from
   anywhere on the site, and the value chain itself as three columns
   with the current page marked. The wordmarks are the real lockups, on
   the light canvas where they are already dark ink and need no tinting.

   It is built the way the two engines on /lestate-real are built: a rule
   over each column and nothing around anything. The band used to be a
   rounded, filled, bordered panel with a filled cell inside it for the
   current page, which is the one shape on this site that still read as a
   template. The wordmark already says these are three separate things; a
   border and a shadow only said it a second time.
   ===================================================================== */
.st-next{position:relative;padding:0 0 var(--sec-pad)}
.st-next-band{display:flex;flex-direction:column;gap:38px}
.st-next-head{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,auto);
  gap:26px 48px;align-items:end;
}
.st-next-copy{display:flex;flex-direction:column;gap:12px}
.st-links{display:flex;gap:10px;flex-wrap:wrap}

/* --- the chain --- */
.st-chain{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;
}
/* the link and the you-are-here block are the same shape, so the row
   keeps its rhythm whichever of the three pages it is on */
.st-chain li{position:relative;display:flex}
.st-chain li>a,.st-chain li>div{
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:13px;
  padding:22px 0 4px;text-decoration:none;
  border-top:2px solid rgba(49,115,246,.32);
}
.st-chain img{
  height:19px;width:auto;max-width:none;display:block;
  object-fit:contain;object-position:left center;
}
.st-chain-role{font-size:14px;line-height:1.6;color:var(--ink-2)}
.st-chain-go{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;color:var(--blue-accent);
}
.st-chain-go svg{
  width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease);
}

/* --- the page you are standing on ---
   Its rule goes to full strength and a wash runs down from under it and
   fades out. A filled cell with an edge all the way round would put the
   box straight back; this marks the column without drawing one. */
.st-chain .here>div{border-top-color:var(--blue-accent)}
/* The wash hangs off the rule and falls away from it in every direction,
   so it has no edge of its own anywhere. It used to be a flat rectangle
   filling the cell, which cut three straight lines through the canvas and
   read as a box — the one shape this band exists to avoid. */
.st-chain .here>div::before{
  content:"";position:absolute;pointer-events:none;
  /* No sideways bleed: the third column is the last one in the row, and
     24px hanging off it was enough to push the whole page into a 4px
     horizontal scroll at tablet width. The gradient resolves to nothing
     well inside the cell, so it needs no room outside it. */
  left:0;right:0;top:0;bottom:-30px;
  background:radial-gradient(
    94% 118% at 50% 0%,
    rgba(49,115,246,.16) 0%,
    rgba(49,115,246,.10) 30%,
    rgba(49,115,246,.045) 56%,
    rgba(49,115,246,0) 82%
  );
}
.st-chain-here{
  margin-top:auto;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--blue-accent);
}
@media (hover:hover){
  .st-chain li>a:hover .st-chain-go svg{transform:translateX(3px)}
}

/* =====================================================================
   RESPONSIVE
   The pin stays on a phone — the site already pins the homepage hero and
   the dimensions rail there, and six vertical scenes without a pin lose
   the one thing this piece is for: the hand-over between frames. What
   changes is the composition: copy on top, drawing underneath.
   ===================================================================== */
@media (max-width:1080px){
  .st-grid{grid-template-columns:26px minmax(0,270px) minmax(0,1fr);gap:0 32px}

  /* two columns: the vertical hairline belongs to the right-hand cell
     only, and the second row gets a rule of its own */
  .st-benefits{grid-template-columns:1fr 1fr}
  .st-benefits li:nth-child(odd){padding-left:0}
  .st-benefits li:nth-child(odd)::before{content:none}
  .st-benefits li:nth-child(n+3)::after{
    content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair);
  }
}

@media (max-width:960px){
  .st-page{--st-step:104vh}

  .st-intro{padding:104px 0 84px;min-height:100svh}
  .st-intro-copy{gap:16px}
  .st-h1{font-size:clamp(29px,7.6vw,42px);letter-spacing:-1.2px}
  .st-h1 .line{display:inline;overflow:visible}
  .st-h1 .line>span{display:inline;transform:none;animation:none}
  .st-h1{animation:heroIn 1s var(--ease) .1s backwards}
  .st-intro-sub{font-size:15px}
  .st-intro-cta .btn{padding:12px 20px}
  .st-intro-scroll{display:none}
  .st-wordmark{height:21px}

  .st-grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr);
    gap:14px;padding:88px var(--pad) calc(18px + env(safe-area-inset-bottom,0px));
    align-items:start;
  }

  /* the rail lies down over the copy */
  .st-rail{
    flex-direction:row;justify-content:space-between;
    height:auto;width:100%;max-width:300px;align-self:start;
  }
  .st-rail li{width:22px;height:22px}
  .st-rail-n{font-size:8.5px}
  .st-rail-line{left:11px;right:11px;top:11px;bottom:auto;width:auto;height:1px;margin:0}
  .st-rail-line i{transform:scaleX(var(--p,0));transform-origin:left}

  .st-copy{align-self:start}
  .st-say{gap:9px}
  .st-say h3{font-size:clamp(21px,5.6vw,27px);letter-spacing:-.7px}
  .st-body{font-size:13.5px;line-height:1.55;max-width:46ch}
  .st-label{font-size:9.5px;letter-spacing:1.4px}

  .st-canvas{align-self:stretch;min-height:0}

  /* findings read underneath the drawing rather than beside it */
  .st-list{
    position:absolute;right:0;left:0;top:auto;bottom:0;width:100%;max-width:none;
    transform:none;display:grid;grid-template-columns:1fr 1fr;gap:5px;
  }
  .st-list li{padding:6px 8px}
  /* Beside the drawing these slide in from the right, from where the
     leader line points. Underneath it they sit in a two column grid
     flush with the canvas, so the same 20px slide carried the right hand
     column out past the edge of the screen for as long as the reveal
     ran. Under the drawing they rise instead. */
  .st-list li{transform:translate3d(0,calc((1 - var(--ck)) * 10px),0)}
  .st-list li::before{display:none}
  .st-list b{font-size:11px}
  .st-list span{font-size:8px}

  .st-outro-mark img{height:20px}
  .st-outro-claim{font-size:11px;letter-spacing:2px}
  .st-next-band{gap:30px}
  .st-next-head{grid-template-columns:1fr;gap:22px;align-items:start}
  .st-chain{gap:0 28px}
}

@media (max-width:640px){
  .st-benefits{grid-template-columns:1fr}
  .st-benefits li,.st-benefits li+li{padding-left:0}
  /* both selectors, and that is not belt and braces: `li+li::before` beats
     a plain `li::before` on specificity, so switching the divider off with
     the shorter one left a full height hairline down the left of every
     other stacked row, which read as a box drawn round it */
  .st-benefits li::before,.st-benefits li+li::before{content:none}
  .st-benefits li+li::after{
    content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair);
  }

  .st-links{flex-direction:column;align-self:stretch}
  .st-links .btn{width:100%;flex:none}

  .st-chain{grid-template-columns:1fr;gap:26px 0}
  .st-chain-go,.st-chain-here{margin-top:2px}
  .st-chain .here>div::before{bottom:-22px}
}

/* =====================================================================
   A SHORT FRAME
   ---------------------------------------------------------------------
   100svh is what the pin asks for, and on a phone that is still showing
   the browser's own chrome it is a good deal less than the screen. The
   grid's first two rows are auto — the rail and the statement — so when
   the frame shrinks they keep their height and the drawing in the third
   row is what gets pushed out of the bottom and clipped.

   Below this height the statement is set tighter instead, and the
   drawing keeps its room. Nothing is dropped: the same six statements
   and the same six scenes, in less type.
   ===================================================================== */
@media (max-width:960px) and (max-height:720px){
  .st-grid{padding-top:72px;gap:9px}
  .st-rail li{width:19px;height:19px}
  .st-rail-n{font-size:8px}
  .st-rail-line{left:9.5px;right:9.5px;top:9.5px}
  .st-say{gap:6px}
  .st-say h3{font-size:clamp(18px,4.9vw,23px);letter-spacing:-.5px}
  .st-body{font-size:12.5px;line-height:1.48}
  .st-label{font-size:8.5px;letter-spacing:1.2px}
}

/* A phone held sideways: the drawing gets what the copy does not use. */
@media (max-width:960px) and (max-height:520px){
  .st-grid{padding-top:78px;gap:9px}
  .st-say h3{font-size:19px}
  .st-body{display:none}
  .st-rail{max-width:240px}
}

/* On touch devices the blur budget is tight — the same softening the
   rest of the site applies to its glass. */
@media (hover:none){
  .st-card,.st-list li{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(13,25,38,.88);
  }
}

/* =====================================================================
   REDUCED MOTION
   No runway, no pin, no scroll driving: the six statements and the end
   state of each drawing, stacked, in the order they are meant to be read.
   Each page declares the `order` of its own layers; what is here is the
   part that is the same either way.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .st-h1 .line>span{transform:none}
  .st-rail-run i{animation:none;transform:none}

  .st-story{height:auto}
  .st-pin{position:static;height:auto;overflow:visible;display:block}
  .st-grid{display:flex;flex-direction:column;gap:0;padding:64px var(--pad);align-items:stretch}
  .st-rail{display:none}

  /* the copy and the canvas hand their children straight to the column,
     so a statement and the drawing it describes stay next to each other */
  .st-copy,.st-canvas{display:contents}
  /* align-self:center is what stacks the six statements in one grid cell
     above; in this column it would indent every one of them */
  .st-say{opacity:1;transform:none;max-width:60ch;margin:0 0 22px;align-self:flex-start}
  .st-say:nth-child(1){order:1}
  .st-say:nth-child(2){order:3}
  .st-say:nth-child(3){order:5}
  .st-say:nth-child(4){order:6}
  .st-say:nth-child(5){order:8}
  .st-say:nth-child(6){order:10}
  .st-layer{position:relative;height:min(58vh,420px);margin:0 0 52px;opacity:1}
  .st-list{--p:1;--vis:1}
  .st-list li{transform:none}
  .st-card{transform:none}
}