/* ═══════════════════════════════════════════════════════════════════
   PREMIUM LAYER, APPLE-LED (2026-10-10) — additive visual refinement for the landing page.
   Nothing here changes content or page structure. To revert completely, delete the
   <link rel="stylesheet" href="/premium.css"> line in index.html.

   Measured on apple.com/macbook-pro/ (computed styles, not guesses):
   - pure black stage; tiles #161617 / #1d1d1f with NO border and 28-32px radius
   - text #f5f5f7 (never pure white), secondary text a warm neutral grey (#a1a1a6)
   - headlines semibold-tight: line-height about 1.05, tracking about -0.01em
   - one gradient-filled hero headline (light to dark in the product's colour)
   - fully round pill buttons (border-radius 980px)
   - glass ONLY on small floating controls and the nav: saturate(1.8) blur(20px)
   - 144px of vertical padding between sections (pages run 6,000 to 47,000px tall)
   - alternating light tiles on a dark page for rhythm
   Brand stays Ramtek: Fraunces serif and gold. Apple's structure, our identity.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ease-lux: cubic-bezier(.32, .72, 0, 1);      /* decelerating curve used by Apple sheets */
  --ease-out: cubic-bezier(.165, .84, .44, 1);
  --hair: rgba(255, 255, 255, .07);
  /* Warm neutral greys instead of blue-tinted ones (Apple's #f5f5f7 / #d2d2d7 / #a1a1a6) */
  --white: #f5f5f7;
  --text:  #d2d2d7;
  --mid:   #a1a1a6;
  --muted: #6e6e73;
  --border:  #242427;
  --border2: #333336;
  --ink:     #0f0f11;
  --surface: #151517;
  --radius2: 22px;
  --glass-bg: rgba(51, 51, 54, .42);
  --glass-blur: saturate(1.8) blur(20px);
}

/* 1 ─ GRAIN. Static film grain: removes banding on the large dark gradients and gives
   the black some tactility. 3.5% opacity, no animation. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* 2 ─ HEADLINES. Finer serif at display size, Apple-tight line height, and a
   gradient fill like Apple's hero headline: bright at the top, falling to warm
   silver; the italic words get a gold gradient. */
h1, .sec-title, .cta-band h2 {
  font-optical-sizing: none; font-variation-settings: 'opsz' 110;
  text-wrap: balance;
}
.hero-h1 { letter-spacing: -.008em; line-height: 1.04; }
.sec-title { letter-spacing: -.01em; line-height: 1.07; }
.cta-band h2 { letter-spacing: -.012em; }
.hero-h1, .sec-title, .cta-band h2 {
  background: linear-gradient(180deg, #ffffff 25%, #c9c4b6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-h1 em, .sec-title em, .cta-band h2 em {
  background: linear-gradient(95deg, #f6e3a1 0%, #d9b653 45%, #a8842e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-right: .04em;               /* italic overhang would otherwise be clipped */
}

/* 3 ─ TILES. Apple's tiles have no outline: a solid near-black fill, big radius, and
   only a whisper of top light. Our gold sheen and 3D tilt on hover stay. */
.bcard {
  border-radius: 28px; border-color: transparent;
  background: linear-gradient(180deg, #17171a, #101012);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.bcard::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .015) 40%, rgba(201, 168, 76, .07));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none; transition: opacity .5s var(--ease-lux);
}
.bcard:hover::after { background: linear-gradient(180deg, rgba(232, 196, 106, .5), rgba(255, 255, 255, .04) 45%, rgba(201, 168, 76, .2)); }
.bcard.feature { border-radius: 28px; }
.bcard { transition-timing-function: var(--ease-lux); }
.demo-window { border-radius: 28px; border-color: rgba(255, 255, 255, .08); }

/* 4 ─ EDITORIAL LISTS for the practice areas and trust points (desktop only; the
   mobile carousel is untouched). */
@media (min-width: 769px) {
  .practice-grid { gap: 0 3.25rem; }
  .practice-card {
    background: none; border: 0; border-radius: 0; position: relative;
    border-top: 1px solid var(--hair); padding: 1.7rem 0 2rem; transition: none;
  }
  .practice-card::after {
    content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 1px;
    background: linear-gradient(90deg, var(--gold2), rgba(201, 168, 76, 0));
    transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-lux);
  }
  .practice-card:hover::after { transform: scaleX(1); }
  .practice-card-icon { width: auto; height: auto; background: none; border: 0; margin-bottom: 1rem; justify-content: flex-start; }
  .practice-card-icon svg { width: 22px; height: 22px; stroke-width: 1.15; opacity: .9; }
  .practice-card h3 {
    font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 1.4rem;
    letter-spacing: -.01em; margin-bottom: .6rem;
    font-optical-sizing: none; font-variation-settings: 'opsz' 72;
  }
  .practice-card p { font-size: .85rem; line-height: 1.65; max-width: 36ch; color: var(--mid); transition: color .6s var(--ease-lux); }
  .practice-card:hover p { color: var(--text); }
}

/* 5 ─ PILL BUTTONS, like Apple's (radius 980px), with a gold-metal finish and one
   slow specular sweep on hover. */
.btn, .nav-cta { border-radius: 980px; }
.btn-gold {
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(110, 80, 15, .4), 0 1px 2px rgba(0, 0, 0, .5);
}
.btn-gold::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg); transition: left 1s var(--ease-lux); pointer-events: none;
}
.btn-gold:hover::after { left: 150%; }
.btn-gold:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(110, 80, 15, .4), 0 14px 40px rgba(201, 168, 76, .28), 0 2px 6px rgba(0, 0, 0, .5); }
.btn-ghost { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: rgba(255, 255, 255, .1); }

