/* lamplet.app, every page: the two styles' tokens in light and dark, type, buttons, the header,
   phones, tiles, the closing slab and the footer. A page's own layout stays in its <style>. */
:root {
  /* Copybook, light */
  --paper: #f8faf9; --band: #f1f4f3; --card: #ffffff; --ink: #14181a; --ink2: #5b6467; --ink3: #6b7578;
  --rule: #e3e8e6; --guide: #dde4e1; --lip: transparent; --bezel: #14181a; --glass: rgba(248,250,249,0.86);
  --tone4: #a8434a;
  --go: #14181a; --go-on: #f8faf9; --go-lip: transparent;
  --t-study: #ffffff; --t-study-on: #14181a; --t-study-lip: transparent;
  --t-review: #ffffff; --t-review-on: #14181a; --t-review-lip: transparent;
  --t-listen: #ffffff; --t-listen-on: #14181a; --t-listen-lip: transparent;
  --t-known: #ffffff; --t-known-on: #14181a; --t-known-lip: transparent;
  --slab: #14181a; --slab-on: #f8faf9; --slab-on2: rgba(248,250,249,0.74); --slab-lip: transparent;
  --slab-grid: rgba(248,250,249,0.08); --slab-btn: #f8faf9; --slab-btn-on: #14181a;
  --shadow: 0 30px 60px rgba(20,24,26,0.16);
  /* the flip compares the two styles in the viewer's own light or dark */
  --flip-a: #f8faf9; --flip-a-ink: #14181a; --flip-b: #f6f4fd; --flip-b-ink: #1c1740;

  --f-display: 'Noto Serif SC', 'Songti SC', Georgia, serif;
  --f-body: 'Source Sans 3', -apple-system, system-ui, sans-serif;
  --f-button: 'Source Sans 3', -apple-system, system-ui, sans-serif;
  --f-label: 'Source Code Pro', ui-monospace, Menlo, monospace;
  --f-han: 'Noto Serif SC', 'Songti SC', serif;
  --w-display: 600; --w-han: 600; --w-label: 500; --track-label: .14em;
  --r3: 3px; --r4: 4px; --r5: 5px; --r6: 6px; --cell: 2px; --bw: 1px;
  --guide-stroke: var(--guide);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #101416; --band: #13181a; --card: #171d1f; --ink: #e9edec; --ink2: #a0abac; --ink3: #7b8789;
  --rule: #262f31; --guide: #2a3335; --bezel: #000000; --glass: rgba(16,20,22,0.86); --tone4: #e0868d;
  --go: #e9edec; --go-on: #101416;
  --t-study: #171d1f; --t-study-on: #e9edec; --t-review: #171d1f; --t-review-on: #e9edec;
  --t-listen: #171d1f; --t-listen-on: #e9edec; --t-known: #171d1f; --t-known-on: #e9edec;
  --slab: #171d1f; --slab-on: #e9edec; --slab-on2: #a0abac; --slab-grid: rgba(233,237,236,0.05);
  --slab-btn: #e9edec; --slab-btn-on: #101416; --shadow: 0 30px 60px rgba(0,0,0,0.5);
  --flip-a: #101416; --flip-a-ink: #e9edec; --flip-b: #14112b; --flip-b-ink: #f5f3ff;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --paper: #101416; --band: #13181a; --card: #171d1f; --ink: #e9edec; --ink2: #a0abac; --ink3: #7b8789;
  --rule: #262f31; --guide: #2a3335; --bezel: #000000; --glass: rgba(16,20,22,0.86); --tone4: #e0868d;
  --go: #e9edec; --go-on: #101416;
  --t-study: #171d1f; --t-study-on: #e9edec; --t-review: #171d1f; --t-review-on: #e9edec;
  --t-listen: #171d1f; --t-listen-on: #e9edec; --t-known: #171d1f; --t-known-on: #e9edec;
  --slab: #171d1f; --slab-on: #e9edec; --slab-on2: #a0abac; --slab-grid: rgba(233,237,236,0.05);
  --slab-btn: #e9edec; --slab-btn-on: #101416; --shadow: 0 30px 60px rgba(0,0,0,0.5);
  --flip-a: #101416; --flip-a-ink: #e9edec; --flip-b: #14112b; --flip-b-ink: #f5f3ff;
  color-scheme: dark;
}
/* Night Market, day: same layout and copy; colour carries state, every face sits on a lip. */
:root[data-style="nm"] {
  --paper: #f6f4fd; --band: #efecfb; --card: #ffffff; --ink: #1c1740; --ink2: #544e7c; --ink3: #6d6795;
  --rule: #dcd6f2; --guide: transparent; --lip: #cfc8ea; --bezel: #1c1740; --glass: rgba(246,244,253,0.88);
  --tone4: #c22a52;
  --go: #ff9142; --go-on: #2b1200; --go-lip: #c2601c;
  --t-study: #ff9142; --t-study-on: #2b1200; --t-study-lip: #c2601c;
  --t-review: #a78bff; --t-review-on: #150a3d; --t-review-lip: #6d52d6;
  --t-listen: #56c8ff; --t-listen-on: #03202f; --t-listen-lip: #2390c9;
  --t-known: #3ddc97; --t-known-on: #04281a; --t-known-lip: #1f9a69;
  --slab: #4a35c8; --slab-on: #ffffff; --slab-on2: #d9d2ff; --slab-lip: #2c1d90;
  --slab-grid: rgba(255,255,255,0.09); --slab-btn: #ff9142; --slab-btn-on: #2b1200;
  --shadow: 0 30px 60px rgba(44,29,144,0.22);
  --f-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --f-body: 'Nunito', -apple-system, system-ui, sans-serif;
  --f-button: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --f-label: 'Nunito', -apple-system, system-ui, sans-serif;
  --f-han: 'Noto Sans SC', 'PingFang SC', sans-serif;
  --w-han: 900; --w-label: 800; --track-label: .1em;
  --r3: 9px; --r4: 16px; --r5: 18px; --r6: 24px; --cell: 12px; --bw: 2px;
  --guide-stroke: transparent;
}
@media (prefers-color-scheme: dark) { :root[data-style="nm"]:not([data-theme="light"]) {
  --paper: #14112b; --band: #110e25; --card: #201c45; --ink: #f5f3ff; --ink2: #bcb7e0; --ink3: #938dc2;
  --rule: #39337a; --lip: #0a0818; --bezel: #0a0818; --glass: rgba(20,17,43,0.88); --tone4: #ff8c9c;
  --shadow: 0 30px 60px rgba(0,0,0,0.5);
} }
:root[data-style="nm"][data-theme="dark"] {
  --paper: #14112b; --band: #110e25; --card: #201c45; --ink: #f5f3ff; --ink2: #bcb7e0; --ink3: #938dc2;
  --rule: #39337a; --lip: #0a0818; --bezel: #0a0818; --glass: rgba(20,17,43,0.88); --tone4: #ff8c9c;
  --shadow: 0 30px 60px rgba(0,0,0,0.5);
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased }
a { color: inherit }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
h1, h2, h3 { font-family: var(--f-display); font-weight: var(--w-display); text-wrap: balance; margin: 0; letter-spacing: -.015em }
p { margin: 0 }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px) }
.label { font-family: var(--f-label); font-size: 12px; font-weight: var(--w-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink3) }
.lead { font-size: 20px; color: var(--ink2); max-width: 34em }
.han { font-family: var(--f-han); font-weight: var(--w-han) }

