/* ==============================================================
   Lattice — story page

   V2's palette, told in an editorial voice. The rules below are the panel's,
   carried over unchanged, because they are what stop a dark page becoming the
   generic dark page:

     - #080809 ground, never #000
     - one accent (indigo). Amber and green are semantic and rare
     - depth from opacity, blur and scale. NEVER box-shadow
     - only the two easing curves. No linear, no ease-in-out, no bounce
     - line weights 0.4-1px

   STEP 1: layout and type only. No motion lives here yet.
   ============================================================== */

:root{
  --void:#080809;
  --void-2:#0f0f14;
  --indigo:#a5b4fc;
  --indigo-warm:#c4b5fd;
  --indigo-a30:rgba(165,180,252,.30);
  --indigo-a12:rgba(165,180,252,.12);
  --amber:#f59e0b;
  --green:#34d399;
  --text:#e4e4f0;
  /* Raised from the panel's #6e6e80, which measured 4.01:1 here. Every use
     on this page is text somebody has to read, so it clears AA at 4.5. */
  --text-dim:#8b8b9e;
  --hairline:rgba(255,255,255,.10);

  --ease-premium:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(.22,.61,.36,1);

  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --pad:clamp(20px,5vw,72px);
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* ── The ground ─────────────────────────────────────────────────────────────
   A flat void reads as a blank screen. A dot grid at hairline weight and
   hairline opacity reads as a surface: the product is a lattice, and the page
   sits on one. Fixed, so the copy scrolls over it rather than carrying it;
   z-index -1, so the content, the veil and the bar all paint on top. html has
   no background of its own, which is what lets a negative layer sit between the
   canvas and the page. Do not give html one.

   What this is NOT, deliberately: a glow, a colour gradient, or a blur blob.
   The first version of this site was rejected for exactly those. The dots are
   1px, inside the 0.4 to 1px line-weight rule, and the only colour in play is
   the hairline. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.075) .9px,transparent 1.4px);
  background-size:28px 28px;
  background-position:14px 14px;
}

