@font-face { font-family: Fraunces; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/fraunces-600.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 400 700; font-style: normal; font-display: swap; src: url(/fonts/inter.woff2) format("woff2"); }

/* readrubrica.com: one stylesheet for the marketing pages. Vellum and midnight,
   the app's own jewel tones, Fraunces for display and Inter for everything else. */
:root {
  --bg: #F4EBD9;
  --bg-deep: #EBDFC6;
  --card: #FBF5EA;
  --ink: #1D1A16;
  --soft: #4A443B;
  --mute: #7A7061;
  --line: #D9C9A6;
  --accent: #2447C9;
  --accent-ink: #FFFFFF;
  --verm: #C8351E;
  --gold: #B8860B;
  --green: #2E7D6B;
  --shadow: 0 18px 40px rgba(40, 28, 12, .16);
  --radius: 22px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16130F;
    --bg-deep: #1C1813;
    --card: #211C17;
    --ink: #EDE3D0;
    --soft: #C4B9A3;
    --mute: #9A8F7C;
    --line: #3A332B;
    --accent: #7F9BFF;
    --accent-ink: #0F1324;
    --verm: #F06A52;
    --gold: #E2B64A;
    --green: #5FBFAC;
    --shadow: 0 18px 40px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 Inter, system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: -.01em; margin: 0; }