/* the one main action and its quiet sibling */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: var(--r4); font: 600 17px var(--f-button); text-decoration: none; cursor: pointer; border: var(--bw) solid transparent; transition: transform 80ms ease-out, box-shadow 80ms ease-out }
.btn-go { background: var(--go); color: var(--go-on); box-shadow: 0 5px 0 var(--go-lip) }
.btn-quiet { background: var(--card); color: var(--ink); border-color: var(--rule); box-shadow: 0 4px 0 var(--lip) }
:root[data-style="nm"] a.btn:active { transform: translateY(5px); box-shadow: 0 0 0 transparent }
.btn:hover { filter: brightness(1.04) }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: 15px; gap: 8px }
.btn.soon { cursor: default }
section[id] { scroll-margin-top: 76px }

/* the header: the mark, the pages, the look switch and the one action; under 1200px the pages and
   the switch fold into a menu */
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--glass); border-bottom: var(--bw) solid var(--rule); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px) }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-block: 12px }
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto }
.mark b { font: var(--w-display) 22px var(--f-display) }
.logo { width: 36px; height: 36px; display: grid }
.logo img { grid-area: 1 / 1; width: 100%; height: 100%; display: none }
.logo .cb-l { display: block }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo .cb-l { display: none } :root:not([data-theme="light"]) .logo .cb-d { display: block } }
:root[data-theme="dark"] .logo .cb-l { display: none } :root[data-theme="dark"] .logo .cb-d { display: block }
:root[data-style="nm"] .logo img { display: none !important }
:root[data-style="nm"] .logo .nm-d { display: block !important }
@media (prefers-color-scheme: dark) { :root[data-style="nm"]:not([data-theme="light"]) .logo .nm-d { display: none !important } :root[data-style="nm"]:not([data-theme="light"]) .logo .nm-n { display: block !important } }
:root[data-style="nm"][data-theme="dark"] .logo .nm-d { display: none !important } :root[data-style="nm"][data-theme="dark"] .logo .nm-n { display: block !important }
.nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none }
.nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: var(--r3); color: var(--ink2); font: 600 15px var(--f-body); text-decoration: none }
.nav a .han { font-size: 15px; color: var(--ink3) }
.nav a:hover { color: var(--ink); background: var(--band) }
/* the page you are on: ink and a rule under it in Copybook; a raised card in Night Market */
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0 }
.nav a[aria-current="page"] .han { color: var(--ink) }
:root[data-style="nm"] .nav a[aria-current="page"] { background: var(--card); box-shadow: 0 3px 0 var(--lip); border-radius: var(--r3) }
.switch { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r4); background: var(--band); border: var(--bw) solid var(--rule) }
.switch button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 0; border-radius: calc(var(--r4) - 4px); background: transparent; color: var(--ink2); font: 600 14px var(--f-body); cursor: pointer }
.switch button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 0 var(--rule) }
:root[data-style="nm"] .switch button[aria-pressed="true"] { background: #a78bff; color: #150a3d; box-shadow: 0 3px 0 #6d52d6 }
.switch .cb { font-family: 'Noto Serif SC', serif; font-weight: 600 }
.switch .nm { font-family: 'Noto Sans SC', sans-serif; font-weight: 900 }
.menu-btn { display: none; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: var(--r4); border: var(--bw) solid var(--rule); background: var(--card); color: var(--ink); font: 600 15px var(--f-body); cursor: pointer; box-shadow: 0 3px 0 var(--lip) }
.menu-btn svg { transition: transform .2s }
.top.is-open .menu-btn svg { transform: rotate(180deg) }
.menu-panel { display: contents }
@media (max-width: 1199px) {
  .menu-btn { display: inline-flex }
  .menu-panel { display: none; order: 9; flex-basis: 100%; flex-direction: column; gap: 14px; padding: 10px 0 8px; border-top: var(--bw) solid var(--rule) }
  .top.is-open .menu-panel { display: flex }
  .nav ul { flex-direction: column; gap: 2px }
  .nav a { width: 100%; min-height: 48px; font-size: 17px; padding: 0 8px }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ink); padding-left: 14px }
  :root[data-style="nm"] .nav a[aria-current="page"] { box-shadow: 0 3px 0 var(--lip); padding-left: 8px }
  .switch { align-self: flex-start }
}
@media (max-width: 560px) { .top .btn-go { display: none } }

