/* RookTalk website, the look of November 2026. It is the app's own look, taken from the design Ozan gave for the
   app on 10 Nov 2026 (the dark "Gray" option in src/styles.css): flat surfaces set apart by tone (#111319, #191b22,
   #1e1f26, #282a30), warm beige second text, cream filled buttons with dark letters, 6 to 8 px corners, no glow, no
   shadow, no lift on hover. Each use of the app has the colour its room type has in the app: Private amber, the
   standard (Gamer) room cream, the Streamer room red. Icons are the app's own (scripts/site-icons.mjs).
   Used by the home page (the three doors) and by the pages of the three uses; older pages still load site.css. */

@font-face { font-family: "Bricolage"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url("fonts/bricolage-wdth-latin-ext.woff2?v=e1a04c16") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url("fonts/bricolage-wdth-latin.woff2?v=a756882d") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-latin-ext.woff2?v=3911b66d") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-latin.woff2?v=a30ddcd3") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* the app's surfaces, darkest to lightest */
  --deep: #0c0e14;
  --bg: #111319;
  --panel: #191b22;
  --row: #1e1f26;
  --raised: #282a30;
  --line: #202229;
  --line-2: #2c2e35;
  --text: #e2e2eb;
  --text-2: #d6c3ab;
  --muted: #a08e7a;
  /* the app's cream (filled buttons, the standard room), its amber (Private), its red (Streamer), its green (on, talking) */
  --cream: #e4ded2;
  --cream-ink: #141310;
  --amber: #f5a524;
  --red: #f0545b;
  --green: #4edea3;
  --head: "Bricolage", "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  /* the colour of the use being shown; a page that is about no single use speaks in cream */
  --w: var(--cream);
  --w-ink: var(--cream-ink);
  --pad: clamp(20px, 4.2vw, 64px);
}
.w-private { --w: var(--amber); --w-ink: #1c1203; }
.w-gamer { --w: var(--cream); --w-ink: var(--cream-ink); }
.w-live { --w: var(--red); --w-ink: #24070a; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
/* Bricolage draws its letters closer the larger they are set (optical size); held at a middle value, the big
   headlines keep air between their letters */
h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 800; font-stretch: 88%; font-variation-settings: "opsz" 40; letter-spacing: -0.022em; line-height: 0.98; color: var(--text); text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--cream); color: var(--cream-ink); }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
main { overflow-x: clip; }
/* the app's icons: drawn with a line, in the colour of the text around them */
.ic { flex: none; width: 1.15em; height: 1.15em; }
.ic path, .ic circle, .ic rect, .ic line, .ic polyline { stroke-width: 1.7; vector-effect: non-scaling-stroke; }

/* ---------- buttons: the app's, a size larger for a web page ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--raised); color: var(--text); font-family: var(--body); font-weight: 800; font-size: 15.5px; line-height: 1.1; white-space: nowrap; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.btn:hover { background: #32343b; }
/* .primary is what site.js gives the visitor's own platform in a row of download buttons */
.btn.solid, .btn.primary { background: var(--cream); border-color: var(--cream); color: var(--cream-ink); }
.btn.solid:hover, .btn.primary:hover { background: #f0ebe1; border-color: #f0ebe1; }
.btn.sm { min-height: 38px; padding: 0 16px; font-size: 14.5px; border-radius: 6px; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- top bar ---------- */
.top { position: relative; z-index: 5; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); padding: 16px var(--pad); background: var(--deep); border-bottom: 1px solid var(--line); }
.top .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--head); font-weight: 800; font-stretch: 92%; font-size: 23px; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.top .brand img { width: 30px; height: auto; filter: invert(0.9); } /* the crow is drawn black */
.top .brand em { font-style: normal; color: var(--cream); }
.top nav { display: flex; align-items: center; gap: clamp(12px, 1.9vw, 28px); margin-left: auto; font-weight: 700; font-size: 15px; color: var(--text-2); }
.top nav a { padding: 8px 0; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.top nav a:hover, .top nav a[aria-current] { color: var(--text); }
.top nav .n-private:hover, .top nav .n-private[aria-current] { border-bottom-color: var(--amber); }
.top nav .n-gamer:hover, .top nav .n-gamer[aria-current] { border-bottom-color: var(--cream); }
.top nav .n-live:hover, .top nav .n-live[aria-current] { border-bottom-color: var(--red); }
.lang { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--row); font-size: 12.5px; font-weight: 800; }
.lang a { padding: 5px 10px; border-radius: 6px; color: var(--muted); line-height: 1.2; }
.lang a.on { background: var(--raised); color: var(--text); }