p { margin: 0 0 14px; color: var(--soft); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 720px; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.top.scrolled { border-bottom-color: var(--line); }
@media (pointer: coarse) { .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--bg) 97%, transparent); } }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: Fraunces, Georgia, serif; font-size: 22px; font-weight: 600; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav { display: flex; gap: 22px; align-items: center; }
.nav a { color: var(--soft); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--ink); }
@media (max-width: 640px) { .nav .hide-sm { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); line-height: 1.2; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn small { display: block; font-weight: 500; font-size: 12px; opacity: .8; }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn[aria-disabled="true"] { cursor: default; }
.btn { transition: transform .12s ease, background-color .2s ease, border-color .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; }
button.btn { font-family: inherit; cursor: pointer; }
a.btn:not([aria-disabled="true"]):active, button.btn:not(:disabled):active { transform: translateY(1px) scale(.97); }
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.note { font-size: 14px; color: var(--mute); margin-top: 12px; }

/* Hero */
.hero { padding: 56px 0 24px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero-icon { width: 84px; height: 84px; border-radius: 20px; box-shadow: var(--shadow); margin-bottom: 26px; }
.hero h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.02; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--verm); }
.hero .lede { font-size: 20px; line-height: 1.5; margin-bottom: 26px; max-width: 34ch; }
.phone { width: 100%; max-width: 340px; margin: 0 auto; border: 10px solid #1D1A16; border-radius: 46px; box-shadow: var(--shadow), 0 0 0 1px var(--line); overflow: hidden; background: var(--card); }
@media (prefers-color-scheme: dark) { .phone { border-color: #050403; } }
@media (max-width: 700px) {
  .hero { padding-top: 32px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .phone { max-width: 300px; }
}

/* Sections */
section { padding: 64px 0; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--verm); margin-bottom: 10px; }
.section-head { max-width: 640px; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; margin-bottom: 14px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.flip .copy { order: 2; }
.split h2 { font-size: 30px; line-height: 1.15; margin-bottom: 14px; }
.split ul { padding-left: 20px; color: var(--soft); margin: 0; }
.split li { margin-bottom: 6px; }
@media (max-width: 700px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split.flip .copy { order: 0; }
}

.band { background: var(--bg-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Feature grid */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card h3 { font-size: 21px; margin-bottom: 8px; }
.card p { font-size: 16px; margin: 0; }
.card .dot { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; background: var(--bg); border: 1px solid var(--line); color: var(--verm); }
.card .dot svg { width: 22px; height: 22px; }
.maker { font-size: 15px; color: var(--mute); margin-top: 18px; }
.notify { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 460px; }
.notify input[type=email] { flex: 1 1 200px; min-width: 0; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 15px; }
.notify input[type=email]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.notify .btn { font-size: 15px; padding: 11px 16px; }
.notify .btn.is-busy { opacity: .65; cursor: progress; }
.notify .btn.is-done { background: var(--green); border-color: var(--green); color: #fff; animation: notify-pop .38s cubic-bezier(.3,1.6,.5,1); }
.notify input:disabled { opacity: .6; }
@keyframes notify-pop { 0% { transform: scale(.9); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .notify .btn.is-done { animation: none; } .btn { transition: none; } }
.notify .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.notify-note { margin-top: 8px; font-size: 14px; color: var(--soft); }
.notify-note .share { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.notify-note .share:hover { border-color: var(--accent); color: var(--accent); }

/* Screenshot rail */
.rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 24px; margin: 0 -16px; scrollbar-width: thin; }
.rail figure { flex: 0 0 min(260px, 70vw); margin: 0; scroll-snap-align: center; }
.rail img { height: auto; border: 8px solid #1D1A16; border-radius: 36px; box-shadow: var(--shadow); }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.plan.best { border: 2px solid var(--accent); }
.plan .name { font-weight: 600; color: var(--ink); }
.plan .price { font-family: Fraunces, Georgia, serif; font-size: 40px; color: var(--ink); line-height: 1.1; margin: 8px 0 4px; }
.plan .price span { font-family: Inter, sans-serif; font-size: 16px; color: var(--mute); font-weight: 500; }
.plan p { font-size: 15px; margin: 0; }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .twocol { grid-template-columns: 1fr; } }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding: 7px 0 7px 30px; position: relative; color: var(--soft); border-bottom: 1px solid var(--line); }
.checks li:last-child { border-bottom: 0; }
.checks li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 12px; height: 7px; border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(-45deg); }
.checks.gold li::before { border-color: var(--gold); }

/* FAQ */
details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin-bottom: 12px; }
summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--mute); font-size: 22px; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { margin: 12px 0 0; }

/* Promise strip */
.promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
@media (max-width: 700px) { .promise { grid-template-columns: repeat(2, 1fr); } }
.promise strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 22px; color: var(--ink); margin-bottom: 4px; }
.promise span { font-size: 15px; color: var(--soft); }

/* CTA */
.cta { text-align: center; }
/* Your buddy, waiting at the bottom (assets/nook.js): a poster until it's drawn live, the same box as the crew. */
.cta-pet { position: relative; width: 132px; aspect-ratio: 352 / 384; margin: -8px auto 10px; }
.cta-pet img, .cta-pet canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .5s ease; }
.cta-pet canvas { opacity: 0; }
.cta-pet.is-live canvas { opacity: 1; }
.cta-pet.is-live img { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cta-pet img, .cta-pet canvas { transition: none; } }
.cta h2 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 14px; }
.cta .stores { justify-content: center; margin-top: 24px; }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 36px 0 48px; font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer a { color: var(--soft); text-decoration: none; }
footer a:hover { color: var(--ink); }
footer p { margin: 0; color: var(--mute); }

/* Plain pages (support, press) */
.page { padding: 40px 0 72px; }
.page h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.08; margin-bottom: 14px; }
.page h2 { font-size: 26px; margin: 44px 0 14px; }
.assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.assets a { display: block; text-decoration: none; color: var(--soft); font-size: 14px; }
.assets img { border-radius: 14px; border: 1px solid var(--line); margin-bottom: 8px; background: var(--card); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Phones show the top of the screen at a calmer height; the hero one is smaller still. */
.phone { height: auto; aspect-ratio: 720 / 1180; object-fit: cover; object-position: top; }
.hero .phone { max-width: 290px; }
.hero .wrap { align-items: center; }
@media (min-width: 701px) { .hero { padding-top: 40px; } }

/* Tablets (iPad portrait, 700–1000 px) keep the two-column layouts with tighter spacing. */
@media (min-width: 701px) and (max-width: 1000px) {
  .hero .wrap { gap: 32px; }
  .split { gap: 32px; }
  .split h2 { font-size: 26px; }
  .phone { max-width: 280px; }
  .hero .phone { max-width: 250px; }
}

/* Until a store is live, its "Coming soon" is a quiet badge, not a button, and the waitlist leads.
   stores.js adds .has-live / .all-live to <html>, and .in-app for TikTok/Instagram/Facebook's
   browsers, which can't run the web app. */
.btn[data-store][aria-disabled="true"] { padding: 6px 12px; gap: 6px; font-size: 13px; font-weight: 500; background: transparent; border: 1px dashed var(--line); color: var(--mute); }
.btn[data-store][aria-disabled="true"] svg { width: 15px; height: 15px; }
.btn[data-store][aria-disabled="true"] small { display: inline; font-size: inherit; font-weight: inherit; opacity: 1; }
.btn[data-store][aria-disabled="true"] small::after { content: " "; }
.lead { display: flex; flex-direction: column; gap: 16px; }
#notify { scroll-margin-top: 140px; }
.lead .notify { margin-top: 0; }
.lead .notify input[type=email] { padding: 13px 15px; font-size: 16px; }
.lead .notify .btn { font-size: 16px; padding: 13px 20px; justify-content: center; }
.lead .notify-note { margin-top: 8px; }
.cta .lead { align-items: center; margin-top: 24px; }
.cta .lead .notify { margin: 0 auto; justify-content: center; }
.cta .lead .stores { margin-top: 0; }
.nav .nav-cta { padding: 9px 16px; font-size: 15px; color: var(--accent-ink); }
.nav .nav-cta:hover { color: var(--accent-ink); }
.has-live .when-soon, html:not(.has-live) .when-live { display: none; }
.has-live .lead .stores { order: -1; }
.has-live .lead .notify .btn.primary { background: var(--card); color: var(--ink); border-color: var(--line); }
.all-live .lead .signup { display: none; }
.in-app .web-only { display: none; }
@media (max-width: 520px) {
  .lead .notify .btn { flex: 1 1 100%; }
  .hero .lede { font-size: 18px; margin-bottom: 22px; }
  .hero .lede + .lead { margin-top: -12px; }
}

/* The ad's cat peeks over the signup box (hero only), paws on its edge. */
.hero .signup { position: relative; padding-top: 50px; max-width: 460px; }
.hero .notify { position: relative; }
.peek { position: absolute; z-index: 2; top: 0; right: 28px; width: 96px; height: 50px; pointer-events: none; }
.peek span { display: block; height: 50px; overflow: hidden; }
/* Rubi (a Rive poster: the companion's 240 box sits inside 352 by 384, so it is drawn bigger and pulled up and left). */
.peek img { display: block; width: 141px; height: 154px; max-width: none; margin: -38px 0 0 -22px; animation: peek-up .7s cubic-bezier(.3, 1.4, .5, 1) .4s both; }
.peek i { position: absolute; bottom: -6px; width: 17px; height: 11px; border-radius: 50%; background: #5A2A1E; border: 2px solid #1D1A16; animation: paws-in .25s ease 1s both; }
.peek i:first-of-type { left: 26px; }
.peek i:last-of-type { left: 53px; }
@keyframes peek-up { from { transform: translateY(58px); } to { transform: translateY(0); } }
@keyframes paws-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .peek img, .peek i { animation: none; } }
.has-live .hero .signup { padding-top: 0; }
.has-live .peek { display: none; }

/* A shelf of companions under the hero: a few of the eighteen, alive, in one row that fits the page (assets/nook.js).
   Eight across on a wide screen, six on a tablet, five on a phone; never a scroller. Each box is the companion
   artboard's shape (its 240 box plus room for a hat and a hop), the shelf line sits at its feet. */
.crew-row { padding: 8px 0 44px; }
.crew { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; padding: 10px 0 12px; }
.crew-pet { position: relative; width: 100%; max-width: 132px; justify-self: center; aspect-ratio: 352 / 384; padding: 0; margin: 0; border: 0; background: none; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (max-width: 799px) { .crew-pet.w8 { display: none; } }
.crew-pet img, .crew-pet canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .18s ease, opacity .5s ease; transform-origin: 50% 83%; }
.crew-pet canvas { opacity: 0; }
.crew-pet.is-live canvas { opacity: 1; }
.crew-pet.is-live img { opacity: 0; }
.crew-pet::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 16%; height: 3px; border-radius: 2px; background: var(--line); transition: background-color .2s; }
.crew-pet[aria-pressed="true"]::after { background: var(--verm); }
.crew-pet:hover img, .crew-pet:hover canvas, .crew-pet:focus-visible img, .crew-pet:focus-visible canvas { transform: translateY(-3px) scale(1.04); }
.crew-pet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.say { position: absolute; left: 50%; top: 4%; transform: translate(calc(-50% + var(--nudge, 0px)), 6px); padding: 4px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 2; }
.say.is-said { opacity: 1; transform: translate(calc(-50% + var(--nudge, 0px)), 0); }
.crew-name { color: var(--ink); font-weight: 600; }
.crew-note { text-align: center; margin: 12px auto 0; max-width: 44ch; font-size: 16px; }
.crew-box .slot { position: absolute; inset: 0; }
.crew-pet .slot.is-live canvas { opacity: 1; }
.crew-pet .slot.is-live img { opacity: 0; }
/* The box stands on the shelf line like the others (its artboard centres it higher) and a touch bigger. */
.crew-box .slot[data-slot="box"] { transform: translateY(13.5%) scale(1.12); transform-origin: 50% 70%; transition: opacity .7s ease; }
.crew-box.is-open .slot[data-slot="box"] { opacity: 0; transition-delay: 2.2s; }
.crew-box .slot[data-slot="pet"] { opacity: 0; transform: translateY(18%) scale(.35); transform-origin: 50% 83%; transition: transform .55s cubic-bezier(.3, 1.6, .5, 1), opacity .15s ease; }
.crew-box.is-open .slot[data-slot="pet"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .crew-box .slot { transition: none !important; } }
@media (max-width: 519px) {
  .crew-pet.w6 { display: none; }
  .crew { gap: 0; padding-top: 22px; }
  /* Five across is small: draw each a little bigger than its box, feet still on the line (they stand at 83%). */
  .crew-pet img, .crew-pet canvas { left: -14%; top: -23.24%; width: 128%; height: 128%; }
  .say { top: -16%; }
}
@media (prefers-reduced-motion: reduce) { .crew-pet img, .crew-pet canvas, .say { transition: none; } }
.hero .eyebrow { margin-bottom: 14px; }

