/* =============================================================================
   Round 3 redesign (live from 2026-09-30): "one ordinary family day with Smalltalk,
   kept like a scrapbook and labelled like a plain shop".
   Port of the Claude Design project 5a380a82-364d-4894-b0a0-f59285882dbb
   (Home.dc.html, Buy.dc.html, How It Works.dc.html, Safety.dc.html, the
   App Video film). Tokens are Design's list in "00 Read First". The legal,
   checkout-return and link-landing pages still run on site.css. Page-specific styles live in r3film-<page>.css.
   ============================================================================= */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/Outfit-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans-variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --blueberry: #5660BE;
  --blueberry-deep: #3E4AA9;
  --oat: #FAF5EE;
  --oat-deep: #F1E9DC;
  --paper: #FFFCF7;
  --ink: #243047;
  --cloud: #BDD8F4;
  --petal: #F3D1DC;
  --sunshine: #F4C84A;
  --sage: #A9C29A;
  /* Two raspberries (David, 2026-09-27, for the brand-v2 design system):
     --raspberry is the Brand Universe PDF's Raspberry, for fills and
     surfaces with Ink on top (bubbles, pins); --raspberry-deep is the
     brand-v2 README's Raspberry Deep and the logo heart, for marks, icons
     and text on Oat or Paper, which need 3:1 (#F06D78 is only 2.70:1). */
  --raspberry: #F06D78;
  --raspberry-deep: #E85268;

  --font-head: "Outfit", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 48px);
  --section-pad: clamp(64px, 9vw, 120px);
  --rule: rgba(36, 48, 71, .15);
  --rule-on-blue: rgba(250, 245, 238, .3);
  --shadow-print: 0 2px 4px rgba(36, 48, 71, .08), 0 18px 40px rgba(36, 48, 71, .16);
  --gingham: linear-gradient(90deg, rgba(86, 96, 190, .5) 50%, transparent 50%),
             linear-gradient(rgba(86, 96, 190, .5) 50%, transparent 50%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--oat);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden makes body a scroll container, which breaks
     position: sticky on the header and the How it works handset (Design,
     2026-09-30). */
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blueberry-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--sunshine); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-head); margin: 0; }
p { margin: 0; }
.rf-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 50;
  background: var(--sunshine); color: var(--ink); padding: 10px 18px; border-radius: 999px;
}
.rf-skip:focus { left: 12px; }

/* ---- Layout ------------------------------------------------------------------ */
.rf-band { padding-inline: var(--gutter); padding-block: var(--section-pad); }
.rf-band--blue { background: var(--blueberry); color: var(--oat); }
.rf-band--blue a:not(.rf-btn) { color: var(--oat); }
.rf-band--cloud { background: var(--cloud); }
.rf-wrap { max-width: 1200px; margin: 0 auto; }

/* ---- Buttons ------------------------------------------------------------------ */
.rf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: var(--blueberry);
  color: var(--oat);
}
.rf-btn:hover { background: var(--blueberry-deep); color: var(--oat); }
.rf-btn--outline { background: transparent; color: var(--blueberry-deep); border-color: var(--blueberry); }
.rf-btn--outline:hover { background: var(--cloud); color: var(--blueberry-deep); }
.rf-btn--sun { background: var(--sunshine); color: var(--ink); }
.rf-btn--sun:hover { background: var(--oat); color: var(--ink); }
.rf-btn--outline-light { background: transparent; color: var(--oat); border-color: rgba(250, 245, 238, .7); }
.rf-btn--outline-light:hover { background: rgba(250, 245, 238, .12); color: var(--oat); }
.rf-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .72; }

/* ---- Navigation ----------------------------------------------------------------- */
.rf-header { background: var(--blueberry); position: sticky; top: 0; z-index: 20; }
.rf-nav {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px clamp(16px, 4vw, 40px);
  padding: 10px clamp(16px, round(down, 4vw, 1px), 40px); /* whole pixels, so the logo does too */
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
/* The header logo is smalltalk-lockup-inverse-nav-240x60.svg: the inverse
   lockup with its padding cropped off by viewBox (Design's 2026-09-26 nav
   crop, previously done with a negative margin on the 320x132 file). It is
   drawn at a few fixed scales rather than a fluid width, so it always lands
   on whole pixels: a fluid width left it at fractional sizes and a -7.94px
   offset, which softened the letters (David, 2026-09-30). */
.rf-logo { display: flex; align-items: center; flex: none; margin-right: auto; border-radius: 4px; }
.rf-logo img { width: 160px; height: 40px; max-width: none; }
@media (max-width: 819px) { .rf-logo img { width: 144px; height: 36px; } }
@media (max-width: 599px) { .rf-logo img { width: 120px; height: 30px; } }
.rf-nav__links { display: flex; align-items: center; gap: 32px; }
.rf-nav__links a {
  color: var(--oat); font-family: var(--font-head); font-weight: 500; font-size: 18px; text-decoration: none;
}
.rf-nav__links a:hover,
.rf-nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; color: var(--oat); }
.rf-nav .rf-btn { flex: none; min-height: 48px; padding: 12px 22px; font-size: 18px; }
.rf-menu-toggle {
  display: none;
  flex: none; width: 48px; height: 48px; border-radius: 12px;
  border: 2px solid rgba(250, 245, 238, .5); background: transparent; color: var(--oat);
  align-items: center; justify-content: center; cursor: pointer;
}
.rf-menu {
  display: none;
  flex-direction: column;
  padding: 4px 20px 20px;
  gap: 2px;
  border-top: 1px solid rgba(250, 245, 238, .2);
}
.rf-menu a { color: var(--oat); font-family: var(--font-head); font-size: 20px; font-weight: 500; text-decoration: none; padding: 12px 0; }
/* Header CTA: a long and a short label, switched at the same 960px as the nav
   links (Design, Waitlist.dc.html, 2026-10-01). Both read "Join waitlist" since
   2026-10-18; the pair is kept so a longer desktop label can come back. */