/* ---------- the home page: how do you want to use it, three doors ---------- */
.pick { display: flex; flex-direction: column; min-height: calc(100svh - 72px); padding: clamp(18px, 3.4vh, 40px) var(--pad) clamp(18px, 3vh, 34px); }
.pick-head { margin-bottom: clamp(14px, 2.6vh, 30px); }
.pick h1 { font-size: clamp(40px, 5.7vw, 96px); line-height: 0.92; letter-spacing: -0.028em; text-wrap: nowrap; }
.pick-head p { max-width: 1100px; margin-top: clamp(8px, 1.4vh, 16px); color: var(--text-2); font-size: clamp(15.5px, 1.2vw, 19px); line-height: 1.5; }
.doors { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); min-height: 0; }

/* a door: a panel one tone above the page; its use's colour is the bar across its top, which fills under the pointer */
.door { position: relative; display: flex; flex-direction: column; min-height: 0; border-radius: 14px; background: var(--panel); overflow: hidden; transition: background 0.2s; }
.door::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--w); transform: scaleX(0.14); transform-origin: left; transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1); }
@media (hover: hover) {
  .door:hover { background: var(--row); }
  .door:hover::after { transform: scaleX(1); }
  .door:hover .door-go { background: var(--w); color: var(--w-ink); }
  .door:hover .door-go .ic { transform: translateX(4px); }
}
.door:focus-visible { outline-offset: 4px; border-radius: 14px; }
.door:focus-visible::after { transform: scaleX(1); }

.scene { position: relative; flex: 1 1 auto; min-height: 250px; padding: clamp(18px, 1.9vw, 30px) clamp(18px, 2vw, 30px) 12px; display: flex; flex-direction: column; justify-content: center; container-type: inline-size; }
.door-body { padding: 8px clamp(20px, 2vw, 30px) clamp(20px, 2vw, 28px); }
.door-kind { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; color: var(--w); font-weight: 800; font-size: 15.5px; }
.door-kind .ic { width: 20px; height: 20px; }
.door h2 { font-size: clamp(26px, 2.25vw, 38px); line-height: 1; margin-bottom: 14px; }
.door-body ul { display: grid; gap: 7px; margin-bottom: 22px; color: var(--text-2); font-size: clamp(14px, 1.02vw, 15.5px); line-height: 1.42; }
.door-body li { position: relative; padding-left: 16px; }
.door-body li::before { content: ""; position: absolute; left: 1px; top: 0.66em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.door-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 8px; background: var(--raised); color: var(--text); font-weight: 800; font-size: 15px; transition: background 0.2s, color 0.2s; }
.door-go .ic { width: 18px; height: 18px; transition: transform 0.2s; }
.door-site { display: block; margin-top: 12px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
@media (min-width: 901px) and (max-height: 820px) {
  .pick h1 { font-size: clamp(40px, 5vw, 78px); }
  .scene { min-height: 232px; }
  .door h2 { font-size: clamp(24px, 2.05vw, 32px); margin-bottom: 10px; }
  .door-body ul { gap: 5px; margin-bottom: 16px; font-size: 14px; }
  .door-kind { margin-bottom: 8px; }
  .door-site { display: none; }
  .door-go { min-height: 40px; }
}

/* the small parts the three scenes are made of: pieces of the app (a room's rows, discs with initials, the stream
   window's rows). Every size in a scene is a multiple of --u, a hundredth of the door's width within limits, so the
   picture keeps its proportions from a phone to a wide screen. */
.stage { --u: clamp(3.3px, 1.16cqw, 5.2px); position: relative; width: 100%; max-width: calc(var(--u) * 96); margin: 0 auto; }
.av { flex: none; display: grid; place-items: center; width: calc(var(--u) * 9.4); height: calc(var(--u) * 9.4); border-radius: 50%; background: var(--deep); color: var(--text-2); font-size: calc(var(--u) * 2.9); font-weight: 800; letter-spacing: 0.02em; }
.bars { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.75); height: calc(var(--u) * 4.4); margin-left: auto; }
.bars b { width: calc(var(--u) * 0.8); height: calc(var(--u) * 1.1); border-radius: 2px; background: var(--muted); opacity: 0.4; }

/* Private: a message is typed, travels as ciphertext (all that the network and the server see) and is read at the
   other end */
