/**
 * Habits v2 product-page components -- ported verbatim from Raven
 * (raven/web/src/styles/family-os-page.css) as part of moving the
 * catalogue/product-detail experience out of Raven and into this site.
 * Only the Raven-SPA-specific top block (the `.app[data-phase=...]`
 * rules, which hide/show Raven's own topbar/progress/foot elements --
 * none of which exist in this static site's markup) was omitted;
 * everything from .family-os-page onward, including unused rules
 * (e.g. the questionnaire/account-deletion classes), is copied as-is
 * rather than trimmed, so this file stays a faithful, diffable copy of
 * its source rather than a reinterpretation.
 * Self-contained: defines its own --fos-* custom properties, does not
 * depend on styles.css or its --pink/--ink/etc. tokens.
 */

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400&family=Jost:wght@300;400;500;600&display=swap");

.family-os-page {
  --fos-ink: #121212;
  --fos-charcoal: #3b3b3b;
  --fos-meta: #6e6e6e;
  --fos-pink: #f5145b;
  --fos-pink-press: #c2003f;
  --fos-pink-tint: #fdedf1;
  --fos-yellow: #fff06b;
  --fos-inactive: #f1e9eb;
  --fos-warm-white: #fffdfc;
  --fos-rule-warm: #e8e2e0;
  --fos-rule-pink: #f7c9d6;
  --fos-font-display: "Bodoni Moda", Didot, serif;
  --fos-font-ui: Jost, system-ui, sans-serif;

  font-family: var(--fos-font-ui);
  color: var(--fos-ink);
  background: var(--fos-warm-white);
}

.family-os-page * {
  box-sizing: border-box;
}

.family-os-page a:not(.fos-cta) {
  color: var(--fos-pink);
  text-decoration: none;
}

.family-os-page ::selection {
  background: var(--fos-yellow);
  color: var(--fos-ink);
}

.fos-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.fos-bodoni {
  font-family: var(--fos-font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 11;
}

.fos-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fos-pink);
}

/* 1. Header */
.fos-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  padding: clamp(20px, 3vw, 32px) 0 16px;
  border-bottom: 1px solid var(--fos-rule-pink);
}

.fos-logo {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1;
  color: var(--fos-pink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.fos-logo-heart {
  position: relative;
  display: inline-block;
}

.fos-logo-heart svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.17em;
  width: 0.21em;
  height: 0.2em;
}

.fos-header-nav {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.4vw, 28px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fos-header-nav a,
.fos-header-nav button {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--fos-ink);
  cursor: pointer;
  transition: color 140ms;
}

.fos-header-nav a:hover,
.fos-header-nav button:hover {
  color: var(--fos-pink);
}

.fos-header-status {
  color: var(--fos-pink);
}

/* 2. Hero */
.fos-hero {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px);
  align-items: flex-start;
}

.fos-hero-left {
  flex: 100 1 min(520px, 100%);
  min-width: 0;
}

.fos-hero-headline {
  font-size: clamp(42px, 7.4vw, 88px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  margin: 16px 0 24px;
}

.fos-hero-headline .fos-accent {
  color: var(--fos-pink);
}

.fos-hero-lead {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--fos-charcoal);
  max-width: 46ch;
  margin: 0 0 clamp(24px, 3vw, 32px);
}

.fos-cta {
  appearance: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--fos-pink);
  color: #fff;
  padding: 20px 32px;
  font-family: var(--fos-font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms;
}

.fos-cta:hover:not(:disabled) {
  background: var(--fos-pink-press);
  color: #fff;
}

.fos-cta:disabled {
  background: var(--fos-inactive);
  color: #8a7b80;
  cursor: not-allowed;
}

.fos-cta:focus-visible {
  outline: 2px solid var(--fos-ink);
  outline-offset: 3px;
}

.fos-lock-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
}

.fos-lock-note svg {
  margin-top: 3px;
  flex: none;
}

.fos-lock-note-text {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--fos-charcoal);
}

