/* ═══════════════════════════════════════════════════════════════════════════
   SiteLedger — product site
   Innestolabs, 2026

   Written from scratch rather than layered on the document stylesheet that
   came before it. The rules that hold the whole thing together:

     · One ground. The page is white. Colour is an event, not a wallpaper —
       a deep section appears twice in the whole page and each time it means
       something has changed.
     · One typeface. Inter, set tight and large. No display serif: the page
       should read as software, not as a brochure.
     · Air before ornament. Sections breathe at 140px. Nothing is decorated
       that could instead be given room.
     · Motion is a reveal, never a performance. Things arrive; they do not
       bounce, spin or slide across the viewport.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Grounds */
  --white:  #ffffff;
  --paper:  #fbfbfd;
  --mist:   #f4f5f7;
  --line:   #e6e7ec;
  --line-2: #d8dae1;

  /* Type */
  --ink:    #0f1c2e;
  --body:   #545e6c;
  --muted:  #8a8f98;

  /* Brand */
  --navy:   #1b4965;
  --blue:   #2f6ea5;
  --blue-d: #245780;
  --sky:    #9dc3e0;
  --pale:   #e8f0f8;

  --emerald:   #157f5f;
  --emerald-d: #0f6a4f;
  --emerald-l: #eaf5f0;

  --sand:   #b8935a;

  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shell:   min(1120px, 100% - 44px);
  --shell-w: min(1320px, 100% - 44px);
  --nav-h:   52px;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  overflow-x: clip;
}

img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--pale); color: var(--ink); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ── shell + section rhythm ───────────────────────────────────────────── */
.shell  { width: var(--shell);   margin-inline: auto; }
.shell-w{ width: var(--shell-w); margin-inline: auto; }

.sec { padding: clamp(80px, 11vw, 148px) 0; position: relative; }
.sec--mist  { background: var(--mist); }
.sec--paper { background: var(--paper); }
.sec--ink {
  background: var(--ink); color: rgba(255, 255, 255, 0.72);
  position: relative; overflow: hidden;
}
.sec--tight { padding: clamp(56px, 7vw, 92px) 0; }

/* ── type scale ───────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  margin: 0; color: var(--ink);
  font-weight: 640; letter-spacing: -0.035em; line-height: 1.05;
  font-feature-settings: 'ss01' 1, 'cv05' 1;
}
.d1 { font-size: clamp(42px, 7.4vw, 88px); letter-spacing: -0.042em; }
.d2 { font-size: clamp(32px, 4.8vw, 58px); }
.d3 { font-size: clamp(24px, 2.7vw, 34px); letter-spacing: -0.03em; }

.eyebrow {
  font-size: 12.5px; font-weight: 620; letter-spacing: 0.02em;
  color: var(--blue); margin: 0 0 18px;
}
.eyebrow--em { color: var(--emerald); }

.lede {
  font-size: clamp(17px, 1.55vw, 21px); line-height: 1.5; color: var(--body);
  letter-spacing: -0.014em; margin: 22px 0 0; max-width: 46ch;
}
.centred { text-align: center; }
.centred .lede { margin-inline: auto; }

.sec--ink h1, .sec--ink h2, .sec--ink h3 { color: #fff; }
.sec--ink .lede { color: rgba(255, 255, 255, 0.68); }
.sec--ink .eyebrow { color: var(--sky); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 24px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.012em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background 240ms var(--ease), border-color 240ms var(--ease),
              color 240ms var(--ease), transform 240ms var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.985); }
.btn--fill  { background: var(--ink); color: #fff; }
.btn--fill:hover { background: #1b3350; }
.btn--wa    { background: var(--emerald); color: #fff; }
.btn--wa:hover { background: var(--emerald-d); }
.btn--line  { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--ink); }
.btn--ghost { color: var(--blue); background: transparent; padding: 0 4px; height: auto; }
.btn--ghost:hover { color: var(--blue-d); }
.btn--ghost svg { transition: transform 240ms var(--ease); }
.btn--ghost:hover svg { transform: translateX(3px); }
.sec--ink .btn--line { border-color: rgba(255,255,255,0.24); color: #fff; }
.sec--ink .btn--line:hover { border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.centred .btn-row { justify-content: center; }

/* ── navigation ───────────────────────────────────────────────────────── */
/* A floating glass pill. Transparent while the page is at the top, then it
   lifts into a bar you can see the page through. It carries two tints, and
   which one is in play is decided by the section physically under it: a dark
   tint over a pale section only ever reads as a grey slab. */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 80;
  padding: 0; pointer-events: none;
  transition: padding 440ms var(--ease);
}
.nav.is-solid { padding: 11px 0; }