/* Over the grid, the product itself at wallpaper scale: a conversation tree,
   hairline edges and empty nodes in the one accent, with the directions that
   were left drawn dashed, the way the mark's own bracket is. Grown once by
   tools-ground.py (seed 7, chosen because it covers the sheet evenly) and
   served as a file, so it is static, cached, and costs no frame. Static on
   purpose: motion behind copy is motion against reading.

   Alpha is set here and not in the file, so it can be tuned in one place. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("assets/ground.svg") center/cover no-repeat;
  opacity:.36;
  /* Quiet behind the reading column, full at the margins. Structure that runs
     through a headline competes with it; structure beside a headline frames
     it. The stops are alpha, so this is a mask and not a paint. */
  -webkit-mask-image:linear-gradient(90deg,#fff 0%,#fff 20%,transparent 36%,transparent 64%,#fff 80%,#fff 100%);
  mask-image:linear-gradient(90deg,#fff 0%,#fff 20%,transparent 36%,transparent 64%,#fff 80%,#fff 100%);
}
/* Narrow screens have no margins to speak of: copy is the whole width. The
   mask would hide nearly all of the ground, so it comes off and the alpha
   comes down instead, which keeps the surface and protects the reading. */
@media (max-width:899px){
  body::after{
    opacity:.22;
    -webkit-mask-image:none;mask-image:none;
  }
}

/* The same ground, inlined by story-ambient.js so its nodes can move. Every
   property mirrors body::after, because the two must be indistinguishable at
   the moment one replaces the other. */
.ground{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  width:100%;height:100%;
  opacity:.36;
  -webkit-mask-image:linear-gradient(90deg,#fff 0%,#fff 20%,transparent 36%,transparent 64%,#fff 80%,#fff 100%);
  mask-image:linear-gradient(90deg,#fff 0%,#fff 20%,transparent 36%,transparent 64%,#fff 80%,#fff 100%);
}
html.has-ground body::after{display:none}
@media (max-width:899px){
  .ground{opacity:.22;-webkit-mask-image:none;mask-image:none}
}

/* THE PULSE. A node brightens, holds, and lets go, and its neighbours follow
   a beat behind, so light appears to travel through the lattice rather than
   the lattice blinking. Two things keep this the right side of the line the
   spec draws against glow:
   - it is per node, a disc a few pixels wide, never a wash over the page;
   - it is opacity only, on the approved curve, at a seven second cycle.
   Each keyframe leg takes the curve on its own, so the rise is quick and the
   settle is slow in both directions: a beat, not a sine. */
.ground .node .h,
.ground .node .r{
  animation-duration:7s;
  animation-timing-function:var(--ease-premium);
  animation-iteration-count:infinite;
  animation-delay:var(--d,0s);
}
.ground .node .h{animation-name:ground-halo}
.ground .node .r{animation-name:ground-ring}
@keyframes ground-halo{
  0%{opacity:0}
  18%{opacity:.3}
  60%{opacity:0}
  100%{opacity:0}
}
@keyframes ground-ring{
  0%{stroke-opacity:.55}
  18%{stroke-opacity:1}
  60%{stroke-opacity:.55}
  100%{stroke-opacity:.55}
}

@media (prefers-reduced-motion:reduce){
  /* story-ambient.js never inlines the ground under reduced motion, so this
     covers the preference switching on after load. The still is the design. */
  .ground .node .h,.ground .node .r{animation:none}
}

/* ── Bar ────────────────────────────────────────────────────────────────── */

.bar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--pad);
  background:linear-gradient(180deg,rgba(8,8,9,.94),rgba(8,8,9,.6) 60%,transparent);
}
.bar-left{display:flex;align-items:center;gap:30px;min-width:0}

/* Primary nav, to the right of the mark. Dim until wanted, one weight, no
   underline: the bar has to stay quieter than the copy beneath it. */
.bar-nav{display:flex;align-items:center;gap:22px}
.bar-nav a{
  display:inline-flex;align-items:center;min-height:24px;
  font:500 12.5px/1 var(--sans);color:var(--text-dim);text-decoration:none;
  transition:color .32s var(--ease-premium);
}
.bar-nav a:hover{color:var(--text)}
.bar-nav a:focus-visible{outline:1px solid var(--indigo);outline-offset:4px;border-radius:3px}
/* Below the two column breakpoint the bar is the mark and the one button.
   Three more words do not fit beside a 26px logo on a phone, and the page is a
   single scroll there anyway. */
@media (max-width:899px){.bar-nav{display:none}}

/* The bar is fixed and 56px tall, so an anchor jump would land its heading
   under the bar. Every section the nav points at clears it. */
[id="back"],[id="yours"],[id="pricing"]{scroll-margin-top:76px}

.wordmark{
  display:inline-flex;align-items:center;gap:9px;
  font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--indigo);text-decoration:none;
}
/* The mark carries the width and height as attributes as well, so the bar does
   not reflow between markup and stylesheet on a cold load. */
.wordmark-logo{width:26px;height:26px;display:block;border-radius:6px}
.bar-cta{
  font:500 12.5px/1 var(--sans);color:var(--text-dim);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid var(--hairline);
  transition:color .3s var(--ease-premium),border-color .3s var(--ease-premium);
}
.bar-cta:hover{color:var(--indigo);border-bottom-color:var(--indigo-a30)}

/* ── Acts ───────────────────────────────────────────────────────────────── */

.act{
  max-width:var(--max);margin:0 auto;
  padding:clamp(90px,14vh,170px) var(--pad);
}
/* No measure here: `ch` on this element resolves at BODY size, so a 34ch
   container held a 70px headline to about 270px and broke it every two words.
   Measure belongs on the elements themselves, where ch means what it should. */
.act-body{max-width:none}
.act-body.center,.center{text-align:center}
.center .btn{display:inline-flex}