/* 6 ─ GLASS, used the way Apple uses it: only on small floating controls and the
   nav, over rich dark imagery. The hero notification chips become frosted pills. */
.hero-notif {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 50px rgba(0, 0, 0, .5);
}
nav.scrolled {
  background: rgba(22, 22, 23, .72);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 18px 50px rgba(0, 0, 0, .55);
}

/* 7 ─ PAPER TILE. Apple alternates a light tile into dark pages for rhythm; ours is the
   legal document itself, shown as the white paper it will be, on the black stage. */
.live-doc {
  background: linear-gradient(180deg, #f7f6f2, #efede7);
  border: 0; border-radius: 16px; padding: 22px 26px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.live-doc p, .live-doc div, .live-doc span { color: #2a2a2e; }
.live-doc-re { color: #131316 !important; border-bottom: 2px solid #b8923a; }
.live-doc b { color: #6b4e0c; }

/* 8 ─ SPACE. Apple leaves 144px between sections; ours was 112px. */
@media (min-width: 900px) { .section-wrap { padding: 9rem 0; } }
.section-wrap[style*="border-top"] { border-top-color: transparent !important; }
.section-wrap[style*="border-top"]::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1) 20%, rgba(201, 168, 76, .28) 50%, rgba(255, 255, 255, .1) 80%, transparent);
}

/* 9 ─ MOTION. One easing family, softer and slower reveals: content rises 20px and
   sharpens out of a slight blur. */
.reveal {
  transform: translateY(20px); filter: blur(5px);
  transition: opacity 1.05s var(--ease-lux), transform 1.05s var(--ease-lux), filter 1.05s var(--ease-lux);
}
.reveal.visible { filter: none; }
.reveal-delay-1 { transition-delay: .09s; }
.reveal-delay-2 { transition-delay: .18s; }
.reveal-delay-3 { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none; transform: none; }
  .btn-gold::after, .practice-card::after { display: none; }
}
@media (max-width: 768px) {
  body::after { opacity: .028; }
  .reveal { filter: none; transform: translateY(16px); }
  .bcard { border-radius: 22px; }
}

/* 10 ─ SCROLL STORY. Right under the hero: a tall track with a sticky stage holding the WHOLE
   Document Drafter screen (scaled to fit) and then the Contract Analyzer. Scroll position (no
   timers) types the matter, writes the letter, switches tools, flags the risks. Without JS or
   with reduced motion the track collapses and the finished state shows. */
.story { position: relative; }
.story-track { position: relative; height: 560vh; }
.story-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.story-sticky::before {
  content: ''; position: absolute; left: 62%; top: 52%; width: min(1100px, 92%); height: 620px;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 168, 76, .14), transparent 70%); filter: blur(30px);
}
.story-inner { position: relative; width: 100%; max-width: 1700px; margin: 0 auto; padding: 0 clamp(1rem, 2.5vw, 2.5rem);
  display: grid; grid-template-columns: minmax(0, 3.5fr) minmax(0, 8.5fr); gap: clamp(1.5rem, 3vw, 3.5rem); align-items: center; }