.nav__in {
  pointer-events: auto;
  height: var(--nav-h); width: var(--shell-w); margin-inline: auto;
  display: flex; align-items: center; gap: 28px;
  padding: 0; border-radius: 0;
  background: transparent; border: 1px solid transparent;
  transition: background 440ms var(--ease), border-color 440ms var(--ease),
              box-shadow 440ms var(--ease), padding 440ms var(--ease),
              border-radius 440ms var(--ease), height 440ms var(--ease);
}
.nav.is-solid .nav__in {
  height: 56px; padding: 0 10px 0 20px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: saturate(190%) blur(24px);
  backdrop-filter: saturate(190%) blur(24px);
  border-color: rgba(15, 28, 46, 0.08);
  box-shadow: 0 10px 34px rgba(15, 28, 46, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.nav.is-solid.is-dark .nav__in {
  background: rgba(15, 28, 46, 0.5);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 40px rgba(3, 10, 22, 0.32),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.nav.is-dark .nav__brand { color: #fff; }
.nav.is-dark .nav__brand em { color: var(--sky); }
.nav.is-dark .nav__links a { color: rgba(255, 255, 255, 0.72); }
.nav.is-dark .nav__links a:hover { color: #fff; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-solid .nav__in { background: rgba(255, 255, 255, 0.96); }
  .nav.is-solid.is-dark .nav__in { background: rgba(15, 28, 46, 0.94); }
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; font-size: 15.5px; font-weight: 620;
  letter-spacing: -0.02em; color: var(--ink); margin-right: auto;
}
.nav__brand svg { width: 20px; height: 19px; }
.nav__brand em { font-style: normal; color: var(--blue); font-weight: 480; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a {
  font-size: 13.5px; font-weight: 480; letter-spacing: -0.006em;
  color: #37414f; text-decoration: none; transition: color 200ms ease;
}
.nav__links a:hover { color: var(--ink); }
.nav__wa {
  display: inline-flex; align-items: center; gap: 7px; height: 34px;
  padding: 0 15px; border-radius: 999px; background: var(--emerald);
  color: #fff !important; font-size: 13.5px; font-weight: 600;
  text-decoration: none; transition: background 220ms var(--ease);
}
.nav__wa:hover { background: var(--emerald-d); }
@media (max-width: 860px) { .nav__links a:not(.nav__wa) { display: none; } }

/* ── hero ─────────────────────────────────────────────────────────────── */
/* The words on one side, the product on the other. A centred stack pushes the
   device below the fold on a laptop, which is the one thing the hero cannot
   afford to do. */
.hero {
  padding: calc(var(--nav-h) + clamp(48px, 6vw, 92px)) 0 clamp(54px, 7vw, 96px);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: min(900px, 80%); height: 620px; right: -8%; top: -12%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(47, 110, 165, 0.13), transparent 72%);
  filter: blur(30px);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr minmax(0, 0.98fr);
  gap: clamp(28px, 4.5vw, 76px); align-items: center;
}
.hero__lockup { display: flex; align-items: center; gap: 11px; }
.hero__lockup svg { width: 26px; height: 25px; flex: none; }
.hero__lockup span { font-size: 21px; font-weight: 620; letter-spacing: -0.028em; color: var(--ink); }
.hero__lockup span em { font-style: normal; font-weight: 480; color: var(--blue); }
.hero__motto {
  margin: 14px 0 0; font-size: 12.5px; font-weight: 620;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--navy);
}
.hero h1 { margin-top: 4px; }
.hero h1 span { color: var(--blue); }
.hero .lede { margin-top: 22px; max-width: 42ch; }
.hero .btn-row { margin-top: 32px; }

/* A transform does not change layout size, so a 400px device box was forcing
   the whole hero grid wider than a phone viewport and pushing the copy off the
   side. The box is given the scaled dimensions and the device is scaled into
   it from the top-left, which keeps layout and picture the same size. */
.hero__copy { min-width: 0; }
/* The window is drawn at 900px and scaled into whatever the column gives it.
   A wrapper carries the scaled size so layout and picture stay the same
   width, which is what stops a wide mock dragging the grid past the fold. */
.hero__device { min-width: 0; display: grid; place-items: center; }
.winbox {
  position: relative;
  width: calc(900px * var(--wk, 0.68));
  height: calc(var(--wh, 514px) * var(--wk, 0.68));
}
.winbox .macwin {
  position: absolute; top: 0; left: 0;
  transform: scale(var(--wk, 0.68)); transform-origin: top left;
}
@media (max-width: 1320px) { .hero__device { --wk: 0.6; } }
@media (max-width: 1120px) { .hero__device { --wk: 0.52; } }
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero .btn-row, .facts { justify-content: center; }
  .hero .lede { margin-inline: auto; }
  .hero__device { --wk: 0.62; margin-top: 20px; }
}
/* Below this the scale trick is abandoned: a 900px window at 0.33 is a
   smudge, so the window is rebuilt narrow instead and laid out normally. */
@media (max-width: 760px) {
  .hero__device .winbox { width: 100%; height: auto; display: grid; place-items: center; }
  .hero__device .macwin { position: static; transform: none; }
}

.facts {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-top: 30px;
}
.facts span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--body); padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
}
.facts svg { color: var(--blue); }

/* ── generic card grid ────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: 20px;
  padding: 30px 28px;
}
.card h3 { font-size: 19px; letter-spacing: -0.024em; }
.card p { margin: 10px 0 0; font-size: 15px; color: var(--body); }

/* ── the six places ───────────────────────────────────────────────────── */
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 46px; }
@media (max-width: 900px) { .notes { grid-template-columns: 1fr; } }
.note {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; display: flex; gap: 13px; align-items: flex-start;
}
.note svg { flex: none; color: var(--muted); margin-top: 2px; }
.note b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.018em; }
.note em { font-style: normal; display: block; margin-top: 3px; font-size: 13.5px; color: var(--muted); }

.oneline {
  margin-top: 40px; display: flex; align-items: center; justify-content: center;
  gap: 14px; text-align: center; flex-wrap: wrap;
}
.oneline b { font-size: clamp(19px, 2vw, 25px); color: var(--ink); font-weight: 620; letter-spacing: -0.028em; }