.sc-private .stage { display: grid; gap: calc(var(--u) * 3.4); }
.sp-row { display: flex; align-items: flex-end; gap: calc(var(--u) * 2.6); }
.sp-you { justify-content: flex-end; }
.bub { min-height: calc(var(--u) * 10.6); max-width: 80%; padding: calc(var(--u) * 2.6) calc(var(--u) * 4); border-radius: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 0.8); background: var(--raised); font-size: calc(var(--u) * 4); font-weight: 700; line-height: 1.3; transition: opacity 0.35s, transform 0.35s; }
.sp-you .bub { border-radius: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 0.8) calc(var(--u) * 3); background: var(--cream); color: var(--cream-ink); }
.bub.gone { opacity: 0; transform: translateY(6px); }
.sp-wire { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 3); margin: 0 calc(var(--u) * 6); padding: calc(var(--u) * 2.8) calc(var(--u) * 3.6); border-radius: calc(var(--u) * 2.4); background: var(--deep); border: 1px solid var(--line-2); transition: border-color 0.3s; }
/* the way down from the sender and on to the reader */
.sp-wire::before, .sp-wire::after { content: ""; position: absolute; left: 14%; width: 2px; height: calc(var(--u) * 3.4); background: linear-gradient(var(--muted) 50%, transparent 50%) 0 0 / 2px 6px repeat-y; opacity: 0.7; }
.sp-wire::before { bottom: 100%; }
.sp-wire::after { top: 100%; left: auto; right: 14%; }
.sp-wire .ic { width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); color: var(--w); }
.sp-wire div { min-width: 0; flex: 1; }
.sp-wire code { display: block; overflow: hidden; white-space: nowrap; font-family: var(--mono); font-size: calc(var(--u) * 3.5); letter-spacing: 0.03em; color: var(--muted); transition: color 0.3s; }
.sp-wire small { display: block; margin-top: 2px; color: var(--muted); font-size: calc(var(--u) * 2.9); font-weight: 600; line-height: 1.25; }
.sc-private.busy .sp-wire code { color: var(--w); }
.sc-private.busy .sp-wire { border-color: var(--w); }