.fos-lock-note-text span {
  color: var(--fos-meta);
}

.fos-signals {
  flex: 1 1 min(300px, 100%);
  min-width: 0;
}

.fos-signal-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  border-top: 1px solid var(--fos-rule-warm);
  padding: 20px 0;
}

.fos-signal-row svg,
.fos-signal-badge {
  width: 26px;
  height: 26px;
}

.fos-signal-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.25px solid var(--fos-pink);
  font-size: 11px;
  font-weight: 600;
  color: var(--fos-pink);
}

.fos-signal-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fos-pink);
  margin-bottom: 8px;
}

.fos-signal-value {
  font-size: 16px;
  line-height: 1.5;
}

/* 3. Loop strip */
.fos-loop-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--fos-rule-pink);
  border-bottom: 1px solid var(--fos-rule-pink);
}

.fos-loop-strip a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fos-ink);
  padding: 16px 20px;
  white-space: nowrap;
  transition: color 140ms;
}

.fos-loop-strip a:first-child {
  padding-left: 0;
}

.fos-loop-strip a:hover {
  color: var(--fos-pink);
}

/* Career OS-only: shared grammar with Family's strip (same rules,
   typography, left alignment), not identical geometry. Family's six
   short labels already fill one row under the base flex/natural-padding
   rule below, unmodified. Career's four longer labels get their own
   content-driven treatment instead of stretching to equal 25%-wide
   columns (which read as artificially sparse once there are only 4):
   - below 768px: untouched, inherits the base rule's own natural
     flex-wrap -- "collapses naturally" exactly like Family does.
   - 768-1023px ("intermediate"): an intentional 2x2 grid, so 4 items
     never orphan a lone 4th item onto its own row the way organic
     flex-wrap could.
   - 1024px+ ("wide desktop"): a single content-driven flex row with a
     generous 48px gap (the nearest existing-scale value inside the
     48-64px range) instead of the base rule's per-item 16px/20px
     padding, so items don't stretch to fill the canvas -- the row keeps
     its own natural width and stays left-aligned within it. */
@media (min-width: 768px) {
  .career-os-page .fos-loop-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
  }

  .career-os-page .fos-loop-strip a {
    padding: 16px 0;
  }
}

@media (min-width: 1024px) {
  .career-os-page .fos-loop-strip {
    display: flex;
    gap: 48px;
  }
}

/* Career OS-only vertical rhythm: the strip now reads as a continuation
   of the hero (shortened to 4 items -- see the loop-strip rule above),
   not an independent band, so the gap above it tightens from the base
   rule's ~48px to 24px ("block -> block" on the spacing scale). The gap
   below it stays clearly larger (48px, "band padding" on the scale) so
   the transition into "A taste of your OS" -- a genuine new section --
   doesn't disappear, just no longer doubles up with the hero-side gap to
   ~144px of dead space around a 4-item strip. */
.career-os-page .fos-hero {
  padding-bottom: 24px;
}

.career-os-page .fos-taste {
  padding-top: 48px;
}

/* 4. Taste of your OS */
.fos-taste {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 56px);
  /* No bottom padding here: .fos-loops' own top padding is the section
     gap. Both sides padding this same edge (as the raw mock literally
     specifies) stacks to ~144px at desktop width -- reads as a dead gap
     between two sections meant to flow together, not two independent
     bands. */
  padding: clamp(56px, 8vw, 96px) 0 0;
  align-items: flex-start;
}

.fos-taste-left {
  flex: 1 1 min(280px, 100%);
  min-width: 0;
}

.fos-taste-rule {
  width: 28px;
  border-top: 2px solid var(--fos-pink);
  margin: 8px 0 24px;
}

.fos-taste-statement {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.fos-taste-support {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--fos-charcoal);
  margin: 0 0 16px;
}

.fos-taste-caption {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fos-meta);
  margin: 0;
}

.fos-taste-field {
  flex: 100 1 min(480px, 100%);
  min-width: 0;
  background: var(--fos-pink-tint);
  padding: clamp(28px, 4vw, 52px);
}

.fos-taste-field p {
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
}

.fos-taste-field p + p {
  margin-top: 24px;
}

.fos-taste-field .fos-accent {
  color: var(--fos-pink-press);
}

.fos-taste-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--fos-charcoal);
}

.fos-beating-heart {
  width: 18px;
  height: 16px;
  flex: none;
  animation: fos-beat 1.6s ease-in-out infinite;
}

@keyframes fos-beat {
  0%,
  100% {
    transform: scale(1);
  }
  18% {
    transform: scale(1.18);
  }
  36% {
    transform: scale(1);
  }
  54% {
    transform: scale(1.1);
  }
  72% {
    transform: scale(1);
  }
}

/* 5. Loop grid */
.fos-loops {
  padding: clamp(40px, 6vw, 72px) 0;
}

.fos-loops-rule {
  width: 28px;
  border-top: 2px solid var(--fos-pink);
  margin: 8px 0 clamp(24px, 3vw, 40px);
}

.fos-loop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 clamp(32px, 4vw, 56px);
}

.fos-loop-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  border-top: 1px solid var(--fos-rule-warm);
  padding: 24px 0;
}

.fos-loop-item-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.fos-loop-item-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fos-charcoal);
}

/* 6. Purchase */
.fos-buy {
  background: var(--fos-pink-tint);
  padding: clamp(28px, 4vw, 48px);
  margin: clamp(24px, 4vw, 48px) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px clamp(32px, 4vw, 48px);
  align-items: center;
}

.fos-buy-price-block {
  flex: 1 1 min(200px, 100%);
}

.fos-buy-price {
  font-size: clamp(56px, 6vw, 76px);
  line-height: 0.86;
  color: var(--fos-pink);
}

.fos-buy-price-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 16px;
}

.fos-buy-contents {
  flex: 100 1 min(280px, 100%);
  min-width: 0;
  border-top: 1px solid var(--fos-rule-pink);
  padding-top: 24px;
}

.fos-buy-contents-body {
  font-size: 16px;
  line-height: 1.6;
}

.fos-buy-keep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.fos-buy-keep svg {
  flex: none;
}

.fos-buy-keep span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fos-pink-press);
}

.fos-buy-cta-col {
  flex: 1 1 min(240px, 100%);
}

.fos-buy-cta-col .fos-cta {
  width: 100%;
}

.fos-buy-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fos-charcoal);
  margin: 12px 0 0;
}

/* 7. Closing */
.fos-closing {
  border-top: 1px solid var(--fos-rule-pink);
  padding: clamp(24px, 3vw, 32px) 0 clamp(40px, 6vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px clamp(32px, 4vw, 48px);
  align-items: center;
}

.fos-closing-group {
  flex: 1 1 min(280px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fos-closing-line {
  font-size: clamp(17px, 1.8vw, 20px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fos-pink);
  line-height: 1.4;
}

.fos-closing-line mark {
  background: var(--fos-yellow);
  color: var(--fos-charcoal);
  padding: 0 6px;
}

.fos-closing-sub {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--fos-charcoal);
}

.fos-closing-mark {
  font-size: clamp(32px, 3.4vw, 40px);
  line-height: 1;
  color: var(--fos-pink);
}

/* ---------------------------------------------------------------------
   Page-agnostic v2 components (added for the Profile page; not specific
   to Family OS despite the file/prefix). See file header.
   --------------------------------------------------------------------- */

/* A left-aligned content column narrower than the 1240 outer container,
   so a mostly-text page (Profile) doesn't strand a huge empty right side
   at desktop widths while still lining up with the full-width header. */
.fos-content {
  max-width: 720px;
}

/* Generic "28px, 2px pink top rule under an eyebrow" mark -- same rule
   .fos-taste-rule/.fos-loops-rule already draw; kept as its own class so
   new sections (e.g. Profile's) don't need Family-OS-page-specific names. */
.fos-section-rule {
  width: 28px;
  border-top: 2px solid var(--fos-pink);
  margin: 8px 0 24px;
}

/* The underlined-caps action link used for Download / View responses /
   Edit profile / Continue setup / Generate now / empty-state CTAs --
   anywhere a "text link" (not the one pink filled CTA) triggers a real
   action. Min 44px tap height via padding, not a fixed height, so it
   still wraps correctly at narrow widths. */
.fos-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 0;
  border: none;
  border-bottom: 1px solid var(--fos-rule-pink);
  background: none;
  font-family: var(--fos-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fos-pink);
  cursor: pointer;
  transition: border-color 140ms;
}

.fos-link-cta:hover:not(:disabled) {
  border-bottom-color: var(--fos-pink);
}

.fos-link-cta:disabled {
  color: var(--fos-meta);
  border-bottom-color: var(--fos-rule-warm);
  cursor: not-allowed;
}

.fos-link-cta:focus-visible {
  outline: 2px solid var(--fos-ink);
  outline-offset: 3px;
}

/* Empty/loading states */
.fos-empty-title {
  font-family: var(--fos-font-ui);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fos-ink);
  margin: 0 0 16px;
}

.fos-skeleton-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fos-skeleton-bar {
  height: 11px;
  background: var(--fos-inactive);
}

/* ---------------------------------------------------------------------
   Profile page (see funnel.js's renderAccountHome and the
   loadAccount*Section functions).
   --------------------------------------------------------------------- */

.acct-section {
  margin-top: 48px;
}

.acct-section:first-of-type {
  margin-top: 0;
}

.acct-lede {
  font-family: var(--fos-font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fos-charcoal);
  max-width: 62ch;
  margin: 16px 0 0;
}

/* Systems (was "My Habits / OS library") and Purchase history both use
   this same rule-separated row shape -- one row per item, no card. */
.acct-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 1px solid var(--fos-rule-warm);
  padding: 24px 0;
}

.acct-row-name {
  font-family: var(--fos-font-ui);
  font-size: 20px;
  font-weight: 500;
  color: var(--fos-ink);
  margin: 0;
}

.acct-row-meta {
  font-family: var(--fos-font-ui);
  font-size: 14px;
  color: var(--fos-meta);
  margin: 4px 0 0;
}

/* Purchase history rows are plainer than system rows -- name is body
   weight, not a heading, per the handoff spec. */
.acct-purchase-name {
  font-family: var(--fos-font-ui);
  font-size: 16px;
  font-weight: 400;
  color: var(--fos-ink);
  margin: 0;
}

.acct-purchase-meta {
  font-family: var(--fos-font-ui);
  font-size: 14px;
  color: var(--fos-meta);
  margin: 0;
  text-align: right;
}

/* The composed Habits Profile status (Section 3) -- a heading-weight
   statement plus a quiet meta line, not a flat data dump. */
.acct-status-line {
  font-family: var(--fos-font-ui);
  font-size: 20px;
  font-weight: 500;
  color: var(--fos-ink);
  margin: 0;
}

.acct-status-meta {
  font-family: var(--fos-font-ui);
  font-size: 14px;
  color: var(--fos-meta);
  margin: 8px 0 0;
}

.acct-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 24px;
}

.acct-danger {
  color: var(--fos-pink-press) !important;
}

.acct-delete-confirm {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--fos-rule-warm);
}

.acct-delete-confirm .habits-input {
  max-width: 28rem;
}

.acct-error {
  font-family: var(--fos-font-ui);
  font-size: 14px;
  color: var(--fos-pink-press);
  margin: 8px 0 0;
}

.acct-danger-cta {
  background: var(--fos-pink-press);
}

.acct-danger-cta:hover:not(:disabled) {
  background: var(--fos-pink-press);
  opacity: 0.85;
}

/* ---------------------------------------------------------------------
   Landing + catalogue (see funnel.js's renderLanding/renderCatalogue).
   --------------------------------------------------------------------- */

.fos-lede-lg {
  font-family: var(--fos-font-ui);
  font-size: 18px;
  line-height: 1.6;
  color: var(--fos-charcoal);
  max-width: 46ch;
  margin: 16px 0 0;
}

.fos-secondary-meta {
  font-family: var(--fos-font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fos-meta);
  max-width: 62ch;
  margin: 16px 0 0;
}

/* Numbered "how it works" step, same shape as a loop-grid item (icon
   column replaced by a Bodoni number, per the design system's own
   numbered-section-header pattern in Habits Library v2.dc.html). */
.fos-step-num {
  font-size: 20px;
  line-height: 1;
  color: var(--fos-pink);
}

/* .fos-taste-statement used as a page-opening heading (no rule above it
   to provide the usual top spacing) instead of the "taste of your OS"
   section role it was originally named for. */
.fos-statement-heading {
  margin: 16px 0 16px;
}

/* Small ad-hoc spacing adjustments, kept on the 8/16/24/48/96 scale
   instead of one-off inline styles. */
.fos-mt-sm {
  margin-top: 16px;
}

.acct-row-top {
  align-items: flex-start;
}

.acct-row-meta-spaced {
  margin-top: 8px;
}

.fos-eyebrow-block {
  display: block;
}

/* ---------------------------------------------------------------------
   Questionnaire step (Habits Library v2's "Questionnaire Screen" pattern
   -- see funnel.js's renderQuestion). This is the single shared renderer
   for every question in both the Habits Profile and every OS extension
   questionnaire, so restyling it here covers all of them at once, not
   just Career OS. Only single_select/multi_select questions use the
   option grid below; short_text/short_textarea keep the existing
   .habits-input/.habits-textarea (already v2-styled), and ranking keeps
   its existing .chip-based select-then-reorder interaction unchanged --
   both are wrapped in this same page shell for visual consistency, but
   redesigning their own controls is a separate pass.
   --------------------------------------------------------------------- */

.fos-q-body {
  max-width: 760px;
  padding: clamp(48px, 8vw, 96px) 0 48px;
}

.fos-q-statement {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 16px 0 24px;
}

.fos-q-mechanic {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fos-pink);
  margin: 0 0 24px;
}

.fos-opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.fos-opt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 20px;
  border: 1px solid var(--fos-rule-pink);
  background: var(--fos-warm-white);
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}

.fos-opt:hover {
  border-color: var(--fos-pink);
}

.fos-opt:has(input:checked) {
  border-color: var(--fos-pink);
  background: var(--fos-pink-tint);
}

.fos-opt:has(input:focus-visible) {
  outline: 2px solid var(--fos-ink);
  outline-offset: 3px;
}

.fos-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.fos-opt-label {
  font-family: var(--fos-font-ui);
  font-size: 16px;
  line-height: 1.4;
  color: var(--fos-ink);
}

.fos-q-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 24px;
}

.fos-back-link {
  appearance: none;
  border: none;
  background: none;
  padding: 4px 0;
  min-height: 44px;
  font-family: var(--fos-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fos-ink);
  cursor: pointer;
  transition: color 140ms;
}

.fos-back-link:hover {
  color: var(--fos-pink);
}

.fos-back-link:focus-visible {
  outline: 2px solid var(--fos-ink);
  outline-offset: 3px;
}

.fos-q-save-row {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--fos-rule-warm);
  text-align: center;
}

.fos-q-save-note {
  font-family: var(--fos-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fos-meta);
  margin: 0 0 12px;
}

.fos-q-save-note.is-error {
  color: var(--fos-pink-press);
}

/* Static (non-animated) heart -- the beating-heart animation is reserved
   for genuine generation/loading states; this is just the one-heart-per-
   screen brand mark. */
.fos-static-heart {
  width: 12px;
  height: 11px;
  margin: 0 auto;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .family-os-page * {
    animation: none !important;
    transition: none !important;
  }
}