.rf-nav__cta-short { display: none; }
@media (max-width: 959px) {
  .rf-nav__cta-long { display: none; }
  .rf-nav__cta-short { display: inline; }
}
@media (max-width: 959px) {
  .rf-nav__links { display: none; }
  .rf-menu-toggle { display: flex; }
  .rf-header.is-open .rf-menu { display: flex; }
}
@media (max-width: 400px) {
  .rf-nav { gap: 12px; }
  .rf-nav .rf-btn { padding: 10px 16px; font-size: 17px; }
}

/* ---- Footer ----------------------------------------------------------------------- */
.rf-footer { background: var(--oat); }
.rf-ribbon { height: 22px; background-color: var(--oat); background-image: var(--gingham); background-size: 11px 11px; }
.rf-footer__inner {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 40px;
}
/* The brand column is a fixed 234px once there is room for it, so the footer
   wordmark always draws at its native 234x44: in a shared 200px-minimum track
   it was squeezed to 201-233px on windows around 490-560, 750-860 and
   1010-1140px wide, which softened it (David, 2026-09-30). */
.rf-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 36px; }
@media (min-width: 560px) {
  .rf-footer__grid { grid-template-columns: 234px repeat(auto-fit, minmax(200px, 1fr)); }
}
/* A four-item footer goes 1 / 2 / 4, never 3 + 1: from about 760 to 1000px
   the auto-fit track left the last column alone on a second row (Design,
   BRIEF-four-item-rows-2026-10-04). The brand column keeps its 234px floor.
   Scoped with :has() to footers that have a fourth child, so /trial/'s
   three-column footer keeps the rule above; a browser without :has() keeps
   the rule above too. */
@media (min-width: 540px) {
  .rf-footer__grid:has(> :nth-child(4)) { grid-template-columns: minmax(234px, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1080px) {
  .rf-footer__grid:has(> :nth-child(4)) { grid-template-columns: 234px repeat(3, minmax(0, 1fr)); }
}
.rf-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.rf-footer__brand img { width: 234px; height: 44px; max-width: none; }
.rf-footer__tag { font-family: var(--font-head); font-weight: 500; font-size: 20px; color: var(--ink); }
.rf-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.rf-footer__col strong { font-family: var(--font-head); font-weight: 600; font-size: 18px; margin-bottom: 4px; }
.rf-footer__col a { color: var(--ink); padding: 4px 0; }
.rf-footer__col a:hover { color: var(--blueberry-deep); }
.rf-footer__legal { font-size: 16px; border-top: 1px solid var(--rule); padding-top: 22px; }
.rf-footer__legal a { color: var(--ink); }

/* ---- Build holds: text the preview must not carry yet ----------------------------------- */
.rf-held {
  display: block;
  padding: 16px 18px;
  border: 2px dashed var(--raspberry-deep);
  border-radius: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
}
.rf-footer__tag--heart { display: flex; align-items: center; gap: 8px; }
.rf-footer__tag--heart svg { color: var(--raspberry-deep); }

/* ---- Your Village screen (Home and How It Works) ------------------------------
   The real app screenshot in a Paper frame, cropped above "Recent changes"
   (RULING-village-on-home-and-how-it-works-2026-10-20, V3). */
.rf-vscreen { margin: 0; width: 100%; justify-self: center; display: flex; flex-direction: column; gap: 14px; }
.rf-vscreen--right { max-width: 340px; transform: rotate(1.5deg); }
.rf-vscreen--left { max-width: 380px; }
.rf-vscreen--left .rf-vscreen__frame { transform: rotate(-1.5deg); }
.rf-vscreen__frame {
  border-radius: 24px; background: var(--paper); padding: 6px;
  box-shadow: 0 1px 2px rgba(36, 48, 71, .08), 0 18px 40px rgba(36, 48, 71, .14);
}
/* The capture already ends just below "Invite a villager" (app #2132, 804x1824), so the frame
   shows the whole image. If the capture's height changes, change this ratio with it. */
.rf-vscreen__crop { border-radius: 19px; overflow: hidden; aspect-ratio: 804 / 1824; }
.rf-vscreen__crop img { width: 100%; height: auto; display: block; }
.rf-vscreen figcaption { font-size: 17px; line-height: 1.4; text-align: center; }
.rf-vscreen figcaption strong { font-family: var(--font-head); font-weight: 600; color: var(--blueberry-deep); }