/* Gamer: the room's people; the one who talks gets the app's green ring */
.sg-room { padding-bottom: calc(var(--u) * 2.6); border-radius: calc(var(--u) * 3.4); background: var(--row); overflow: hidden; }
.sg-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: calc(var(--u) * 1); padding: calc(var(--u) * 3) calc(var(--u) * 4.4) calc(var(--u) * 2.4); background: var(--raised); }
.sg-head b { font-family: var(--head); font-stretch: 92%; font-weight: 800; font-size: calc(var(--u) * 5.4); line-height: 1.1; }
.sg-head span { color: var(--muted); font-size: calc(var(--u) * 3.1); font-weight: 700; }
.sg-room li { display: flex; align-items: center; gap: calc(var(--u) * 2.8); padding: calc(var(--u) * 1) calc(var(--u) * 4.4); font-size: calc(var(--u) * 3.8); font-weight: 700; color: var(--text-2); transition: color 0.3s; }
.sg-room li.on { color: var(--text); }
.sg-room li.on .av { box-shadow: 0 0 0 2px var(--row), 0 0 0 4px var(--green); color: var(--text); }
.sg-room li.on .bars b { background: var(--green); opacity: 1; animation: talk 0.9s ease-in-out infinite; }
.sg-room li.on .bars b:nth-child(2) { animation-delay: 0.12s; }
.sg-room li.on .bars b:nth-child(3) { animation-delay: 0.24s; }
.sg-room li.on .bars b:nth-child(4) { animation-delay: 0.08s; }
.sg-room li.on .bars b:nth-child(5) { animation-delay: 0.2s; }
@keyframes talk { 0%, 100% { height: calc(var(--u) * 1.1); } 50% { height: calc(var(--u) * 4.4); } }
.sg-share { position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * -6.4); display: inline-flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 3.4); border-radius: 8px; background: var(--cream); color: var(--cream-ink); font-size: calc(var(--u) * 3.1); font-weight: 800; }
.sg-share .ic { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
.sc-gamer .stage { --u: clamp(3px, 1.03cqw, 4.7px); margin-bottom: calc(var(--u) * 6); }
.sc-gamer .av { width: calc(var(--u) * 8.4); height: calc(var(--u) * 8.4); }

/* Live: one stream leaves the room and reaches four platforms; gifts rise beside the picture */
.sc-live .stage { display: grid; grid-template-columns: minmax(0, 0.9fr) calc(var(--u) * 9) minmax(0, 1fr); align-items: stretch; }
.sl-cam { position: relative; border-radius: calc(var(--u) * 3.4); background: var(--deep); display: grid; place-items: center; overflow: hidden; }
.sl-cam > .ic { width: 34%; height: auto; margin-top: 8%; color: var(--muted); }
.sl-badge { position: absolute; z-index: 2; left: calc(var(--u) * 2.2); top: calc(var(--u) * 2.2); display: inline-flex; align-items: center; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 1) calc(var(--u) * 2.3); border-radius: 6px; background: var(--red); color: #fff; font-size: calc(var(--u) * 2.7); font-weight: 800; letter-spacing: 0.03em; line-height: 1.2; }
.sl-badge i { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); border-radius: 50%; background: #fff; animation: blink 1.2s steps(2, jump-none) infinite; }
.sl-badge b { font-variant-numeric: tabular-nums; }
@keyframes blink { 50% { opacity: 0.25; } }
/* gifts: they come up along the right edge of the picture, one after another, and are gone before the badge */
.sl-gift { position: absolute; z-index: 1; right: 7%; bottom: 5%; width: 21%; opacity: 0; animation: gift 4.5s ease-out infinite; }
.sl-gift.g2 { animation-delay: 1.5s; right: 12%; }
.sl-gift.g3 { animation-delay: 3s; right: 4%; }
@keyframes gift { 0% { opacity: 0; transform: translateY(30%) scale(0.5); } 14% { opacity: 1; transform: translateY(-20%) scale(1); } 55% { opacity: 1; } 78%, 100% { opacity: 0; transform: translateY(-290%) scale(1.06); } }
/* the wires: one for each platform, the dashes run along them */
.sl-wires { width: 100%; height: 100%; overflow: visible; }
.sl-wires path { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 6; animation: wire 0.7s linear infinite; vector-effect: non-scaling-stroke; }
@keyframes wire { to { stroke-dashoffset: -7; } }
.sl-out { display: grid; gap: calc(var(--u) * 1.9); }
.sl-out li { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); min-height: calc(var(--u) * 9.6); padding: 0 calc(var(--u) * 3.2); border-radius: calc(var(--u) * 2); background: var(--row); font-size: calc(var(--u) * 3.6); font-weight: 800; color: var(--muted); transition: color 0.4s, background 0.4s; }
.sl-out li span { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.5); font-size: calc(var(--u) * 2.8); font-weight: 700; color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity 0.4s; }
.sl-out li span::before { content: ""; width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); border-radius: 50%; background: var(--red); }
.sl-out li.on { color: var(--text); background: var(--raised); }
.sl-out li.on span { color: var(--text-2); opacity: 1; }

