/* ============================================================================
   Substrate, built as if useportal.net built it.
   Painted world at both ends, quiet warm-paper studio in the middle,
   a 680px column of type, and nothing sitting at exactly 0 degrees.

   Palette translation: Portal's twilight blue sky becomes a Canterbury dusk,
   Portal's #f7f7f7 screen-grey becomes warm oat paper (sampled from the top
   row of footer.webp so the mountain rises out of the page), and Portal's
   iOS system blue becomes forest green with amber as the signal colour.
   ========================================================================= */

:root {
  /* surfaces */
  --oat:        #e7d7c1;   /* the page. sampled from footer.webp row 0 */
  --card:       #f8f2e7;   /* cards, toasts, pills */
  --card-lift:  #fffbf2;   /* the hover state. brightening only. */
  --well:       #ddcbb2;   /* recessed wells */
  --night:      #17130e;   /* the bottom of hero.webp */

  /* ink */
  --ink:        #12211c;
  --body:       rgba(18, 33, 28, 0.75);
  --meta:       rgba(18, 33, 28, 0.58);
  --rule:       rgba(18, 33, 28, 0.20);
  --rule-soft:  rgba(18, 33, 28, 0.12);

  /* colour, which exists only inside chips, illustrations and the accent */
  --forest:     #1d5c43;
  --forest-dp:  #14432f;
  --moss:       #5c7a4a;
  --amber:      #b9761c;
  --soil:       #7a5236;
  --sky-ink:    #2d5145;   /* sampled from the hero sky, used on the hero pill */

  /* on-art ink */
  --art-fg:     #f6efe2;
  --art-dim:    rgba(246, 239, 226, 0.72);
  --art-faint:  rgba(246, 239, 226, 0.45);
  --art-rule:   rgba(246, 239, 226, 0.20);

  /* metrics */
  --col:        680px;
  --heroH:      1140px;
  --panelTop:   636px;
  --panelW:     940px;
  --panelH:     468px;
  --vw:         100vw;
  --par:        0px;

  --ease:       cubic-bezier(0.16, 1, 0.30, 1);

  --font-serif: "DM Serif Display", "Perfectly Nineties", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-hand:  "Caveat", "Bradley Hand", cursive;
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--oat);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.32px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

::selection { background: rgba(29, 92, 67, 0.22); }

a { color: inherit; }

/* ---------------------------------------------------------------- type ---- */

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0;
}

h1, h2, h3, p { margin: 0; }

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 54px;   /* ratio 1.00, the reference's single most distinctive decision */
  letter-spacing: 0;
}

.section-head {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  letter-spacing: 0;
  color: var(--ink);
}

.feature-head {
  font-size: 18px;
  line-height: 23.4px;
  font-weight: 600;
  letter-spacing: -0.36px;
  color: var(--ink);
}

.body { font-size: 16px; line-height: 21.6px; color: var(--body); }
.body + .body { margin-top: 21px; }
.strong { font-size: 16px; line-height: 20.8px; font-weight: 600; color: var(--ink); }
.meta   { font-size: 14px; line-height: 18.2px; letter-spacing: -0.28px; }
.caption{ font-size: 12px; line-height: 15.6px; letter-spacing: -0.24px; color: var(--meta); }
.micro  { font-size: 11px; line-height: 13.2px; letter-spacing: 0; font-weight: 500; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ------------------------------------------------------------- shell ------ */

.col   { width: var(--col); margin-inline: auto; }
.wide  { width: min(100% - 44px, 1180px); margin-inline: auto; }

section { position: relative; }

/* the section separator, exactly as wide as the content column */
.hr {
  width: var(--col);
  margin: 0 auto;
  border: 0;
  border-top: 1px dashed var(--rule);
  opacity: 0.9;
}

/* ---------------------------------------------------------------- nav ----- */
/* not sticky. it scrolls away and never comes back, exactly like the reference */

.nav {
  position: absolute;
  z-index: 6;
  top: 0; left: 0; right: 0;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4.4vw, 64px);
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }

.mark {
  width: 34px; height: 34px;
  border-radius: 11px;
  background: linear-gradient(180deg, #2a6e51 0%, #17452f 100%);
  box-shadow: inset 0 1px 0 0 rgba(246, 239, 226, 0.45),
              0 0 0 1px rgba(23, 19, 14, 0.35),
              0 2px 6px rgba(23, 19, 14, 0.35);
  display: grid;
  place-items: center;
  flex: none;
}
.mark svg { width: 18px; height: 18px; display: block; }

.brand__word {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1;
  color: var(--art-fg);
  letter-spacing: 0;
}

.nav__links { display: flex; align-items: center; gap: 6px; }

.nav__link {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: var(--art-dim);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 50px;
  transition: color 0.24s var(--ease), background-color 0.24s var(--ease);
}
.nav__link:hover { color: var(--art-fg); }
.nav__link--on {
  background: rgba(246, 239, 226, 0.15);
  color: var(--art-fg);
}
.nav__link:focus-visible,
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.nav__burger { display: none; }

/* --------------------------------------------------------------- button --- */
/* the reference's button recipe: inset top light-catch, hairline ring, short
   drop. hover is a brightening only. no lift, no scale, no shadow growth. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background-color 0.28s var(--ease);
}

.btn--light {
  background: var(--card);
  color: var(--sky-ink);
  box-shadow: inset 0 1px 0 0 #fffdf8,
              0 0 0 1px rgba(23, 19, 14, 0.30),
              0 3px 2px 0 rgba(23, 19, 14, 0.22);
}
.btn--light:hover { background: var(--card-lift); }

.btn--forest {
  background: var(--forest);
  color: #f8f2e7;
  box-shadow: inset 0 1px 0 0 rgba(246, 239, 226, 0.34),
              0 0 0 1px rgba(18, 33, 28, 0.18),
              0 3px 2px 0 rgba(18, 33, 28, 0.10);
}
.btn--forest:hover { background: #23694d; }

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

.hero {
  position: relative;
  height: var(--heroH);
  overflow: hidden;
  background: var(--night);
}

.hero__art {
  position: absolute;
  inset: 0;
  background: var(--night) url("../../shared/assets/portal/hero.webp") center / cover no-repeat;
  transform: translate3d(0, var(--par), 0);
  will-change: transform;
}

/* the constellation. reads as stars at a glance, as a sensor graph on a
   second look. eight of the points breathe on independent loops. */
.hero__stars {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 46%;
  pointer-events: none;
}
.hero__stars svg { width: 100%; height: 100%; display: block; }

.hero__inner {
  position: relative;
  z-index: 3;
  text-align: center;
  padding-top: 178px;
}

.hero h1 {
  width: 740px;               /* breaks the 680 column by 30px each side */
  margin: 0 auto;
  color: var(--art-fg);
  text-shadow: 0 1px 24px rgba(10, 18, 14, 0.45);
}

.hero__lead {
  width: var(--col);
  margin: 42px auto 0;
  font-size: 16px;
  line-height: 21.6px;
  color: rgba(246, 239, 226, 0.88);
  text-shadow: 0 1px 16px rgba(10, 18, 14, 0.5);
}

.hero__cta { margin-top: 46px; }

/* ------------------------------------------------- the diagnostic panel --- */
/* the reference's best trick: the product surface's background IS the page's
   background, continued. the ridgeline runs straight through the panel edge. */

.panel {
  position: absolute;
  z-index: 4;
  top: var(--panelTop);
  left: 50%;
  width: var(--panelW);
  height: var(--panelH);
  margin-left: calc(var(--panelW) / -2);
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(246, 239, 226, 0.22),
              inset 0 1px 0 0 rgba(246, 239, 226, 0.22),
              0 40px 90px rgba(8, 14, 11, 0.55);
}

.panel__bg {
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--panelTop));
  width: var(--vw);
  height: var(--heroH);
  margin-left: calc(var(--vw) / -2);
  background: var(--night) url("../../shared/assets/portal/hero.webp") center / cover no-repeat;
  transform: translate3d(0, var(--par), 0);
  will-change: transform;
}