/* phones */
.phone { position: relative; aspect-ratio: 600 / 1304; max-width: 100%; padding: 1.3%; border-radius: 13.5% / 6.2%; background: var(--bezel); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), var(--shadow) }
.phone .screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12.5% / 5.75% }
.phone video, .phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }

/* a character tile: tone colour on its lower edge in the mark, a role colour in Night Market */
.tile { position: relative; width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--cell); border: var(--bw) solid var(--rule); font-size: 28px; line-height: 1 }
.tile svg { position: absolute; inset: 0; width: 100%; height: 100% }
.tile span { position: relative }
.tile.study { background: var(--t-study); color: var(--t-study-on); box-shadow: 0 3px 0 var(--t-study-lip) }
.tile.review { background: var(--t-review); color: var(--t-review-on); box-shadow: 0 3px 0 var(--t-review-lip) }
.tile.listen { background: var(--t-listen); color: var(--t-listen-on); box-shadow: 0 3px 0 var(--t-listen-lip) }
.tile.known { background: var(--t-known); color: var(--t-known-on); box-shadow: 0 3px 0 var(--t-known-lip) }
:root[data-style="nm"] .tile { border-color: transparent }

/* the closing slab and the footer */
.close { padding-bottom: clamp(56px, 8vw, 96px) }
.close h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.08 }
.slab { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(28px, 5vw, 56px); border-radius: var(--r6); background-color: var(--slab); color: var(--slab-on); box-shadow: 0 6px 0 var(--slab-lip); background-image: linear-gradient(var(--slab-grid) 1px, transparent 1px), linear-gradient(90deg, var(--slab-grid) 1px, transparent 1px); background-size: 24px 24px }
:root[data-style="nm"] .slab { background-image: radial-gradient(var(--slab-grid) 1.5px, transparent 1.5px); background-size: 16px 16px }
.slab .say { display: flex; flex-direction: column; gap: 10px; flex: 1 1 380px; min-width: 0 }
.slab .label { color: var(--slab-on2) }
.slab p { color: var(--slab-on2) }
.slab .btn { background: var(--slab-btn); color: var(--slab-btn-on); box-shadow: 0 5px 0 var(--go-lip) }
footer { border-top: var(--bw) solid var(--rule); padding-block: 28px 44px; color: var(--ink3); font-size: 14px }
footer .wrap { display: flex; flex-direction: column; gap: 14px }
footer nav ul { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none }
footer nav a { color: var(--ink2); font-weight: 600; text-decoration: none }
footer nav a:hover { color: var(--ink); text-decoration: underline }

