/* =========================================================
   Moving parts, the landing: what every page shares.
   Tokens, type, sections, questions, plans and the passage from
   one page to the next. The header, the phone menu, the buttons
   and the footer are the shell, in shell.css, which comes with
   this sheet.
   ========================================================= */

/* =========================================================
   Moving parts: the shell. The header, the phone menu, the
   buttons and the footer under the page, written once for
   every page that wears them (landing/shell/nav.html and
   landing/shell/footer.html, stamped by scripts/shell.mjs).
   base.css brings this sheet with it and gives it its tokens,
   .mono, .sr and .u; base.js runs it; nav-glyph.js scrambles
   its links.
   landing/assets/shell.css
   ========================================================= */

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 40; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px var(--gut); border-bottom: 1px solid transparent; view-transition-name: nav; transition: background-color .5s, border-color .5s, transform .7s var(--ease-out); }
/* a ground once the first screen is behind; on the home, as soon as the pinned section lets go (html.rh-ground) */
.nav.is-solid, html.rh-ground .nav { background: color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--line); }
.nav.is-away { transform: translateY(-110%); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 17px; letter-spacing: -.02em; width: fit-content; padding-block: 12px; margin-block: -12px; }
/* the logo, a placeholder drawn in the colour of the text */
.brand-logo { display: block; height: 24px; aspect-ratio: 2308 / 520; background: currentColor; -webkit-mask: url("/assets/logo.svg") left center / contain no-repeat; mask: url("/assets/logo.svg") left center / contain no-repeat; }
.links { display: flex; gap: 4px; color: var(--muted); }
.links a { position: relative; padding: 6px 10px; transition: color var(--mi-fast); }
/* no underline; the page you are on is the one recording */
.links a[aria-current="page"] { color: var(--text); }
.links a[aria-current="page"]::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--rec-red, #ff4b3e); box-shadow: 0 0 6px rgba(255, 75, 62, .5); margin-right: 7px; vertical-align: 2px; animation: live 1.6s var(--ease-out) infinite; }
@keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.links b { color: var(--text); font-weight: 500; margin-left: 4px; }
.nav-end { justify-self: end; display: flex; gap: 8px; align-items: center; }
.nav-end .menu-btn { display: none; }
/* signing in is a word, not a third button */
.nav-in { margin-right: 6px; font-weight: 500; font-size: 15px; letter-spacing: -.015em; color: var(--muted); line-height: 1.4; transition: color var(--mi-fast); }
.nav-in[aria-current="page"] { color: var(--text); }
/* the letters a link scrambles through and settles in (nav-glyph.js) */
.links a .ng, .nav-in .ng, .foot-cols a .ng { display: inline-block; white-space: pre; }
.links a .ng-c, .nav-in .ng-c, .foot-cols a .ng-c { display: inline-block; text-align: center; }

/* ---------- buttons ---------- */
/* the account of a signed-in visitor: its link, and the short menu that drops under it */
.nav-me { position: relative; display: inline-flex; align-items: center; }
.nav-me-menu { position: absolute; top: 100%; right: -6px; z-index: 5; padding-top: 12px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--mi-fast), transform var(--mi-dur) var(--mi-ease), visibility 0s linear var(--mi-fast); }
.nav-me.on:not(.shut):hover .nav-me-menu, .nav-me.on:not(.shut):focus-within .nav-me-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-me-menu ul { list-style: none; min-width: 184px; padding: 6px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--panel); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.nav-me-menu button { display: block; width: 100%; padding: 9px 12px; border-radius: 9px; text-align: left; color: var(--text); font-weight: 500; font-size: 15px; letter-spacing: -.015em; transition: background-color var(--mi-fast); }
.nav-me-menu button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.nav-me-out { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.nav-me-out button { color: var(--rec-red, #ff4b3e); }
@media (hover: hover) { .nav-me-menu button:hover { background: var(--surface-high); } }
@media (prefers-reduced-motion: reduce) { .nav-me-menu { transition: none; } }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 18px; border-radius: 99px; font-weight: 500; font-size: 15px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; transition: background-color var(--mi-fast), border-color var(--mi-fast), color var(--mi-fast), opacity var(--mi-fast), transform var(--mi-fast) var(--mi-ease); }
.btn-solid { background: var(--accent); color: var(--accent-ink); }
.btn[hidden] { display: none; }
.btn-line { border: 1px solid var(--line-strong); }
.btn small { font: 500 11px/1 "Geist Mono", monospace; opacity: .6; }
.btn .arr { width: 14px; height: 14px; transition: transform var(--mi-dur) var(--mi-ease); }
/* roll: the label is written twice by base.js, the second copy hidden from screen readers */
.btn-t { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.3; }
.btn-t > span { display: block; transition: transform var(--mi-dur) var(--mi-ease); }
.btn-t > span + span { position: absolute; left: 0; top: 100%; }
/* the press: a pill gives a little under the finger or the click */
.btn:active:not([disabled]):not([aria-disabled="true"]) { transform: scale(var(--mi-press)); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .38; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }

@media (hover: hover) {
  .btn-solid:hover { background: color-mix(in srgb, var(--accent) 82%, #fff); }
  .btn-line:hover { background: var(--surface-high); }
  .btn:hover:not([disabled]):not([aria-disabled="true"]) .btn-t > span { transform: translateY(-100%); }
  .btn:hover .arr { transform: translateX(var(--mi-glide)); }
  .links a:hover, .nav-in:hover { color: var(--text); }
}
.btn[disabled] .btn-t > span, .btn[aria-disabled="true"] .btn-t > span { transform: none !important; }

/* ---------- the full menu on a phone ---------- */
.menu { position: fixed; z-index: 39; inset: 0; background: var(--bg); padding: 84px var(--gut) 28px; display: flex; flex-direction: column; visibility: hidden; opacity: 0; transition: opacity .4s, visibility 0s .4s; }
.menu nav { display: grid; }
.menu nav a { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: clamp(34px, 11vw, 56px); letter-spacing: -.05em; line-height: 1.05; transform: translateY(14px); opacity: 0; transition: transform .6s var(--ease-out), opacity .6s var(--ease-out); }
/* the tags beside the names (01, the count, a sign) are not shown: on a phone they read as noise next to names this large */
.menu nav a .mono { display: none; }
.menu:focus { outline: 0; }
.menu nav a[aria-current="page"] { color: var(--muted); }
.menu .menu-foot { margin-top: auto; display: grid; gap: 8px; }
.menu .menu-foot .btn { width: 100%; height: 50px; }
.menu .menu-in { margin-top: 10px; text-align: center; color: var(--muted); font-size: 15px; }
.menu .menu-in a { color: var(--text); }
html.menu-open .menu { visibility: visible; opacity: 1; transition: opacity .4s; }
html.menu-open .menu nav a { transform: none; opacity: 1; }
html.menu-open .menu nav a:nth-child(2) { transition-delay: .04s; } html.menu-open .menu nav a:nth-child(3) { transition-delay: .08s; }
html.menu-open .menu nav a:nth-child(4) { transition-delay: .12s; } html.menu-open .menu nav a:nth-child(5) { transition-delay: .16s; }

/* =========================================================
   The footer lies under the page, fixed, and never moves:
   the page slides off it. Nothing in it is tied to the scroll.
   ========================================================= */
.foot { position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; background: var(--paper); color: var(--ink); overflow: hidden; --focus: var(--ink); }
.foot.is-flow { position: relative; }
.foot-in { position: relative; display: flex; flex-direction: column; padding: calc(var(--lift-r) + clamp(40px, 7vh, 88px)) var(--gut) 0; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px clamp(24px, 4vw, 72px); align-items: end; }
.foot-cta h2 { font-weight: 430; font-size: clamp(38px, 4.4vw, 74px); line-height: .94; letter-spacing: -.05em; }
.foot-cta h2 span { display: block; color: #85858d; }
.foot-kick { color: var(--paper-label); margin-bottom: 16px; }
.foot-cta .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.foot .btn-solid { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .foot .btn-solid:hover { background: #000; } .foot .btn-line:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } .foot-legal a:hover { color: var(--ink); background-size: 100% 1px; } }
.foot .btn-line { border-color: color-mix(in srgb, var(--ink) 20%, transparent); }
.foot-cols { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 24px clamp(12px, 1.6vw, 24px); }
.foot-cols .mono { color: var(--paper-label); display: block; margin-bottom: 12px; }
.foot-cols a { display: block; width: fit-content; font-size: 15.5px; line-height: 1.8; letter-spacing: -.015em; transition: color var(--mi-fast); }
/* the legal line stays above the wordmark's letters, so Back to the top can be clicked */
.foot-legal { position: relative; z-index: 4; display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-top: clamp(40px, 7vh, 84px); padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); color: var(--paper-label); }
/* a finger-sized target; its line draws in under the words from the left and leaves to the right */
.foot-legal a { padding-block: 12px; margin-block: -12px; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 100% 100%; background-size: 0 1px; background-origin: content-box; transition: background-size var(--mi-dur) var(--mi-ease), color var(--mi-fast); }
/* the wordmark, as wide as the page, its feet under the edge; the letters under the pointer lift to show them */
.mark { position: relative; display: flex; width: 100%; margin-top: clamp(8px, 1.4vw, 24px); font-weight: 460; font-size: 18vw; line-height: 1; letter-spacing: -.07em; white-space: nowrap; user-select: none; -webkit-user-select: none; margin-bottom: -.12em; }
.mark > * { flex: none; }
.mark .l { display: inline-block; }
.mark .l > span { display: inline-block; transform: translateY(0); transition: transform 1.1s var(--ease-out); }
.mark .l > span > span { display: inline-block; will-change: transform; }
.mark .sp { width: .26em; }
.foot.is-armed .mark .l > span { transform: translateY(105%); transform-origin: 0 100%; transition: none; will-change: transform; }

/* ---------- a phone ---------- */
@media (max-width: 820px) {
  .links, .nav-end .btn-line, .nav-in { display: none; }
  .nav { grid-template-columns: 1fr auto; padding: 12px var(--gut); }
  .brand-logo { height: 20px; }
  .btn { height: 40px; padding: 0 16px; font-size: 14px; }
  .nav-end .menu-btn { display: inline-flex; width: 40px; padding: 0; border: 1px solid var(--line-strong); }
  .menu-btn i { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform .45s var(--ease-out); }
  .menu-btn i:first-child { transform: translateY(-3px); } .menu-btn i:last-child { transform: translateY(3px); }
  html.menu-open .menu-btn i:first-child { transform: rotate(45deg); } html.menu-open .menu-btn i:last-child { transform: rotate(-45deg); }
  .foot-top { grid-template-columns: 1fr; align-items: start; }
  .foot-cols { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .foot-legal { margin-top: 32px; }
  .foot-legal span:nth-child(2) { display: none; }
  .foot-in { padding-top: calc(var(--lift-r) + 40px); }
}
@media (min-width: 821px) and (max-width: 1080px) { .nav-in { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .btn, .links a, .menu, .menu nav a, .foot-cols a, .foot-legal a, .nav-in, .btn .arr, .btn-t > span { transition: none !important; }
  /* no roll, no glide, no press: the line of a link and the colour of a button still answer, at once */
  .btn-t > span, .btn .arr, .btn:active { transform: none !important; }
  .foot.is-armed .mark .l > span { transform: none; }
  .links a[aria-current="page"]::before { animation: none; }
}

@font-face { font-family: "Instrument Sans"; src: url("/site/fonts/instrument-sans/InstrumentSans-Variable.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/site/fonts/geist/GeistMono-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #0e0b09;
  --panel: #19140f;
  --preview: #f4ece0;
  --text: #f4ece0;
  --muted: #b9ac9b;
  /* the quietest text: just past 4.5:1 on the ground and on the cards */
  --label: #8f8273;
  --line: color-mix(in srgb, var(--text) 8%, transparent);
  --line-strong: color-mix(in srgb, var(--text) 16%, transparent);
  --surface: color-mix(in srgb, var(--text) 3%, transparent);
  --surface-high: color-mix(in srgb, var(--text) 5.5%, transparent);
  --ink: #15100c;
  --paper: #f4ece0;
  --paper-label: #7a6e60;
  --wf: #146ef5;
  --radius: 14px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(16px, 1.6vw, 32px);
  --sec: clamp(88px, 12vh, 160px);
  --lift-r: clamp(18px, 2.6vw, 44px);
  --foot-h: 0px;
  /* micro-interactions: three gestures and a press, one timing for all of them */
  --mi-ease: cubic-bezier(.16, 1, .3, 1);
  --mi-dur: .5s;
  --mi-fast: .18s;
  --mi-glide: 4px;
  --mi-press: .97;
  --focus: var(--text);
}

/* ---------- the passage between pages: the old page settles away, the new one rises, the nav stays ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .38s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: vt-in .72s var(--ease-out) .06s both; }
::view-transition-group(nav) { animation: none; }
::view-transition-old(nav) { animation: none; opacity: 0; }
::view-transition-new(nav) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(22px); } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; overscroll-behavior-x: none; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body { font: 430 16px/1.5 "Instrument Sans", system-ui, sans-serif; letter-spacing: -.012em; overflow-x: clip; background: var(--bg); }
::selection { background: var(--text); color: var(--bg); }
a, button, input { color: inherit; font: inherit; background: none; border: 0; text-decoration: none; }
a, button { cursor: pointer; }
/* the keyboard ring follows the shape of what it rings (a pill stays a pill), in the ink of the ground under it */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:where(a:not(.btn), .qa button):focus-visible { border-radius: 4px; }
.plan-life { --focus: var(--ink); }
img, video { display: block; max-width: 100%; }
.mono { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 500; font-size: 11px; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the skip link shows itself when the keyboard reaches it */
a.sr:focus-visible { position: fixed; z-index: 100; left: 12px; top: 12px; width: auto; height: auto; overflow: visible; clip: auto; padding: 10px 16px; border-radius: 99px; background: var(--text); color: var(--bg); outline-color: var(--text); }
/* an anchor lands clear of the nav, and the place it lands on takes the focus without a ring */
[id] { scroll-margin-top: 96px; }
[data-anchored]:focus { outline: none; }

/* =========================================================
   Micro-interactions. Three gestures, each owned by one family,
   plus one press shared by everything you tap. Nothing magnetic,
   nothing that bounces, nothing that waits.
   1. Roll: a button's label rolls up and the same words come from below (shell.css).
   2. Trace: a text link's line draws in from the left and leaves to the right.
   3. Glide: an arrow, or a row that leads somewhere, moves a few pixels its way.
   Press: a pill gives a little under the finger or the click.
   Hover only where there is a pointer that hovers: no state left stuck after a tap.
   ========================================================= */

/* 2. trace: a link inside a sentence always shows a quiet line; on hover a second one draws over it */
.u, .more { background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--line-strong), var(--line-strong)); background-repeat: no-repeat; background-position: 100% 100%, 0 100%; background-size: 0 1px, 100% 1px; transition: background-size var(--mi-dur) var(--mi-ease), color var(--mi-fast); }
.u { padding-bottom: 1px; }

/* the press, for every chip as for every pill (shell.css), never for text */
.chips button:active, .fams button:active, .seg button:active { transform: scale(var(--mi-press)); }

@media (hover: hover) {
  .more:hover svg { transform: translateX(var(--mi-glide)); }
  .u:hover, .more:hover { background-position: 0 100%, 0 100%; background-size: 100% 1px, 100% 1px; }
  .qa button:hover .pm { border-color: var(--text); }
  .seg button[aria-checked="false"]:hover { color: var(--text) !important; }
}

/* ---------- the page is a sheet laid over the footer ---------- */
.page { position: relative; z-index: 2; background: var(--bg); margin-bottom: var(--foot-h); border-radius: 0 0 var(--lift-r) var(--lift-r); box-shadow: 0 30px 60px -10px rgba(0, 0, 0, .45); }
.page-in { padding-top: 64px; }

/* ---------- sections ---------- */
.sec { position: relative; padding: var(--sec) var(--gut); }
.eyebrow { color: var(--label); }
.h2 { font-weight: 430; font-size: clamp(40px, 5.4vw, 88px); line-height: .94; letter-spacing: -.05em; margin-top: clamp(16px, 2.4vh, 26px); }
.h2 .m { color: var(--muted); }
.rw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.rw > span { display: inline-block; }
.sub { color: var(--muted); font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.45; max-width: 46ch; margin-top: 18px; }
.more { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--text); padding-bottom: 5px; }
.more svg { width: 14px; height: 14px; transition: transform var(--mi-dur) var(--mi-ease); }

/* the head of an inner page */
.phead { padding: clamp(120px, 20vh, 220px) var(--gut) clamp(48px, 8vh, 96px); border-bottom: 1px solid var(--line); }
.phead h1 { font-weight: 430; font-size: clamp(56px, 10vw, 168px); line-height: .88; letter-spacing: -.06em; margin-top: 18px; }
.phead h1 .m { color: var(--muted); }
.phead .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.phead .sub { margin-top: 26px; }

/* a real component, recorded: a clip in a library card */
.clip { position: relative; background: var(--preview); overflow: hidden; }
.clip video, .clip img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- questions ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 5vw, 96px); align-items: start; }
.faq-grid .left { position: sticky; top: 110px; }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa button { width: 100%; display: grid; grid-template-columns: 1fr 22px; gap: 20px; align-items: center; padding: 22px 0; text-align: left; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -.025em; line-height: 1.2; }
.qa .pm { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color var(--mi-fast), border-color var(--mi-fast); }
.qa .pm::before, .qa .pm::after { content: ""; position: absolute; left: 6px; right: 6px; top: 10px; height: 1.2px; background: currentColor; transition: transform .5s var(--ease-out); }
.qa .pm::after { transform: rotate(90deg); }
.qa.open .pm::after { transform: rotate(0deg); }
.qa .ans { height: 0; overflow: hidden; }
.qa .ans p { color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 58ch; padding-bottom: 24px; }
.qa .ans p + p { margin-top: -12px; }
.qa-group + .qa-group { margin-top: clamp(48px, 7vh, 80px); }
.qa-group > .mono { display: block; color: var(--label); margin-bottom: 14px; }

/* ---------- a phone ---------- */
@media (max-width: 820px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid .left { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .qa .pm::after, .u, .more, .more svg, .seg button, .qa .pm { transition: none !important; }
  /* no glide, no press: the line of a link still answers, at once */
  .more svg, .chips button:active, .fams button:active, .seg button:active { transform: none !important; }
}

/* ---------- plans, on the home page and the pricing page ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.plan { position: relative; display: flex; flex-direction: column; border-radius: calc(var(--radius) + 6px); border: 1px solid var(--line); background: var(--surface); padding: clamp(20px, 2vw, 30px); min-height: clamp(440px, 38vw, 540px); }
.plan .mono { color: var(--label); }
.plan .for { color: var(--muted); font-size: 15px; line-height: 1.4; margin-top: 10px; max-width: 30ch; }
.plan .price { margin-top: auto; padding-top: 36px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan .price b { font-weight: 380; font-size: clamp(64px, 6.4vw, 104px); letter-spacing: -.065em; line-height: .85; }
.plan .price span { color: var(--muted); font-size: 15px; }
.plan .price s { color: var(--label); font-size: clamp(22px, 2vw, 30px); letter-spacing: -.04em; }
.plan ul { list-style: none; margin: 22px 0 24px; display: grid; gap: 8px; font-size: 14.5px; color: var(--muted); }
.plan li { display: flex; gap: 10px; align-items: baseline; }
.plan li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transform: translateY(-2px); opacity: .7; }
.plan .btn { width: 100%; height: 48px; }
.plan-life { background: var(--text); color: var(--bg); border-color: var(--text); }
.plan-life .mono, .plan-life .price span, .plan-life .price s { color: #6b6b72; }
.plan-life .for, .plan-life ul { color: color-mix(in srgb, var(--ink) 80%, var(--paper)); }
.plan-life .btn-solid { background: var(--bg); color: var(--text); }
@media (hover: hover) { .plan-life .btn-solid:hover { background: #000; } }
.plan .ribbon { position: absolute; top: clamp(20px, 2vw, 30px); right: clamp(20px, 2vw, 30px); font: 500 10px/1.6 "Geist Mono", monospace; letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; border-radius: 99px; background: var(--bg); color: var(--text); }
.plans-foot { margin-top: 18px; color: var(--muted); font-size: 15px; }
/* what the law wants said beside the prices: small, and in full */
.plans-terms { max-width: 96ch; margin-top: 14px; color: var(--label); font-size: 13.5px; line-height: 1.55; }
.plans-terms .u { color: var(--muted); }
@media (max-width: 820px) {
  .plans { grid-template-columns: 1fr; }
  .plan { min-height: 0; }
}

/* ---------- membership: one card, billed by the month or by the year ---------- */
.plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg { position: relative; display: inline-flex; padding: 3px; border-radius: 99px; background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--line); }
.seg button { position: relative; z-index: 1; padding: 7px 14px; border-radius: 99px; color: var(--muted) !important; transition: color .4s var(--ease-out), transform var(--mi-fast) var(--mi-ease); white-space: nowrap; }
.seg button small { font-size: inherit; opacity: .6; margin-left: 4px; }
.seg button[aria-checked="true"] { color: var(--bg) !important; }
.seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 99px; background: var(--text); transition: transform .55s var(--ease-out), width .55s var(--ease-out); }
.plan-sub[data-bill="m"] [data-y], .plan-sub[data-bill="y"] [data-m] { display: none; }
.plan .roll { display: inline-flex; line-height: 1; font-weight: inherit; font-variant-numeric: tabular-nums; }
.plan .price .roll span { font-size: inherit; color: inherit; letter-spacing: inherit; }
.plan .price .roll > span { display: block; }
.plan .price .roll .d { height: 1em; overflow: hidden; }
.plan .price .roll .d.off { display: none; }
.plan .price .roll .strip { display: block; will-change: transform; }
.plan .price .roll .strip i { display: block; height: 1em; font-style: normal; }
.plan .price .roll .c { white-space: pre; }
@media (max-width: 820px) { .plans-2 { grid-template-columns: 1fr; } }

.seg button:focus { outline: none; }
.seg button:focus-visible { outline: 1.5px solid var(--text); outline-offset: 2px; }

/* ---------- accent: one amber, on the calls to action and in touches ---------- */
:root { --accent: #ffab1a; --accent-ink: #150b06; --box: #211a13; }
::selection { background: var(--accent); color: var(--accent-ink); }
.plan .ribbon { background: var(--accent); color: var(--accent-ink); }
.card .meta .badge { border-color: color-mix(in srgb, var(--accent) 70%, transparent) !important; background: color-mix(in srgb, var(--accent) 22%, transparent) !important; color: color-mix(in srgb, var(--accent) 22%, var(--text)); }

/* the three faces are pictures of other tools: they keep their own colours */
.face { --text: #f4ece0; --bg: #0e0b09; --ink: #15100c; --panel: #19140f; --muted: #b9ac9b; --label: #8f8273; --line: rgba(244, 236, 224, .08); --line-strong: rgba(244, 236, 224, .16); }