/* memava.com, one stylesheet for every page.
   One markup, two eras. <html data-era="2030"> is the tower: a night sky (or a day sky,
   following the visitor's light or dark setting) you climb floor by floor. <html
   data-era="1984"> is the same page drawn as a 1-bit desktop: windows on a dither.
   Tokens carry almost everything; the era skins at the end are thin. */

@font-face { font-family: "Albert Sans"; src: url(/fonts/albert-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Albert Sans"; src: url(/fonts/albert-sans-600.woff2) format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Fredoka"; src: url(/fonts/fredoka-700.woff2) format("woff2"); font-weight: 700 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Fredoka"; src: url(/fonts/fredoka-600.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; src: url(/fonts/chakrapetch-600.woff2) format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+FEFF, U+FFFD; }
/* a bitmap face on a 16 px grid: one weight for every weight, so nothing is ever fake-bolded */
@font-face { font-family: "Chicago Kare"; src: url(/fonts/chicagokare-400.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+FEFF, U+FFFD; }

/* ---------------------------------------------------------------- tokens */
/* tokens: 2030 day */
:root {
  color-scheme: light;
  --wrap: 1160px; --gut: clamp(16px, 4vw, 32px); --sec: clamp(56px, 7vw, 104px);
  --f-body: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display: "Fredoka", "Albert Sans", system-ui, sans-serif; --f-ui: var(--f-display); --f-hud: "Chakra Petch", "Albert Sans", system-ui, sans-serif;
  --fw-display: 700; --fw-ui: 600; --fw-sub: 600; --ls-display: -.004em; --tt-ui: none;
  --fs-body: clamp(1.0625rem, 1rem + .25vw, 1.125rem); --fs-small: .9375rem;
  --fs-h1: clamp(2.75rem, 1.9rem + 3vw, 3.75rem); --fs-h2: clamp(1.875rem, 1.45rem + 1.6vw, 2.5rem); --fs-h3: clamp(1.25rem, 1.12rem + .45vw, 1.5rem);
  --r-card: 18px; --r-btn: 14px; --r-pill: 999px; --bw: 1.5px;
  --bg: #BFE6FF; --bg-2: #FBEAF6; --ink: #16103A; --ink-2: #3D3766; --ink-3: #4F4878; --link: #5521C9;
  --surface: rgba(255, 255, 255, .82); --surface-2: #FFFFFF; --edge: rgba(40, 24, 120, .16); --edge-strong: rgba(40, 24, 120, .34);
  --accent: #FFD23F; --on-accent: #1A0B3D; --accent-ridge: #D49A00; --focus: #5521C9;
  --ok: #1B6356; --warn: #7A4F00; --danger: #B4123F;
  --code-bg: #1A1442; --code-ink: #F2EEFF; --sel-bg: #FFD23F; --sel-ink: #1A0B3D;
  --c1: #FF4FB8; --c2: #3FE0FF; --c3: #B6F24A; --c4: #FFD23F; --c5: #9B7BFF; --jade: #1F7A69; --mint: #76D7BC;
  --t1: #A3106E; --t2: #006277; --t3: #386100; --t4: #7A4F00; --t5: #4B2BC4; --t-jade: #1B6356;
  --card-fill: #FFFFFF; --ridge: rgba(40, 24, 120, .18); --glow: rgba(85, 33, 201, .18);
  --sky-a: rgba(255, 79, 184, .12); --sky-b: rgba(255, 210, 63, .30); --sky-c: rgba(155, 123, 255, .22); --stars: transparent; --clouds: radial-gradient(300px 60px at 10% 34%, rgba(255,255,255,.9), transparent 70%), radial-gradient(180px 50px at 16% 30%, rgba(255,255,255,.9), transparent 70%), radial-gradient(360px 70px at 88% 62%, rgba(255,255,255,.85), transparent 70%), radial-gradient(200px 54px at 82% 58%, rgba(255,255,255,.85), transparent 70%), radial-gradient(260px 56px at 40% 92%, rgba(255,255,255,.7), transparent 70%); --wall: rgba(85, 33, 201, .16); --wall-line: rgba(85, 33, 201, .38);
  --h1-fill: #16103A; --h1-stroke: #FFFFFF; --h1-drop: #FF4FB8;
}
/* tokens: 2030 night */
@media (prefers-color-scheme: dark) {
  :root:not([data-era="1984"]) {
    color-scheme: dark;
    --bg: #0A0B2A; --bg-2: #1B1050; --ink: #F5F3FF; --ink-2: #D4CFF5; --ink-3: #B3ADE0; --link: #7FE7FF;
    --surface: rgba(28, 21, 80, .78); --surface-2: #1C1550; --edge: rgba(185, 164, 255, .20); --edge-strong: rgba(185, 164, 255, .42);
    --accent: #FFD23F; --on-accent: #1A0B3D; --accent-ridge: #B98300; --focus: #FFD23F;
    --ok: #76D7BC; --warn: #FFD23F; --danger: #FF8A9A;
    --code-bg: #07061F; --code-ink: #E9E4FF; --sel-bg: #FF4FB8; --sel-ink: #0A0B2A;
    --c1: #FF4FB8; --c2: #3FE0FF; --c3: #B6F24A; --c4: #FFD23F; --c5: #9B7BFF; --jade: #1F7A69; --mint: #76D7BC;
    --t1: #FF7AC8; --t2: #3FE0FF; --t3: #B6F24A; --t4: #FFD23F; --t5: #B9A4FF; --t-jade: #76D7BC;
    --card-fill: #1C1550; --ridge: rgba(4, 2, 24, .62); --glow: rgba(255, 79, 184, .22);
    --sky-a: rgba(255, 79, 184, .22); --sky-b: rgba(63, 224, 255, .15); --sky-c: rgba(155, 123, 255, .26); --stars: rgba(255, 255, 255, .6); --clouds: linear-gradient(transparent, transparent); --wall: rgba(155, 123, 255, .12); --wall-line: rgba(63, 224, 255, .40);
    --h1-fill: #FFFFFF; --h1-stroke: #22104F; --h1-drop: #FF4FB8;
  }
  :root:not([data-era="1984"]) .mark { --floppy-body: #76D7BC; --floppy-shutter: #EFFBF7; --floppy-label: #EFFBF7; --floppy-face: #0B1513; }
}
/* tokens: 1984 (one bit: black, white, and dithers between them) */
:root[data-era="1984"] {
  color-scheme: light;
  --f-display: "Chicago Kare", "Albert Sans", system-ui, sans-serif; --f-ui: var(--f-display); --f-hud: var(--f-display);
  --fw-display: 400; --fw-ui: 400; --fw-sub: 400; --ls-display: 0; --tt-ui: none;
  --fs-h1: 48px; --fs-h2: 32px; --fs-h3: 16px;
  --r-card: 0; --r-btn: 9px; --r-pill: 9px; --bw: 2px;
  --bg: #FFFFFF; --bg-2: #FFFFFF; --ink: #000000; --ink-2: #000000; --ink-3: #000000; --link: #000000;
  --surface: #FFFFFF; --surface-2: #FFFFFF; --edge: #000000; --edge-strong: #000000;
  --accent: #FFFFFF; --on-accent: #000000; --accent-ridge: #000000; --focus: #000000;
  --ok: #000000; --warn: #000000; --danger: #000000;
  --code-bg: #FFFFFF; --code-ink: #000000; --sel-bg: #000000; --sel-ink: #FFFFFF;
  --c1: #000000; --c2: #000000; --c3: #000000; --c4: #000000; --c5: #000000; --jade: #000000; --mint: #000000;
  --t1: #000000; --t2: #000000; --t3: #000000; --t4: #000000; --t5: #000000; --t-jade: #000000;
  --card-fill: #FFFFFF; --ridge: #000000; --glow: transparent;
  --sky-a: transparent; --sky-b: transparent; --sky-c: transparent; --stars: transparent; --clouds: linear-gradient(transparent, transparent); --wall: transparent; --wall-line: transparent;
  --h1-fill: #000000; --h1-stroke: transparent; --h1-drop: transparent;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-padding-top: 88px; }
body { margin: 0; min-height: 100vh; overflow-x: clip; color: var(--ink); background: transparent; font: 400 var(--fs-body)/1.6 var(--f-body); }
::selection { background: var(--sel-bg); color: var(--sel-ink); }
img, video, svg { max-width: 100%; }
img, video { height: auto; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.35em; }
li { margin: 0 0 .45em; }
li::marker { color: var(--sa-text, var(--t5)); }
strong, b { font-weight: 600; }
code { font: max(.92em, 14px)/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: color-mix(in srgb, var(--ink) 9%, transparent); padding: .08em .35em; border-radius: 6px; overflow-wrap: anywhere; }
h1, h2, h3, h4 { font-variant-ligatures: none; font-family: var(--f-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.04; margin: .2em 0 .35em; }
h2 { font-size: var(--fs-h2); line-height: 1.12; margin: 0 0 .5em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; margin: 1.1em 0 .4em; font-weight: var(--fw-sub); }
h4 { font-size: 1.125rem; line-height: 1.3; margin: 0 0 .3em; font-weight: var(--fw-sub); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--accent); color: var(--on-accent); border-radius: var(--r-btn); font: var(--fw-ui) 1rem var(--f-ui); }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }
.lede { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); line-height: 1.55; color: var(--ink); max-width: 62ch; }
.soft, .fine { font-size: var(--fs-small); color: var(--ink-3); line-height: 1.55; }
.big { font: var(--fw-display) clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.3 var(--f-display); margin-bottom: .8em; }
.eyebrow { margin: 0 0 .25em; font: 600 .875rem/1.4 var(--f-hud); letter-spacing: .1em; text-transform: uppercase; color: var(--sa-text, var(--t5)); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.by { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: var(--bw) solid currentColor; border-radius: var(--r-pill); letter-spacing: .06em; font-size: .875rem; }

/* the sky behind the tower: aurora and stars at night, sun and clouds by day, neon walls in the gutters */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--clouds), radial-gradient(1100px 620px at 12% -8%, var(--sky-a), transparent 62%), radial-gradient(900px 640px at 94% 4%, var(--sky-b), transparent 62%), radial-gradient(1200px 500px at 50% 112%, var(--sky-c), transparent 70%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(1.3px 1.3px at 12% 18%, var(--stars) 50%, transparent 51%), radial-gradient(1px 1px at 72% 34%, var(--stars) 50%, transparent 51%), radial-gradient(1.6px 1.6px at 38% 72%, var(--stars) 50%, transparent 51%), radial-gradient(1px 1px at 88% 82%, var(--stars) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 56% 8%, var(--stars) 50%, transparent 51%);
  background-size: 340px 340px, 420px 420px, 380px 380px, 300px 300px, 460px 460px; }
@media (min-width: 1360px) {
  html:not([data-era="1984"]) main::before, html:not([data-era="1984"]) main::after { content: ""; position: fixed; top: 0; bottom: 0; z-index: -1; width: 46px; pointer-events: none;
    background: repeating-linear-gradient(180deg, transparent 0 40px, var(--wall-line) 40px 42px), linear-gradient(90deg, var(--wall-line) 0 2px, var(--wall) 2px calc(100% - 2px), var(--wall-line) calc(100% - 2px));
    box-shadow: 0 0 24px -4px var(--wall-line); }
  html:not([data-era="1984"]) main::before { left: max(14px, calc(50% - 668px)); }
  html:not([data-era="1984"]) main::after { right: max(14px, calc(50% - 668px)); background-position: 0 21px, 0 0; }
}

/* ---------------------------------------------------------------- header */
.masthead { position: sticky; top: 0; z-index: 40; padding: 10px var(--gut) 0; }
.mh-in { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 8px 6px 14px; background: linear-gradient(90deg, var(--c1), var(--c4), var(--c3), var(--c2), var(--c5)) top / 100% 3px no-repeat, var(--surface); border: var(--bw) solid var(--edge); border-radius: 20px; -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 5px 0 var(--ridge), 0 18px 40px -24px var(--glow); }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding-right: 6px; color: var(--ink); text-decoration: none; font: var(--fw-display) 1.25rem/1 var(--f-display); white-space: nowrap; }
.brand svg { width: 32px; height: 32px; flex: none; }
/* the one logo (brand/memava-floppy.svg): colourways only. Paper on light, mint on dark, one bit in 1984 */
.mark { --floppy-body: #111110; --floppy-shutter: #FFFFFF; --floppy-label: #FFFFFF; --floppy-face: #111110; }
.mark :is(.b, .bx) { fill: var(--floppy-body); } .mark :is(.s, .sx) { fill: var(--floppy-shutter); } .mark .l { fill: var(--floppy-label); } .mark :is(.f, .fx) { fill: var(--floppy-face); }
.mh-panel { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.site-nav { flex: 1 1 auto; min-width: 0; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; justify-content: center; }
.site-nav li { margin: 0; }
.site-nav a, .mh-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; border-radius: 12px; color: var(--ink); text-decoration: none; font: var(--fw-ui) .9375rem/1 var(--f-ui); white-space: nowrap; }
.site-nav a:hover, .mh-link:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.site-nav a[aria-current="page"] { color: var(--on-accent); background: var(--c3); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.mh-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.menu-btn { display: none; }

/* the era switch: two radios, one knob */
.era { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 3px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 9%, transparent); border: var(--bw) solid var(--edge); }
.era::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--r-pill); background: var(--accent); box-shadow: inset 0 -3px 0 var(--accent-ridge), 0 3px 8px -2px rgba(0, 0, 0, .25); transform: translateX(100%); transition: transform .28s cubic-bezier(.3, 1.5, .5, 1); }
[data-era="1984"] .era::before { transform: none; }
.era button { position: relative; z-index: 1; min-width: 58px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--ink); font: 600 .9375rem/1 var(--f-hud); letter-spacing: .04em; cursor: pointer; border-radius: var(--r-pill); }
.era button[aria-checked="true"] { color: var(--on-accent); }
html:not(.js) .era { display: none; }