/* the lantern: the app's own Rive file, in the page's look */
.lantern { position: absolute; z-index: 3; pointer-events: none; aspect-ratio: 1; display: block }
.lantern-close { position: relative; width: 180px; flex: 0 0 auto; margin: -24px 0 -24px -12px }
@media (max-width: 899px) { .lantern-close { width: 140px } }

@keyframes ink { from { opacity: .001; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes spring { 0% { opacity: .001; transform: translateY(30px) scale(.95) } 60% { opacity: 1; transform: translateY(-6px) scale(1.02) } 100% { transform: none } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
.js .rise { opacity: .001; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1) }
:root[data-style="nm"].js .rise { transform: translateY(28px) scale(.97); transition-timing-function: ease-out, cubic-bezier(.34,1.45,.5,1) }
.js .rise.is-in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .js .rise { opacity: 1; transform: none; transition: none } }

/* feature pages: an opening with one phone, rows that alternate words and a phone, a grid of the
   smaller things, links on to the other pages, then the slab */
.page-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-block: clamp(36px, 6vw, 80px) }
.page-hero .copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px }
.page-hero h1 { font-size: clamp(40px, 5.4vw, 66px); line-height: 1.05; letter-spacing: -.02em }
.page-hero .art { position: relative; flex: 1 1 300px; display: flex; justify-content: center }
.page-hero .phone { width: min(290px, 76vw) }
.page-hero .copy > *, .page-hero .phone { animation: ink .8s cubic-bezier(.2,.7,.2,1) both }
:root[data-style="nm"] .page-hero .copy > *, :root[data-style="nm"] .page-hero .phone { animation-name: spring }
.page-hero .copy > :nth-child(2) { animation-delay: 80ms } .page-hero .copy > :nth-child(3) { animation-delay: 160ms }
.page-hero .copy > :nth-child(4) { animation-delay: 240ms } .page-hero .phone { animation-delay: 200ms }
@media (prefers-reduced-motion: reduce) { .page-hero .copy > *, .page-hero .phone { animation: none } }
.page-hero .lantern { width: 210px; left: calc(50% - 250px); bottom: 8% }
@media (max-width: 899px) { .page-hero .lantern { width: 140px; left: 0; bottom: 4% } }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; border-radius: var(--r4); border: var(--bw) solid var(--rule); background: var(--card); color: var(--ink); font: 600 15px var(--f-body); text-decoration: none; box-shadow: 0 3px 0 var(--lip) }
.jump a .han { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r3); background: var(--band); font-size: 15px }
.jump a:hover { border-color: var(--ink3) }