/* ---------- arrival: one sequence when the page opens ----------
   (backwards, not forwards: once a part has arrived the animation lets go of it) */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise-in 0.85s cubic-bezier(0.2, 0.75, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
  @keyframes rise-in { from { opacity: 0; transform: translateY(26px); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .sl-gift { opacity: 1; }
  .sl-gift.g2, .sl-gift.g3 { display: none; }
}

/* ---------- sections shared by the home page and the pages of the three uses ---------- */
.band { padding: clamp(56px, 8vw, 110px) var(--pad); }
.band.tight { padding-top: clamp(30px, 5vw, 64px); }
.band.alt { background: var(--deep); }
.band-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 24px 56px; margin-bottom: clamp(28px, 4vw, 52px); }
.band-head h2 { font-size: clamp(34px, 4.4vw, 68px); }
.band-head p { color: var(--text-2); max-width: 520px; }

/* the page of one use: the sentence, what to do next, the app's own screen */
.hero { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(28px, 4vw, 72px); padding: clamp(28px, 5vw, 76px) var(--pad) clamp(48px, 7vw, 96px); overflow-x: clip; }
.hero-kind { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; padding: 7px 13px 7px 10px; border-radius: 6px; background: var(--row); color: var(--w); font-weight: 800; font-size: 14.5px; }
.hero-kind .ic { width: 19px; height: 19px; }
.hero h1 { font-size: clamp(40px, 4.9vw, 82px); line-height: 0.94; letter-spacing: -0.028em; margin-bottom: 22px; }
.hero .lead { max-width: 560px; color: var(--text-2); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; margin-bottom: 30px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hero .small { margin-top: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 520px; }

/* a real screen of the app, as a window on the page */
.frame { position: relative; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); overflow: hidden; }
.frame img, .frame video { display: block; width: 100%; height: auto; }
.frame video { background: #000; }
/* in the hero the screen is larger than its column, so its words can be read, and runs off the right edge */
.hero .frame { width: 138%; }
/* a tall window of the app (the stream window): shown whole, not wider than it is */
.frame.tall { max-width: 520px; margin-left: auto; margin-right: auto; }
.hero .frame.tall { width: 100%; }
/* where there is no screen to show, the hero carries the use's moving picture, larger */
.hero-scene { border-radius: 14px; background: var(--panel); overflow: hidden; }
.hero-scene .scene { min-height: clamp(300px, 34vw, 500px); padding: clamp(22px, 3.4vw, 56px); }
.hero-scene .stage { --u: clamp(3.3px, 1.16cqw, 7.4px); }

/* facts in a row under the hero */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0 var(--pad); border-radius: 14px; overflow: hidden; }
.facts.in { margin: 0; }
.facts li { padding: 22px 24px 24px; background: var(--panel); }
.facts b { display: block; font-family: var(--head); font-stretch: 90%; font-weight: 800; font-size: clamp(22px, 2vw, 30px); line-height: 1.05; letter-spacing: -0.02em; color: var(--text); }
.facts span { display: block; margin-top: 6px; color: var(--text-2); font-size: 14.5px; line-height: 1.4; }

/* what the app does, one thing per row, with its screen */
.rows { display: grid; gap: clamp(46px, 7vw, 100px); }
.row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(26px, 5vw, 80px); }
.row.flip > :first-child { order: 2; }
.row h3 { font-size: clamp(28px, 3.1vw, 46px); margin-bottom: 16px; }
.row p { color: var(--text-2); max-width: 500px; }
.list { display: grid; gap: 12px; margin-top: 22px; }
.list li { position: relative; padding-left: 20px; color: var(--text-2); font-size: 16px; line-height: 1.5; }
.list li::before { content: ""; position: absolute; left: 1px; top: 0.68em; width: 6px; height: 6px; border-radius: 50%; background: var(--w); }
.list b { color: var(--text); font-weight: 800; }
/* a row whose picture is tall: the text starts at the top beside it; its steps run down in one column */
.row.top { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.row-h2 { font-size: clamp(34px, 4.4vw, 68px); margin-bottom: 18px; }
.steps.col { grid-template-columns: 1fr; margin-top: 28px; }
.steps.col li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; padding: 18px 20px 20px; }
.steps.col li::before { grid-row: 1 / span 2; margin-bottom: 0; }
.steps.col b { margin-bottom: 4px; }
.steps.col b, .steps.col span { grid-column: 2; }
/* two short lists side by side, no picture */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 80px); }
.duo h3 { font-size: clamp(26px, 2.7vw, 40px); margin-bottom: 4px; }

/* short texts side by side: what is protected and how */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cards li { padding: 24px 24px 26px; border-radius: 14px; background: var(--panel); }
.band.alt .cards li, .band.alt .steps li { background: var(--panel); }
.cards h3 { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 10px; }
.cards p { color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.cta-row.after { margin-top: 24px; }

/* a table that compares, row by row; the dot before an answer says yes, partly or no */
.cmp-wrap { overflow-x: auto; border-radius: 14px; background: var(--panel); }
.cmp { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { background: var(--row); font-family: var(--head); font-stretch: 92%; font-weight: 800; font-size: 19px; letter-spacing: -0.015em; color: var(--text); }
.cmp thead th:nth-child(2) { color: var(--w); }
.cmp tbody th { width: 23%; font-weight: 800; color: var(--text); }
.cmp td { color: var(--text-2); }
.cmp td.yes::before, .cmp td.part::before, .cmp td.no::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--green); }
.cmp td.part::before { background: var(--amber); }
.cmp td.no::before { background: var(--red); }
.cmp.spec { min-width: 560px; }
.cmp.spec tbody th { width: 42%; }
.cmp.spec td { color: var(--text); font-weight: 700; }

/* steps: a real order (first this, then that), so they are numbered */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: step; }
.steps li { counter-increment: step; padding: 22px 22px 26px; border-radius: 14px; background: var(--panel); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 8px; background: var(--raised); color: var(--w); font-family: var(--head); font-weight: 800; font-size: 18px; }
.steps b { display: block; font-family: var(--head); font-stretch: 92%; font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 8px; }
.steps span { color: var(--text-2); font-size: 15px; line-height: 1.5; }