/* ---------------------------------------------------------------- buttons */
.btn { --b-bg: var(--accent); --b-ink: var(--on-accent); --b-ridge: var(--accent-ridge); --b-edge: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: var(--bw) solid var(--b-edge); border-radius: var(--r-btn);
  background: var(--b-bg); color: var(--b-ink); font: var(--fw-ui) 1rem/1.15 var(--f-ui); text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 5px 0 var(--b-ridge), 0 14px 22px -12px var(--b-ridge); transform: translateY(0); transition: transform .14s cubic-bezier(.3, 1.6, .5, 1), box-shadow .14s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 7px 0 var(--b-ridge), 0 18px 26px -12px var(--b-ridge); text-decoration: none; }
.btn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 1px 0 var(--b-ridge); }
.btn.ghost, .btn.quiet, .vault-band .btn:not(.solid), #hero-sound { --b-bg: var(--surface-2); --b-ink: var(--ink); --b-ridge: var(--ridge); --b-edge: var(--edge-strong); box-shadow: 0 5px 0 var(--b-ridge); }
.btn.ghost:hover, .btn.quiet:hover, .vault-band .btn:not(.solid):hover, #hero-sound:hover { box-shadow: 0 7px 0 var(--b-ridge); }
.btn.small { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
.btn.big { min-height: 54px; padding: 0 28px; font-size: 1.0625rem; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 12px; align-items: center; margin: 1.4em 0 1em; }
.cta-row .quiet:not(.btn) { padding: 0 6px; }
p > .btn + .btn { margin-left: 10px; }
p > .btn { margin-top: 6px; margin-bottom: 8px; }

/* ---------------------------------------------------------------- layout: the tower */
main { overflow-x: clip; display: block; width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); counter-reset: floor; }
main > section { position: relative; counter-increment: floor; --sa: var(--c5); --sa-text: var(--t5); }
main > section:nth-of-type(5n+2) { --sa: var(--c1); --sa-text: var(--t1); }
main > section:nth-of-type(5n+3) { --sa: var(--c2); --sa-text: var(--t2); }
main > section:nth-of-type(5n+4) { --sa: var(--c3); --sa-text: var(--t3); }
main > section:nth-of-type(5n+5) { --sa: var(--c4); --sa-text: var(--t4); }
.floor { padding: calc(var(--sec) * .62) 0 calc(var(--sec) * .5); }
.floor-label { margin: 0 0 .9em; font: 600 .875rem/1.3 var(--f-hud); letter-spacing: .12em; text-transform: uppercase; color: var(--sa-text); display: flex; align-items: center; gap: 10px; }
.floor-label .ico { width: 28px; height: 28px; padding: 4px; border-radius: 9px; background: var(--sa); color: var(--on-accent); flex: none; }
.floor-label .ico.logo { width: 40px; height: 40px; }
.floor-hero { padding-top: clamp(40px, 6vw, 84px); }
.floor-hero > .lede { max-width: 66ch; }
.floor > :last-child { margin-bottom: 0; }
/* the platform each floor stands on: chunky, glossy, zig-zagging up the tower. It is a real element,
   <i class="ledge"> (the first child of every floor, written by generate.py), never a pseudo-element:
   the box the stylesheet draws is the box the floppy stands on and the box the tests measure. Its
   2 px outline is a real border, so the element's border box IS the visible bar, outline included.
   Its child .ledge-tag is the floor badge. In 1984 the same element is the window's title bar. */
.ledge { display: none; }
html:not([data-era="1984"]) main > section + section { margin-top: 26px; }
html:not([data-era="1984"]) main > section + section > .ledge { display: block; position: absolute; top: -28px; height: 34px; left: -2px; right: calc(16% - 2px); border: 2px solid #1A0B3D; border-radius: 17px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75) 0 3px, transparent 3px), linear-gradient(90deg, transparent 0 calc(100% - 2px), rgba(0, 0, 0, .14) 0) 0 0 / 64px 18px repeat-x, linear-gradient(180deg, var(--sa) 0 18px, color-mix(in srgb, var(--sa) 55%, #1A0B3D) 18px);
  box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--sa) 65%, transparent); }
html:not([data-era="1984"]) main > section:nth-of-type(even) > .ledge { left: -2px; right: calc(16% - 2px); }
html:not([data-era="1984"]) main > section:nth-of-type(odd) > .ledge { left: calc(16% - 2px); right: -2px; }
html:not([data-era="1984"]) main > section + section > .ledge > .ledge-tag { position: absolute; top: -14px; left: 14px; padding: 7px 12px 6px; border-radius: 10px; background: var(--c4); color: #1A0B3D; font: 600 .875rem/1 var(--f-hud); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transform: rotate(-4deg); box-shadow: 0 0 0 2px #1A0B3D, 0 4px 0 #1A0B3D; }
html:not([data-era="1984"]) main > section + section > .ledge > .ledge-tag::before { content: "Floor " counter(floor, decimal-leading-zero); content: "Floor " counter(floor, decimal-leading-zero) / ""; }
html:not([data-era="1984"]) main > section:nth-of-type(odd) > .ledge > .ledge-tag { left: auto; right: 14px; transform: rotate(4deg); }
.calm main > section + section > .ledge { background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0 3px, transparent 3px), linear-gradient(180deg, var(--sa) 0 13px, color-mix(in srgb, var(--sa) 55%, #1A0B3D) 13px) !important; left: -2px !important; right: -2px !important; }
.calm main > section + section > .ledge > .ledge-tag { top: -6px !important; left: 14px !important; right: auto !important; transform: rotate(-3deg) !important; }

/* ---------------------------------------------------------------- components */
.card, .cell, .int-tile, .appshot, .specs, .demo, .apply, .callout, details.connect, .proof-grid > li, .vault-grid > li, .vault-steps > li, .cards > li, .tapcard {
  background: linear-gradient(var(--card-fill), var(--card-fill)) padding-box, conic-gradient(from 210deg at 70% 30%, var(--sa, var(--c5)), var(--c2), var(--c5), var(--c1), var(--sa, var(--c5))) border-box;
  border: var(--bw) solid transparent; border-radius: var(--r-card); box-shadow: 0 6px 0 var(--ridge), 0 26px 40px -30px var(--glow); }
.card, .cell, .int-tile, .demo, .apply, .proof-grid > li, .vault-grid > li, .vault-steps > li, .cards > li { padding: clamp(18px, 2.2vw, 26px); }
.cell, .int-tile, .proof-grid > li, .vault-grid > li, .cards > li { transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), box-shadow .22s ease; }
.cell:hover, .int-tile:hover, .proof-grid > li:hover, .vault-grid > li:hover, .cards > li:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--ridge), 0 30px 44px -28px var(--glow); }
.cell h2, .cell h3 { font-size: var(--fs-h3); margin: 0 0 .35em; font-weight: var(--fw-sub); }
.cell p:last-child, .card p:last-child { margin-bottom: 0; }
.grid2 { display: grid; gap: 22px; grid-template-columns: 1fr; margin: 0 0 1.2em; }
@media (min-width: 720px) { .grid2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid2:has(> :nth-child(3):last-child), .grid2:has(> :nth-child(6):last-child), .grid2:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, 1fr); } }
/* /safety: six long rules read better two across */
@media (min-width: 1000px) { main .grid2.rules:has(> .rule) { grid-template-columns: repeat(2, 1fr); } }
.duo { display: grid; gap: clamp(22px, 4vw, 48px); align-items: start; margin: 1.6em 0; }
@media (min-width: 900px) { .duo { grid-template-columns: 1.05fr .95fr; } }
.dtext > :first-child { margin-top: 0; }
.callout { padding: 16px 20px; margin: 1.2em 0; --sa: var(--c4); }
.callout p { margin: 0; font-weight: 600; }
.steps { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 1.4em 0; counter-reset: step; }
@media (min-width: 1000px) { .steps:has(> :nth-child(5):last-child), .steps:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); } .steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
:is(.fam-article, .fam-connect, .fam-form) .steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.step { position: relative; padding: 22px 22px 20px; border-radius: var(--r-card); background: color-mix(in srgb, var(--card-fill) 70%, transparent); border: var(--bw) dashed var(--edge-strong); }
.step h2, .step h3 { font-size: var(--fs-h3); margin: 0 0 .35em; }
.step p { margin: 0; }
.n, .num { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0 0 12px; border-radius: 12px; background: var(--sa, var(--c5)); color: #1A0B3D; font: 900 1.125rem/1 var(--f-display); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 3px 0 var(--ridge); flex: none; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 1em 0; }
.badge { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: var(--bw) solid var(--edge-strong); background: var(--surface-2); font: 600 .875rem/1 var(--f-hud); letter-spacing: .03em; color: var(--ink); }
pre { margin: 1.2em 0; padding: 18px 20px; overflow-x: auto; border-radius: 14px; background: var(--code-bg); color: var(--code-ink); font: .875rem/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; border: var(--bw) solid var(--edge); box-shadow: 0 5px 0 var(--ridge); white-space: pre; tab-size: 2; }
pre code { background: none; padding: 0; color: inherit; }
.copy { position: relative; }
.copy-btn { position: absolute; top: 6px; right: 6px; min-height: 44px; min-width: 64px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .3); background: var(--code-bg); color: var(--code-ink); font: var(--fw-ui) .875rem/1 var(--f-ui); cursor: pointer; }
.copy-btn:hover { background: color-mix(in srgb, var(--code-bg) 80%, #fff); }
.copy > pre { padding-right: 84px; }
.int-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: .6em 0 1.2em; }
.int-tile { display: grid; gap: 4px; align-content: start; }
.int-tile svg { width: 34px; height: 34px; padding: 5px; margin-bottom: 8px; border-radius: 10px; background: var(--sa, var(--c5)); }
.int-tile svg [fill="#111"] { fill: #1A0B3D; } .int-tile svg [stroke="#111"] { stroke: #1A0B3D; }
.int-tile .in { font: var(--fw-sub) 1.125rem/1.25 var(--f-display); }
.int-tile .id { font-size: var(--fs-small); color: var(--ink-3); }
details.connect { margin: 12px 0; padding: 0; overflow: hidden; }
details summary { cursor: pointer; }
details.connect summary { display: flex; align-items: center; min-height: 56px; padding: 0 20px; font: var(--fw-sub) 1.0625rem/1.3 var(--f-display); list-style: none; }
details summary::-webkit-details-marker { display: none; }
details.connect summary::after, .details summary::after, .faq summary::after { content: "+"; margin-left: auto; padding-left: 12px; font: 900 1.4rem/1 var(--f-display); color: var(--sa-text); }
details[open].connect summary::after, .details details[open] > summary::after { content: "\2212"; }
.cbody { padding: 0 20px 16px; }
.paybadges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pay { padding: 3px 8px; border: 1px solid var(--edge-strong); border-radius: 6px; font-size: .875rem; }

/* product shots, drawn in the house style */
.appshot { overflow: hidden; font-size: .9375rem; --sa: var(--c2); }
.as-title { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border-bottom: var(--bw) solid var(--edge); font: 600 .875rem/1 var(--f-hud); color: var(--ink-2); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.as-title::before { content: ""; position: absolute; left: 14px; width: 42px; height: 10px; background: radial-gradient(circle 5px at 5px 5px, #FF6B7A 98%, transparent) 0 0/16px 10px repeat-x; opacity: .9; }
.appshot { position: relative; }
.as-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 14px; font-size: .875rem; color: var(--ink-2); border-bottom: 1px solid var(--edge); }
.as-body { padding: 14px 16px; white-space: pre-line; line-height: 1.6; }
.as-line { display: block; }
.dim { color: var(--ink-3); }
.lnk { color: var(--link); font-weight: 600; }
.as-dot, .as-light { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c3) 30%, transparent); }
.as-chip { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.as-agent { background: color-mix(in srgb, var(--c2) 22%, transparent); }
.as-cursor { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.15em; background: var(--c1); animation: blinkc 1.1s steps(1) infinite; }
@keyframes blinkc { 50% { opacity: 0; } }
.as-back { padding: 10px 14px 12px; border-top: 1px solid var(--edge); font-size: .875rem; color: var(--ink-2); display: grid; gap: 4px; }
.bh { font: 600 .875rem/1 var(--f-hud); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.as-rule { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--edge); }
.lvl { margin-left: auto; padding: 3px 8px; border-radius: 7px; background: color-mix(in srgb, var(--ink) 10%, transparent); font: 600 .875rem/1 var(--f-hud); letter-spacing: .06em; }
.df-del { background: color-mix(in srgb, var(--danger) 16%, transparent); text-decoration: line-through; }
.df-add { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.df-g { display: inline-block; width: 1.2em; font-weight: 600; }

/* forms */
form label { display: block; margin: 16px 0 6px; font-weight: 600; font-size: 1rem; }
input:not([type="range"]):not([type="hidden"]), select, textarea { width: 100%; max-width: 520px; min-height: 48px; padding: 10px 14px; border: var(--bw) solid var(--edge-strong); border-radius: 12px; background: var(--surface-2); color: var(--ink); font: 400 1rem/1.4 var(--f-body); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--ink) 6%, transparent); }
textarea { min-height: 120px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
input.invalid, select.invalid, textarea.invalid, input:user-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.opt { font-weight: 400; color: var(--ink-3); }
.alert { padding: 12px 16px; border-radius: 12px; border: var(--bw) solid var(--danger); color: var(--ink); background: color-mix(in srgb, var(--danger) 12%, transparent); }


/* pricing */
.term-toggle { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 22px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 9%, transparent); border: var(--bw) solid var(--edge); }
.tt-btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); font: var(--fw-ui) .9375rem/1 var(--f-ui); cursor: pointer; }
.tt-btn.on { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 -3px 0 var(--accent-ridge); }
.plans { align-items: stretch; }
@media (min-width: 900px) {
  .grid2.plans { grid-template-columns: repeat(3, 1fr); }
  .plans > .cell:nth-child(4) { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 8px 28px; align-items: center; }
  .plans > .cell:nth-child(4) h2 { margin: 0; }
  .plans > .cell:nth-child(4) p { margin: 0; }
}
.plans > .cell:nth-child(2) { --sa: var(--c4); }
.plans .cell { display: flex; flex-direction: column; }
.plans .cell > p:last-child, .plans .term > p { margin-top: auto; }
.plans .term { margin-top: auto; padding-top: 10px; }
.plans[data-term="yearly"] .term-monthly, .plans[data-term="monthly"] .term-yearly { display: none; }
.price-one { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 12px; }
.pv { font: 900 clamp(2.25rem, 1.8rem + 1.4vw, 2.875rem)/1 var(--f-display); color: var(--ink); }
.pl { font-size: var(--fs-small); color: var(--ink-3); }

/* ---------------------------------------------------------------- the Chief of Staff pages */
.hero { display: grid; gap: clamp(28px, 4vw, 48px); padding: clamp(36px, 6vw, 80px) 0 calc(var(--sec) * .6); align-items: center; }
@media (min-width: 960px) { .hero { grid-template-columns: 1.05fr .95fr; } }
.hero-copy > .lede { max-width: 56ch; }
.hero h1 { margin-top: .25em; }
.hello { display: none; }
html:not([data-era="1984"]) .hero-stage::before { content: ""; position: absolute; z-index: -1; inset: 8% -6% -4% -6%; border-radius: 50%; background: conic-gradient(from 120deg, var(--c1), var(--c4), var(--c3), var(--c2), var(--c5), var(--c1)); filter: blur(70px); opacity: .32; pointer-events: none; }
html:not([data-era="1984"]) .hero .screen { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c2) 55%, transparent), 0 8px 0 var(--ridge), 0 30px 80px -30px color-mix(in srgb, var(--c1) 60%, transparent); }
.hero-stage { position: relative; display: grid; gap: 14px; justify-items: stretch; perspective: 1200px; }
.mascot-perch { display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; min-height: 96px; }
memava-mascot { flex: none; cursor: pointer; }
.bubble { position: relative; align-self: center; margin: 0 6px 34px 0; max-width: 18em; padding: 10px 14px; border-radius: 16px; background: var(--surface-2); color: var(--ink); border: var(--bw) solid var(--edge-strong); font: var(--fw-ui) .9375rem/1.35 var(--f-ui); box-shadow: 0 4px 0 var(--ridge); }
.bubble::after { content: ""; position: absolute; right: -8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: inherit; border-right: var(--bw) solid var(--edge-strong); border-top: var(--bw) solid var(--edge-strong); transform: rotate(45deg); }
.bubble.pop { animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.screen { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--card-fill); border: var(--bw) solid var(--edge-strong); box-shadow: 0 8px 0 var(--ridge), 0 40px 70px -36px var(--glow); transition: transform .4s cubic-bezier(.2, .9, .3, 1); transform-style: preserve-3d; }
.screen img, .screen video { display: block; width: 100%; }
.winbar { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-bottom: var(--bw) solid var(--edge); font: 600 .875rem/1 var(--f-hud); color: var(--ink-2); }
.winbar i { width: 11px; height: 11px; border-radius: 50%; background: #FF6B7A; }
.winbar i + i { background: var(--c4); } .winbar i + i + i { background: var(--c3); }
.winbar span { margin-left: 8px; }
.vid { position: relative; }
/* The video stays invisible until its first frame plays; the poster painted on .vid shows meanwhile, so a video that cannot load shows the poster, never a broken box with its description. */
.vid video.loop { opacity: 0; transition: opacity .2s; }
.vid video.loop.ready { opacity: 1; }
.vctl { position: absolute; right: 12px; bottom: 12px; min-height: 44px; min-width: 72px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--r-pill); background: rgba(10, 11, 42, .72); color: #F5F3FF; font: var(--fw-ui) .875rem/1 var(--f-ui); cursor: pointer; }
.legend { list-style: none; counter-reset: lg; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.legend li { counter-increment: lg; display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.legend li::before { content: counter(lg); display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--c2); color: #1A0B3D; font: 900 .875rem/1 var(--f-display); }
.proof { list-style: none; padding: 0; margin: 1em 0; display: grid; gap: 8px; }
.proof li { display: flex; gap: 10px; align-items: baseline; margin: 0; }
.proof li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c3); transform: rotate(45deg) translateY(-1px); }
.how { padding: 8px 0 calc(var(--sec) * .5); }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.how-steps li { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 18px; border-radius: var(--r-card); background: color-mix(in srgb, var(--card-fill) 72%, transparent); border: var(--bw) solid var(--edge); }
.how-steps h3 { margin: 4px 0 .25em; font-size: 1.1875rem; }
.how-steps p { margin: 0; color: var(--ink-2); }
.block { padding: calc(var(--sec) * .62) 0 calc(var(--sec) * .5); }
.see-note { margin-top: -.4em; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.tabs [role="tab"] { min-height: 44px; padding: 0 16px; border: var(--bw) solid var(--edge-strong); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); font: var(--fw-ui) .9375rem/1 var(--f-ui); cursor: pointer; box-shadow: 0 3px 0 var(--ridge); }
.tabs [role="tab"][aria-selected="true"] { background: var(--sa); color: #1A0B3D; border-color: transparent; }
[role="tabpanel"].panel .screen { max-width: 820px; margin-inline: auto; }
[role="tabpanel"].panel > .fine { max-width: 820px; margin: 12px auto 0; text-align: center; }
.demo { position: relative; margin-top: 18px; }
.demo h3 { margin-top: 0; }
.demo-top { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.helper { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.helper input { width: 12em; min-height: 44px; font-weight: 600; }
.mode { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r-pill); border: var(--bw) solid var(--edge-strong); }
.mode button { min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); font: var(--fw-ui) .9375rem/1 var(--f-ui); cursor: pointer; }
.mode button[aria-pressed="true"] { background: var(--c2); color: #1A0B3D; }
.tasks { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.chip { min-height: 44px; padding: 8px 14px; border: var(--bw) solid var(--edge-strong); border-radius: 14px; background: var(--surface-2); color: var(--ink); font: 600 .9375rem/1.3 var(--f-body); text-align: left; cursor: pointer; box-shadow: 0 3px 0 var(--ridge); }
.chip:hover { transform: translateY(-1px); }
.chip:disabled { opacity: .55; cursor: default; transform: none; }
.log { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.log li { margin: 0; padding: 10px 14px; border-left: 4px solid var(--c2); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--ink) 6%, transparent); animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.tapcard { margin: 12px 0; padding: 14px 16px; --sa: var(--c4); }
.pv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
.demo-foot { display: flex; gap: 8px; }
.combo { position: absolute; right: 18px; top: 14px; padding: 6px 14px 7px; border-radius: 12px; background: var(--c1); color: #1A0B3D; font: 600 1.125rem/1 var(--f-hud); letter-spacing: .04em; text-transform: uppercase; transform: rotate(-6deg); box-shadow: 0 0 0 2px #1A0B3D, 0 4px 0 #1A0B3D; pointer-events: none; animation: combo 1s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes combo { 0% { transform: rotate(-6deg) scale(.4); opacity: 0; } 25% { transform: rotate(-6deg) scale(1.12); opacity: 1; } 75% { opacity: 1; } 100% { transform: rotate(-6deg) translateY(-18px) scale(1); opacity: 0; } }

/* bands: private (trust, in jade) and the circle (the members' floor) */
.promise, .circle, .vault-band { position: relative; margin: calc(var(--sec) * .3) 0; padding: clamp(28px, 4vw, 56px); border-radius: calc(var(--r-card) + 10px); }
.promise { --sa: var(--mint); --sa-text: var(--t-jade); background: radial-gradient(700px 320px at 100% 0%, color-mix(in srgb, var(--mint) 22%, transparent), transparent 70%) padding-box, linear-gradient(color-mix(in srgb, var(--jade) 14%, var(--card-fill)), color-mix(in srgb, var(--jade) 14%, var(--card-fill))) padding-box, linear-gradient(135deg, var(--mint), var(--c2) 60%, var(--jade)) border-box; border: 2px solid transparent; box-shadow: 0 8px 0 var(--ridge), 0 40px 60px -40px color-mix(in srgb, var(--mint) 50%, transparent); }
.promise-in, .circle-in, .vault-in { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 960px) { .private-in:has(> :nth-child(2)) { grid-template-columns: 1.15fr .85fr; } .private-in:not(:has(> :nth-child(2))) .facts { grid-template-columns: 1fr 1fr; } .circle-in:not(:has(> :nth-child(2))) .house { grid-template-columns: 1fr 1fr; } .circle-in:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; } .vault-in { grid-template-columns: 1.05fr .95fr; } .vault-story { grid-column: 1 / -1; } }
.eyebrow.light { color: var(--t-jade); }
.facts { list-style: none; padding: 0; display: grid; gap: 10px; margin: 1em 0; }
.facts li { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--card-fill); border: 1px solid color-mix(in srgb, var(--jade) 35%, transparent); }
.facts strong { color: var(--ink); }
.rooms { margin: 0; }
.rooms svg { display: block; width: 100%; height: auto; }
.rooms .room { fill: color-mix(in srgb, var(--ink) 10%, transparent); stroke: var(--edge-strong); stroke-width: 2; }
.rooms .lock { fill: var(--ink-3); } .rooms .lockarc { fill: none; stroke: var(--ink-3); stroke-width: 2.5; }
.rooms .you .room { fill: var(--c4); stroke: #1A0B3D; stroke-width: 3; }
.rooms figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--ink-3); text-align: center; }
.circle { --sa: var(--c4); --sa-text: var(--t4); background: radial-gradient(2px 2px at 20% 30%, var(--c4) 50%, transparent 51%) 0 0 / 120px 90px padding-box, radial-gradient(1.5px 1.5px at 70% 60%, var(--c2) 50%, transparent 51%) 0 0 / 150px 110px padding-box, linear-gradient(140deg, color-mix(in srgb, var(--c1) 18%, var(--card-fill)), color-mix(in srgb, var(--c5) 22%, var(--card-fill))) padding-box, conic-gradient(from 200deg, var(--c4), var(--c1), var(--c5), var(--c2), var(--c4)) border-box; border: 2px solid transparent; box-shadow: 0 8px 0 var(--ridge), 0 40px 70px -40px var(--glow); }
.eyebrow.gold { color: var(--t4); }
.seal { float: right; margin: 0 0 8px 16px; transform: rotate(8deg); image-rendering: pixelated; }
.house { list-style: none; padding: 0; margin: 1em 0; display: grid; gap: 10px; }
.house li { margin: 0; padding: 10px 14px; border-left: 4px solid var(--c4); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--card-fill) 70%, transparent); }
.good { padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--jade) 14%, transparent); }
.apply { --sa: var(--c4); }
.apply-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.apply-head h3 { margin: 0; }
.apply form input, .apply form select, .apply form textarea { max-width: none; }
.apply-actions { margin: 18px 0 10px; }
.apply.ready #a-send { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
details.more { margin: 14px 0 4px; }
details.more summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.details details, .faq { margin: 0 0 12px; border-radius: var(--r-card); border: var(--bw) solid var(--edge-strong); background: color-mix(in srgb, var(--card-fill) 82%, transparent); box-shadow: 0 4px 0 var(--ridge); }
.details details > summary { display: flex; align-items: center; min-height: 60px; padding: 0 20px; font: var(--fw-sub) 1.125rem/1.3 var(--f-display); list-style: none; }
.details details > :not(summary) { margin-inline: 20px; }
.details details > :last-child { margin-bottom: 18px; }
.details details .cards { margin-top: 4px; }
.cards { list-style: none; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cards li { margin: 0; }
.cards h3 { margin: 0 0 .3em; }
.stations { display: grid; gap: 24px; }
@media (min-width: 800px) { .stations { grid-template-columns: 1fr 1fr; } }
.track { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 4px solid var(--c3); }
.soonlist { border-left-style: dashed; border-left-color: var(--edge-strong); }
.stop { position: relative; margin: 0; padding: 7px 0 7px 12px; }
.stop::before { content: ""; position: absolute; left: -33px; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: var(--c3); border: 3px solid var(--card-fill); }
.stop.soon { color: var(--ink-2); }
.stop.soon::before { background: var(--card-fill); border-color: var(--edge-strong); }
.faq summary, .faq h3 { padding: 0; }
.faq > summary { display: flex; align-items: center; min-height: 60px; padding: 0 20px; font: var(--fw-sub) 1.125rem/1.3 var(--f-display); list-style: none; }
.faq > :not(summary) { margin-inline: 20px; }
.received .hero-stage { justify-items: center; }
.big-seal { image-rendering: pixelated; }
.specs { display: grid; gap: 0; margin: 0 0 1em; padding: 6px 20px; }
.specs div { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--edge); }
.specs div:last-child { border-bottom: 0; }
.specs dt { min-width: 110px; font-weight: 600; color: var(--ink-2); }
.specs dd { margin: 0; }
.notes li { margin-bottom: .5em; }