.panel__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 26, 20, 0.60) 0%, rgba(12, 26, 20, 0.84) 100%);
}

.panel__ui {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--art-fg);
}

.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--art-rule);
}
.panel__id { display: flex; align-items: center; gap: 10px; }
.panel__id .mark { width: 26px; height: 26px; border-radius: 8px; }
.panel__id .mark svg { width: 14px; height: 14px; }
.panel__title { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; }
.panel__sub { font-size: 12px; color: var(--art-faint); letter-spacing: -0.24px; }

.simchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 12px;
  border-radius: 50px;
  background: rgba(185, 118, 28, 0.20);
  box-shadow: inset 0 0 0 1px rgba(185, 118, 28, 0.55);
  color: #f0cd96;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.24px;
  white-space: nowrap;
}
.simchip i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  display: block;
  animation: breathe 2.6s ease-in-out infinite;
}

.panel__body { display: grid; grid-template-columns: 232px 1fr; min-height: 0; }

.panel__rail {
  border-right: 1px solid var(--art-rule);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.stage { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.stage__name { font-size: 13px; font-weight: 500; letter-spacing: -0.26px; color: var(--art-dim); }
.stage__pct  { font-size: 11px; color: var(--art-faint); font-variant-numeric: tabular-nums; }
.stage__track {
  grid-column: 1 / -1;
  height: 3px; border-radius: 2px;
  background: rgba(246, 239, 226, 0.14);
  overflow: hidden;
}
.stage__fill { height: 100%; width: 0; background: var(--moss); transition: width 0.9s linear; }
.stage--active .stage__name { color: var(--art-fg); }
.stage--active .stage__fill { background: var(--amber); }
.stage--done .stage__fill { width: 100% !important; background: var(--moss); }

.panel__feed { padding: 6px 0 0; overflow: hidden; }
.feed__head {
  display: grid;
  grid-template-columns: 74px 1fr 92px 78px;
  gap: 12px;
  padding: 8px 22px 9px;
  font-size: 11px;
  font-weight: 500;
  color: var(--art-faint);
  border-bottom: 1px solid var(--art-rule);
}
.feed__row {
  display: grid;
  grid-template-columns: 74px 1fr 92px 78px;
  gap: 12px;
  align-items: center;
  padding: 9px 22px;
  font-size: 12.5px;
  letter-spacing: -0.25px;
  border-bottom: 1px solid rgba(246, 239, 226, 0.08);
  color: var(--art-dim);
}
.feed__row b { font-weight: 600; color: var(--art-fg); font-variant-numeric: tabular-nums; }
.feed__row .dot {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
  margin-right: 7px; vertical-align: 1px; background: var(--moss);
}
.feed__row .dot--sig { background: var(--amber); }
.feed__ref { font-variant-numeric: tabular-nums; color: var(--art-faint); }
.feed__val { text-align: right; font-variant-numeric: tabular-nums; }

.panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  border-top: 1px solid var(--art-rule);
  font-size: 12px;
  color: var(--art-faint);
  letter-spacing: -0.24px;
}
.panel__foot b { color: var(--art-dim); font-weight: 500; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- ground --- */

.ground { background: var(--oat); }

.s-thesis  { padding: 128px 0 0; }
.s-toolkit { padding: 112px 0 0; }
.s-evidence{ padding: 112px 0 0; }
.s-deploy  { padding: 112px 0 0; }
.s-steps   { padding: 112px 0 0; }
.s-terms   { padding: 112px 0 0; }
.s-memo    { padding: 108px 0 0; }

.lead-block { margin-top: 40px; }
.lead-block .body + .body { margin-top: 40px; }

/* checklist ------------------------------------------------------------- */

.checklist {
  margin: 66px auto 0;
  width: var(--col);
  padding-left: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 27px;
}
.check { display: flex; align-items: center; gap: 14px; }
.chip {
  width: 36px; height: 36px; border-radius: 50%;
  flex: none;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.24);
}
.chip svg { width: 18px; height: 18px; display: block; }
.chip--forest { background: var(--forest); }
.chip--moss   { background: var(--moss); }
.chip--amber  { background: var(--amber); }
.chip--soil   { background: var(--soil); }
.check__label { font-size: 16px; font-weight: 600; line-height: 20.8px; color: var(--ink); }

.annotate {
  width: var(--col);
  margin: 14px auto 0;
  padding-left: 300px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.annotate svg { flex: none; margin-top: 2px; }
.annotate span {
  font-family: var(--font-hand);
  font-size: 21px;
  line-height: 20px;
  color: var(--forest);
  transform: rotate(-3deg);
  transform-origin: left top;
  display: block;
  max-width: 190px;
}

.rule-gap { padding: 84px 0 0; }
.rule-gap-lg { padding: 104px 0 0; }

/* alternating feature blocks -------------------------------------------- */
/* copy stays inside the 680 column. the visual hangs 120px outside it. */

.block {
  width: var(--col);
  margin: 0 auto;
  display: grid;
  gap: 46px;
  align-items: center;
}
.block--vl { grid-template-columns: 320px 1fr; }
.block--vr { grid-template-columns: 1fr 320px; }
.block__vis { width: 440px; position: relative; }
.block--vl .block__vis { margin-left: -120px; }
.block--vr .block__vis { margin-right: -120px; justify-self: end; }
.block__copy .body { margin-top: 14px; }
.block + .block { margin-top: 108px; }

/* the hand-dealt pile of layer cards */
.pile { display: flex; flex-direction: column; }
.pile__card {
  background: var(--card);
  border-radius: 16px;
  padding: 15px 18px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 13px;
  align-items: start;
  box-shadow: 0 0 0 1px rgba(18, 33, 28, 0.09),
              0 8px 20px rgba(18, 33, 28, 0.09);
  transition: background-color 0.28s var(--ease);
}
.pile__card:hover { background: var(--card-lift); }
.pile__card + .pile__card { margin-top: -6px; }
.pile__card .chip { width: 34px; height: 34px; }
.pile__t { display: block; font-family: var(--font-serif); font-size: 17px; line-height: 19px; }
.pile__d { display: block; font-size: 11.5px; line-height: 14.5px; color: var(--meta); margin-top: 4px; }

/* the notification loop, reborn as simulated diagnostic events */
.toastwrap { position: relative; height: 300px; }
.logcard {
  position: absolute;
  right: 0; bottom: 0;
  width: 380px;
  background: var(--card);
  border-radius: 18px;
  padding: 15px 18px 8px;
  box-shadow: 0 0 0 1px rgba(18, 33, 28, 0.09), 0 14px 34px rgba(18, 33, 28, 0.12);
  transform: rotate(-2deg);
}
.logcard__h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 9px; border-bottom: 1px dashed var(--rule-soft);
}
.logrow {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  padding: 8px 0;
}
.logrow + .logrow { border-top: 1px solid var(--rule-soft); }
.logrow__t { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -0.25px; }
.logrow__s { display: block; font-size: 11px; color: var(--meta); margin-top: 2px; }
.logrow__v { font-size: 12px; font-weight: 600; color: var(--forest); font-variant-numeric: tabular-nums; }

.toasts { position: absolute; left: 0; top: 0; width: 330px; height: 108px; }
.toast {
  position: absolute;
  inset: 0;
  background: var(--card);
  border-radius: 18px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  box-shadow: 0 0 0 1px rgba(18, 33, 28, 0.10), 0 18px 40px rgba(18, 33, 28, 0.16);
  opacity: 0;
  transition: opacity 0.42s var(--ease), transform 0.62s var(--ease);
}
.toast__t { display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.26px; }
.toast__s { display: block; font-size: 11.5px; color: var(--forest); font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.toast__time { font-size: 11px; color: var(--meta); font-variant-numeric: tabular-nums; }

.simchip--ground {
  background: rgba(185, 118, 28, 0.14);
  box-shadow: inset 0 0 0 1px rgba(185, 118, 28, 0.42);
  color: #8a5615;
  height: 24px;
  font-size: 11px;
}

/* the inline diagnostic surface, landscape visible inside it */
.mini {
  position: relative;
  height: 300px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(18, 33, 28, 0.16), 0 20px 44px rgba(18, 33, 28, 0.20);
}
.mini__bg {
  position: absolute; inset: 0;
  background: var(--night) url("../../shared/assets/portal/hero.webp") 16% 60% / 300% auto no-repeat;
}
.mini__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,26,20,0.34), rgba(12,26,20,0.80)); }
.mini__ui { position: absolute; inset: 0; padding: 16px 18px; color: var(--art-fg); display: flex; flex-direction: column; }
.mini__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini__title { font-size: 13px; font-weight: 600; letter-spacing: -0.26px; }
.mini__grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini__cell { background: rgba(246,239,226,0.07); border-radius: 12px; padding: 10px 12px; box-shadow: inset 0 0 0 1px rgba(246,239,226,0.12); }
.mini__k { font-size: 10.5px; color: var(--art-faint); }
.mini__v { font-family: var(--font-serif); font-size: 26px; line-height: 28px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.mini__rows { margin-top: auto; }
.mini__row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  padding: 7px 0; font-size: 11.5px; color: var(--art-dim);
  border-top: 1px solid rgba(246,239,226,0.10);
}
.mini__row b { color: var(--art-fg); font-weight: 500; font-variant-numeric: tabular-nums; }