/* tiles with a picture: the room's games, the gifts */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tile { border-radius: 12px; background: var(--panel); overflow: hidden; }
.tile img { width: 100%; object-fit: cover; }
.tile b { display: block; padding: 11px 14px 13px; font-size: 15px; font-weight: 800; }
.tiles.games { margin-top: clamp(28px, 4vw, 56px); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tiles.games .tile img { aspect-ratio: 16 / 10; }
.gifts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.gift { padding: 22px 12px 18px; border-radius: 14px; background: var(--panel); text-align: center; }
.gift img { width: 64%; margin: 0 auto 12px; }
.gift b { display: block; font-weight: 800; font-size: 15.5px; line-height: 1.2; }
.gift span { color: var(--text-2); font-family: var(--head); font-weight: 800; font-size: 22px; }

/* the four plans in short; the full table and the purchase are on the account page */
.plans4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.plans4 li { padding: 22px 22px 26px; border-radius: 14px; background: var(--panel); }
.plans4 b { display: block; font-weight: 800; font-size: 15.5px; color: var(--text-2); }
.plans4 strong { display: block; margin: 6px 0 12px; font-family: var(--head); font-stretch: 88%; font-weight: 800; font-size: clamp(38px, 3.6vw, 56px); line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.plans4 span { color: var(--text-2); font-size: 15px; line-height: 1.5; }

/* the closing block: download, with the crow */
.get { position: relative; isolation: isolate; margin: 0 var(--pad) clamp(40px, 6vw, 80px); padding: clamp(34px, 5vw, 66px); border-radius: 14px; background: var(--deep); overflow: hidden; }
.get::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("rook-hero.webp?v=45f701c5") right center / auto 135% no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 24%, #000 64%); mask-image: linear-gradient(90deg, transparent 24%, #000 64%); }
.get h2 { font-size: clamp(38px, 5.2vw, 82px); max-width: 720px; margin-bottom: 16px; }
.get p { max-width: 520px; color: var(--text-2); margin-bottom: 26px; }
.get .small { margin: 18px 0 0; color: var(--muted); font-size: 13.5px; max-width: 560px; }

/* questions */
.faq { max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-family: var(--head); font-stretch: 94%; font-weight: 700; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.015em; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--text-2); font-family: var(--body); font-weight: 500; font-size: 26px; line-height: 1; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--text-2); max-width: 760px; }
.faq details a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* the three uses again, small, at the foot of each page */
.also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.also a { position: relative; display: block; padding: 24px 24px 22px; border-radius: 14px; background: var(--panel); overflow: hidden; transition: background 0.2s; }
.also a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--w); }
.also a:hover, .also a[aria-current] { background: var(--row); }
.also b { display: block; color: var(--w); font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.also span { display: block; font-family: var(--head); font-stretch: 92%; font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: -0.02em; }

.credit { margin-top: clamp(24px, 3vw, 40px); color: var(--muted); font-size: 12.5px; line-height: 1.5; max-width: 900px; }

/* ---------- foot ---------- */
.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: start; padding: 34px var(--pad) 44px; background: var(--deep); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a:hover { color: var(--text); }
.foot .badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; }
.foot .badges img { height: 40px; width: auto; }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .hero .frame { width: 100%; }
  .band-head { grid-template-columns: 1fr; }
  .row, .row.flip { grid-template-columns: 1fr; }
  .row.flip > :first-child { order: 0; }
  .duo { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gifts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles.games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plans4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* Plans, FAQ and Account leave the top bar here; the foot of every page has them */
  .top nav a.opt { display: none; }
  .pick { min-height: 0; }
  .pick h1 { text-wrap: balance; }
  .doors { grid-template-columns: 1fr; }
  .also { grid-template-columns: 1fr; }
  .get::before { opacity: 0.4; -webkit-mask-image: none; mask-image: none; background-position: 70% center; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .top { flex-wrap: wrap; row-gap: 6px; padding-top: 12px; padding-bottom: 8px; }
  .top nav { order: 3; width: 100%; margin-left: 0; gap: 18px; overflow-x: auto; font-size: 14.5px; }
  .top .lang { margin-left: auto; }
  .top .btn { display: none; }
  .steps { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .tiles.games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans4 { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
}