/* The hero Nook (assets/nook.js): the room and the companion, each a poster until the runtime draws it in place, so
   nothing pops in. The box has a fixed shape (the room is 360 by 300), so the page never shifts. The companion sits
   where the app puts it: 46% of the room wide, its feet at 93% of the height (src/app/companion/index.tsx). */
.nook { margin: 0; width: 100%; max-width: 480px; justify-self: center; }
.nook-box { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; position: relative; aspect-ratio: 6 / 5; border-radius: var(--radius); overflow: hidden; background: rgb(234 220 192); box-shadow: var(--shadow), 0 0 0 1px var(--line); isolation: isolate; }
@media (prefers-color-scheme: dark) { .nook-box { background: rgb(43 38 33); } }
.nook-room, .nook-pet { position: absolute; }
.nook-room { inset: 0; }
.nook-pet { left: 16.27%; top: 19.4%; width: 67.47%; height: 88.32%; }
.nook-box.roams { cursor: pointer; }
/* Pro's loft (assets/nook.js): the same room box, the companion asleep on the cushion (its feet land on the seat,
   as in the Nook), its aura in two layers round it: the glow behind, the sparks in front. The aura is half as big
   again as the companion's 240 box, centred on it (the box sits 56 in and 80 down in the 352 by 384 artboard). */