/* the findings card, the "signed contract" of this page */
.findings {
  background: var(--card);
  border-radius: 20px;
  padding: 20px 22px 18px;
  box-shadow: 0 0 0 1px rgba(18, 33, 28, 0.09), 0 16px 38px rgba(18, 33, 28, 0.12);
  transform: rotate(1.2deg);
  transition: background-color 0.28s var(--ease);
}
.findings:hover { background: var(--card-lift); }
.findings__tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
  border-radius: 50px; background: rgba(29, 92, 67, 0.12);
  box-shadow: inset 0 0 0 1px rgba(29, 92, 67, 0.28);
  color: var(--forest-dp); font-size: 11px; font-weight: 600;
}
.findings__t { font-family: var(--font-serif); font-size: 20px; line-height: 21px; margin-top: 12px; }
.findings__list { margin: 14px 0 0; padding: 0; list-style: none; }
.findings__list li {
  font-size: 12.5px; line-height: 16.5px; color: var(--body);
  padding: 9px 0 9px 18px; position: relative;
}
.findings__list li + li { border-top: 1px solid var(--rule-soft); }
.findings__list li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
}
.findings__foot { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--rule); }
.sign {
  font-family: var(--font-hand); font-size: 26px; color: var(--forest-dp);
  transform: rotate(-2deg); display: inline-block;
}