.story-caps { position: relative; min-height: 15rem; padding-left: clamp(.5rem, 3vw, 3rem); }
.story-cap { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease-lux), transform .8s var(--ease-lux); pointer-events: none; }
.story-cap.on { opacity: 1; transform: none; pointer-events: auto; }
.story-n { display: block; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold2); margin-bottom: 1rem; }
.story-cap h2 { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.04;
  letter-spacing: -.012em; font-variation-settings: 'opsz' 110; margin: 0 0 .9rem;
  background: linear-gradient(180deg, #fff 30%, #a1a1a6 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.story-cap p { color: var(--mid); font-size: 1.02rem; line-height: 1.5; max-width: 20rem; margin: 0; }
.story-proof { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.story-proof b { font-family: 'Fraunces', serif; font-weight: 300; font-size: 3rem; white-space: nowrap; line-height: 1; color: var(--gold2); font-variation-settings: 'opsz' 110; }
.story-proof span { color: var(--mid); font-size: .82rem; line-height: 1.4; max-width: 11rem; }
.story-dots { position: absolute; left: 0; top: -2.6rem; display: flex; gap: .5rem; }
.story-dots i { width: 22px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); transition: background .5s, width .5s var(--ease-lux); }
.story-dots i.on { background: var(--gold2); width: 38px; }

/* The scaled app window. Built at a fixed design size, scaled by script to the column width. */
.sw-fit { position: relative; width: 100%; }
.sw { position: absolute; left: 0; top: 0; width: 1040px; height: 640px; transform-origin: 0 0;
  border-radius: 22px; overflow: hidden; background: #0b0b0d; display: flex; flex-direction: column; text-align: left;
  box-shadow: 0 60px 140px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.1);
  font-family: 'Inter', system-ui, sans-serif; color: #e4e4e7; }
.sw-bar { height: 34px; flex: none; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #131315; border-bottom: 1px solid #1f1f22; }
.sw-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3d; }
.sw-bar em { margin: 0 auto; font-style: normal; font-size: 11px; color: #6e6e73; letter-spacing: .02em; transform: translateX(-24px); }
.sw-body { flex: 1; display: flex; min-height: 0; }
.sw-side { width: 178px; flex: none; padding: 18px 12px; border-right: 1px solid #1d1d20; background: #0e0e10; }
.sw-logo { display: flex; align-items: center; gap: 8px; font-family: 'Fraunces', serif; font-size: 15px; color: #f5f5f7; padding: 0 8px 16px; font-weight: 400; }
.sw-logo img { width: 20px; height: 20px; }
.sw-side small { display: block; font-size: 9px; letter-spacing: .16em; color: #6e6e73; padding: 6px 8px 8px; }
.sw-nav { display: block; font-size: 12px; color: #a1a1a6; padding: 7px 10px; border-radius: 8px; margin-bottom: 1px; border: 1px solid transparent; transition: background .4s, color .4s, border-color .4s; }
.sw-nav.on { background: rgba(201,168,76,.1); color: #f5f5f7; border-color: rgba(201,168,76,.35); }
.sw-main { flex: 1; position: relative; min-width: 0; }
.sw-view { position: absolute; inset: 0; padding: 22px 26px; opacity: 0; transition: opacity .6s var(--ease-lux); pointer-events: none; }
.sw[data-view="draft"] .sw-v-draft, .sw[data-view="analyze"] .sw-v-analyze { opacity: 1; }
.sw-h { font-family: 'Fraunces', serif; font-size: 22px; color: #f5f5f7; font-weight: 400; margin: 0 0 3px; }
.sw-sub { font-size: 11.5px; color: #6e6e73; margin: 0 0 16px; }
.sw-cols { display: grid; grid-template-columns: 296px 1fr; gap: 20px; height: calc(100% - 56px); }
.sw-card { background: #141416; border: 1px solid #1f1f22; border-radius: 14px; padding: 14px; }
.sw-lab { display: block; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #6e6e73; margin: 0 0 7px; }
.sw-types { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.sw-types b { font-weight: 600; font-size: 10.5px; text-align: center; padding: 8px 4px; border-radius: 8px; background: #0e0e10; border: 1px solid #222225; color: #c7c7cc; }
.sw-types b.on { background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.5); color: #f5f5f7; }
.sw-field { background: #0b0b0d; border: 1px solid #222225; border-radius: 9px; padding: 9px 10px; font-size: 11px; line-height: 1.5; color: #e4e4e7; min-height: 92px; margin-bottom: 12px; }
.sw-sel { display: flex; justify-content: space-between; background: #0b0b0d; border: 1px solid #222225; border-radius: 9px; padding: 8px 10px; font-size: 11px; color: #c7c7cc; margin-bottom: 8px; }
.sw-btn { display: block; text-align: center; margin-top: 12px; font-weight: 600; font-size: 12px; color: #1a1303; padding: 10px; border-radius: 980px;
  background: linear-gradient(135deg, #c9a84c, #e8c46a 55%, #c9a84c); }
.sw-btn.busy { filter: brightness(.8); }
.sw-out { background: #141416; border: 1px solid #1f1f22; border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; min-height: 0; }
.sw-outh { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 600; color: #f5f5f7; margin-bottom: 10px; }
.sw-outh span { font-weight: 400; font-size: 10px; color: #6e6e73; }
.sw-doc { font-size: 11.5px; line-height: 1.6; color: #d8d8dc; overflow: hidden; }
.sw-doc div { margin-bottom: 8px; }
.sw-doc .h { color: #f5f5f7; font-weight: 600; }
.sw .off { visibility: hidden; }
.sw-caret { display: inline-block; width: 1.5px; height: 1em; background: #e8c46a; vertical-align: -.12em; margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* analyzer */
.sw-clause { font-size: 11px; line-height: 1.55; color: #c7c7cc; margin-bottom: 10px; padding: 3px 6px; border-radius: 6px; transition: background .5s, box-shadow .5s; }
.sw-clause b { color: #f5f5f7; }
.sw-clause.hi.on { background: rgba(255,92,92,.16); box-shadow: inset 2px 0 #ff6b6b; }
.sw-clause.md.on { background: rgba(255,176,60,.15); box-shadow: inset 2px 0 #ffb03c; }
.sw-clause.lo.on { background: rgba(120,200,140,.13); box-shadow: inset 2px 0 #6fc58a; }
.sw-risk { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-lux), transform .6s var(--ease-lux); }
.sw-risk.on, .sw-flag.on { opacity: 1; transform: none; }
.sw-pill { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: 980px; text-transform: uppercase; }
.sw-pill.hi { background: rgba(255,92,92,.18); color: #ff8a8a; } .sw-pill.md { background: rgba(255,176,60,.18); color: #ffc062; } .sw-pill.lo { background: rgba(120,200,140,.16); color: #86d4a0; }
.sw-flag { background: #0e0e10; border: 1px solid #222225; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-lux), transform .6s var(--ease-lux); }
.sw-flag div { font-size: 11px; color: #c7c7cc; line-height: 1.45; margin-top: 6px; }
.sw-chips { position: absolute; right: 22px; bottom: 18px; display: flex; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-lux), transform .7s var(--ease-lux); }
.sw-chips.on { opacity: 1; transform: none; }
.sw-chip { background: #f5f5f7; color: #131316; font-size: 11px; font-weight: 600; padding: 8px 14px; border-radius: 980px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.sw-chip b { color: #8a6a1c; }
.story-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.07); }
.story-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold2)); }
.story-fine { text-align: center; font-size: .72rem; color: var(--muted); margin: -.5rem auto 0; padding: 0 1rem; }

/* No JS / reduced motion: no scroll lock, finished state, captions stacked. */
html:not(.story-on) .story-track { height: auto; padding: 5rem 0; }
html:not(.story-on) .story-sticky { position: static; height: auto; }
html:not(.story-on) .story-caps { min-height: 0; }
html:not(.story-on) .story-cap { position: static; opacity: 1; transform: none; margin-bottom: 1.4rem; }
html:not(.story-on) .story-dots, html:not(.story-on) .story-bar { display: none; }
html:not(.story-on) .sw-chips { opacity: 1; transform: none; }
html:not(.story-on) .sw[data-view] .sw-v-draft { opacity: 1; }
@media (max-width: 860px) {
  .story-track { height: 480vh; }
  .story-inner { grid-template-columns: 1fr; gap: 1rem; align-content: center; }
  .story-caps { min-height: 11rem; }
  .story-cap h2 { font-size: 1.9rem; margin-bottom: .4rem; }
  .story-cap p { font-size: .9rem; }
  .story-proof { margin-top: .6rem; } .story-proof b { font-size: 2.2rem; }
  .story-dots { display: none; }
  .sw { width: 520px; height: 660px; border-radius: 16px; }
  .sw-side, .sw-bar em { display: none; }
  .sw-view { padding: 16px 16px; }
  .sw-cols { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 12px; height: calc(100% - 52px); }
  .sw-types { display: none; } .sw-sel, .sw-btn, .sw-card > .sw-lab:first-of-type { display: none; }
  .sw-field { min-height: 0; margin-bottom: 0; font-size: 12px; }
  .sw-doc { font-size: 12px; }
  .sw-card { padding: 12px; }
}

/* 11 ─ DEADLINE LINE. A statute clock that fills as it scrolls through the screen. */
.dline { padding: 7rem 0 5rem; }
.dline-track { position: relative; max-width: 980px; margin: 4rem auto 0; padding: 0 var(--pad, 1.5rem); }
.dline-rail { position: relative; margin: 0 12.5%; height: 2px; background: rgba(255,255,255,.1); border-radius: 2px; }
.dline-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold2)); border-radius: 2px; box-shadow: 0 0 18px rgba(232,196,106,.5); }
.dline-nodes { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -7px; }
.dline-node { position: relative; text-align: center; padding-top: 1.7rem; opacity: .35; transition: opacity .6s var(--ease-lux); }
.dline-node::before { content: ''; position: absolute; top: 0; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: #1c1c1e; box-shadow: 0 0 0 1px rgba(255,255,255,.15); transition: background .5s, box-shadow .5s; }
.dline-node.on { opacity: 1; }
.dline-node.on::before { background: var(--gold2); box-shadow: 0 0 0 5px rgba(232,196,106,.18), 0 0 20px rgba(232,196,106,.6); }
.dline-node b { display: block; font-family: 'Fraunces', serif; font-weight: 300; font-size: 1.9rem; color: #f5f5f7; font-variation-settings: 'opsz' 110; }
.dline-node span { display: block; margin-top: .35rem; font-size: .88rem; line-height: 1.4; color: var(--mid); padding: 0 .5rem; }
.dline-node.auto b { color: var(--gold2); }
html:not(.story-on) .dline-fill { width: 100%; } html:not(.story-on) .dline-node { opacity: 1; }
@media (max-width: 700px) {
  .dline-nodes { grid-template-columns: 1fr; margin-top: 0; gap: 1.4rem; }
  .dline-rail { display: none; }
  .dline-node { text-align: left; padding: 0 0 0 2rem; }
  .dline-node::before { left: 0; top: .6rem; margin-left: 0; }
  .dline-node b { font-size: 1.5rem; }
}