/* ── outcomes, with the lottie art ────────────────────────────────────── */
.outs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: 56px; }
@media (max-width: 900px) { .outs { grid-template-columns: 1fr; gap: 44px; } }
.out { text-align: center; }
.out__art {
  width: 100%; max-width: 260px; aspect-ratio: 1; margin: 0 auto 18px;
  display: grid; place-items: center;
}
.out__art > div { width: 100%; }
.out h3 { font-size: 20px; letter-spacing: -0.026em; }
.out p { margin: 8px 0 0; font-size: 15px; color: var(--body); max-width: 30ch; margin-inline: auto; }

/* ── the pinned story ─────────────────────────────────────────────────── */
#story { position: relative; background: var(--white); }
#story .rail { height: 560vh; height: 560svh; }
.pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
/* The surface is sized to the camera's frustum by wave.js and faded out at the
   horizon by scene fog, so it reaches every edge of the section at any width
   without a mask cropping it. */
#wave { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.beat {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  pointer-events: none; will-change: opacity, transform; z-index: 2;
}
.beat__in {
  height: 100%; width: var(--shell-w); margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(28px, 5vw, 88px);
  padding: calc(var(--nav-h) + 3vh) 0 5vh;
}
.beat__txt { flex: 1 1 400px; max-width: 460px; }
.beat__txt h2 { font-size: clamp(30px, 3.6vw, 46px); }
.beat__txt p { margin: 18px 0 0; font-size: clamp(15px, 1.4vw, 17.5px); color: var(--body); max-width: 40ch; }
.beat__art { flex: 0 1 auto; min-width: 0; height: 100%; display: grid; place-items: center; }
.fit { transform-origin: center center; will-change: transform; }

.beat--centre .beat__in { flex-direction: column; text-align: center; gap: clamp(22px, 3.5vh, 44px); }
/* A centred beat stacks, so the art box would otherwise size itself to the
   mock inside it and fit() would measure the mock against itself, always
   conclude it fits, and let it hang over the edge of the stage. */
.beat--centre .beat__art { width: 100%; align-self: stretch; }
.beat--centre .beat__txt { flex: none; max-width: 720px; }
.beat--centre .beat__txt p { margin-inline: auto; }

@media (max-width: 940px) {
  .beat__in { flex-direction: column; text-align: center; gap: clamp(18px, 3vh, 30px); }
  .beat__txt { flex: none; }
  .beat__txt p { margin-inline: auto; }
  .beat__art { width: 100%; height: auto; min-height: 0; }
}

/* the loop, as one beat */
.loop { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 20px); }
.loop__step { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.loop__dot {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--white); color: var(--muted);
  transition: all 420ms var(--ease);
}
.loop__dot svg { display: block; }
.loop__step.on .loop__dot {
  background: var(--ink); border-color: var(--ink); color: #fff; transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(15, 28, 46, 0.18);
}
.loop__step span { font-size: 12.5px; font-weight: 560; color: var(--muted); transition: color 420ms ease; }
.loop__step.on span { color: var(--ink); }
.loop__line { width: clamp(16px, 3vw, 46px); height: 1px; background: var(--line-2); }
.loop__say {
  margin-top: 34px; font-size: clamp(15px, 1.5vw, 18px); color: var(--body);
  min-height: 3em; max-width: 44ch; margin-inline: auto;
}