/* home */
.except { max-width: 60ch; }
.proof-grid { list-style: none; padding: 0; margin: 1.2em 0 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.proof-grid > li { display: flex; flex-direction: column; margin: 0; }
.proof-grid h3 { margin: 0 0 .3em; }
.go { margin-top: auto; font: var(--fw-ui) 1rem/1.3 var(--f-ui); }
.vault-band { --sa: var(--c2); --sa-text: var(--t2); background: linear-gradient(color-mix(in srgb, var(--c2) 9%, var(--card-fill)), color-mix(in srgb, var(--c2) 9%, var(--card-fill))) padding-box, linear-gradient(135deg, var(--c2), var(--c5) 55%, var(--c3)) border-box; border: 2px solid transparent; box-shadow: 0 8px 0 var(--ridge), 0 40px 60px -40px color-mix(in srgb, var(--c2) 45%, transparent); }
.brandline { font: var(--fw-display) clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.3 var(--f-display); }
.vault-copy code { display: block; margin-top: 8px; padding: 10px 12px; background: var(--code-bg); color: var(--code-ink); border-radius: 10px; }
.vault-media video { display: block; width: 100%; border-radius: var(--r-card); border: var(--bw) solid var(--edge-strong); box-shadow: 0 6px 0 var(--ridge); }
.vault-steps { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 1em 0 1.6em; }
.vault-steps > li, .vault-grid > li { margin: 0; padding: 18px; }
.vault-grid { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin: 1em 0; }
.vault-steps p, .vault-grid p { margin: 0; color: var(--ink-2); }
.vault-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font: var(--fw-ui) 1rem/1.4 var(--f-ui); }
.home-faq h3 { margin-top: 1.4em; }
.home-faq p { max-width: 70ch; color: var(--ink-2); }
.more-cols { display: grid; gap: 8px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.more-cols ul { margin: 0; }

/* ---------------------------------------------------------------- footer */
.site-foot { margin-top: calc(var(--sec) * .6); padding: 0 var(--gut) 28px; }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: clamp(28px, 4vw, 44px); border-radius: 26px 26px 18px 18px; background: var(--surface); border: var(--bw) solid var(--edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -6px 0 0 color-mix(in srgb, var(--c5) 70%, transparent) inset; }
.foot-top { display: grid; gap: 28px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.foot-brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--edge); }
.foot-brand p { margin: 0; color: var(--ink-2); font-size: var(--fs-small); }
.foot-col h2 { margin: 0 0 10px; font: 600 .875rem/1.3 var(--f-hud); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin: 0; }
.foot-col a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink); text-decoration: none; font-size: .9375rem; }
.foot-col a:hover { text-decoration: underline; }
.foot-fine { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--edge); font-size: .875rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.foot-fine a, .foot-fine button { color: var(--ink-2); }

/* ---------------------------------------------------------------- consent: one slim bar */
.mv-consent { position: fixed; z-index: 60; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(1400px, calc(100% - 24px)); display: block; padding: 10px 370px 10px 18px; letter-spacing: -.003em; border-radius: 16px; background: var(--surface-2); color: var(--ink); border: var(--bw) solid var(--edge-strong); box-shadow: 0 5px 0 var(--ridge), 0 18px 40px -18px rgba(0, 0, 0, .45); font-size: .875rem; line-height: 1.4; }
.mv-consent h2 { display: inline; margin: 0; font: 600 .875rem/1.4 var(--f-body); color: var(--ink); }
.mv-consent h2::after { content: ". "; }
/* In 2030 every h2 gets a decorative accent pill (html:not([data-era]) h2::after). The consent title is inline text, so it gets its period and no pill, with more specificity than that rule. */
html:not([data-era="1984"]) .mv-consent h2::after { content: ". "; display: inline; width: auto; height: auto; margin: 0; border-radius: 0; background: none; box-shadow: none; }
.mv-consent p { display: inline; margin: 0; color: var(--ink-2); }
.mv-consent p + p::before { content: " "; }
.mv-row { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; }
.mv-row button { min-height: 44px; padding: 0 16px; border-radius: 12px; border: var(--bw) solid var(--edge-strong); background: var(--surface-2); color: var(--ink); font: var(--fw-ui) .875rem/1 var(--f-ui); cursor: pointer; }
.mv-row .mv-yes { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: inset 0 -3px 0 var(--accent-ridge); }
.mv-row a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: .875rem; }