/* Fraunces at display size is the whole voice. Optical sizing does the work
   that a second weight usually gets asked to do. */
.display{
  margin:0 0 22px;
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(28px,3.4vw,46px);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--text);
  /* ch resolves at the display size here, so this is a real headline measure
     of roughly sixteen characters a line. */
  max-width:17ch;
}
.display em{font-style:italic;color:var(--indigo-warm)}
h1.display{font-size:clamp(31px,3.9vw,53px)}
/* Acts that own the full width can breathe wider and stay centred. */
.center .display,.display.center{max-width:22ch;margin-left:auto;margin-right:auto}

.lede{
  margin:0 0 18px;max-width:46ch;
  font-size:clamp(15px,1.5vw,17.5px);line-height:1.7;
  color:var(--text-dim);
}
.act-body.center .lede,.center .lede{margin-left:auto;margin-right:auto}

/* The one line that is allowed to raise its voice. */
.pull{
  margin:44px 0 0;padding-top:26px;
  border-top:1px solid var(--hairline);
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(21px,2.6vw,31px);line-height:1.3;
  color:var(--text);max-width:24ch;
}

.label{
  margin:0 0 10px;
  font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--indigo);
}

/* ── Stages: where motion will live ─────────────────────────────────────── */

.stage{
  margin-top:40px;
  min-height:min(58vh,460px);
  border:1px solid var(--hairline);border-radius:14px;
  background:var(--void-2);
  display:grid;place-items:center;
}
.stage-sm{min-height:min(38vh,320px);margin-top:0}
.stage-note{
  margin:0;padding:0 24px;text-align:center;
  font:400 11.5px/1.6 var(--mono);color:var(--text-dim);
}

/* ── I-b. The arithmetic ────────────────────────────────────────────────── */

.act-count .act-body{max-width:46rem;margin:0 auto}
.act-count .pull{margin-left:auto;margin-right:auto;text-align:center;max-width:22ch}
.act-count .display{max-width:26ch}

/* The reveal line, held back for half a second so the reader attempts the
   recall before being told they failed (story.js). The hidden state is applied
   BY SCRIPT ONLY: without .is-timed this is an ordinary paragraph, so the words
   never depend on JavaScript to be readable. */
.act-count.is-timed .pull{
  opacity:0;transform:translateY(7px);
  transition:opacity .62s var(--ease-premium),transform .62s var(--ease-premium);
}
.act-count.is-timed.is-told .pull{opacity:1;transform:none}

/* ── III. The dark room ─────────────────────────────────────────────────── */

.act-dark{max-width:none}
.act-dark .act-body{max-width:44rem;margin:0 auto;text-align:center}
.act-dark .display{max-width:20ch;margin-left:auto;margin-right:auto}
.act-dark .lede{margin-left:auto;margin-right:auto}
.act-dark .pull{margin-left:auto;margin-right:auto;text-align:center;max-width:20ch}
.act-dark .stage-note{margin-top:56px}

/* ── IV. What comes back ────────────────────────────────────────────────── */

.act-back .display.center{margin-bottom:64px}
.give{
  display:grid;gap:clamp(24px,4vw,56px);
  grid-template-columns:1fr;
  align-items:center;
  padding:clamp(34px,5vh,58px) 0;
  border-top:1px solid var(--hairline);
}
.give-text h3{
  margin:0 0 12px;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(22px,2.6vw,32px);line-height:1.2;letter-spacing:-.01em;
}
.give-text p{margin:0;max-width:46ch;color:var(--text-dim);line-height:1.7}

/* ── VII. Pricing ───────────────────────────────────────────────────────── */

.plans{
  display:grid;gap:14px;
  grid-template-columns:1fr;
  margin-top:56px;
}
.plan{
  position:relative;
  display:flex;flex-direction:column;
  padding:26px 24px 24px;
  border:1px solid var(--hairline);border-radius:14px;
  background:var(--void-2);
}
.plan.founding{border-color:var(--indigo-a30)}
.plan h3{
  margin:0 0 6px;
  font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.01em;
}
.amount{
  margin:0 0 4px;
  font:500 34px/1 var(--mono);letter-spacing:-.02em;color:var(--text);
}
.amount span{font-size:13px;color:var(--text-dim);margin-left:5px;letter-spacing:0}
.plan-tag{margin:0 0 20px;font-size:13.5px;color:var(--text-dim)}
.plan ul{margin:0 0 22px;padding:0;list-style:none;flex:1 1 auto}
.plan li{
  padding:8px 0 8px 18px;position:relative;
  font-size:13.5px;line-height:1.55;color:var(--text-dim);
  border-top:1px solid var(--hairline);
}
.plan li:first-child{border-top:0}
.plan li::before{
  content:"";position:absolute;left:0;top:15px;
  width:5px;height:5px;border-radius:50%;background:var(--indigo-a30);
}

.flag{
  display:inline-block;margin:0 0 14px;padding:4px 9px;
  border:1px solid var(--indigo-a30);border-radius:999px;
  font:500 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--indigo);
}

/* Scarcity has to be true. The count is 0 of 50 because nothing has sold; if
   this ever shows a number nobody is tracking it becomes a false claim. */
.seats{margin:0 0 20px}
.seats-head{
  display:flex;justify-content:space-between;margin-bottom:7px;
  font:400 10.5px/1 var(--mono);letter-spacing:.08em;color:var(--text-dim);
}
.seats-bar{height:2px;background:var(--hairline);border-radius:2px;overflow:hidden}
.seats-fill{display:block;height:100%;background:var(--indigo)}

/* ── Why 259.99, once ────────────────────────────────────────────────────────
   A disclosure, not a modal: the reader stays on the card, the question is
   answered in place, and it costs nothing when closed. Native details, so it
   works with no script at all. */
.why{margin:0 0 20px;border-top:1px solid var(--hairline)}
.why summary{
  list-style:none;cursor:pointer;
  min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font:500 12.5px/1.3 var(--sans);color:var(--indigo);
  transition:color .32s var(--ease-premium);
}
.why summary::-webkit-details-marker{display:none}
.why summary:hover{color:var(--text)}
.why summary:focus-visible{outline:1px solid var(--indigo);outline-offset:3px;border-radius:4px}
/* A plus that becomes a minus. Drawn, not a glyph, so it cannot read as an
   emoji and does not depend on a font having it. */
.why summary::after{
  content:"";flex:none;width:11px;height:11px;
  background:
    linear-gradient(currentColor,currentColor) center/11px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 11px no-repeat;
  opacity:.8;
  transition:transform .32s var(--ease-premium);
}
.why[open] summary::after{transform:rotate(45deg)}
.why-body{padding:2px 0 18px}
.why-body h4{
  margin:16px 0 6px;
  font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--indigo);
}
.why-body h4:first-child{margin-top:4px}
.why-body p{margin:0;font-size:13px;line-height:1.65;color:var(--text-dim)}

/* The one line on the card allowed the serif voice: it is the reassurance,
   sitting directly above the button, and it is stated as a fact rather than
   as a pitch because the test suite can check it. */
.payoff{
  margin:0 0 14px;text-align:center;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:14.5px;line-height:1.5;color:var(--text);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:11px 18px;
  border:1px solid var(--hairline);border-radius:9px;
  background:none;color:var(--text);
  font:500 13.5px/1 var(--sans);text-decoration:none;cursor:pointer;
  transition:border-color .3s var(--ease-premium),
             background-color .3s var(--ease-premium),
             color .3s var(--ease-premium);
}
.btn:hover{border-color:var(--indigo-a30);color:var(--indigo);background:var(--indigo-a12)}
.btn:focus-visible{outline:1px solid var(--indigo);outline-offset:2px}
.btn.solid{background:var(--indigo-a12);border-color:var(--indigo-a30);color:var(--indigo)}
.btn.solid:hover{background:var(--indigo-a30);color:var(--text)}
.btn.lg{width:auto;padding:14px 30px;font-size:14.5px}

.btn-inline{
  display:block;width:100%;margin:8px 0 0;padding:0;
  background:none;border:0;cursor:pointer;
  font:400 12px/1.5 var(--sans);color:var(--text-dim);text-align:center;
  transition:color .24s var(--ease-premium);
}
.btn-inline:hover{color:var(--indigo)}
.btn-inline:focus-visible{outline:1px solid var(--indigo);outline-offset:3px;border-radius:4px}

.fine{margin:10px 0 0;font-size:11.5px;color:var(--text-dim);text-align:center}

/* Payment status, from pay.js. */
.pay-status{
  margin:8px 0 0;min-height:1.5em;
  font:400 12px/1.5 var(--sans);color:var(--text-dim);text-align:center;
}
.pay-status[data-tone="bad"]{color:var(--amber)}
.pay-status[data-tone="good"]{color:var(--green)}
.btn[data-busy="1"]{opacity:.7;pointer-events:none}

/* ── Close and footer ───────────────────────────────────────────────────── */

.act-close{padding-top:clamp(70px,10vh,120px)}
.act-close .display{margin-bottom:36px}

.foot{
  display:flex;flex-wrap:wrap;gap:14px;
  align-items:center;justify-content:space-between;
  max-width:var(--max);margin:0 auto;
  padding:30px var(--pad) 50px;
  border-top:1px solid var(--hairline);
  font-size:12.5px;color:var(--text-dim);
}
.foot-mark{display:block;width:24px;height:24px;border-radius:6px}
.foot nav{display:flex;gap:20px}
.foot a{color:var(--text-dim);text-decoration:none}
.foot a:hover{color:var(--indigo)}

/* ── Wider viewports ────────────────────────────────────────────────────── */

@media (min-width:900px){
  .give{grid-template-columns:1fr 1fr}
  .give:nth-child(odd) .give-text{order:2}
  .plans{grid-template-columns:repeat(3,1fr);gap:16px}
  .act-line,.act-unfold{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(30px,5vw,70px);align-items:center;max-width:var(--max);
  }
  .act-line .stage,.act-unfold .stage{margin-top:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}

  /* story.js never applies .is-timed under reduced motion, so this is for the
     one case it cannot catch: the preference being switched on AFTER load, with
     the line already held and its transition now removed. Without this the
     reveal never arrives and a paragraph is gone for good. Copy is never
     allowed to end up invisible. */
  .act-count.is-timed .pull{opacity:1!important;transform:none!important}
}

/* ── The unfold ─────────────────────────────────────────────────────────────
   Owned by story.js. The stage keeps its border so the section has presence
   before the canvas has anything to say. */
.stage-unfold{padding:0;overflow:hidden}
.unfold-canvas{display:block;width:100%;height:100%}

/* ── III. The dark room ──────────────────────────────────────────────────────
   A veil over the section with a hole cut where the cursor is. The text
   underneath is never removed or hidden from assistive tech; it is covered by
   a sheet of the page's own ground colour.

   The veil element only exists when story.js adds it, so with no script, no
   fine pointer, or reduced motion, this section is simply a section. */

.act-dark.has-veil{position:relative;isolation:isolate}

.dark-veil{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
  /* Not fully opaque. At 0.955 you can just make out that there IS text out
     there, which is worse than a blank wall and therefore better: a blank wall
     is nothing, a page you cannot quite read is a loss. */
  background:rgba(8,8,9,.955);

  --mx:50%;
  --my:42%;
  --r:190px;
  /* How much of the radius is fully clear before the fade begins. */
  --clear:34%;

  /* These stops are ALPHA, not colour: a gradient mask is read through its
     alpha channel, so the opaque stop just means "cover here". #fff is used
     rather than #000 purely so nobody reads it as a paint value. */
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),
    transparent 0%, transparent var(--clear), #fff 100%);
  mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),
    transparent 0%, transparent var(--clear), #fff 100%);

  transition:opacity .62s var(--ease-premium);
}