/* five things */
.five { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 980px; }
@media (max-width: 940px) { .five { width: 100%; grid-template-columns: repeat(2, 1fr); } .five > :last-child { grid-column: span 2; } }
.five__c {
  border: 1px solid var(--line); border-radius: 18px; padding: 22px 18px;
  background: var(--white); text-align: left;
}
.five__c i {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--pale); color: var(--blue); margin-bottom: 14px;
}
.five__c i svg { display: block; }
.five__c b { display: block; font-size: 15px; font-weight: 620; color: var(--ink); letter-spacing: -0.02em; }
.five__c span { display: block; margin-top: 5px; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* ── device ───────────────────────────────────────────────────────────── */
.phone {
  width: 400px; height: 830px; flex: none; position: relative;
  border-radius: 60px; padding: 10px;
  /* Burgundy, with the light catching the rail the way an anodised edge does. */
  background: linear-gradient(155deg, #8d4256 0%, #5c2233 24%, #3d121e 54%, #7a3549 100%);
  box-shadow: 0 50px 110px rgba(61, 18, 30, 0.26), 0 10px 26px rgba(15, 28, 46, 0.14);
}
.phone::before, .phone::after {
  content: ''; position: absolute; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #8f4759, #4d1b29);
}
.phone::before { left: -3px; top: 150px; height: 56px; box-shadow: 0 86px 0 #6f2c3d, 0 -76px 0 #6f2c3d; }
.phone::after  { right: -3px; top: 188px; height: 94px; }

.screen {
  width: 100%; height: 100%; border-radius: 51px; overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column; position: relative;
}
.island {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 112px; height: 32px; border-radius: 999px; background: #06080c; z-index: 6;
}
.island::after {
  content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #24405f, #05070c 70%);
}
.homebar {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 132px; height: 5px; border-radius: 999px; background: rgba(15, 28, 46, 0.24); z-index: 6;
}

/* Status bar: pushed clear of the island rather than tucked under it. */
.sbar {
  flex: none; height: 74px; padding: 32px 30px 0; background: var(--navy);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 620; color: #fff; letter-spacing: -0.01em;
}
.sbar span:last-child { display: flex; align-items: center; gap: 6px; }
.sbar svg { display: block; }

.app { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--paper); }
.app__top { background: var(--navy); color: #fff; padding: 10px 20px 18px; flex: none; }
.app__top small {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.app__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; }
.app__row h5 { margin: 0; font-size: 23px; font-weight: 640; letter-spacing: -0.03em; color: #fff; }
.app__sync {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  color: #8fe0c1; background: rgba(87, 184, 148, 0.18); padding: 4px 10px; border-radius: 999px;
}
.app__sync i { width: 6px; height: 6px; border-radius: 50%; background: #57b894; display: block; }

.app__body { flex: 1; min-height: 0; overflow: hidden; padding: 16px 16px 6px; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.act {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 13px; display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 1px 3px rgba(15, 28, 46, 0.05);
}
.act i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--pale); color: var(--blue); }
.act i svg { display: block; }
.act span { font-size: 14px; font-weight: 620; color: var(--ink); letter-spacing: -0.02em; line-height: 1.2; }
.act--go { background: var(--ink); border-color: var(--ink); }
.act--go i { background: rgba(255,255,255,0.12); color: var(--sky); }
.act--go span { color: #fff; }

.app__lab { margin: 20px 0 9px; font-size: 11px; font-weight: 680; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.arow {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(15, 28, 46, 0.04);
}
.arow b { display: block; font-size: 14px; font-weight: 620; color: var(--ink); letter-spacing: -0.02em; }
.arow em { font-style: normal; display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.tag { font-size: 10.5px; font-weight: 680; letter-spacing: 0.03em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.tag--go { background: var(--emerald-l); color: var(--emerald); }
.tag--wait { background: #fdf3e3; color: #9a6512; }
.tag--flat { background: var(--pale); color: var(--blue); }

.fld { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; margin-bottom: 9px; box-shadow: 0 1px 3px rgba(15,28,46,0.04); }
.fld b { display: block; font-size: 10.5px; font-weight: 680; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.fld em { font-style: normal; display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink); font-weight: 520; }
.submit { margin-top: 14px; background: var(--ink); color: #fff; border-radius: 14px; text-align: center; padding: 14px; font-size: 15px; font-weight: 620; letter-spacing: -0.02em; }

.tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 9px 6px 22px; background: rgba(255,255,255,0.92); border-top: 1px solid var(--line); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tab svg { display: block; color: var(--muted); }
.tab span { font-size: 10px; font-weight: 560; color: var(--muted); }
.tab.on svg, .tab.on span { color: var(--blue); }

/* ── laptop frame, for the office screen ──────────────────────────────── */
.laptop { width: 860px; }
.laptop__lid {
  border-radius: 16px; padding: 10px; background: linear-gradient(160deg, #cfd3da, #9ba2ad);
  box-shadow: 0 40px 90px rgba(15, 28, 46, 0.2);
}
.laptop__scr { border-radius: 8px; overflow: hidden; background: var(--paper); }
.laptop__base {
  height: 12px; margin: 0 auto; width: 104%; border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #b9bec7, #8d949f);
}
.laptop__base::after {
  content: ''; display: block; width: 90px; height: 4px; border-radius: 0 0 5px 5px;
  background: rgba(15,28,46,0.18); margin: 0 auto;
}

.win { display: grid; grid-template-columns: 168px 1fr; min-height: 470px; }
.win__side { background: var(--ink); padding: 16px 13px; }
.win__side h6 { margin: 0 0 16px; font-size: 12.5px; font-weight: 620; color: #fff; display: flex; align-items: center; gap: 8px; letter-spacing: -0.02em; }
.win__side h6 i { width: 19px; height: 19px; border-radius: 6px; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
.win__nav { display: flex; flex-direction: column; gap: 2px; }
.win__nav span { font-size: 12px; color: rgba(255,255,255,0.5); padding: 7px 10px; border-radius: 7px; }
.win__nav span.on { background: rgba(255,255,255,0.1); color: #fff; font-weight: 560; }
.win__main { padding: 18px 20px; }
.win__h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.win__h b { font-size: 15px; font-weight: 640; color: var(--ink); letter-spacing: -0.026em; }
.win__h small { font-size: 11.5px; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 14px; }
.kpi { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: var(--white); }
.kpi b { display: block; font-size: 21px; font-weight: 640; color: var(--ink); letter-spacing: -0.03em; line-height: 1.1; }
.kpi span { font-size: 10.5px; color: var(--muted); }
.wt { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); }
.wt th { text-align: left; font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 680; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.wt td { padding: 10px 12px; font-size: 12px; color: var(--body); border-bottom: 1px solid var(--line); }
.wt tr:last-child td { border-bottom: 0; }
.wt td b { font-weight: 620; color: var(--ink); }
.bar { width: 54px; height: 4px; border-radius: 99px; background: var(--line); display: inline-block; vertical-align: middle; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--blue); }

/* ── roles ────────────────────────────────────────────────────────────── */
.pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 44px; }
.pill {
  border: 1px solid var(--line-2); background: var(--white); border-radius: 999px;
  padding: 9px 18px; font: inherit; font-size: 14px; font-weight: 560; color: var(--body);
  cursor: pointer; transition: all 220ms var(--ease);
}
.pill:hover { border-color: var(--ink); color: var(--ink); }
.pill[aria-selected='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }

.role {
  margin-top: 26px; display: grid; grid-template-columns: 1fr 320px;
  gap: clamp(24px, 4vw, 60px); align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(28px, 4vw, 52px);
}
@media (max-width: 900px) { .role { grid-template-columns: 1fr; } }
.role h3 { font-size: clamp(22px, 2.4vw, 30px); }
.role p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.role ul { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.role li { display: flex; gap: 11px; font-size: 15.5px; color: var(--ink); }
.role li svg { flex: none; margin-top: 4px; color: var(--emerald); }
.role__card { background: var(--ink); border-radius: 20px; padding: 18px; }
.role__card small { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.role__card h6 { margin: 3px 0 14px; font-size: 16px; font-weight: 620; color: #fff; letter-spacing: -0.022em; }
.rrow { background: rgba(255,255,255,0.07); border-radius: 12px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.rrow b { display: block; font-size: 13px; font-weight: 600; color: #fff; letter-spacing: -0.018em; }
.rrow em { font-style: normal; display: block; margin-top: 1px; font-size: 11.5px; color: rgba(255,255,255,0.5); }

/* ── estimator ────────────────────────────────────────────────────────── */
.est { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--white); }
@media (max-width: 900px) { .est { grid-template-columns: 1fr; } }
.est__in { padding: clamp(26px, 3.4vw, 40px); border-right: 1px solid var(--line); }
@media (max-width: 900px) { .est__in { border-right: 0; border-bottom: 1px solid var(--line); } }
.est__out { padding: clamp(26px, 3.4vw, 40px); background: var(--ink); color: rgba(255,255,255,0.7); }

.f { margin-bottom: 26px; }
.f:last-child { margin-bottom: 0; }
.f__t { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.f__t span { font-size: 12px; font-weight: 620; color: var(--muted); letter-spacing: 0.01em; }
.f__t b { font-size: 19px; font-weight: 640; color: var(--ink); letter-spacing: -0.03em; }
.f__t b small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
/* The track is drawn three pixels high but the control is given a finger's
   worth of height, so a thumb on a phone lands on it. */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 99px; background: var(--line-2); }
input[type=range]::-moz-range-track { height: 3px; border-radius: 99px; background: var(--line-2); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -9.5px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 2px 8px rgba(15,28,46,0.18); cursor: grab; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(15,28,46,0.18); }
input[type=range]:focus-visible::-webkit-slider-thumb { border-color: var(--blue); box-shadow: 0 0 0 3px var(--pale); }
.scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 7px; }
.opts { display: flex; flex-wrap: wrap; gap: 7px; }
.opt { flex: 1 1 auto; min-width: 92px; border: 1px solid var(--line-2); background: var(--white); border-radius: 12px; padding: 10px 12px; font: inherit; text-align: left; cursor: pointer; transition: all 200ms var(--ease); }
.opt b { display: block; font-size: 14px; font-weight: 620; color: var(--ink); letter-spacing: -0.02em; }
.opt span { font-size: 11.5px; color: var(--muted); }
.opt:hover { border-color: var(--ink); }
.opt[aria-pressed=true] { background: var(--ink); border-color: var(--ink); }
.opt[aria-pressed=true] b { color: #fff; }
.opt[aria-pressed=true] span { color: rgba(255,255,255,0.62); }

.est__lab { font-size: 12px; font-weight: 620; color: var(--sky); }
.est__big { font-size: clamp(38px, 5vw, 56px); font-weight: 640; letter-spacing: -0.04em; color: #fff; margin: 8px 0 4px; line-height: 1; }
.est__rng { font-size: 13.5px; color: rgba(255,255,255,0.5); }
.est__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0; }
.est__meta div { border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 11px 13px; }
.est__meta b { display: block; font-size: 19px; font-weight: 620; color: #fff; letter-spacing: -0.03em; }
.est__meta span { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.split { display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin-bottom: 15px; background: rgba(255,255,255,0.12); }
.split i { display: block; transition: width 400ms var(--ease); }
.legend { display: flex; flex-direction: column; gap: 8px; }
.legend div { display: grid; grid-template-columns: 9px 1fr auto; gap: 10px; align-items: center; font-size: 13px; color: rgba(255,255,255,0.66); }
.legend em { width: 9px; height: 9px; border-radius: 3px; display: block; }
.legend b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.est__note { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 12.5px; color: rgba(255,255,255,0.45); line-height: 1.5; }

/* ── pricing + dates ──────────────────────────────────────────────────── */
.packs { position: relative; margin-top: 46px; }
.packs__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .packs__row { grid-template-columns: 1fr; } .packs__row > :nth-child(3) { display: none; } }
.pack { border: 1px solid rgba(255,255,255,0.16); border-radius: 20px; padding: 28px 26px; background: rgba(255,255,255,0.05); filter: blur(9px); opacity: 0.5; user-select: none; }
.pack h6 { margin: 0; font-size: 15px; font-weight: 620; color: #fff; }
.pack .amt { margin-top: 14px; font-size: 34px; font-weight: 640; color: #fff; letter-spacing: -0.035em; }
.pack ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pack li { font-size: 13px; color: rgba(255,255,255,0.6); }
.packs__veil { position: absolute; inset: 0; display: grid; place-items: center; }
.packs__card { max-width: 520px; text-align: center; background: rgba(15,28,46,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.16); border-radius: 20px; padding: 30px 34px; }
.packs__card svg { color: var(--sky); margin-inline: auto; }
.packs__card b { display: block; margin-top: 12px; font-size: 18px; font-weight: 620; color: #fff; letter-spacing: -0.024em; }
.packs__card p { margin: 10px 0 0; font-size: 14.5px; color: rgba(255,255,255,0.62); }

.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
@media (max-width: 700px) { .dates { grid-template-columns: 1fr; } }
.date { border: 1px solid rgba(255,255,255,0.16); border-radius: 18px; padding: 24px 26px; }
.date span { font-size: 11px; font-weight: 680; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sky); }
.date b { display: block; margin-top: 9px; font-size: 24px; font-weight: 640; color: #fff; letter-spacing: -0.03em; }
.date em { font-style: normal; display: block; margin-top: 7px; font-size: 13.5px; color: rgba(255,255,255,0.5); }

/* ── player ───────────────────────────────────────────────────────────── */
.player { margin-top: 46px; position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 90px rgba(15,28,46,0.16); background: var(--ink); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── footer ───────────────────────────────────────────────────────────── */
.foot { background: var(--paper); border-top: 1px solid var(--line); padding: 40px 0; font-size: 13px; color: var(--muted); }
.foot__in { width: var(--shell-w); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
.foot a { color: var(--blue); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* ── notice ───────────────────────────────────────────────────────────── */
.modal[hidden] { display: none !important; }
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(14px, 4vw, 24px); }
.modal__scrim { position: absolute; inset: 0; background: rgba(15, 28, 46, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade 300ms ease both; }
.modal__card { position: relative; width: min(470px, 100%); background: var(--white); border-radius: 24px; padding: clamp(28px, 4vw, 40px); box-shadow: 0 50px 110px rgba(15,28,46,0.3); animation: pop 420ms var(--ease-out) both; max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); overflow-y: auto; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.985) } to { opacity: 1; transform: none } }
.modal__x { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--mist); color: var(--body); display: grid; place-items: center; cursor: pointer; transition: background 200ms ease; }
.modal__x:hover { background: var(--line); }
.modal__card h2 { font-size: 27px; letter-spacing: -0.032em; margin-top: 14px; }
.modal__card > p { margin: 12px 0 0; font-size: 15px; color: var(--body); }
.modal__list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.modal__list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink); }
.modal__list svg { flex: none; margin-top: 3px; color: var(--emerald); }
.modal__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.modal__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 620; letter-spacing: 0.02em; color: var(--blue); background: var(--pale); padding: 6px 13px; border-radius: 999px; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); display: block; animation: blip 2.6s ease-in-out infinite; }
@keyframes blip { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }
body.locked { overflow: hidden; }

/* ── reveal ───────────────────────────────────────────────────────────── */
.js .rv { opacity: 0; transform: translateY(18px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.js .rv-d1.in { transition-delay: 90ms; }
.js .rv-d2.in { transition-delay: 180ms; }
.js .rv-d3.in { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .js .rv { opacity: 1 !important; transform: none !important; }
  #story .rail { height: auto; }
  .pin { position: static; height: auto; display: block; }
  .beat { position: static; opacity: 1 !important; visibility: visible !important; padding: 56px 0; }
  .beat__in { height: auto; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   THE SCATTER
   The story opens with the six places a day currently lives, thrown across
   the frame, and then collapses them into the one record that replaces them.
   Positions are authored wide and squeezed to the viewport by script.
   ═══════════════════════════════════════════════════════════════════════════ */
.scatter { position: relative; width: 1060px; height: 430px; }
.snote {
  position: absolute; left: 50%; top: 50%; width: 226px; padding: 15px 17px;
  border-radius: 16px; background: var(--white);
  border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(15, 28, 46, 0.1);
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  will-change: transform, opacity;
}
.snote svg { flex: none; margin-top: 2px; color: var(--muted); }
.snote b { display: block; font-size: 14px; font-weight: 620; color: var(--ink); letter-spacing: -0.018em; }
.snote em { font-style: normal; display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.35; }

.sone {
  position: absolute; left: 50%; top: 50%; width: 400px;
  transform: translate(-50%, -50%); text-align: left; opacity: 0;
  background: var(--ink); border-radius: 20px; padding: 24px 26px;
  box-shadow: 0 36px 80px rgba(15, 28, 46, 0.3);
  will-change: transform, opacity;
}
.sone h5 { margin: 0; font-size: 15px; font-weight: 620; color: #fff; letter-spacing: -0.02em; }
.sone small { display: block; margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.sone div {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
  color: rgba(255, 255, 255, 0.88); padding: 10px 12px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.07); margin-top: 8px;
}
.sone svg { color: var(--emerald-l); flex: none; }

/* ── the film, in a dialog ─────────────────────────────────────────────── */
.film__card {
  position: relative; width: min(1080px, 100%);
  background: var(--ink); border-radius: 22px; overflow: hidden;
  box-shadow: 0 50px 120px rgba(15, 28, 46, 0.4);
  animation: pop 420ms var(--ease-out) both;
}
.film__frame { position: relative; width: 100%; aspect-ratio: 16/9; }
.film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__x {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; place-items: center; transition: background 200ms ease;
}
.film__x:hover { background: rgba(255, 255, 255, 0.28); }

/* ── the role screen, drawn as the app rather than a list ──────────────── */
.rolescreen {
  border-radius: 22px; overflow: hidden; background: var(--paper);
  border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(15, 28, 46, 0.12);
}
.rolescreen__top { background: var(--navy); padding: 16px 18px 18px; }
.rolescreen__top small {
  font-size: 10.5px; font-weight: 620; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
.rolescreen__top h6 { margin: 4px 0 0; font-size: 17px; font-weight: 640; color: #fff; letter-spacing: -0.026em; }
.rolescreen__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.rline {
  background: var(--white); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.rline b { display: block; font-size: 14px; font-weight: 620; color: var(--ink); letter-spacing: -0.02em; }
.rline em { font-style: normal; display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   WINDOWS
   The product is shown as software rather than as hardware: a desktop window
   for the office screens, an app window for the site ones. No bezels, no
   titanium, nothing for the eye to spend time on that is not the product.
   ═══════════════════════════════════════════════════════════════════════════ */
.macwin {
  width: 900px; border-radius: 14px; overflow: hidden; background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 44px 90px rgba(15, 28, 46, 0.16), 0 4px 14px rgba(15, 28, 46, 0.07);
}
.macwin__bar {
  height: 42px; flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 15px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fbfcfd, #eef0f4);
}
.macwin__dots { display: flex; gap: 7px; flex: none; }
.macwin__dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.macwin__dots i:nth-child(1) { background: #ec6a5e; }
.macwin__dots i:nth-child(2) { background: #f4bf50; }
.macwin__dots i:nth-child(3) { background: #61c454; }
.macwin__url {
  flex: 1; text-align: center; font-size: 11.5px; color: var(--muted);
  letter-spacing: -0.006em; padding-right: 46px;
}

/* The app window: the phone's screen, without the phone. */
.ioswin {
  width: 380px; border-radius: 30px; overflow: hidden; background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 36px 80px rgba(15, 28, 46, 0.15), 0 4px 12px rgba(15, 28, 46, 0.06);
  display: flex; flex-direction: column;
}
.ioswin__in { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* No island to clear any more, so the status bar sits at a normal height. */
.ioswin .sbar { height: 46px; padding: 14px 22px 0; }
.ioswin .tabs { padding: 9px 6px 14px; }

/* ── the role panel changes with a movement, not a jump ────────────────── */
.role.is-swap > div:first-child { animation: roleIn 520ms var(--ease-out) both; }
.role.is-swap .rolescreen { animation: roleIn 560ms var(--ease-out) 70ms both; }
.role.is-swap .role li { animation: roleIn 460ms var(--ease-out) both; }
.role.is-swap .role li:nth-child(1) { animation-delay: 120ms; }
.role.is-swap .role li:nth-child(2) { animation-delay: 180ms; }
.role.is-swap .role li:nth-child(3) { animation-delay: 240ms; }
.role.is-swap .rline { animation: roleIn 460ms var(--ease-out) both; }
.role.is-swap .rline:nth-child(1) { animation-delay: 180ms; }
.role.is-swap .rline:nth-child(2) { animation-delay: 230ms; }
.role.is-swap .rline:nth-child(3) { animation-delay: 280ms; }
.role.is-swap .rline:nth-child(4) { animation-delay: 330ms; }
@keyframes roleIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .role.is-swap, .role.is-swap * { animation: none !important; }
}

/* ── footer and the closing call ──────────────────────────────────────── */
#talk { padding: clamp(72px, 9vw, 116px) 0; }
#talk .btn-row { margin-top: 32px; }

.foot__in { align-items: center; }
@media (max-width: 760px) {
  .foot { text-align: center; }
  .foot__in { flex-direction: column; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SMALL SCREENS
   The rule here: reflow, never shrink. fit() will happily scale a 900px
   window down to 0.35 to make it "fit" a phone, at which point the product is
   a grey smudge. Below 760px the mocks are given layouts they can actually be
   read at, so the scale factor stays near 1.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* The office window drops its sidebar and its two least useful columns
     rather than being scaled into illegibility. */
  .macwin { width: min(100%, 420px); }
  .win { grid-template-columns: 1fr; min-height: 0; }
  .win__side { display: none; }
  .win__main { padding: 14px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .wt th:nth-child(3), .wt td:nth-child(3),
  .wt th:nth-child(4), .wt td:nth-child(4) { display: none; }
  .wt th, .wt td { padding: 9px 10px; }

  /* The app window at its own size, not a scaled-down copy. */
  .ioswin { width: min(100%, 330px); border-radius: 26px; }
  .ioswin .sbar { padding: 12px 18px 0; height: 42px; }
  .app__top { padding: 8px 16px 14px; }
  .app__row h5 { font-size: 20px; }
  .app__body { padding: 13px 13px 4px; }
  .acts { gap: 8px; }
  .act { padding: 12px 11px; gap: 16px; border-radius: 14px; }
  .act i { width: 32px; height: 32px; }
  .act span { font-size: 13px; }
  .arow, .fld { padding: 11px 12px; border-radius: 12px; }
  .tabs { padding: 8px 4px 12px; }
  .tab span { font-size: 9.5px; }

  /* Six notes in a grid beats six notes overlapping in a 330px box. */
  .snote { width: 158px; padding: 11px 12px; border-radius: 13px; gap: 8px; }
  .snote svg { width: 15px; height: 15px; }
  .snote b { font-size: 12px; }
  .snote em { font-size: 10.5px; }
  .sone { width: min(100%, 320px); padding: 18px 20px; }
  .sone h5 { font-size: 13.5px; }
  .sone div { font-size: 12px; padding: 8px 10px; }

  /* The loop, without the connecting rule it has no room for. */
  .loop { gap: 4px; }
  .loop__line { display: none; }
  .loop__dot { width: 44px; height: 44px; }
  .loop__dot svg { width: 17px; height: 17px; }
  .loop__step span { font-size: 10px; }
  .loop__say { margin-top: 24px; font-size: 14.5px; }

  .five { width: 100%; }
  .beat__txt h2 { font-size: clamp(24px, 6.4vw, 30px); }
  .beat__txt p { font-size: 14.5px; }
}

/* A phone on its side has no room for a pinned story. Rather than scale
   everything into nothing, the section stops pinning and reads as ordinary
   stacked blocks. The script checks the pin's computed position and leaves it
   alone when this applies. */
@media (max-height: 560px) and (orientation: landscape) {
  #story .rail { height: auto; }
  .pin { position: static; height: auto; display: block; }
  .beat {
    position: static; opacity: 1 !important; visibility: visible !important;
    transform: none !important; padding: 48px 0;
  }
  .beat__in { height: auto; padding: 0; }
  .fit { transform: none !important; }
  .scatter { position: static; height: auto; display: grid; gap: 8px; width: 100%; }
  .snote { position: static; transform: none !important; opacity: 1 !important; width: auto; }
  .sone { position: static; transform: none !important; opacity: 1 !important; width: auto; margin-top: 12px; }
  #wave { display: none; }
}

/* ── the menu, for widths where the links do not fit ───────────────────── */
.nav__menu {
  display: none; flex: none; width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--white);
  cursor: pointer; padding: 0; place-items: center; color: var(--ink);
  transition: background 200ms ease, border-color 200ms ease;
}
.nav__menu svg { display: block; }
.nav.is-dark .nav__menu { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); color: #fff; }
.nav__panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(260px, calc(100vw - 32px));
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(190%) blur(22px); backdrop-filter: saturate(190%) blur(22px);
  border: 1px solid rgba(15, 28, 46, 0.1); border-radius: 18px; padding: 8px;
  box-shadow: 0 18px 50px rgba(15, 28, 46, 0.16);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.nav__panel[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
.nav__panel a {
  display: block; padding: 11px 14px; border-radius: 12px;
  font-size: 15px; font-weight: 520; color: var(--ink); text-decoration: none;
}
.nav__panel a:hover { background: var(--mist); }

@media (max-width: 860px) {
  .nav__in { position: relative; gap: 14px; }
  .nav__menu { display: grid; }
}

/* ── short phones ──────────────────────────────────────────────────────
   A 667pt phone gives the pinned stage about 340pt of height for a mock that
   wants 590. Rather than scale the product to 58% and call it fitted, the
   beat gives back its padding and the app window gives back its chrome.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) and (max-height: 740px) {
  .beat__in { padding: calc(var(--nav-h) + 1.5vh) 0 2.5vh; gap: 14px; }
  .beat--centre .beat__in { gap: 16px; }
  .beat__txt h2 { font-size: clamp(21px, 5.8vw, 27px); }
  .beat__txt p { margin-top: 10px; font-size: 13px; line-height: 1.5; }

  .ioswin { border-radius: 22px; }
  .ioswin .sbar { height: 34px; padding: 9px 16px 0; }
  .app__top { padding: 6px 14px 10px; }
  .app__row h5 { font-size: 18px; }
  .app__body { padding: 10px 10px 2px; }
  .acts { gap: 6px; }
  .act { padding: 9px 10px; gap: 12px; border-radius: 12px; }
  .act i { width: 28px; height: 28px; }
  .arow, .fld { padding: 9px 11px; border-radius: 11px; }
  .ioswin .tabs { padding: 6px 4px 9px; }

  .macwin__bar { height: 34px; }
  .win__main { padding: 11px; }
  .kpis { gap: 7px; margin-bottom: 10px; }
  .wt th { padding: 7px 9px; }
  .wt td { padding: 7px 9px; }

  .loop__dot { width: 38px; height: 38px; }
  .loop__say { margin-top: 18px; font-size: 13.5px; }
  .snote { padding: 9px 11px; }
  .sone { padding: 15px 17px; }
  .sone div { margin-top: 6px; }
}

/* Shorter than that and the pin gives up: the story reads as stacked blocks,
   the same escape the landscape case takes. Six hundred points is where the
   stage stops being able to hold a phone screen at a readable size. */
@media (max-height: 600px) {
  #story .rail { height: auto; }
  .pin { position: static; height: auto; display: block; }
  .beat {
    position: static; opacity: 1 !important; visibility: visible !important;
    transform: none !important; padding: 44px 0;
  }
  .beat__in { height: auto; padding: 0; }
  .fit { transform: none !important; }
  .scatter { position: static; height: auto !important; width: 100% !important; display: grid; gap: 8px; }
  .snote, .sone { position: static; transform: none !important; opacity: 1 !important; width: auto; }
  .sone { margin-top: 12px; }
  #wave { display: none; }
}