/* evidence grid ---------------------------------------------------------- */

.evidence {
  width: var(--col);
  margin: 62px auto 0;
  padding-left: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
  row-gap: 52px;
  position: relative;
}
.evidence::before {
  content: "";
  position: absolute;
  left: calc(40px + (100% - 40px - 44px) / 2 + 22px);
  top: 6px; bottom: 6px;
  border-left: 1px dashed var(--rule);
}
.ev__chips { display: flex; margin-bottom: 15px; }
.ev__chips .chip { width: 44px; height: 44px; box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.24), 0 0 0 3px var(--oat); }
.ev__chips .chip + .chip { margin-left: -14px; }
.ev__v {
  font-family: var(--font-serif);
  font-size: 44px; line-height: 44px;
  color: var(--forest-dp);
  font-variant-numeric: tabular-nums;
}
.ev__l { font-size: 18px; line-height: 23.4px; font-weight: 600; letter-spacing: -0.36px; margin-top: 10px; }
.ev__f { font-size: 12px; line-height: 15.6px; color: var(--meta); margin-top: 7px; }
.ev__b { font-size: 16px; line-height: 21.6px; color: var(--body); margin-top: 10px; }

.closing-line { width: var(--col); margin: 54px auto 0; }

/* fanned deck ------------------------------------------------------------ */

.deckwrap { margin-top: 74px; overflow: hidden; }
.deck {
  width: 1180px;
  height: 460px;
  margin: 0 auto;
  position: relative;
}
.fan {
  position: absolute;
  top: 56px; left: 50%;
  width: 360px; height: 300px;
  margin-left: -180px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(18, 33, 28, 0.14), 0 26px 54px rgba(18, 33, 28, 0.24);
}
.fan__bg { position: absolute; inset: 0; }
.fan__veil { position: absolute; inset: 0; }
.fan__ui { position: absolute; inset: 0; padding: 15px 17px; color: var(--art-fg); display: flex; flex-direction: column; text-shadow: 0 1px 10px rgba(8, 16, 12, 0.75); }
.fan__meta {
  position: absolute; top: 15px; right: 17px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  text-align: right;
}
.fan__ctx {
  font-family: var(--font-serif);
  font-size: 18px; line-height: 20px;
  color: var(--art-fg);
  max-width: 190px;
}
.fan__rows { margin-top: auto; width: 66%; margin-left: auto; }
.fan__row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  padding: 6px 0; font-size: 11px; color: var(--art-dim);
  border-top: 1px solid rgba(246,239,226,0.12);
}
.fan__row b { color: var(--art-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.fan__pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px; border-radius: 50px;
  font-size: 10.5px; font-weight: 600;
  background: rgba(246,239,226,0.14);
  box-shadow: inset 0 0 0 1px rgba(246,239,226,0.22);
}
.fan__pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--moss); }
/* every reading on these cards is invented, so each card says so itself —
   the label under the deck is too far from a card read in isolation. */
.fan__sim {
  display: flex; align-items: center; gap: 6px;
  padding-top: 7px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  color: #f0cd96;
}
.fan__sim i { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); flex: none; }

.deck-label { width: var(--col); margin: 26px auto 0; display: flex; justify-content: center; }

/* timeline --------------------------------------------------------------- */

.timeline { width: var(--col); margin: 58px auto 0; position: relative; }
.step { display: grid; grid-template-columns: 36px 1fr; column-gap: 22px; position: relative; }
.step + .step { margin-top: 34px; }
.step__n {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--forest);
  color: #f8f2e7;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 600;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.22);
  position: relative; z-index: 2;
}
.step__rail {
  position: absolute;
  left: 17px; top: 40px; bottom: -34px;
  border-left: 1px dashed var(--rule);
}
.step:last-child .step__rail { display: none; }
.step__t { font-size: 16px; font-weight: 600; line-height: 20.8px; }
.step__when { font-size: 12px; color: var(--meta); margin-top: 3px; }
.step__b { font-size: 16px; line-height: 21.6px; color: var(--body); margin-top: 8px; }
.step__keep { font-size: 12.5px; line-height: 16.5px; color: var(--forest-dp); margin-top: 8px; }

/* terms ------------------------------------------------------------------ */

.terms-p { width: var(--col); margin: 40px auto 0; padding-left: 95px; }
.terms-p2 { width: var(--col); margin: 26px auto 0; padding-left: 20px; }
.terms-c { width: var(--col); margin: 22px auto 0; padding-left: 95px; }

/* memo ------------------------------------------------------------------- */

.memo-wrap { width: 640px; margin: 54px auto 0; }

.memo {
  width: 100%;
  background: var(--card);
  border-radius: 22px;
  padding: 44px 48px 30px;
  transform: rotate(-1.6deg) scale(0.985);
  box-shadow: 0 0 0 1px rgba(18, 33, 28, 0.08), 0 24px 60px rgba(18, 33, 28, 0.13);
}
.memo p { font-size: 16px; line-height: 24px; color: var(--body); }
.memo p + p { margin-top: 19px; }
.memo__hi { font-family: var(--font-serif); font-size: 26px; line-height: 27px; color: var(--ink); margin-bottom: 20px; }
.memo__foot { margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--rule); }
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.who__i {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: #f8f2e7;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.22);
  margin-bottom: 9px;
}
.who__n { font-size: 13px; font-weight: 600; letter-spacing: -0.26px; }
.who__r { font-size: 12px; color: var(--meta); margin-top: 2px; }

.stamp {
  position: absolute;
  right: 108px;
  margin-top: -18px;
  transform: rotate(-12deg);
  z-index: 3;
}

/* closing + footer + mountain -------------------------------------------- */

.closing { padding: 132px 0 0; text-align: center; }
.closing .mark { margin: 0 auto 28px; width: 44px; height: 44px; border-radius: 14px; }
.closing .mark svg { width: 22px; height: 22px; }
.closing h2 { width: 740px; margin: 0 auto; }
.closing__sub { width: 560px; margin: 26px auto 0; }
.closing__cta { margin-top: 46px; }

.footer { width: var(--col); margin: 118px auto 0; display: grid; grid-template-columns: 1fr 150px; gap: 40px; text-align: left; }
.footer p { font-size: 16px; line-height: 21.6px; color: var(--body); max-width: 400px; }
.footer p + p { margin-top: 17px; }
.footer a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 0.24s var(--ease); }
.footer a:hover { color: var(--forest); }
.footer__links { justify-self: end; text-align: right; display: flex; flex-direction: column; gap: 12px; }
.footer__links a { font-size: 16px; font-weight: 500; text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }
.footer__legal { width: var(--col); margin: 46px auto 0; text-align: left; }

.mountain {
  margin-top: 70px;
  width: 100%;
  display: block;
  background: var(--oat);
}
.mountain img { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------- entrances -- */
/* the reference's signature is rotation-based reveal, not fade-up.
   amplitudes stay tiny: 2 to 8 degrees, under 10px of translate. */

.rin { opacity: 0; }

/* ------------------------------------------------------------- keyframes -- */

@keyframes breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
@keyframes twinkle {
  0%, 100% { opacity: var(--o0); }
  50%      { opacity: var(--o1); }
}

.star { animation: twinkle var(--dur, 6s) ease-in-out var(--del, 0s) infinite; }

/* ------------------------------------------------------------- mobile ----- */

@media (max-width: 900px) {
  :root {
    --col: 100%;
    --heroH: 880px;
    --panelTop: 480px;
    --panelW: 100%;
    --panelH: 340px;
  }

  .col, .hr, .checklist, .annotate, .evidence, .timeline, .closing h2,
  .closing__sub, .footer, .footer__legal, .block, .deck-label,
  .closing-line, .terms-p, .terms-p2, .terms-c, .memo-wrap, .lead-block {
    width: auto;
    margin-inline: 22px;
  }
  .hr { margin-inline: 22px; }

  .display { font-size: 40px; line-height: 40px; }
  .section-head { font-size: 30px; line-height: 30px; }

  .nav { height: 72px; padding: 0 18px; }
  .brand__word { font-size: 21px; }
  .nav__links {
    position: fixed;
    inset: 0;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    padding: 0 22px;
    background: #101c16;
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease);
  }
  .nav__links[data-open="true"] { transform: translateY(0); }
  .nav__link { font-size: 26px; padding: 14px 18px; text-align: left; border-radius: 18px; }
  .nav__burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    border-radius: 50px;
    border: 0;
    background: rgba(246, 239, 226, 0.15);
    z-index: 41;
    cursor: pointer;
    position: relative;
  }
  .nav__burger span {
    display: block; width: 17px; height: 1.5px; border-radius: 2px;
    background: var(--art-fg);
    transition: transform 0.34s var(--ease), opacity 0.2s linear;
  }
  .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .hero__inner { padding-top: 128px; }
  .hero h1 { width: auto; margin-inline: 20px; }
  .hero__lead { width: auto; margin: 30px 22px 0; font-size: 15px; }
  .hero__cta { margin-top: 34px; }

  /* art-directed mobile crop: pull the mast and the amber horizon into frame */
  .hero__art, .panel__bg { background-position: 34% center; }
  .panel { left: 22px; right: 22px; width: auto; margin-left: 0; border-radius: 28px; }
  .panel__bg { width: 100vw; left: 50vw; margin-left: -50vw; }
  .panel__foot span:last-child { display: none; }
  .panel__body { grid-template-columns: 1fr; }
  .panel__rail { display: none; }
  .feed__head, .feed__row { grid-template-columns: 66px 1fr 74px; padding-inline: 16px; }
  .feed__head span:nth-child(4), .feed__row .feed__val { display: none; }
  #feed .feed__row:nth-child(n+6) { display: none; }
  .feed__row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .panel__bar { padding: 14px 16px; }
  .panel__foot { padding: 10px 16px; font-size: 11px; }

  .s-thesis { padding-top: 84px; }
  .s-toolkit, .s-evidence, .s-deploy, .s-steps, .s-terms, .s-memo { padding-top: 78px; }
  .rule-gap { padding-top: 58px; }
  .rule-gap-lg { padding-top: 68px; }
  .lead-block .body + .body { margin-top: 26px; }

  .checklist { grid-template-columns: 1fr; padding-left: 0; row-gap: 20px; margin-top: 46px; }
  .annotate { padding-left: 46px; margin-top: 18px; }

  .block, .block--vl, .block--vr { grid-template-columns: 1fr; gap: 30px; }
  .block__vis, .block--vl .block__vis, .block--vr .block__vis {
    width: 100%; margin: 0; justify-self: stretch;
  }
  .block__copy { order: -1; }
  .block + .block { margin-top: 72px; }
  .logcard { width: 86%; }
  .toasts { width: 78%; }
  .toastwrap { height: 260px; }

  .evidence { grid-template-columns: 1fr; padding-left: 0; row-gap: 40px; }
  .evidence::before { display: none; }
  .ev__v { font-size: 40px; line-height: 40px; }

  .deckwrap { margin-top: 48px; }
  .deck { width: auto; height: auto; margin-inline: 22px; display: flex; flex-direction: column; }
  .fan {
    position: relative; top: auto; left: auto; margin-left: 0;
    width: 100%; height: 250px;
    transform: none !important;
  }
  /* a loose hand-laid stack, but never overlapping: the cards' headings sit
     15px from their own top edge, so any negative margin bisects them. */
  .fan + .fan { margin-top: 16px; }
  .fan:nth-child(1) { transform: rotate(-1.6deg) !important; }
  .fan:nth-child(2) { transform: rotate(1.2deg) !important; }
  .fan:nth-child(3) { transform: rotate(-1deg) !important; }
  .fan:nth-child(4) { transform: rotate(1.6deg) !important; }

  .terms-p, .terms-c { padding-left: 26px; }
  .terms-p2 { padding-left: 0; }

  /* the tilted memo card is the one thing wider than the viewport at 390 —
     clip it to its own section rather than leaning on the page-level
     overflow-x:hidden. */
  .s-memo { overflow: hidden; }
  .memo { padding: 32px 26px 24px; transform: rotate(-1.2deg); }
  .who { grid-template-columns: 1fr; gap: 14px; }
  .stamp { right: 30px; }

  .closing { padding-top: 90px; }
  .footer { grid-template-columns: 1fr; gap: 26px; margin-top: 80px; }
  .footer__links { justify-self: start; text-align: left; flex-direction: row; gap: 22px; }
  .mountain { margin-top: 52px; }
}

@media (max-width: 1240px) and (min-width: 901px) {
  .deck { transform: scale(0.86); }
  .deckwrap { margin-top: 58px; }
}

/* --------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .rin { opacity: 1 !important; }
  .hero__art, .panel__bg { transform: none !important; }
  .toast { opacity: 1; }
  .toast:not(.toast--front) { display: none; }
}