.loft { max-width: 560px; margin: 4px auto 36px; }
.loft-pet .aura, .loft-pet .sleeper { position: absolute; }
.loft-pet .sleeper { inset: 0; }
.loft-pet .aura { left: -1.14%; top: 5.21%; width: 102.27%; height: 93.75%; }
/* Little text choices under a room (rooms in the demo, auras in the loft): they wrap, they never slide. */
.picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 12px; }
.demo .picks { justify-content: flex-start; }
.pick { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--soft); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: border-color .2s ease, color .2s ease, transform .12s ease; }
.pick:hover { border-color: var(--accent); color: var(--ink); }
.pick.is-on { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 1px var(--accent); }
.pick:active { transform: scale(.95); }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-live-only][hidden] { display: none; }
.nook-box picture { display: contents; }
.nook-box img.poster, .nook-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nook-box canvas { opacity: 0; transition: opacity .6s ease; }
.nook-box img.poster { transition: opacity .6s ease .1s; }
.nook-box .is-live canvas { opacity: 1; }
.nook-box .is-live img.poster { opacity: 0; }
.nook-cap { margin: 12px 4px 0; font-size: 14px; color: var(--mute); text-align: center; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .nook-box canvas, .nook-box img.poster { transition: none; } }
@media (max-width: 700px) { .nook { max-width: 420px; } }