/* The touch variant, where the light follows the middle of the viewport rather
   than a cursor (story.js). Wider and with a much larger clear plateau: you can
   hunt around with a cursor, so a tight hole is a game, but you cannot hunt with
   a scroll position, so the band has to hold a couple of readable lines or the
   section is just broken. */
.act-dark.veil-scroll .dark-veil{--r:250px;--clear:56%}

/* Scrolled past: everything at once. The relief is the payoff for the four
   seconds of frustration, and it has to arrive faster than it left. */
.act-dark.is-lit .dark-veil{opacity:0}

@media (prefers-reduced-motion:reduce){
  .dark-veil{display:none}
}

/* ── IV. The proofs ─────────────────────────────────────────────────────────
   Each stage keeps its build placeholder until story-proofs.js claims it, so a
   script failure leaves a labelled empty frame rather than a mystery. */

.stage.is-live{position:relative;padding:0;overflow:hidden;display:block}
.proof-canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.stage.is-live .proof-canvas{cursor:grab}
.stage.is-live .proof-canvas:active{cursor:grabbing}

/* Recall: fixed questions, because a text field would promise an answer this
   page cannot honestly produce. */
.ask-chips{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;flex-wrap:wrap;gap:6px;padding:12px 12px 0;
}
.ask-chip{
  padding:5px 10px;border-radius:999px;
  border:1px solid var(--hairline);background:rgba(15,15,20,.9);
  color:var(--text-dim);cursor:pointer;
  font:400 11px/1.3 var(--sans);
  transition:color .26s var(--ease-premium),border-color .26s var(--ease-premium);
}
.ask-chip:hover{color:var(--text);border-color:var(--indigo-a30)}
.ask-chip[aria-pressed="true"]{color:var(--indigo);border-color:var(--indigo-a30);background:var(--indigo-a12)}
.ask-chip:focus-visible{outline:1px solid var(--indigo);outline-offset:2px}

/* ── Tap targets ────────────────────────────────────────────────────────────
   Measured on a 375px viewport: the header CTA was 15px tall, the annual
   option 18px, the footer links 21px. WCAG 2.2 asks for 24px minimum and a
   thumb wants considerably more, so these get real hit area without changing
   how they look. Padding does the work; nothing here shifts the type. */

.wordmark,
.bar-cta,
.foot a{
  display:inline-flex;align-items:center;
  min-height:44px;
}
/* The bar keeps its height: the links now fill it rather than sitting in it. */
.bar{padding-top:0;padding-bottom:0;min-height:56px}

.btn-inline{min-height:44px;display:flex;align-items:center;justify-content:center}

.ask-chip{min-height:32px}

/* Below the two column breakpoint the chips are the only control in that
   stage, so they can afford to be comfortable. */
@media (max-width:899px){
  .ask-chip{min-height:38px;padding:8px 12px}
}

/* ── The licence handover ───────────────────────────────────────────────────
   There is no account and no mailing list, so this is the only place the key
   ever appears. It has to be impossible to miss and trivial to copy. */
.licence{
  margin:16px 0 0;padding:14px;
  border:1px solid var(--indigo-a30);border-radius:10px;
  background:var(--indigo-a12);
}
.licence-head{
  margin:0 0 8px;
  font:500 10px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);
}
.licence-key{
  display:block;margin:0 0 10px;padding:9px 10px;
  border:1px solid var(--hairline);border-radius:7px;
  background:var(--void);
  font:500 14px/1.4 "JetBrains Mono",ui-monospace,monospace;
  color:var(--text);word-break:break-all;user-select:all;
}
.licence-note{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--text-dim)}