/* =============================================================================
   Round 3 preview, film version: /how-it-works/ and /safety/.
   Port of Claude Design "How It Works.dc.html" and "Safety.dc.html".
   Shared tokens, nav, footer, buttons and .rf-held live in r3film.css.
   Prefixes: rf-hiw- (How it works), rf-safety- (Safety).
   ============================================================================= */

/* ---- Shared type sizes for these two pages (declared per prefix) ------------- */
.rf-hiw-h1,
.rf-safety-h1 {
  font-weight: 700;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.rf-safety-accent { color: var(--blueberry); }
.rf-hiw-h2,
.rf-safety-h2 {
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.rf-hiw-h2--deep,
.rf-safety-h2--deep { color: var(--blueberry-deep); }
.rf-hiw-lead,
.rf-safety-lead { font-size: clamp(19px, 1.8vw, 23px); }
.rf-hiw-sublead { font-size: clamp(19px, 1.6vw, 22px); max-width: 46ch; }
.rf-hiw-lede-strong,
.rf-safety-lede-strong { font-family: var(--font-head); font-weight: 600; font-size: 21px; }
.rf-hiw-arrow,
.rf-safety-arrow { font-family: var(--font-head); font-weight: 600; font-size: 19px; align-self: flex-start; }

/* ---- Polaroid-style print (figure) -------------------------------------------- */
.rf-hiw-print,
.rf-safety-print {
  margin: 0;
  background: var(--paper);
  padding: 12px 12px 18px;
  box-shadow: 0 1px 2px rgba(36, 48, 71, .08), 0 18px 40px rgba(36, 48, 71, .12);
  width: 100%;
  justify-self: center;
  position: relative;
}
.rf-hiw-print figcaption,
.rf-safety-print figcaption { padding: 14px 4px 0; font-size: 18px; }
.rf-hiw-print--crop img,
.rf-safety-print--crop img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---- App screen frame (phone screenshot cropped to 804/1100) ------------------ */
.rf-hiw-screen,
.rf-safety-screen {
  border-radius: 24px;
  background: var(--paper);
  padding: 6px;
}
.rf-hiw-screen__crop,
.rf-safety-screen__crop {
  border-radius: 19px;
  overflow: hidden;
  aspect-ratio: 804 / 1100;
}
.rf-hiw-screen__crop img,
.rf-safety-screen__crop img { width: 100%; }

/* =============================================================================
   HOW IT WORKS
   ============================================================================= */
.rf-hiw-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.rf-hiw-stack { display: flex; flex-direction: column; gap: 18px; }

/* Hero */
.rf-hiw-hero {
  padding-inline: var(--gutter);
  padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 80px);
  scroll-margin-top: 80px;
}
.rf-hiw-hero .rf-hiw-lead { max-width: 40ch; }
.rf-hiw-facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rf-hiw-hero-print {
  background: #fff;
  padding: 16px 16px 20px;
  max-width: 500px;
  transform: rotate(1.2deg);
}
.rf-hiw-hero-print img { width: 100%; }
.rf-hiw-hero-print figcaption { padding: 6px 4px 0; font-size: 17px; }

.rf-hiw-section-stack { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); }
.rf-hiw-head { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.rf-hiw-notes { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.rf-hiw-note { font-size: 18px; background: var(--cloud); border-radius: 16px; padding-block: 16px; padding-inline: 20px; }
.rf-hiw-note--plain { background: transparent; padding-inline: 0; padding-block: 0; }

/* The app */
.rf-hiw-app { scroll-margin-top: 80px; }
.rf-hiw-app .rf-hiw-sublead { max-width: 46ch; }
.rf-hiw-screens {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(24px, 3vw, 36px);
}
.rf-hiw-screen-item { display: flex; flex-direction: column; gap: 14px; }
.rf-hiw-app .rf-hiw-screen { box-shadow: 0 14px 30px rgba(10, 14, 50, .3); }
.rf-hiw-screen-item h3 { font-weight: 600; font-size: 23px; }
.rf-hiw-screen-item__text { display: flex; flex-direction: column; gap: 4px; }
/* Parent controls: each an Oat card on Blueberry with a check disc
   (Design, RULING-jessica-review-of-r3-v3-2026-09-28 B4, B5). */
.rf-hiw-ctrls {
  list-style: none; margin: 0; padding: 8px 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
/* Four cards: 1 / 2 / 4, never 3 + 1 (Design, BRIEF-four-item-rows-2026-10-04). */
@media (min-width: 540px)  { .rf-hiw-ctrls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .rf-hiw-ctrls { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rf-hiw-ctrl {
  background: var(--oat); color: var(--ink); border-radius: 20px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px; position: relative;
}
.rf-hiw-ctrl h3 { font-family: var(--font-head); font-weight: 600; font-size: 22px; line-height: 1.2; margin: 0; }
.rf-hiw-ctrl p { margin: 0; }
.rf-hiw-ctrl__tick {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.rf-hiw-ctrl--sun .rf-hiw-ctrl__tick { background: var(--sunshine); }
.rf-hiw-ctrl--petal .rf-hiw-ctrl__tick { background: var(--petal); }
.rf-hiw-ctrl--sage .rf-hiw-ctrl__tick { background: var(--sage); }
.rf-hiw-ctrl--cloud .rf-hiw-ctrl__tick { background: var(--cloud); }
.rf-hiw-ctrl__heart { position: absolute; right: 18px; top: 18px; transform: rotate(10deg); color: var(--raspberry-deep); }
.rf-hiw-ctrl__stars { position: absolute; right: -14px; top: -26px; width: 76px; height: auto; transform: rotate(8deg); }

/* Pick a number (B1): a full-width Petal panel second on the page. */
.rf-hiw-number { padding-inline: var(--gutter); padding-block: 0 clamp(56px, 7vw, 96px); scroll-margin-top: 90px; }
.rf-hiw-number__panel {
  max-width: 1320px; margin-inline: auto; position: relative;
  background: var(--petal); border-radius: clamp(24px, 3vw, 40px);
  padding-block: clamp(36px, 6vw, 80px); padding-inline: clamp(20px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.rf-hiw-number__stars { position: absolute; right: clamp(12px, 3vw, 40px); top: -28px; width: clamp(72px, 8vw, 110px); height: auto; transform: rotate(10deg); }
.rf-hiw-number__copy { display: flex; flex-direction: column; gap: 14px; }
.rf-hiw-number__h { font-family: var(--font-head); font-weight: 700; font-size: clamp(36px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.rf-hiw-number__copy p { margin: 0; font-size: clamp(19px, 1.6vw, 22px); max-width: 40ch; }
.rf-hiw-number__form .rf-home-number__input { height: 76px; border-radius: 20px; font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: .08em; }
.rf-hiw-number__form .rf-home-number__btn { height: 76px; padding-inline: 34px; font-size: 20px; }

/* What the keys do (Design, RULING-features-on-the-site-2026-09-29): three
   Paper tiles and one wide tile on a Cloud band, each led by a chip naming the key. */
.rf-hiw-keys { scroll-margin-top: 80px; }
.rf-hiw-keys__stack { gap: clamp(28px, 4vw, 44px); }
.rf-hiw-keys__sub { max-width: 40ch; }
/* Drawing beside the tiles; above them under 1000px. */
.rf-hiw-keys__layout { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: flex-start; }
.rf-hiw-keys__list { flex: 1 1 480px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.rf-hand { flex: 0 1 340px; margin: 0 auto; }
@media (min-width: 1000px) { .rf-hand { position: sticky; top: 96px; } }
.rf-hand__face {
  background: var(--paper); border-radius: 48px; padding: 26px 30px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.rf-hand__grille {
  width: 150px; height: 112px; border-radius: 20px; background: var(--oat);
  box-shadow: inset 0 0 0 1.5px rgba(36, 48, 71, .10);
  display: grid; grid-template-columns: repeat(7, 7px); gap: 7px; justify-content: center; align-content: center;
}
.rf-hand__grille span { width: 7px; height: 7px; border-radius: 50%; background: rgba(36, 48, 71, .28); }
.rf-hand__row, .rf-hand__pad { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.rf-hand__pad { gap: 10px 12px; }
.rf-hand__label { text-align: center; font-family: var(--font-head); font-weight: 600; font-size: 16px; }
.rf-hand__label--low { display: flex; align-items: flex-end; justify-content: center; line-height: 1; }
.rf-hand__top { height: 28px; border-radius: 9px; box-shadow: 0 2px 0 rgba(36, 48, 71, .14); }
.rf-hand__top--sun { background: var(--sunshine); }
.rf-hand__top--sage { background: var(--sage); }
.rf-hand__key {
  height: 42px; border-radius: 9px; background: var(--oat); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(36, 48, 71, .12), 0 2px 0 rgba(36, 48, 71, .12);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.rf-hand__key--cloud { background: var(--cloud); }
/* The top 15 keys play their dial-pad tone and dip 2px while held
   (assets/js/hand-tones.js; Design, How It Works.dc.html, 2026-09-30). */
.rf-hand [data-dtmf] { cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.rf-hand__top[data-dtmf]:active { box-shadow: 0 0 0 rgba(36, 48, 71, .14); transform: translateY(2px); }
.rf-hand__key[data-dtmf]:active { box-shadow: inset 0 0 0 1.5px rgba(36, 48, 71, .12), 0 0 0 rgba(36, 48, 71, .12); transform: translateY(2px); }
.rf-hand__key--raspberry { background: var(--raspberry); }
.rf-hand__digit { font-family: var(--font-head); font-weight: 500; font-size: 22px; line-height: 1; }
.rf-hand__abc { font-size: 9px; letter-spacing: .04em; }
.rf-hand__light { width: 16px; height: 5px; border-radius: 999px; background: rgba(36, 48, 71, .35); }
.rf-hand__mic { width: 12px; height: 12px; border-radius: 50%; background: var(--oat); box-shadow: inset 0 0 0 1.5px rgba(36, 48, 71, .18); margin-top: 12px; }
.rf-hiw-key { background: var(--paper); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.rf-hiw-key h3 { font-family: var(--font-head); font-weight: 600; font-size: 23px; line-height: 1.2; margin: 0; }
.rf-hiw-key p { margin: 0; }
.rf-hiw-key__tag { align-self: flex-start; border-radius: 8px; padding: 3px 10px; font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--ink); }
.rf-hiw-key__tag--sun { background: var(--sunshine); }
.rf-hiw-key__tag--sage { background: var(--sage); }
.rf-hiw-key__tag--petal { background: var(--petal); }
.rf-hiw-key__tag--cloud { background: var(--cloud); }
.rf-hiw-key__tag--raspberry { background: var(--raspberry); }
.rf-hiw-key__strong { font-family: var(--font-head); font-weight: 600; }

/* Village */
.rf-hiw-village { scroll-margin-top: 80px; }
.rf-hiw-split--top { align-items: start; }
.rf-hiw-village-copy { display: flex; flex-direction: column; gap: 22px; }
.rf-hiw-village-list { display: flex; flex-direction: column; gap: 16px; }
.rf-hiw-install { background: var(--paper); border-radius: 20px; padding: clamp(20px, 2.4vw, 26px); }
.rf-hiw-install p { margin: 0; }
.rf-hiw-install__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.rf-hiw-install__badges a { display: block; line-height: 0; border-radius: 8px; }
.rf-hiw-install__badges a:focus-visible { outline: 3px solid var(--blueberry-deep); outline-offset: 3px; }
.rf-hiw-install__badges img { height: 44px; width: auto; max-width: none; display: block; }

/* Emergency calls */
/* It follows the Station band since the village moved up (ruling 2026-10-20, V4), so it needs top padding. */
.rf-hiw-emergency { padding-inline: var(--gutter); padding-block: clamp(56px, 8vw, 112px) clamp(64px, 8vw, 112px); scroll-margin-top: 80px; }
.rf-hiw-emergency__box {
  max-width: 820px;
  background: var(--paper);
  border: 2px solid var(--cloud);
  border-radius: 24px;
  padding: clamp(24px, 3.4vw, 40px);
  display: flex; flex-direction: column; gap: 16px;
}
.rf-hiw-emergency__box > p { font-size: 19px; line-height: 1.6; }
.rf-hiw-emergency__lede { font-family: var(--font-head); font-weight: 700; }
.rf-hiw-emergency__box .rf-held { min-height: 4.8em; font-size: 19px; line-height: 1.6; background: var(--oat); border-radius: 14px; }
.rf-hiw-emergency__box .rf-hiw-arrow { font-size: 18px; }

/* Closing band */
.rf-hiw-close { padding-block: clamp(56px, 8vw, 104px); }
.rf-hiw-close__row { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.rf-hiw-close__row h2 { max-width: 16ch; }
.rf-hiw-close__row .rf-btn { min-height: 56px; }

/* =============================================================================
   SAFETY
   ============================================================================= */
.rf-safety-hero { padding-inline: var(--gutter); padding-block: clamp(40px, 6vw, 88px) clamp(40px, 5vw, 64px); }
.rf-safety-hero__inner { display: flex; flex-direction: column; gap: 18px; }
.rf-safety-h1 { max-width: 16ch; }
.rf-safety-hero .rf-safety-lead { max-width: 46ch; }

.rf-safety-who { padding-inline: var(--gutter); padding-block: 0 clamp(56px, 7vw, 96px); }
.rf-safety-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.rf-safety-who__copy { display: flex; flex-direction: column; gap: 20px; }
.rf-safety-who h2 { font-weight: 700; font-size: clamp(32px, 4vw, 48px); line-height: 1.05; }
.rf-safety-who .rf-safety-screen {
  border-radius: 26px;
  box-shadow: 0 14px 30px rgba(36, 48, 71, .14);
  max-width: 380px; width: 100%;
  justify-self: center;
  transform: rotate(1.5deg);
}
.rf-safety-who .rf-safety-screen__crop { border-radius: 21px; }

/* Emergency calls */
.rf-safety-emergency { scroll-margin-top: 80px; }
.rf-safety-stack { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.rf-safety-emergency__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}
.rf-safety-panel {
  background: var(--oat);
  border-radius: 24px;
  padding: clamp(24px, 3.4vw, 40px);
  display: flex; flex-direction: column; gap: 14px;
}
.rf-safety-panel h3 { font-weight: 600; font-size: 24px; line-height: 1.25; }
.rf-safety-panel p { font-size: 19px; line-height: 1.6; }
.rf-safety-panel .rf-held { min-height: 4.8em; border-radius: 14px; }
.rf-safety-panel__lede { font-family: var(--font-head); font-weight: 700; }
.rf-safety-outage { font-size: 18px; }

/* Your data */
.rf-safety-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.rf-safety-card {
  background: var(--paper);
  border-radius: 22px;
  padding: 26px;
  display: flex; flex-direction: column; gap: 8px;
}
.rf-safety-card h3 { font-weight: 600; font-size: 23px; }
/* Card grounds and accents (Design, RULING-jessica-review-of-r3-v3-2026-09-28 B5, B9). */
.rf-safety-card--petal { background: var(--petal); }
.rf-safety-card--cloud { background: var(--cloud); }
.rf-safety-card--sage { background: var(--sage); }
.rf-safety-card__heart { color: var(--raspberry-deep); transform: rotate(-8deg); vertical-align: -2px; margin-left: 6px; }
.rf-safety-h2--ink { color: var(--ink); }
.rf-safety-sun { color: var(--sunshine); }
.rf-safety-print { position: relative; }
.rf-safety-print .rf-safety-print__stars { position: absolute; right: -28px; top: -32px; width: 90px; height: auto; aspect-ratio: auto; transform: rotate(10deg); z-index: 1; }

/* People */
.rf-safety-people { padding-block: clamp(56px, 8vw, 104px); }
.rf-safety-people__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.rf-safety-people__copy { display: flex; flex-direction: column; gap: 16px; }
.rf-safety-people__copy p { max-width: 44ch; }
.rf-safety-people__copy .rf-btn { align-self: flex-start; min-height: 56px; }
.rf-safety-people .rf-safety-print {
  color: var(--ink);
  box-shadow: 0 20px 44px rgba(10, 14, 50, .35);
  transform: rotate(-1.5deg);
  max-width: 480px;
}
@media (max-width: 600px) {
  .rf-safety-print .rf-safety-print__stars { right: -6px; top: -28px; width: 66px; }
  .rf-hiw-ctrl__stars { right: -4px; }
}