/* Dress it: a strip of hats under the hero's Nook. */
.hero-nook { justify-self: center; width: 100%; max-width: 480px; }
/* Grid items default to their content's width; the hat strip is wider than a phone, so let the columns shrink (the strip scrolls). */
.hero .wrap > * { min-width: 0; }
/* Hats: one row of round buttons that always fits, nine across, no sliding; the caption under the room names the one on. */
.hats { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; padding: 14px 0 6px; }
.hat { justify-self: center; width: 100%; max-width: 48px; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--card); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease; }
.hat img { width: 68%; height: 68%; display: block; }
.hat .none { width: 50%; height: 50%; display: block; box-sizing: border-box; border-radius: 50%; border: 1.5px dashed var(--mute); }
.hat:hover { border-color: var(--accent); }
.hat.is-on { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.hat:active { transform: scale(.9); }
.hat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 360px) { .hats { gap: 3px; } }
.nook-cap.left { text-align: left; margin-left: 0; }

/* A day in the Nook: the demo room, its sitting timer, and the one-shot moments (celebrate.riv). */
.demo { width: 100%; max-width: 480px; margin: 0 auto; }
.demo-bar { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.demo-time { font-family: Fraunces, Georgia, serif; font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
.moment { position: absolute; pointer-events: none; }
.moment canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .3s ease; }
.moment.is-live canvas { opacity: 1; }
.demo-sparkles { left: 8%; top: 18%; width: 44%; height: 52%; }
.pro-head { position: relative; }
/* The text sits above the rays; the rays and sparkles themselves stay out of the flow (.moment is absolute). */
.pro-head > :not(.moment) { position: relative; }
.pro-glow { left: -160px; top: -200px; width: 600px; height: 600px; opacity: .8; }
.pro-sparkles { left: -40px; top: -80px; width: 320px; height: 320px; }
.signup { position: relative; }
.confetti { left: 50%; top: 50%; width: 460px; height: 460px; max-width: 120vw; transform: translate(-50%, -55%); z-index: 3; }
@media (prefers-color-scheme: dark) { .pro-glow { opacity: .5; } }