.features { border-top: var(--bw) solid var(--rule); background: var(--band) }
.feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding-block: clamp(56px, 8vw, 104px) }
.feature + .feature { border-top: var(--bw) solid var(--rule) }
.feature:nth-child(even) .say { order: 2 }
.feature .say { display: flex; flex-direction: column; gap: 18px; min-width: 0 }
.feature h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1 }
.feature .say > p { color: var(--ink2); font-size: 19px; max-width: 30em }
.feature .media { display: flex; justify-content: center }
.feature .phone { width: min(290px, 72vw) }
.points { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; max-width: 32em }
.points li { position: relative; padding-left: 26px; color: var(--ink2) }
.points li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 10px; height: 2px; background: var(--ink3) }
:root[data-style="nm"] .points li::before { top: .45em; width: 10px; height: 10px; border-radius: 50%; background: var(--go); box-shadow: 0 2px 0 var(--go-lip) }
.points b { color: var(--ink); font-weight: 600 }
.formats { font-family: var(--f-label); font-size: 13px; font-weight: var(--w-label); letter-spacing: .06em; color: var(--ink3) }
@media (max-width: 799px) {
  .feature { grid-template-columns: minmax(0, 1fr) }
  .feature:nth-child(even) .say { order: 0 }
}

.facts-wrap { padding-block: clamp(56px, 8vw, 104px) }
.facts-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px) }
.facts-head h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1 }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none }
.facts li { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r5); background: var(--card); border: var(--bw) solid var(--rule); box-shadow: 0 4px 0 var(--lip) }
.facts .tile { width: 44px; height: 44px; font-size: 23px }
.facts b { font: var(--w-display) 19px var(--f-display) }
.facts p { color: var(--ink2) }

.next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; padding-bottom: clamp(40px, 6vw, 72px) }
.next a { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--r5); border: var(--bw) solid var(--rule); background: var(--card); text-decoration: none; box-shadow: 0 4px 0 var(--lip) }
.next a:hover { border-color: var(--ink3) }
.next b { display: block; font: var(--w-display) 19px var(--f-display) }
.next span.txt { color: var(--ink2); font-size: 15px }
.next .arrow { margin-left: auto; font-size: 20px; color: var(--ink3) }
.contact .tile, .facts .tile, .next .tile:not([class*=" study"]):not([class*=" review"]) { background: var(--band) }
footer .wrap > p a { color: var(--ink2) }
/* a credited clip: block layout, so the phone's height comes from its aspect ratio and the screen
   inside it can fill it (in a flex column it collapses to nothing) */
.feature figure.media { display: block; margin: 0 }
figure.media .phone { margin-inline: auto }
figure.media figcaption { max-width: 300px; margin: 14px auto 0; font-size: 13px; color: var(--ink3); text-align: center }

/* wider screens on the devices page: an iPad on its side and a desktop window. A .feature.wide row
   sets its words above the screen, which then takes the full width. */