/* ---------------------------------------------------------------- tower gauge and walker */
.gauge { display: none; }
@media (min-width: 1360px) {
  html.js:not([data-era="1984"]) .gauge { position: fixed; z-index: 30; right: calc(50% - 677px); top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 10px; width: 64px; pointer-events: none; font-family: var(--f-hud); }
}
.g-floor { display: grid; justify-items: center; padding: 8px 6px; width: 64px; border-radius: 14px; background: var(--c4); color: #1A0B3D; box-shadow: 0 0 0 2px #1A0B3D, 0 4px 0 #1A0B3D; }
.g-k { font: 600 .875rem/1 var(--f-hud); letter-spacing: .1em; text-transform: uppercase; }
.g-n { font: 600 1.625rem/1 var(--f-hud); }
.g-track { position: relative; width: 16px; height: 34vh; border-radius: 999px; background: color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: inset 0 0 0 2px var(--edge-strong); overflow: hidden; }
.g-fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p, 0) * 100%); border-radius: 999px; background: linear-gradient(0deg, var(--c2), var(--c5) 50%, var(--c1)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55); }
.g-combo { min-height: 1.4em; font: 600 .9375rem/1.1 var(--f-hud); text-transform: uppercase; letter-spacing: .04em; color: var(--t1); text-align: center; transform: rotate(-8deg); }
.g-combo.pop { animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.confetti { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.confetti i { position: absolute; display: block; border-radius: 2px; }

/* ---------------------------------------------------------------- motion (2030 only, opt-in) */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-era="1984"]) .floor-hero h1, html:not([data-era="1984"]) .hero h1 { animation: h1in .7s cubic-bezier(.2, 1.5, .4, 1) both; transform-origin: 0 100%; }
  @keyframes h1in { from { transform: translateY(18px) scaleY(.9); } }
  [data-era="1984"] .hello path { stroke-dasharray: 1; animation: hello 1.8s .2s ease-in-out both; }
  @keyframes hello { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  html:not([data-era="1984"]) body::before { inset: -12%; animation: aurora 38s ease-in-out infinite alternate; will-change: transform; }
  @keyframes aurora { to { transform: translate3d(4%, 3%, 0) scale(1.06); } }
  @supports (animation-timeline: view()) {
    html:not([data-era="1984"]) body:not(.calm) main > section > *:not(.floor-label):not(.ledge) { animation: floorin linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    @keyframes floorin { from { opacity: .01; transform: translateY(26px); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* switching eras: 2030 to 1984 dissolves through an ordered dither (site.js steps the mask), 1984 to 2030 warps in */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .42s; }
.vt-dither::view-transition-old(root) { animation: none; }
.vt-dither::view-transition-new(root) { animation: none; -webkit-mask-size: 12px 12px; mask-size: 12px 12px; -webkit-mask-repeat: repeat; mask-repeat: repeat; image-rendering: pixelated; }
.vt-warp::view-transition-old(root) { animation: .32s ease-in both vt-out; }
.vt-warp::view-transition-new(root) { animation: .42s cubic-bezier(.2, 1.3, .4, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.04); filter: blur(8px) saturate(1.6); } }

/* ---------------------------------------------------------------- 2030: the sticker headline and the calm pages */
html:not([data-era="1984"]) h1 { color: var(--h1-fill); -webkit-text-stroke: .16em var(--h1-stroke); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--h1-drop), 0 .2em 26px rgba(0, 0, 0, .18); letter-spacing: -.005em; }
html:not([data-era="1984"]) h2::after { content: ""; display: block; width: 56px; height: 7px; margin-top: .3em; border-radius: 999px; background: var(--sa, var(--c5)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55); }
html:not([data-era="1984"]) .cell h2::after, html:not([data-era="1984"]) .step h2::after, html:not([data-era="1984"]) .foot-col h2::after, html:not([data-era="1984"]) .sr::after { content: none; }
.calm .cell:hover, .calm .int-tile:hover, .calm .proof-grid > li:hover { transform: none; box-shadow: 0 6px 0 var(--ridge), 0 26px 40px -30px var(--glow); }
.fam-article main > section, .fam-connect main > section { max-width: 860px; margin-inline: auto; }
/* reading pages: each floor is a calm paper panel, so long text never sits on the open sky */
html:not([data-era="1984"]) :is(.fam-article, .fam-connect, .fam-form, .fam-utility, .fam-security) main > section { padding: clamp(24px, 4vw, 48px); margin-top: 48px; background: var(--card-fill); border: var(--bw) solid var(--edge); border-radius: calc(var(--r-card) + 6px); box-shadow: 0 8px 0 var(--ridge), 0 30px 60px -40px var(--glow); }
html:not([data-era="1984"]) :is(.fam-article, .fam-connect, .fam-form, .fam-utility, .fam-security) main > section:first-child { margin-top: clamp(28px, 4vw, 48px); }
html:not([data-era="1984"]) :is(.fam-article, .fam-connect, .fam-form, .fam-utility, .fam-security) main > section + section { margin-top: 64px; }
.pg-guides main > section > ul { list-style: none; padding: 0; display: grid; gap: 14px; }
.pg-guides main > section > ul > li { margin: 0; padding: 14px 18px; border-radius: 14px; border: var(--bw) solid var(--edge); background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.pg-guides main > section > ul > li > a:first-child { font: var(--fw-sub) 1.125rem/1.3 var(--f-display); }
[data-era="1984"] .pg-guides main > section > ul > li { border: 2px solid #000; border-radius: 0; background: #fff; }
.fam-form main > section { max-width: 720px; margin-inline: auto; }
[data-era="1984"] .fam-article main > section, [data-era="1984"] .fam-connect main > section, [data-era="1984"] .fam-form main > section, [data-era="1984"] .fam-utility main > section { margin-inline: auto; }
.fam-article .floor-hero h1 { font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.125rem); }
.fam-article h2 { margin-top: 1.4em; }
.fam-article .floor > h2:first-child, .fam-article .floor > .ledge:first-child + h2 { margin-top: 0; }
.fam-article .floor p, .fam-article .floor li { max-width: 68ch; }
.fam-utility main { min-height: 50vh; display: grid; place-items: center; }
.fam-utility main > section { text-align: center; max-width: 720px; }
.fam-utility .floor-label { justify-content: center; }
.fam-utility .lede { margin-inline: auto; }

/* ---------------------------------------------------------------- 1984: windows on a dither */
[data-era="1984"] body { font-size: 1.0625rem; line-height: 1.5; }
/* Chicago Kare is a bitmap face on a 16 px grid: crisp only at 16, 32 or 48 px, unsmoothed, on whole
   pixels. Interface text is 16 px, h2 32, h1 48 (32 on phones); long reading stays in Albert Sans. */
[data-era="1984"] { font-synthesis: none; }
[data-era="1984"] :is(h1, h2, h3, h4):not(.mv-consent h2) { -webkit-font-smoothing: none; text-rendering: optimizeSpeed; }
[data-era="1984"] :is(.skip, .eyebrow, .by, .brand, .site-nav a, .mh-link, .menu-btn, .era button, .btn, .floor-label, .n, .num, .badge, .copy-btn, .int-tile .in, details.connect summary, .details details > summary, .faq > summary, .as-title, .bh, .lvl, .tt-btn, .bubble, .winbar, .vctl, .tabs [role="tab"], .mode button, .go, .vault-links, .foot-col h2, .mv-row button),
[data-era="1984"] main > section[data-label]::before, [data-era="1984"] .legend li::before, [data-era="1984"] :is(details.connect, .details, .faq) summary::after { font-family: var(--f-display); font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; -webkit-font-smoothing: none; text-rendering: optimizeSpeed; }
[data-era="1984"] :is(.skip, .by, .site-nav a, .mh-link, .menu-btn, .era button, .btn, .n, .num, .badge, .copy-btn, .tt-btn, .vctl, .tabs [role="tab"], .mode button, .mv-row button, .lvl, .bh) { line-height: 16px; }
[data-era="1984"] :is(.eyebrow, .int-tile .in, details.connect summary, .details details > summary, .faq > summary, .bubble, .go, .vault-links, .foot-col h2) { line-height: 24px; }
[data-era="1984"] h1, [data-era="1984"] .fam-article .floor-hero h1 { font-size: 48px; line-height: 56px; }
[data-era="1984"] h2 { line-height: 40px; }
[data-era="1984"] :is(h3, h4, .how-steps h3) { font-size: 16px; line-height: 24px; }
[data-era="1984"] .pv { font-size: 48px; line-height: 48px; font-weight: 400; }
[data-era="1984"] :is(.big, .brandline) { font-family: var(--f-body); font-weight: 600; }
[data-era="1984"] .pg-guides main > section > ul > li > a:first-child { font: 400 16px/24px var(--f-display); -webkit-font-smoothing: none; }
[data-era="1984"] body::before { background: #fff repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 2px 2px; }
[data-era="1984"] body::after { display: none; }
[data-era="1984"] a { text-decoration-thickness: 2px; }
[data-era="1984"] :focus-visible { outline: 2px dotted #000; outline-offset: 2px; border-radius: 0; }
[data-era="1984"] h1, [data-era="1984"] h2, [data-era="1984"] h3, [data-era="1984"] h4 { text-wrap: pretty; }
[data-era="1984"] code { background: #fff; outline: 1px solid #000; border-radius: 0; }
[data-era="1984"] li::marker { color: #000; }
[data-era="1984"] .by { border-radius: 0; }
/* menu bar */
[data-era="1984"] .masthead { padding: 0; }
[data-era="1984"] .mh-in { max-width: none; min-height: 48px; padding: 2px 10px; border: 0; border-bottom: 2px solid #000; border-radius: 0; background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-era="1984"] .brand { padding: 0 12px 0 6px; }
[data-era="1984"] .mark { --floppy-body: #000; --floppy-shutter: #fff; --floppy-label: #fff; --floppy-face: #000; }
[data-era="1984"] .site-nav ul { justify-content: flex-start; gap: 0; }
[data-era="1984"] .site-nav a, [data-era="1984"] .mh-link { border-radius: 0; padding: 0 12px; }
[data-era="1984"] .site-nav a:hover, [data-era="1984"] .mh-link:hover, [data-era="1984"] .site-nav a[aria-current="page"] { background: #000; color: #fff; box-shadow: none; }
[data-era="1984"] .era { padding: 2px; border: 2px solid #000; border-radius: 0; background: #fff; }
[data-era="1984"] .era::before { top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 0; background: #000; box-shadow: none; transition: none; }
[data-era="1984"] .era button { border-radius: 0; min-height: 44px; }
[data-era="1984"] .era button[aria-checked="true"] { color: #fff; }
/* push buttons, with the thick ring on the default one */
[data-era="1984"] .btn { --b-bg: #fff; --b-ink: #000; border: 2px solid #000; border-radius: 9px; box-shadow: none; transform: none; transition: none; letter-spacing: .01em; }
[data-era="1984"] .btn:not(.ghost):not(.quiet):not(#hero-sound) { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #000; margin: 4px; }
.vault-band .btn:not(.solid) { margin: 0; }
[data-era="1984"] .vault-band .btn:not(.solid) { box-shadow: none !important; margin: 0 !important; }
[data-era="1984"] .btn:hover, [data-era="1984"] .btn:active { background: #000; color: #fff; transform: none; }
[data-era="1984"] .cta-row { gap: 18px 16px; }
/* windows */
[data-era="1984"] main { padding-top: 26px; }
[data-era="1984"] main > section { position: relative; margin: 0 0 30px; padding: 0 clamp(16px, 3vw, 36px) clamp(20px, 3vw, 34px); background: #fff; border: 2px solid #000; border-radius: 0; box-shadow: 3px 3px 0 #000; }
[data-era="1984"] main > section[data-label] { padding-top: calc(34px + clamp(18px, 2.6vw, 28px)); }
/* the title bar as a measurable box: the window's top edge, border included, where the floppy stands */
[data-era="1984"] main > section > .ledge { display: block; position: absolute; top: -2px; left: -2px; right: -2px; height: 36px; pointer-events: none; }
[data-era="1984"] .ledge-tag { display: none; }
/* the title bar: stripes, a close box at the left, the title centred on white */
[data-era="1984"] .floor-label { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 calc(-1 * clamp(16px, 3vw, 36px)) clamp(18px, 2.6vw, 28px); min-height: 34px; padding: 0 44px; border-bottom: 2px solid #000;
  background: #fff repeating-linear-gradient(180deg, #000 0 2px, #fff 2px 4px) 6px 50% / calc(100% - 12px) 18px no-repeat; color: #000; font: 400 16px/16px var(--f-display); letter-spacing: 0; text-transform: none; -webkit-font-smoothing: none; }
[data-era="1984"] main > section[data-label] { background: linear-gradient(#000, #000) 0 34px / 100% 2px no-repeat, repeating-linear-gradient(180deg, #000 0 2px, #fff 2px 4px) 6px 8px / calc(100% - 12px) 18px no-repeat, #fff; }
[data-era="1984"] main > section[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; width: max-content; max-width: calc(100% - 100px); min-height: 0; height: 34px; margin: 0; padding: 0 12px; border: 0; background: #fff; font: 400 16px/34px var(--f-display); -webkit-font-smoothing: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-era="1984"] main > section[data-label] .eyebrow.light, [data-era="1984"] main > section[data-label] .eyebrow.gold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[data-era="1984"] .floor-label .ft { padding: 4px 10px; background: #fff; }
[data-era="1984"] .floor-label::before, [data-era="1984"] main > section[data-label]::after { content: ""; position: absolute; left: 16px; top: 8px; width: 18px; height: 18px; border: 2px solid #000; background: #fff; box-shadow: 0 0 0 3px #fff; }
[data-era="1984"] .floor-label .ico { width: 26px; height: 26px; padding: 3px; border-radius: 0; background: #fff; color: #000; box-shadow: -4px 0 0 #fff, 4px 0 0 #fff; }
[data-era="1984"] .floor-label .ico.logo { width: 32px; height: 32px; padding: 0; }
/* the document window: a ruler under the title bar */
[data-era="1984"] .fam-article main > section > .floor-label, [data-era="1984"] .fam-connect main > section > .floor-label { margin-bottom: 52px; }
[data-era="1984"] .fam-article main > section > .floor-label::after, [data-era="1984"] .fam-connect main > section > .floor-label::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 2px); height: 24px; border-bottom: 2px solid #000;
  background: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 16px) 22px 100% / 100% 7px no-repeat, repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 128px) 22px 100% / 100% 16px no-repeat, #fff; }
/* cards and the rest go flat and black */
[data-era="1984"] .card, [data-era="1984"] .cell, [data-era="1984"] .int-tile, [data-era="1984"] .appshot, [data-era="1984"] .specs, [data-era="1984"] .demo, [data-era="1984"] .apply, [data-era="1984"] .callout, [data-era="1984"] details.connect, [data-era="1984"] .proof-grid > li, [data-era="1984"] .vault-grid > li, [data-era="1984"] .vault-steps > li, [data-era="1984"] .cards > li, [data-era="1984"] .tapcard, [data-era="1984"] .screen, [data-era="1984"] .details details, [data-era="1984"] .faq, [data-era="1984"] .how-steps li, [data-era="1984"] .step, [data-era="1984"] .facts li, [data-era="1984"] .house li, [data-era="1984"] .good {
  background: #fff; border: 2px solid #000; border-radius: 0; box-shadow: 2px 2px 0 #000; transition: none; }
[data-era="1984"] .step, [data-era="1984"] .how-steps li { border-style: solid; box-shadow: none; }
[data-era="1984"] .cell:hover, [data-era="1984"] .int-tile:hover, [data-era="1984"] .proof-grid > li:hover, [data-era="1984"] .vault-grid > li:hover, [data-era="1984"] .cards > li:hover { transform: none; box-shadow: 2px 2px 0 #000; }
[data-era="1984"] .callout { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; margin: 1.4em 4px; }
[data-era="1984"] .n, [data-era="1984"] .num, [data-era="1984"] .legend li::before { background: #000; color: #fff; border-radius: 0; box-shadow: none; }
[data-era="1984"] .int-tile svg { background: #fff; border-radius: 0; outline: 2px solid #000; }
[data-era="1984"] .int-tile svg [fill="#111"] { fill: #000; } [data-era="1984"] .int-tile svg [stroke="#111"] { stroke: #000; }
[data-era="1984"] .badge, [data-era="1984"] .tt-btn, [data-era="1984"] .term-toggle, [data-era="1984"] .tabs [role="tab"], [data-era="1984"] .mode, [data-era="1984"] .mode button, [data-era="1984"] .chip, [data-era="1984"] .bubble, [data-era="1984"] .lvl, [data-era="1984"] .copy-btn { border-radius: 0; box-shadow: none; }
[data-era="1984"] .badge { border: 2px solid #000; }
[data-era="1984"] .tt-btn.on, [data-era="1984"] .tabs [role="tab"][aria-selected="true"], [data-era="1984"] .mode button[aria-pressed="true"] { background: #000; color: #fff; box-shadow: none; }
[data-era="1984"] .term-toggle, [data-era="1984"] .mode { border: 2px solid #000; background: #fff; }
[data-era="1984"] .tabs [role="tab"], [data-era="1984"] .chip { border: 2px solid #000; background: #fff; }
[data-era="1984"] .chip:hover, [data-era="1984"] .tabs [role="tab"]:hover { background: #000; color: #fff; transform: none; }
[data-era="1984"] pre { background: #fff; color: #000; border: 2px solid #000; border-radius: 0; box-shadow: 2px 2px 0 #000; scrollbar-color: #000 #fff; }
[data-era="1984"] pre::-webkit-scrollbar { height: 16px; }
[data-era="1984"] pre::-webkit-scrollbar-track { background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 2px 2px; border-top: 2px solid #000; }
[data-era="1984"] pre::-webkit-scrollbar-thumb { background: #fff; border: 2px solid #000; }
[data-era="1984"] .copy-btn { background: #fff; color: #000; border: 2px solid #000; }
[data-era="1984"] .copy-btn:hover { background: #000; color: #fff; }
[data-era="1984"] input:not([type="range"]):not([type="hidden"]), [data-era="1984"] select, [data-era="1984"] textarea { border: 2px solid #000; border-radius: 0; box-shadow: none; background: #fff; }
[data-era="1984"] input.invalid, [data-era="1984"] select.invalid, [data-era="1984"] textarea.invalid, [data-era="1984"] input:user-invalid { box-shadow: 3px 3px 0 #000; }
[data-era="1984"] .alert { border: 2px solid #000; background: #fff; border-radius: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; }
[data-era="1984"] .as-title { background: #fff repeating-linear-gradient(180deg, #fff 0 4px, #000 4px 6px) 6px 50% / calc(100% - 12px) 18px no-repeat; color: #000; border-bottom: 2px solid #000; }
[data-era="1984"] .as-title span { background: #fff; padding: 2px 8px; }
[data-era="1984"] .as-title::before { left: 10px; width: 14px; height: 14px; background: #fff; border: 2px solid #000; opacity: 1; }
[data-era="1984"] .as-meta, [data-era="1984"] .as-back, [data-era="1984"] .as-rule { border-color: #000; }
[data-era="1984"] .as-dot, [data-era="1984"] .as-light, [data-era="1984"] .as-chip { background: #000 !important; box-shadow: none; border-radius: 0; }
[data-era="1984"] .as-agent { background: none; text-decoration: underline 2px dotted; }
[data-era="1984"] .as-cursor { background: #000; }
[data-era="1984"] .df-del, [data-era="1984"] .df-add { background: none; }
[data-era="1984"] .df-add { text-decoration: underline 2px; }
[data-era="1984"] .lvl { background: #000; color: #fff; }
[data-era="1984"] .winbar { background: #fff repeating-linear-gradient(180deg, #fff 0 4px, #000 4px 6px) 30px 50% / calc(100% - 40px) 16px no-repeat; color: #000; border-bottom: 2px solid #000; }
[data-era="1984"] .winbar i { display: none; }
[data-era="1984"] .winbar::before { content: ""; width: 14px; height: 14px; border: 2px solid #000; background: #fff; flex: none; }
[data-era="1984"] .winbar span { margin: 0 auto; padding: 2px 8px; background: #fff; }
/* real recordings and screenshots stay real in 1984: full colour, unfiltered, only the window around them changes */
[data-era="1984"] .vault-media video { border: 2px solid #000; border-radius: 0; box-shadow: 2px 2px 0 #000; }
[data-era="1984"] .vctl { border: 2px solid #000; border-radius: 0; background: #fff; color: #000; }
[data-era="1984"] .vctl:hover { background: #000; color: #fff; }
[data-era="1984"] .hello { display: block; width: clamp(150px, 22vw, 260px); height: auto; margin: -6px 0 0 -6px; }
[data-era="1984"] .hero { padding-bottom: clamp(20px, 3vw, 36px); gap: clamp(18px, 3vw, 40px); }
[data-era="1984"] .hero h1 { margin: .15em 0 .3em; }
[data-era="1984"] .hello path { fill: none; stroke: #000; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
[data-era="1984"] memava-mascot, [data-era="1984"] .seal, [data-era="1984"] .big-seal { filter: grayscale(1) contrast(12); }
[data-era="1984"] .rooms .you rect[fill] { fill: #000; } [data-era="1984"] .rooms .you rect[fill="#F2EEE4"], [data-era="1984"] .rooms .you rect[fill="#0B1513"] { fill: #fff; }
[data-era="1984"] .bubble { border: 2px solid #000; background: #fff; }
[data-era="1984"] .bubble::after { border-color: #000; border-width: 2px; }
[data-era="1984"] .proof li::before, [data-era="1984"] .stop::before { background: #000; border-radius: 0; transform: none; border-color: #fff; }
[data-era="1984"] .stop.soon::before { background: #fff; border: 2px solid #000; }
[data-era="1984"] .track { border-left: 2px solid #000; }
[data-era="1984"] .soonlist { border-left: 2px dashed #000; }
[data-era="1984"] .log li { border-left: 3px solid #000; border-radius: 0; background: #fff; }
[data-era="1984"] .promise, [data-era="1984"] .circle, [data-era="1984"] .vault-band { margin: 0 0 30px; }
[data-era="1984"] .rooms .room { fill: #fff; stroke: #000; }
[data-era="1984"] .rooms .other .room { fill: url(#dither) #fff; }
[data-era="1984"] .rooms .you .room { fill: #fff; stroke: #000; stroke-width: 4; }
[data-era="1984"] .rooms .lock { fill: #000; } [data-era="1984"] .rooms .lockarc { stroke: #000; }
[data-era="1984"] .vault-copy code { background: #fff; color: #000; outline: 2px solid #000; }
[data-era="1984"] .foot-in { max-width: var(--wrap); border: 2px solid #000; border-radius: 0; background: #fff; box-shadow: 3px 3px 0 #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-era="1984"] .foot-brand, [data-era="1984"] .foot-fine { border-color: #000; }
[data-era="1984"] .site-foot { padding-bottom: 28px; }
[data-era="1984"] .mv-consent { border: 2px solid #000; border-radius: 0; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 6px 6px 0 2px #000; padding-left: 64px; }
[data-era="1984"] .mv-consent::before { content: ""; position: absolute; left: 16px; top: 50%; width: 32px; height: 32px; margin-top: -16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M7 1h2v1h1v2h1v2h1v2h1v2h1v2h1v3H1v-3h1v-2h1V8h1V6h1V4h1V2h1z'/%3E%3Cpath fill='%23fff' d='M8 3h0v1h0V3zM7 5h2v5H7zM7 11h2v2H7z'/%3E%3C/svg%3E") 0 0/100% 100%; image-rendering: pixelated; }
[data-era="1984"] .mv-row button { border: 2px solid #000; border-radius: 9px; background: #fff; color: #000; box-shadow: none; }
[data-era="1984"] .mv-row .mv-yes { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #000; margin: 0 5px; }
[data-era="1984"] .mv-row button:hover { background: #000; color: #fff; }
[data-era="1984"] .skip { border-radius: 0; background: #000; color: #fff; }


/* the desktop: a disk at the top right, the trash at the bottom right, as the original desktop had them */
@media (min-width: 1380px) {
  [data-era="1984"]::before, [data-era="1984"]::after { position: fixed; right: max(16px, calc(50% - 700px)); z-index: 1; width: 84px; padding-top: 46px; text-align: center; pointer-events: none;
    font: 400 16px/22px var(--f-display); -webkit-font-smoothing: none; text-rendering: optimizeSpeed; color: #000; background-repeat: no-repeat; background-size: 100% 22px, 32px 32px; background-position: 50% 100%, 50% 4px; image-rendering: pixelated; }
  [data-era="1984"]::before { content: "Memava"; content: "Memava" / ""; top: 76px; background-image: linear-gradient(#fff, #fff), /* logo:1984 */url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Cpath class='b' fill='%23000000' d='M3 3h22v1h-22zM3 4h8v1h-8zM22 4h4v1h-4zM3 5h8v1h-8zM22 5h5v1h-5zM3 6h8v1h-8zM17 6h3v1h-3zM22 6h6v1h-6zM3 7h8v1h-8zM17 7h3v1h-3zM22 7h7v1h-7zM3 8h8v1h-8zM17 8h3v1h-3zM22 8h7v1h-7zM3 9h8v1h-8zM17 9h3v1h-3zM22 9h7v1h-7zM3 10h8v1h-8zM17 10h3v1h-3zM22 10h7v1h-7zM3 11h8v1h-8zM17 11h3v1h-3zM22 11h7v1h-7zM3 12h26v1h-26zM3 13h26v1h-26zM3 14h26v1h-26zM3 15h26v1h-26zM3 16h26v1h-26zM3 17h4v1h-4zM25 17h4v1h-4zM3 18h4v1h-4zM25 18h4v1h-4zM3 19h4v1h-4zM25 19h4v1h-4zM3 20h4v1h-4zM25 20h4v1h-4zM3 21h4v1h-4zM25 21h4v1h-4zM3 22h4v1h-4zM25 22h4v1h-4zM3 23h4v1h-4zM25 23h4v1h-4zM3 24h4v1h-4zM25 24h4v1h-4zM3 25h4v1h-4zM25 25h4v1h-4zM3 26h4v1h-4zM25 26h4v1h-4zM3 27h4v1h-4zM25 27h4v1h-4zM3 28h26v1h-26zM9 29h2v1h-2zM21 29h2v1h-2zM8 30h3v1h-3zM21 30h3v1h-3z'/%3E%3Cpath class='s' fill='%23FFFFFF' d='M11 4h11v1h-11zM11 5h11v1h-11zM11 6h6v1h-6zM20 6h2v1h-2zM11 7h6v1h-6zM20 7h2v1h-2zM11 8h6v1h-6zM20 8h2v1h-2zM11 9h6v1h-6zM20 9h2v1h-2zM11 10h6v1h-6zM20 10h2v1h-2zM11 11h6v1h-6zM20 11h2v1h-2z'/%3E%3Cpath class='l' fill='%23FFFFFF' d='M7 17h18v1h-18zM7 18h18v1h-18zM7 19h3v1h-3zM12 19h8v1h-8zM22 19h3v1h-3zM7 20h3v1h-3zM12 20h8v1h-8zM22 20h3v1h-3zM7 21h3v1h-3zM12 21h8v1h-8zM22 21h3v1h-3zM7 22h3v1h-3zM12 22h8v1h-8zM22 22h3v1h-3zM7 23h18v1h-18zM7 24h6v1h-6zM14 24h4v1h-4zM19 24h6v1h-6zM7 25h7v1h-7zM18 25h7v1h-7zM7 26h18v1h-18zM7 27h18v1h-18z'/%3E%3Cpath class='f' fill='%23000000' d='M10 19h2v1h-2zM20 19h2v1h-2zM10 20h2v1h-2zM20 20h2v1h-2zM10 21h2v1h-2zM20 21h2v1h-2zM10 22h2v1h-2zM20 22h2v1h-2zM13 24h1v1h-1zM18 24h1v1h-1zM14 25h4v1h-4z'/%3E%3C/svg%3E"); }
  [data-era="1984"]::after { content: "Trash"; content: "Trash" / ""; bottom: 26px; background-image: linear-gradient(#fff, #fff), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M6 2h4v1h-4zM2 3h12v1h-12zM2 4h1v1h-1zM13 4h1v1h-1zM2 5h12v1h-12zM3 6h1v1h-1zM12 6h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM7 7h2v1h-2zM10 7h1v1h-1zM12 7h1v1h-1zM3 8h1v1h-1zM5 8h1v1h-1zM7 8h2v1h-2zM10 8h1v1h-1zM12 8h1v1h-1zM3 9h1v1h-1zM5 9h1v1h-1zM7 9h2v1h-2zM10 9h1v1h-1zM12 9h1v1h-1zM3 10h1v1h-1zM5 10h1v1h-1zM7 10h2v1h-2zM10 10h1v1h-1zM12 10h1v1h-1zM3 11h1v1h-1zM5 11h1v1h-1zM7 11h2v1h-2zM10 11h1v1h-1zM12 11h1v1h-1zM3 12h1v1h-1zM12 12h1v1h-1zM3 13h10v1h-10z'/%3E%3C/svg%3E"); }
}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 1100px) { [data-era="1984"] .hello { width: 170px; } [data-era="1984"] .hero .lede { font-size: 1.0625rem; } }
@media (max-width: 1239px) {
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; padding: 0 16px; border: var(--bw) solid var(--edge-strong); border-radius: 12px; background: var(--surface-2); color: var(--ink); font: var(--fw-ui) .9375rem/1 var(--f-ui); cursor: pointer; }
  .menu-btn::before { content: ""; width: 16px; height: 12px; background: linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50%/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 100%/100% 2px no-repeat; }
  .mh-in { flex-wrap: wrap; }
  html.js .mh-panel { display: none; }
  .mh-panel { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 12px; padding: 8px 0 12px; }
  html.js .masthead.open .mh-panel { display: flex; }
  .site-nav ul { flex-direction: column; align-items: stretch; }
  .site-nav a, .mh-link { width: 100%; min-height: 48px; font-size: 1.0625rem; }
  .mh-tools { flex-wrap: wrap; gap: 10px; padding-top: 10px; border-top: 1px solid var(--edge); }
  .mh-tools .btn { flex: 1 1 auto; }
  html:not(.js) .menu-btn { display: none; }
  [data-era="1984"] .menu-btn { border: 2px solid #000; border-radius: 0; background: #fff; }
  [data-era="1984"] .masthead.open .mh-panel { position: absolute; left: 10px; top: 100%; width: min(320px, calc(100% - 20px)); padding: 6px 0; background: #fff; border: 2px solid #000; box-shadow: 3px 3px 0 #000; }
  [data-era="1984"] .masthead.open .menu-btn { background: #000; color: #fff; }
  [data-era="1984"] .mh-tools { padding: 10px 12px 6px; border-top: 2px solid #000; }
}
@media (max-width: 720px) {
  .mv-consent { bottom: 6px; width: calc(100% - 12px); padding: 8px 10px; font-size: .875rem; line-height: 1.3; letter-spacing: -.01em; border-radius: 14px; }
  .mv-row { position: static; transform: none; margin-top: 6px; flex-wrap: nowrap; gap: 6px; }
  .mv-row button { flex: 1 1 auto; min-height: 44px; padding: 0 10px; }
  .mv-row a { flex: none; }
  [data-era="1984"] .mv-row .mv-yes { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; margin: 0 4px; }
  [data-era="1984"] .mv-consent { padding-left: 12px; }
  [data-era="1984"] .hello { width: 128px; margin-top: -10px; }
  [data-era="1984"] .hero .eyebrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  [data-era="1984"] h1, [data-era="1984"] .hero h1, [data-era="1984"] .fam-article .floor-hero h1 { font-size: 32px; line-height: 40px; }
  [data-era="1984"] h2 { font-size: 32px; line-height: 40px; }
  [data-era="1984"] main > section[data-label] { padding-top: calc(34px + 14px); }
  [data-era="1984"] .mv-consent::before { display: none; }
  [data-era="1984"] .mv-consent h2 { font-size: .95rem; line-height: 1.3; }
  .hero { padding-top: 12px; }
  .hero h1 { margin: .15em 0 .3em; }
  .hero .lede { margin-bottom: .6em; }
  .hero .cta-row { margin: 1em 0 .8em; }
  .mascot-perch { min-height: 72px; }
  .foot-col a { min-height: 44px; }
}