@layer tokens, base, layout, components, motion, responsive;



@layer tokens {

  
  @font-face {
    font-family: "Archivo Fallback";
    src: local("Arial"), local("Helvetica Neue");
    size-adjust: 99%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%;
  }
  @font-face {
    font-family: "Mono Fallback";
    src: local("Consolas"), local("Menlo"), local("DejaVu Sans Mono");
    size-adjust: 106%; ascent-override: 100%; descent-override: 24%; line-gap-override: 0%;
  }

  :root {
    
    --lt-field:   #E9EBED;   
    --lt-field-2: #DFE2E5;
    --lt-paper:   #F7F8F9;
    --lt-ink:     #111417;   
    --lt-ink-2:   #4A5158;   
    --lt-line:    #C6CBD0;
    --lt-line-2:  #DADEE1;
    --lt-storm:   #8A1FD0;   
    --lt-storm-wash: rgb(138 31 208 / 0.10);

    --dk-field:   #0C0E10;
    --dk-field-2: #15181B;
    --dk-paper:   #14171A;
    --dk-ink:     #F2F4F5;   
    --dk-ink-2:   #A8B0B6;   
    --dk-line:    #2A3036;
    --dk-line-2:  #21262B;
    --dk-storm:   #BE6BFF;   
    --dk-storm-wash: rgb(190 107 255 / 0.10);

    
    --field:      var(--lt-field);
    --field-2:    var(--lt-field-2);
    --paper:      var(--lt-paper);
    --ink:        var(--lt-ink);
    --ink-2:      var(--lt-ink-2);
    --line:       var(--lt-line);
    --line-2:     var(--lt-line-2);
    --storm:      var(--lt-storm);
    --storm-wash: var(--lt-storm-wash);

    
    --page-bg: var(--lt-field);

    color-scheme: light;

    
    --face-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
    --face-mono: "JetBrains Mono", "Mono Fallback", ui-monospace, monospace;

    --t-micro:  0.6875rem;   
    --t-small:  0.8125rem;   
    --t-body:   1.0625rem;   
    --t-lead:   1.25rem;     
    --t-h3:     1.5rem;      
    --t-h2:     clamp(2rem, 5.2vw, 3.5rem);
    --t-h1:     clamp(2.5rem, 7vw, 5.25rem);
    --t-huge:   clamp(2.5rem, 8vw, 6rem);
    --t-price:  clamp(2.25rem, 4vw, 3rem);

    --lh-tight: 1.02;
    --lh-body:  1.6;
    --tr-micro: 0.16em;
    --tr-tight: -0.025em;

    
    --s-1:   4px;   --s-2:   8px;   --s-3:  12px;   --s-4:  16px;
    --s-5:  24px;   --s-6:  32px;   --s-7:  48px;   --s-8:  64px;
    --s-9:  96px;   --s-10:128px;   --s-11:192px;

    --gutter: clamp(var(--s-5), 5vw, var(--s-9));
    --shell: 1240px;

    
    --ease:    cubic-bezier(0.16, 1, 0.3, 1);
    --t-tap:    120ms;
    --t-reveal: 300ms;
    --t-ceil:   400ms;

    
    --hair: 1px;
    --r:      3px;
    --r-pill: 999px;

    
    --lift-1: 0 10px 24px -14px rgb(17 20 23 / 0.22);
    --lift-2: 0 20px 44px -18px rgb(17 20 23 / 0.28);

    --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);   
    --t-pop:   260ms;   
    --t-word:  420ms;   
    --t-intro: 900ms;   

    
    --tap:      44px;   
    --tap-lg:   56px;   
    --icon:     18px;   
    --mark:     28px;   
    --rule:      2px;   
    --nudge:     1px;   
    --lift:      2px;   
    --cur-dot:   6px;   
    --cur-ring: 34px;   
    --depth-1:   6px;   
    --depth-2:  16px;   
    --focus-gap:  3px;  

    
    --hero-min:    860px;   
    --hero-map:    720px;   
    --horizon:     300px;   
    --horizon-map: 620px;   
    --map-sm:      124px;   
    --perspective:1200px;   
    --sheen:       320px;   
  }

  
  :root[data-theme="dark"],
  .is-dark {
    --field:      var(--dk-field);
    --field-2:    var(--dk-field-2);
    --paper:      var(--dk-paper);
    --ink:        var(--dk-ink);
    --ink-2:      var(--dk-ink-2);
    --line:       var(--dk-line);
    --line-2:     var(--dk-line-2);
    --storm:      var(--dk-storm);
    --storm-wash: var(--dk-storm-wash);
    --lift-1: 0 10px 24px -12px rgb(0 0 0 / 0.55);
    --lift-2: 0 20px 44px -16px rgb(0 0 0 / 0.70);
  }
  :root[data-theme="dark"] { --page-bg: var(--dk-field); color-scheme: dark; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --field:      var(--dk-field);
      --field-2:    var(--dk-field-2);
      --paper:      var(--dk-paper);
      --ink:        var(--dk-ink);
      --ink-2:      var(--dk-ink-2);
      --line:       var(--dk-line);
      --line-2:     var(--dk-line-2);
      --storm:      var(--dk-storm);
      --storm-wash: var(--dk-storm-wash);
      --lift-1: 0 10px 24px -12px rgb(0 0 0 / 0.55);
      --lift-2: 0 20px 44px -16px rgb(0 0 0 / 0.70);
      --page-bg:    var(--dk-field);
      color-scheme: dark;
    }
  }
}


@layer base {

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

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: var(--s-9);
  }

  body {
    margin: 0;
    background: var(--field);
    color: var(--ink);
    font-family: var(--face-display);
    font-size: var(--t-body);
    font-variation-settings: "wdth" 100, "wght" 400;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    
    overflow-x: clip;
  }

  h1, h2, h3 {
    margin: 0;
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
    font-variation-settings: "wdth" 112, "wght" 700;
    text-wrap: balance;
  }

  p  { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  em { font-style: normal; font-variation-settings: "wdth" 100, "wght" 700; }

  a { color: inherit; }

  img, svg { display: block; max-inline-size: 100%; }

  :focus-visible {
    outline: var(--rule) solid var(--storm);
    outline-offset: var(--focus-gap);
    border-radius: var(--r);
  }
  :focus:not(:focus-visible) { outline: none; }

  ::selection { background: var(--storm); color: var(--paper); }

  .skip-link {
    position: absolute;
    inset-block-start: var(--s-2);
    inset-inline-start: var(--s-2);
    z-index: 100;
    padding: var(--s-3) var(--s-4);
    background: var(--ink);
    color: var(--field);
    font-family: var(--face-mono);
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: var(--tr-micro);
    text-decoration: none;
    border-radius: var(--r);
    transform: translateY(calc(-1 * (100% + var(--s-4))));
    transition: transform var(--t-tap) var(--ease);
  }
  .skip-link:focus { transform: translateY(0); }

  
  .vh {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  
  @media (prefers-contrast: more) {
    :root, :root[data-theme="dark"], .is-dark {
      --line:   var(--ink-2);
      --line-2: var(--ink-2);
    }
    .grain { display: none; }
    .btn { border-width: var(--rule); }
  }
}


@layer layout {

  .site-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--s-5);
    
    padding-block: var(--s-4);
    padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
    background: var(--field);
    border-block-end: var(--hair) solid transparent;
    transition: border-color var(--t-tap) linear;
  }
  .site-head[data-stuck="true"] { border-block-end-color: var(--line-2); }

  main { display: block; }

  .section {
    max-inline-size: var(--shell);
    margin-inline: auto;
    padding: var(--s-10) var(--gutter);
    border-block-start: var(--hair) solid var(--line-2);
  }

  .section__head { margin-block-end: var(--s-8); }
  .section__head .micro { margin-block-end: var(--s-5); }
  .section__h { font-size: var(--t-h2); max-inline-size: 16ch; }
  .section__head .lead { margin-block-start: var(--s-5); }
}


@layer components {

  
  .micro {
    font-family: var(--face-mono);
    font-size: var(--t-micro);
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: var(--tr-micro);
    color: var(--ink-2);
  }
  .micro--strong { color: var(--ink); font-weight: 500; }

  .lead {
    font-size: var(--t-lead);
    line-height: 1.45;
    color: var(--ink-2);
    max-inline-size: 46ch;
    text-wrap: pretty;
  }


  
  .brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-inline-end: auto;
    text-decoration: none;
    color: var(--ink);
  }
  .brand__mark { inline-size: var(--mark); block-size: var(--mark); flex: none; }
  .brand__word {
    font-size: var(--t-small);
    font-variation-settings: "wdth" 112, "wght" 700;
    letter-spacing: 0.02em;
  }


  
  .site-nav ul { display: flex; gap: var(--s-5); }
  .site-nav a {
    display: block;
    padding-block: var(--s-3);
    font-family: var(--face-mono);
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: var(--tr-micro);
    color: var(--ink-2);
    text-decoration: none;
    transition: color var(--t-tap) var(--ease);
  }
  .site-nav a { position: relative; }
  .site-nav a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--s-2);
    block-size: var(--hair);
    background: currentColor;
    scale: 0 1;
    transform-origin: left center;
    transition: scale var(--t-tap) var(--ease);
  }
  @media (hover: hover) {
    .site-nav a:hover { color: var(--ink); }
    .site-nav a:hover::after { scale: 1 1; }
  }
  .site-nav a:active { color: var(--storm); }


  
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-bd: var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--tap);
    padding: var(--s-3) var(--s-5);
    color: var(--btn-fg);
    border: var(--hair) solid var(--btn-bd);
    border-radius: var(--r-pill);
    font-family: var(--face-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tr-micro);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    
    background-color: var(--btn-bg);
    background-image: linear-gradient(var(--btn-sweep, transparent), var(--btn-sweep, transparent));
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 100% 0%;
    transition:
      background-size var(--t-pop) var(--ease),
      border-color    var(--t-tap) var(--ease),
      color           var(--t-tap) var(--ease),
      box-shadow      var(--t-pop) var(--ease),
      transform       var(--t-tap) var(--ease);
  }
  .btn--solid { --btn-bg: var(--ink); --btn-fg: var(--field); --btn-bd: var(--ink); --btn-sweep: var(--storm); }
  .btn--ghost { --btn-sweep: var(--ink); }

  @media (hover: hover) {
    .btn:hover { background-size: 100% 100%; transform: translateY(calc(-1 * var(--lift))); box-shadow: var(--lift-1); }
    .btn--solid:hover { --btn-bd: var(--storm); }
    .btn--ghost:hover { --btn-bd: var(--ink); --btn-fg: var(--field); }
  }
  .btn:active { transform: translateY(var(--nudge)); box-shadow: none; }
  .btn[aria-disabled="true"],
  .btn:disabled {
    --btn-bg: var(--field-2); --btn-fg: var(--ink-2); --btn-bd: var(--line-2);
    pointer-events: none;
  }
  .btn--block { inline-size: 100%; }
  .btn--lg { min-block-size: var(--tap-lg); padding-inline: var(--s-7); }


  
  
  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-inline-size: var(--shell);
    margin-inline: auto;
    padding: var(--s-9) var(--gutter) var(--s-10);
    min-block-size: min(86svh, var(--hero-min));
  }
  
  
  .storm {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    inline-size: 100vw;
    
    block-size: 100%;
    translate: -50% 0;
    z-index: 0;
    pointer-events: none;
  }
  .hero__copy { position: relative; z-index: 2; }
  .hero__h {
    font-size: var(--t-h1);
    margin-block: var(--s-5) var(--s-5);
    max-inline-size: 18ch;
  }
  .hero__h .wipe { display: block; }
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-block-start: var(--s-7);
  }
  .hero__note { margin-block-start: var(--s-5); }

  .hero__figure {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    inset-inline-end: calc(-1 * (var(--gutter) + var(--s-7)));
    inline-size: min(56vw, var(--hero-map));
    aspect-ratio: 1;          
    z-index: 1;
    pointer-events: none;
  }
  
  .zonemap {
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    --sw: 1;      
    --sw-em: 1.5;    
  }
  .zonemap__rings circle {
    fill: none;
    stroke: var(--line);
    stroke-width: var(--sw);
  }
  .zonemap__storm {
    fill: none;
    stroke: var(--storm);
    stroke-width: var(--sw-em);
  }


  
  .flow {
    max-inline-size: var(--shell);
    margin-inline: auto;
    padding: var(--s-7) var(--gutter);
    border-block-start: var(--hair) solid var(--line-2);
  }
  .flow__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6) var(--gutter);
  }
  .flow__step {
    display: grid;
    gap: var(--s-3);
    align-content: start;
    padding-block-start: var(--s-4);
    border-block-start: var(--hair) solid var(--line-2);
  }
  .flow__n { color: var(--storm); }
  .flow__t {
    font-size: var(--t-lead);
    line-height: 1.35;
    letter-spacing: var(--tr-tight);
    text-wrap: pretty;
  }

  
  .ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-8) var(--gutter);
    padding-block: var(--s-7);
    border-block: var(--hair) solid var(--line-2);
  }
  .ledger__col h3 { margin-block-end: var(--s-5); }
  .ledger__list li {
    display: flex;
    gap: var(--s-3);
    padding-block: var(--s-3);
    border-block-start: var(--hair) solid var(--line-2);
    font-size: var(--t-body);
  }
  .ledger__list li::before {
    flex: none;
    inline-size: var(--s-4);
    font-family: var(--face-mono);
    font-size: var(--t-small);
    color: var(--line);
  }
  .ledger__list--yes li::before { content: "+"; color: var(--ink); }
  .ledger__list--no  li::before { content: "\2013"; }
  .ledger__list--no  li { color: var(--ink-2); }

  .aside {
    margin-block-start: var(--s-7);
    max-inline-size: 52ch;
    color: var(--ink-2);
    text-wrap: pretty;
  }


  
  .report {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--gutter);
    align-items: start;
  }
  .report__sticky {
    position: sticky;
    inset-block-start: calc(var(--s-9) + var(--s-2));
  }
  .report__fig { margin: 0; }
  .report__fig figcaption { margin-block-start: var(--s-4); text-align: center; }
  .zonemap--report { aspect-ratio: 1; --sw: 1.6; --sw-em: 2.4; }

  .zonemap--report .zonemap__rings circle {
    transition: stroke var(--t-reveal) var(--ease);
  }
  .zonemap__final {
    fill: none;
    stroke: var(--line);
    stroke-width: var(--sw);
    stroke-dasharray: 2 5;
  }

  
  .route {
    stroke: var(--line);
    stroke-width: var(--sw);
    stroke-dasharray: 4 7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .zonemap__live {
    fill: none;
    stroke: var(--storm);
    stroke-width: var(--sw-em);
  }
  .player {
    fill: var(--storm);
    stroke: var(--field);
    stroke-width: var(--sw-em);
  }

  .scrub {
    display: grid;
    gap: var(--s-2);
    margin-block-start: var(--s-4);
  }
  
  html:not(.js) .scrub { display: none; }
  .scrub__label,
  .scrub__time { text-align: center; }
  .scrub__time { font-variant-numeric: tabular-nums; }

  .scrub__row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }
  .scrub__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tap);
    block-size: var(--tap);
    flex: none;
    padding: 0;
    background: transparent;
    color: var(--ink);
    border: var(--hair) solid var(--line);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition:
      color var(--t-tap) var(--ease),
      border-color var(--t-tap) var(--ease),
      background-color var(--t-tap) var(--ease),
      transform var(--t-tap) var(--ease);
  }
  .scrub__play svg { inline-size: var(--icon); block-size: var(--icon); }
  .scrub__play .i-pause { display: none; }
  .scrub.is-playing .scrub__play .i-play  { display: none; }
  .scrub.is-playing .scrub__play .i-pause { display: block; }
  .scrub.is-playing .scrub__play { color: var(--storm); border-color: var(--storm); }
  .scrub__play:active { transform: translateY(var(--nudge)); }

  @media (hover: hover) {
    .scrub__play:hover { color: var(--field); background: var(--ink); border-color: var(--ink); }
    .scrub.is-playing .scrub__play:hover { background: var(--storm); border-color: var(--storm); }
  }

  .scrub__input {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 100%;
    block-size: var(--tap);      
    margin: 0;
    background: transparent;
    cursor: grab;
  }
  .scrub__input:active { cursor: grabbing; }

  .scrub__input::-webkit-slider-runnable-track {
    block-size: var(--rule);
    border-radius: var(--r-pill);
    background: linear-gradient(to right,
                var(--storm) calc(var(--sp, 0) * 100%), var(--line) 0);
  }
  .scrub__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    inline-size: var(--icon);
    block-size: var(--icon);
    margin-block-start: calc(var(--icon) / -2 + var(--nudge));
    border-radius: 50%;
    background: var(--storm);
    border: var(--rule) solid var(--field);
    transition: scale var(--t-tap) var(--ease);
  }
  .scrub__input:hover::-webkit-slider-thumb { scale: 1.18; }
  .scrub__input:active::-webkit-slider-thumb { scale: 0.94; }

  .scrub__input::-moz-range-track {
    block-size: var(--rule); border-radius: var(--r-pill); background: var(--line);
  }
  .scrub__input::-moz-range-progress {
    block-size: var(--rule); border-radius: var(--r-pill); background: var(--storm);
  }
  .scrub__input::-moz-range-thumb {
    inline-size: var(--icon); block-size: var(--icon); border: var(--rule) solid var(--field);
    border-radius: 50%; background: var(--storm);
  }
  .pin {
    fill: var(--field);
    stroke: var(--line);
    stroke-width: var(--sw-em);
    transform-box: fill-box;
    transform-origin: center;
    transition:
      fill   var(--t-tap) var(--ease),
      stroke var(--t-tap) var(--ease),
      transform var(--t-reveal) var(--ease);
  }
  
  .report[data-active="1"] [data-pin="1"],
  .report[data-active="2"] [data-pin="2"],
  .report[data-active="3"] [data-pin="3"],
  .report[data-active="4"] [data-pin="4"],
  .report[data-active="5"] [data-pin="5"] {
    fill: var(--storm); stroke: var(--storm); transform: scale(1.5);
  }

  .findings { display: grid; gap: var(--s-9); }
  
  .finding {
    padding-block-start: var(--s-5);
    border-block-start: var(--hair) solid var(--line-2);
    max-inline-size: 44ch;
    transition: border-color var(--t-tap) var(--ease);
  }
  .finding.is-active { border-block-start-color: var(--ink); }
  .finding__rank {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    margin-block-end: var(--s-4);
  }
  
  .finding__num {
    font-family: var(--face-mono);
    font-size: var(--t-h3);
    font-weight: 500;
    color: var(--ink-2);
    line-height: 1;
    transition: color var(--t-tap) var(--ease);
  }
  .finding.is-active .finding__num { color: var(--storm); }
  
  .finding__h { font-size: var(--t-h3); margin-block-end: var(--s-2); }

  
  .finding__seek {
    display: block;
    inline-size: 100%;
    
    padding-block: var(--s-1);
    padding-inline: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-align: start;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--t-tap) var(--ease);
  }
  @media (hover: hover) {
    .finding__seek:hover { color: var(--storm); }
  }
  .finding p { color: var(--ink-2); text-wrap: pretty; }


  
  .plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .plan {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-6);
    background: var(--paper);
    border: var(--hair) solid var(--line-2);
    border-radius: var(--r);
    transition:
      transform    var(--t-pop) var(--ease),
      box-shadow   var(--t-pop) var(--ease),
      border-color var(--t-pop) var(--ease);
  }
  .plan--best { border-color: var(--ink); background: var(--field); }

  .plans { perspective: var(--perspective); }
  .plan { position: relative; transform-style: preserve-3d; }

  
  .plan::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(var(--sheen) circle at var(--sheen-x, 50%) var(--sheen-y, 50%),
                                var(--storm-wash), transparent 62%);
    opacity: 0;
    transition: opacity var(--t-pop) var(--ease);
  }

  @media (hover: hover) {
    .plan:hover {
      transform: translateY(-8px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
      box-shadow: var(--lift-2);
      border-color: var(--ink);
    }
    .plan:hover::after { opacity: 1; }
  }
  .plan__name { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
  .plan__flag {
    padding: var(--s-1) var(--s-2);
    background: var(--storm-wash);
    color: var(--storm);
    border-radius: var(--r);
    letter-spacing: var(--tr-micro);
  }
  .plan__price {
    font-variation-settings: "wdth" 112, "wght" 700;
    letter-spacing: var(--tr-tight);
    line-height: var(--lh-tight);
    font-size: var(--t-price);
    
    font-variant-numeric: tabular-nums;
  }
  .plan__cur { font-size: 0.5em; vertical-align: 0.55em; margin-inline-end: 0.1em; }
  .plan__per {
    font-family: var(--face-mono);
    font-size: var(--t-micro);
    font-variation-settings: normal;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--tr-micro);
    color: var(--ink-2);
    margin-inline-start: var(--s-2);
  }
  .plan__note { font-size: var(--t-small); color: var(--ink-2); margin-block-end: auto; }


  
  .section--close { text-align: center; padding-block: var(--s-11); }
  .close__h {
    font-size: var(--t-huge);
    max-inline-size: 18ch;
    margin-inline: auto;
    margin-block-end: var(--s-8);
  }
  .section--close .micro { margin-block-start: var(--s-5); }


  
  .site-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-4);
    max-inline-size: var(--shell);
    margin-inline: auto;
    padding: var(--s-6) var(--gutter) var(--s-8);
    border-block-start: var(--hair) solid var(--line-2);
  }
}


@layer motion {

  
  .js .wipe > span,
  .js .reveal > span {
    display: inline-block;
    clip-path: inset(0 0 108% 0);
    transform: translateY(0.14em);
    transition:
      clip-path var(--t-reveal) var(--ease),
      transform var(--t-reveal) var(--ease);
    transition-delay: var(--d, 0ms);
  }
  
  .js .reveal--block {
    clip-path: inset(0 0 24% 0);
    transition: clip-path var(--t-ceil) var(--ease);
  }

  .js .wipe.is-in > span,
  .js .reveal.is-in > span {
    clip-path: inset(-0.3em 0 -0.3em 0);
    transform: translateY(0);
  }
  .js .reveal--block.is-in { clip-path: inset(0 0 0 0); }

  
  .js .zonemap--hero .zonemap__rings circle,
  .js .zonemap--hero .zonemap__storm {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset var(--t-intro) var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js .hero.is-lit .zonemap--hero .zonemap__rings circle,
  .js .hero.is-lit .zonemap--hero .zonemap__storm { stroke-dashoffset: 0; }

  .js .zonemap--hero .zonemap__mark {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.82);
    opacity: 0;
    transition:
      transform var(--t-intro) var(--ease) var(--t-word),
      opacity   var(--t-reveal) var(--ease) var(--t-word);
  }
  .js .hero.is-lit .zonemap--hero .zonemap__mark { transform: scale(1); opacity: 1; }

  
  @media (hover: hover) and (pointer: fine) {
    .js .zonemap--hero .zonemap__rings,
    .js .zonemap--hero .zonemap__storm {
      translate: calc(var(--mx, 0) * var(--depth-1)) calc(var(--my, 0) * var(--depth-1));
      transition: translate var(--t-ceil) var(--ease);
    }
    .js .zonemap--hero .zonemap__mark {
      translate: calc(var(--mx, 0) * var(--depth-2)) calc(var(--my, 0) * var(--depth-2));
    }
  }

  
  .js .ledger__list li {
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--t-ceil) var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js .ledger.is-in .ledger__list li { clip-path: inset(0 0 0 0); }

  
  .js .plan__price {
    scale: 0.72;
    opacity: 0;
    transform-origin: left center;
    transition:
      scale   var(--t-word) var(--ease-pop) var(--d, 0ms),
      opacity var(--t-reveal) var(--ease) var(--d, 0ms);
  }
  .js .plans.is-in .plan__price { scale: 1; opacity: 1; }

  
  .finding__num {
    display: inline-block;
    transform-origin: right center;
    transition: color var(--t-tap) var(--ease), scale var(--t-pop) var(--ease);
  }
  .finding.is-active .finding__num { scale: 1.35; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .js .wipe > span,
    .js .reveal > span,
    .js .reveal--block,
    .js .ledger__list li {
      clip-path: none;
      transform: none;
      transition: none;
    }

    
    .js .zonemap--hero .zonemap__rings circle,
    .js .zonemap--hero .zonemap__storm { stroke-dasharray: none; stroke-dashoffset: 0; }
    .js .zonemap--hero .zonemap__mark { transform: none; opacity: 1; }
    .js .zonemap--hero .zonemap__rings,
    .js .zonemap--hero .zonemap__storm,
    .js .zonemap--hero .zonemap__mark { translate: none; }
    .finding.is-active .finding__num { scale: 1; }
    .js .plan__price { scale: 1; opacity: 1; }
    .site-nav a::after { display: none; }
    
    .scrub__play { display: none; }
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
  }
}


@layer responsive {

  
  @media (max-width: 1000px) {
    .hero {
      display: block;
      min-block-size: auto;
      padding-block: var(--s-8) var(--s-9);
    }
    
    .hero__figure {
      position: static;
      translate: none;
      inline-size: auto;
      aspect-ratio: auto;
      block-size: 34vh;
      max-block-size: var(--horizon);
      overflow: hidden;
      margin-block-start: var(--s-7);
    }
    .zonemap--hero {
      inline-size: min(140%, var(--horizon-map));
      margin-inline: auto;
      block-size: auto;
      aspect-ratio: 1;
    }

    .report { grid-template-columns: minmax(0, 1fr); }
    
    .report__sticky {
      inset-block-start: calc(var(--s-8) + var(--s-1));
      z-index: 10;
      padding-block: var(--s-4);
      background: var(--field);   
      margin-inline: calc(-1 * var(--s-2));
    }
    .report__sticky::after {      
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-start: 100%;
      block-size: var(--s-5);
      background: linear-gradient(var(--field), transparent);
      pointer-events: none;
    }
    
    .zonemap--report {
      inline-size: var(--map-sm);
      margin-inline: auto;
      --sw: 5; --sw-em: 7.5;   
    }
    .scrub { gap: var(--s-1); margin-block-start: var(--s-2); }
    
    .scrub__label {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
    .report__fig figcaption { margin-block-start: var(--s-2); }
    .report__fig figcaption { text-align: center; }
    .findings { gap: var(--s-8); }

    
    .plans { grid-template-columns: minmax(0, 1fr); }
    .plan--best { order: -1; }
  }

  
  @media (max-width: 680px) {
    .site-head { gap: var(--s-4); padding-inline: var(--s-5); }
    .site-nav { display: none; }         
    .section { padding-block: var(--s-9); }
    .ledger { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
    .hero__actions .btn { flex: 1 1 auto; }
    .section--close { padding-block: var(--s-9); }
  }

  
  @media (max-width: 620px) {
    .flow__list { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  }

  
  
  @media (max-height: 480px) and (orientation: landscape) {
    .site-head { padding-block: var(--s-2); }
    .hero {
      min-block-size: auto;
      padding-block: var(--s-5) var(--s-6);
    }
    .hero__h {
      font-size: clamp(1.5rem, 4.4vw, 2.25rem);
      margin-block: var(--s-3);
      max-inline-size: 28ch;
    }
    .hero__figure { display: none; }
    .hero__actions { margin-block-start: var(--s-4); }
    .hero__note { margin-block-start: var(--s-3); }
    .lead { font-size: var(--t-body); }
  }

  
  
  @media (max-width: 400px) {
    .site-head { gap: var(--s-3); padding-inline: var(--s-4); }
    .brand__word { display: none; }
    .site-head .btn--solid {
      padding-inline: var(--s-4);
      letter-spacing: 0.08em;
    }
  }

  

  
  @media print {
    
    .progress, .cursor, .grain, .storm, .endstorm, .scrub, .site-head { display: none; }

    :root, :root[data-theme="dark"], .is-dark {
      --field: #fff; --paper: #fff; --page-bg: #fff;
      --ink: #000; --ink-2: #333;
      --line: #999; --line-2: #ccc; --storm: #000;
      --lift-1: none; --lift-2: none;
    }
    body { background: #fff; color: #000; }
    .section--close { background-image: none; }
    .hero { min-block-size: auto; }
    .hero__figure { position: static; translate: none; inline-size: 60%; }
    .report { grid-template-columns: minmax(0, 1fr); }
    .report__sticky { position: static; }
    .section, .flow, .hero, .finding, .plan { break-inside: avoid; }
    
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  }
}




@layer components {

  
  
  .is-dark { background: var(--field); color: var(--ink); }

  .section--close {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--s-11) var(--gutter);
    text-align: center;
    
    background-image: radial-gradient(58% 52% at 50% 46%, var(--storm-wash), transparent 70%);
  }
  .endstorm {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: 0;
    pointer-events: none;
  }

  
  .section--close::before,
  .section--close::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: var(--s-11);
    z-index: 1;
    pointer-events: none;
  }
  .section--close::before {
    inset-block-start: 0;
    background: linear-gradient(var(--page-bg), transparent);
  }
  .section--close::after {
    inset-block-end: 0;
    background: linear-gradient(transparent, var(--page-bg));
  }

  .close__inner {
    position: relative;
    z-index: 2;
    max-inline-size: var(--shell);
    margin-inline: auto;
  }
  .close__inner > .micro:first-child { margin-block: 0 var(--s-6); }


  
  .theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tap);
    block-size: var(--tap);
    flex: none;
    padding: 0;
    background: transparent;
    color: var(--ink-2);
    border: var(--hair) solid var(--line);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition:
      color var(--t-tap) var(--ease),
      border-color var(--t-tap) var(--ease),
      transform var(--t-tap) var(--ease);
  }
  .theme svg { inline-size: var(--icon); block-size: var(--icon); }
  .theme:active { transform: translateY(var(--nudge)); }

  @media (hover: hover) {
    .theme:hover { color: var(--ink); border-color: var(--ink); }
  }

  
  .theme .i-sun  { display: none; }
  .theme .i-moon { display: block; }

  :root[data-theme="dark"] .theme .i-sun  { display: block; }
  :root[data-theme="dark"] .theme .i-moon { display: none; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme .i-sun  { display: block; }
    :root:not([data-theme="light"]) .theme .i-moon { display: none; }
  }
  :root[data-theme="light"] .theme .i-sun  { display: none; }
  :root[data-theme="light"] .theme .i-moon { display: block; }


  
  .progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--rule);
    z-index: 90;
    pointer-events: none;
  }
  .progress > span {
    display: block;
    block-size: 100%;
    background: var(--storm);
    transform-origin: left center;
    scale: var(--p, 0) 1;
  }


  
  .grain {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }


  
  .cursor { display: none; }

  @media (hover: hover) and (pointer: fine) {
    .cursor {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      z-index: 95;
      pointer-events: none;
      mix-blend-mode: difference;   
      opacity: 0;                   
      transition: opacity var(--t-tap) var(--ease);
    }
    .cursor.is-live { opacity: 1; }
    .cursor b {
      position: absolute;
      display: block;
      border-radius: 50%;
      background: transparent;
    }
    .cursor__dot {
      inline-size: var(--cur-dot);
      block-size: var(--cur-dot);
      
      background: #fff;
      translate: calc(var(--cx, -100px) - var(--cur-dot) / 2) calc(var(--cy, -100px) - var(--cur-dot) / 2);
    }
    .cursor__ring {
      inline-size: var(--cur-ring);
      block-size: var(--cur-ring);
      
      border: var(--hair) solid #fff;
      translate: calc(var(--rx, -100px) - var(--cur-ring) / 2) calc(var(--ry, -100px) - var(--cur-ring) / 2);
      transition: scale var(--t-pop) var(--ease), opacity var(--t-tap) var(--ease);
    }
    .cursor.is-hot .cursor__ring { scale: 1.7; opacity: 0.55; }
    .cursor.is-down .cursor__ring { scale: 0.75; }
  }
}


@layer motion {

  
  .js .reveal--words > span {
    clip-path: none;
    transform: none;
    transition: none;
  }
  .js .reveal--words .w {
    display: inline-block;
    clip-path: inset(0 0 110% 0);
    transform: translateY(0.18em);
    transition:
      clip-path var(--t-word) var(--ease) var(--wd, 0ms),
      transform var(--t-word) var(--ease) var(--wd, 0ms);
  }
  .js .reveal--words.is-in .w {
    clip-path: inset(-0.3em 0 -0.3em 0);
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .js .reveal--words .w { clip-path: none; transform: none; transition: none; }
    .progress > span { scale: 1 1; }
    .grain { display: none; }
    .cursor { display: none; }
  }
}


@layer responsive {
  @media (max-width: 680px) {
    .section--close { padding-block: var(--s-9); }
  }
}

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}