.tablet { position: relative; width: 100%; aspect-ratio: var(--ar, 4 / 3); padding: 1.6%; border-radius: 4.2% / 5.6%; background: var(--bezel); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), var(--shadow) }
.tablet .screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 2.8% / 3.7% }
.tablet video, .tablet img, .window video, .window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
.window { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: var(--card); border: var(--bw) solid var(--rule); box-shadow: var(--shadow) }
.window .bar { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; background: var(--band); border-bottom: var(--bw) solid var(--rule) }
.window .bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--rule) }
.window .bar span { margin-left: 10px; font: 500 12px var(--f-label); color: var(--ink3); letter-spacing: .02em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.window .screen { position: relative; aspect-ratio: var(--ar, 16 / 10) }
.feature.wide { grid-template-columns: minmax(0, 1fr); gap: 36px }
.feature.wide .say { order: 0 !important; max-width: 760px }
.feature.wide .media { display: block }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start }
.pair figure { margin: 0; display: block }
.pair figcaption, .feature.wide figcaption { margin-top: 12px; font-size: 13px; color: var(--ink3) }
@media (max-width: 799px) { .pair { grid-template-columns: minmax(0, 1fr) } }
.ar-mac { --ar: 1400 / 874 }
.ar-web { --ar: 1400 / 860 }
.feature.wide .media.pair { display: grid }

/* text pages (privacy, support): one readable column, a contents list beside it on wide screens */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: clamp(36px, 6vw, 72px) clamp(56px, 8vw, 96px) }
.doc-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px }
.doc-head h1 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -.02em }
.doc-head .meta { font-family: var(--f-label); font-size: 13px; font-weight: var(--w-label); letter-spacing: .06em; color: var(--ink3) }
.prose { max-width: 720px; display: flex; flex-direction: column; gap: 14px }
.prose h2 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; margin-top: 30px; scroll-margin-top: 84px }
.prose h3 { font-size: 19px; margin-top: 12px }
.prose p, .prose li { color: var(--ink2) }
.prose b, .prose strong { color: var(--ink); font-weight: 600 }
.prose ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px }
.prose a { color: var(--ink); text-underline-offset: 3px }
.prose .note { padding: 16px 18px; border-radius: var(--r4); background: var(--band); border: var(--bw) solid var(--rule) }
.table-wrap { overflow-x: auto; border: var(--bw) solid var(--rule); border-radius: var(--r4) }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: var(--bw) solid var(--rule); color: var(--ink2) }
.prose th { font-family: var(--f-label); font-size: 12px; font-weight: var(--w-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink3); background: var(--band) }
.prose tr:last-child td { border-bottom: 0 }
.toc { display: none }
@media (min-width: 1040px) {
  .doc { grid-template-columns: minmax(0, 720px) 240px; justify-content: space-between; align-items: start }
  .doc-head { grid-column: 1 / -1 }
  .toc { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 96px; padding-left: 20px; border-left: var(--bw) solid var(--rule) }
  .toc a { color: var(--ink2); text-decoration: none; font-size: 15px }
  .toc a:hover { color: var(--ink) }
}
.faq details { border-bottom: var(--bw) solid var(--rule); padding: 14px 0 }
.faq summary { cursor: pointer; font: var(--w-display) 18px var(--f-display); color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: '+'; color: var(--ink3); font-family: var(--f-label) }
.faq details[open] summary::after { content: '−' }
.faq details > p { margin-top: 10px }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 22px; border-radius: var(--r5); background: var(--card); border: var(--bw) solid var(--rule); box-shadow: 0 4px 0 var(--lip) }
.contact b { font: var(--w-display) 20px var(--f-display); color: var(--ink) }
/* on a phone a table's rows stack as cards, each later cell under its column's name */
@media (max-width: 599px) {
  .prose table { min-width: 0 }
  .prose thead { display: none }
  .prose table, .prose tbody, .prose tr, .prose td { display: block }
  .prose tr { padding: 12px 0; border-bottom: var(--bw) solid var(--rule) }
  .prose tr:last-child { border-bottom: 0 }
  .prose td { border: 0; padding: 3px 16px }
  .prose td + td::before { content: attr(data-label); display: block; margin-top: 6px; font-family: var(--f-label); font-size: 11px; font-weight: var(--w-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink3) }
}

/* who made it: the first line of every footer */
footer .credit { color: var(--ink2); font-size: 16px }
footer .credit b { color: var(--ink); font-weight: 600 }
footer .credit a { margin-left: 12px; color: var(--ink); font-weight: 600; text-underline-offset: 3px; white-space: nowrap }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }