/*
 * Home (design/Able Site Home.dc.html). One markup for phone and desktop: every row is a
 * wrapping flex or an auto-fit grid, as the design draws it, so the only breakpoint here is
 * the recipe wall's (26 tiles on desktop, the design's 10 on phone). Colour only from
 * theme.colors.css; the literal hexes are device bezels, the Eucalypt play button and the
 * organisation band, which the design draws as a fixed Ink ground in every theme.
 */

.flush,
.home-screen p,
.family-card p,
.moments-copy p,
.matching-copy p,
.ask p,
.org-copy p {
  margin: 0;
}
.strong {
  font-weight: 700;
}
.semibold {
  font-weight: 600;
}
.self-start {
  align-self: flex-start;
}
.underline-4 {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section-intro {
  margin: 0;
  font-size: 18px;
  max-width: 40em;
  text-wrap: pretty;
}
.h3-serif {
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
}

/* Section shells */
.band {
  padding: 40px 20px;
  background: var(--surface);
  border-top: var(--hair) solid var(--border);
  border-bottom: var(--hair) solid var(--border);
}
.band-lg {
  padding: 48px 20px;
}
.band-inner,
.block-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.block {
  padding: 48px 20px;
}
.block-top {
  padding: 48px 20px 8px;
}

/* A. Hero */
.hero {
  padding: 32px 20px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}
.hero-copy {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
.hero-actions .btn {
  flex: 1 1 auto;
}
.hero-actions .btn:not(.btn-primary) {
  padding: 0 24px;
}
.hero-platform,
.hero-trust {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
}
.hero-note {
  margin: 0;
  font-size: 18px;
  color: var(--textSecondary);
  text-wrap: pretty;
}
.hero-activate {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}
.hero-activate strong {
  font-weight: 700;
  color: var(--textPrimary);
}
.hero-figure {
  flex: 1 1 360px;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* A2. The pitch: a single sentence set large and centred, opened by a rule with the mark on
   its centre so it reads as its own section rather than the hero running on. Claude Design's
   direction 1b (11 October 2026). The rule is a border and the mark is decorative, so nothing
   here depends on one area being darker than another; in high contrast the rule thickens with
   `--hair`. No shadow, no motion. */
.pitch {
  padding: 24px 20px 104px;
}
.pitch-rule {
  position: relative;
  border-top: var(--hair) solid var(--borderStrong);
}
.pitch-mark {
  position: absolute;
  top: -27px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  padding: 0 20px;
  background: var(--background);
  color: var(--textPrimary);
  line-height: 0;
}
.pitch-mark svg {
  width: 52px;
  height: 52px;
}
.pitch-text {
  max-width: 22em;
  margin: 88px auto 0;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.25;
  color: var(--textPrimary);
  text-align: center;
  text-wrap: balance;
}
@media (max-width: 37.5em) {
  .pitch {
    padding: 16px 20px 56px;
  }
  .pitch-mark {
    top: -23px;
    padding: 0 14px;
  }
  .pitch-mark svg {
    width: 44px;
    height: 44px;
  }
  .pitch-text {
    max-width: none;
    margin-top: 48px;
    line-height: 1.28;
  }
}

/* B. Five doors */
.doors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.door {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  background: var(--background);
  border: var(--hair) solid var(--border);
}
.door-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
}
.door-img-move {
  object-position: 50% 45%;
}
.door-crop {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
}
.door-cook {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.3);
  transform-origin: 100% 50%;
}
.door-pieces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  aspect-ratio: 16 / 10;
}
.door-pieces img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.door-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px 6px;
}
.door-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
}

.home-screen {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: center;
  margin-top: 16px;
}
.home-screen-copy {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-screen-copy p {
  text-wrap: pretty;
}
.home-screen-figure {
  flex: 2 1 420px;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* B2. Video library */
/* A still holds its play button, which is placed over it. */
.still {
  position: relative;
}
.library {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
/* Six videos and a button on a phone, where the wall is a single column; the whole wall from
   the width that fits two columns. */
.wall-more {
  display: none;
  align-self: flex-start;
}
@media (max-width: 35.99em) {
  .library[data-collapsed] > li:nth-child(n + 7) {
    display: none;
  }
  .library[data-collapsed] + .wall-more {
    display: inline-flex;
  }
}
.video {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.video-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: var(--hair) solid var(--border);
}
.video-caption {
  display: flex;
  flex-direction: column;
}
.video-title {
  font-weight: 700;
}
/* A video is a link: to the invitation (or Get started) without script, to the dialog with it.
   It keeps the tile's look; hover and focus show on the title and the frame, never colour alone. */
.video-link {
  color: var(--textPrimary);
  text-decoration: none;
  border-radius: 16px;
}
.video-link:hover .video-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.video-link:hover .video-img {
  border-color: var(--borderStrong);
}
.video-link:focus-visible {
  outline-offset: 4px;
}

/* The video dialog. Native <dialog>: modal, Escape closes it, focus is held inside. Nothing
   animates in or out. */
.video-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border-radius: 24px;
  border: var(--strong) solid var(--border);
  background: var(--surface);
  color: var(--textPrimary);
  box-shadow: var(--shadow2);
  overflow: auto;
}
.video-dialog::backdrop {
  background: rgba(26, 22, 28, 0.62);
}
.vd-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
}
.vd-inner p {
  margin: 0;
}
.vd-close {
  font-size: 16px;
  padding: 0 16px;
}
.vd-title,
.vd-done {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 1.1;
}
.vd-lede {
  font-weight: 700;
}
/* A recipe's picture, summary and facts, above the invitation. The picture is decorative: the
   title names the dish. */
.vd-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
  border: var(--hair) solid var(--border);
  background: var(--recess);
}
.vd-image[hidden] {
  display: none;
}
.vd-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vd-facts li {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  background: var(--recess);
  border: var(--hair) solid var(--border);
}
.vd-facts[hidden],
.vd-summary[hidden] {
  display: none;
}
.vd-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* B3. Recipe wall: dense grid, 140px rows, three 2 x 2 feature tiles with a name pill. */
.recipe-wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 140px;
  grid-auto-flow: dense;
  gap: 8px;
}
.recipe figure {
  margin: 0;
  position: relative;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: var(--hair) solid var(--border);
}
.recipe img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recipe-feature {
  grid-column: span 2;
  grid-row: span 2;
}
.recipe figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  border-radius: 100px;
  background: var(--surface);
  color: var(--textPrimary);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}
/* Each tile is a link to the recipe's dialog (home.js), like the library videos. Hover or
   keyboard focus shows an Able label with the name and two real facts from the recipe; the
   three feature tiles already carry their name, so their pill gains the facts line instead. No motion: the label
   appears, it does not slide or fade. */
.recipe-link {
  position: relative;
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: 14px;
}
.recipe-link:focus-visible {
  outline: 3px solid var(--focusRing);
  outline-offset: 2px;
}
.recipe-tip {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--textPrimary);
  border: var(--hair) solid var(--border);
  box-shadow: var(--shadow2);
  line-height: 1.3;
}
.recipe-link:hover .recipe-tip,
.recipe-link:focus-visible .recipe-tip {
  display: flex;
}
.recipe-cap-name {
  display: block;
}
.recipe-cap-facts {
  display: none;
  font-size: 14px;
  font-weight: 400;
  color: var(--textSecondary);
}
.recipe-link:hover .recipe-cap-facts,
.recipe-link:focus-visible .recipe-cap-facts {
  display: block;
}
.recipe-link:has(.recipe-cap-facts):hover figcaption,
.recipe-link:has(.recipe-cap-facts):focus-visible figcaption {
  border-radius: 16px;
}
@media (hover: none) {
  .recipe-link:hover .recipe-cap-facts {
    display: none;
  }
  .recipe-link:hover figcaption {
    border-radius: 100px;
  }
}
.recipe-tip-name {
  font-weight: 700;
  font-size: 15px;
}
.recipe-tip-facts {
  font-size: 14px;
  color: var(--textSecondary);
}
@media (hover: none) {
  .recipe-link:hover .recipe-tip {
    display: none;
  }
}

/* Below the expanded breakpoint the design shows ten tiles; "Show more recipes" reveals the
   rest (Clinton's review, 29 September 2026). They are ordered after the ten, so they appear
   below where the person is rather than pushing the wall down above them. */
@media not all and (min-width: 56.5625em) {
  .recipe-wide {
    order: 1;
  }
  .recipe-wall:not([data-expanded]) .recipe-wide {
    display: none;
  }
  .recipe-wall:not([data-expanded]) + .wall-more {
    display: inline-flex;
  }
}

/* C. Three steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
}
.step {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
}
.step-num {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: var(--sand);
  color: var(--textPrimary);
  border: var(--strong) solid var(--fillEdge);
}
.step-title {
  display: block;
  font-size: 20px;
}
/* Which steps can be taken now and which wait for the app, in words (the conference build). The
   step a visitor can take today also gets the stronger border, never as the only signal. */
.step-when {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--textSecondary);
}
.step-today {
  border: var(--strong) solid var(--borderStrong);
}
.step-today .step-when {
  color: var(--textAccent);
}
@media (min-width: 56.5625em) {
  .steps-four {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Four across leaves little width, so the number sits above the words rather than beside. */
  .steps-four .step {
    flex-direction: column;
    gap: 12px;
  }
}
.after-signup {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--recess);
  border: var(--hair) solid var(--border);
  font-size: 18px;
}
.after-signup-label {
  font-weight: 700;
}
.after-signup-flow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.after-signup-pill {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 100px;
  border: var(--strong) solid var(--borderStrong);
  font-weight: 700;
  font-size: 16px;
  background: var(--surface);
  /* A pill never breaks its own words; on a phone the row wraps between pills instead
     (Clinton's review, 29 September 2026). */
  white-space: nowrap;
}

/* D. Family */
.family {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}
.family-card {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: 24px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
}
.family-card .btn-link {
  align-self: flex-start;
}
.family-figure {
  flex: 1 1 280px;
  min-width: 0;
  margin: 0;
}
.family-figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  border-radius: 24px;
  border: var(--hair) solid var(--border);
}

/* D2. Family moments */
.moments {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
}
.moments-copy {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.moments-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.moments-points li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-top: var(--hair) solid var(--divider);
}
.point-title {
  font-weight: 700;
}

/* The family phone: 390 x 822 body, 368 x 800 screen, reduced whole to 0.8. The design
   draws this phone with a darker bezel and an inset edge than the shared drawing. */
.moments-phone {
  flex: none;
  width: 312px;
}
.moments-phone > .device-body {
  background: var(--phoneBezel);
  border-radius: 54px;
  box-shadow:
    inset 0 0 0 2px var(--phoneBezelRim),
    0 40px 80px -50px rgba(36, 31, 39, 0.55);
}
.moments-phone .screen {
  position: relative;
  border-radius: 44px;
  display: flex;
  flex-direction: column;
}
.ph-status {
  flex: none;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 700;
}
.ph-island {
  width: 96px;
  height: 28px;
  border-radius: 14px;
  background: #1a161c;
}
.ph-spacer {
  width: 24px;
}
.ph-head {
  flex: none;
  padding: 6px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ph-title {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 34px;
  line-height: 1.1;
}
.ph-sub {
  font-size: 16px;
  color: var(--textSecondary);
}
.ph-feed {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ph-card {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 22px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
}
.ph-when {
  font-size: 15px;
  font-weight: 700;
  color: var(--textSecondary);
}
.ph-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 35% 40%;
  border-radius: 14px;
}
.ph-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  text-wrap: pretty;
}
.ph-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 14px;
  background: var(--background);
  border: var(--hair) solid var(--border);
}
.ph-link-img {
  flex: none;
  display: block;
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
}
.ph-link-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.ph-link-kind {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--textAccent);
}
.ph-link-name {
  font-size: 15px;
  font-weight: 700;
}
.ph-chev {
  flex: none;
  margin-right: 4px;
}
.ph-by {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--textSecondary);
}
.ph-initial {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--positiveTint);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.ph-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ph-react {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  background: var(--surface);
  border: var(--strong) solid var(--borderStrong);
}
.ph-react.is-selected {
  background: var(--selectedTint);
  border-color: var(--positive);
}
.ph-count {
  font-weight: 600;
  color: var(--textSecondary);
}
.ph-comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ph-kin {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--clayTint);
  color: var(--textPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}
.ph-bubble {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--background);
  font-size: 15px;
  line-height: 1.35;
}
.ph-input {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 100px;
  border: var(--strong) solid var(--borderStrong);
  background: var(--background);
  color: var(--textSecondary);
  font-size: 15px;
}
.ph-video {
  display: flex;
  gap: 12px;
  align-items: center;
}
.ph-video-still {
  position: relative;
  flex: none;
}
.ph-video-img {
  display: block;
  width: 112px;
  height: 63px;
  object-fit: cover;
  border-radius: 10px;
}
.ph-play {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 28px;
  height: 18px;
  border-radius: 4px;
  background: #4c6b57;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-video-name {
  font-size: 15px;
  color: var(--textSecondary);
  line-height: 1.35;
}
.ph-tabs {
  flex: none;
  display: flex;
  gap: 4px;
  padding: 8px 10px 22px;
  background: var(--surface);
  border-top: var(--hair) solid var(--border);
}
.ph-tabs span {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
}
.ph-tabs .is-selected {
  background: var(--selectedTint);
  border: var(--strong) solid var(--positive);
}

/* E. Credibility */
.credibility {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.matching {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.matching-copy {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.suggested {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  background: var(--background);
  border: var(--hair) solid var(--border);
}
.suggested-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--textSecondary);
}
.suggested-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
}
.suggested-img {
  width: 84px;
  height: 60px;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 10px;
  flex: none;
}
.suggested-why {
  font-size: 16px;
  color: var(--textAccent);
  font-weight: 600;
}
.ask {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: 24px;
  background: var(--background);
  border: var(--hair) solid var(--border);
}
.ask-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.ask-lead {
  font-size: 19px;
  text-wrap: pretty;
}
.ask-chips,
.ask-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ask-chip {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 100px;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  background: var(--surface);
  border: var(--strong) solid var(--borderStrong);
  color: var(--textSecondary);
}
.ask-chip:hover {
  color: var(--textPrimary);
  background: var(--hoverTint);
}
/* Selected: the tint and border, and a drawn tick, so the state is never colour alone. */
.ask-chip[aria-pressed="true"] {
  background: var(--selectedTint);
  border-color: var(--positive);
  color: var(--textPrimary);
}
.ask-chip[aria-pressed="true"]::before {
  content: "";
  width: 12px;
  height: 7px;
  margin: -3px 0 0 -2px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg);
}
.ask-example {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
}
.ask-example-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ask-example-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--textSecondary);
}
.ask-bubble {
  align-self: flex-end;
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  background: var(--recess);
  border: var(--hair) solid var(--border);
  font-size: 18px;
}
.ask-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 10px;
}
.ask-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: var(--hair) solid var(--border);
  background: var(--background);
}
.ask-result-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 10px;
}
.ask-act {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 16px;
  background: var(--surface);
  border: var(--strong) solid var(--borderStrong);
}
.ask-act-primary {
  background: var(--primaryAction);
  color: var(--onPrimaryAction);
  border-color: var(--primaryAction);
}
.ask-act-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-weight: 600;
  font-size: 16px;
  color: var(--textSecondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* F. Offer */
.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 16px;
  max-width: 900px;
}
.offer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 24px;
  background: var(--surface);
  border: var(--strong) solid var(--borderStrong);
}
.offer-best {
  border-color: var(--positive);
}
.offer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.offer-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
}
.offer-tag {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  border: var(--strong) solid var(--fillEdge);
}
.offer-tag-clay {
  background: var(--clayTint);
}
.offer-tag-positive {
  background: var(--positiveTint);
}
.offer-price {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 44px;
  line-height: 1;
}
.offer-price span {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 20px;
}
.offer-save {
  color: var(--textAccent);
  font-weight: 600;
}
.offer-extra {
  border-top: var(--hair) solid var(--divider);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.offer-cta {
  margin-top: 6px;
  min-height: 52px;
  padding: 0 24px;
}
.offer-cta-outline {
  border-color: var(--primaryAction);
}
.offer-fine {
  max-width: 60em;
}

/* G. Organisation band: a fixed Ink ground in every theme, as the design draws it. */
.org-band {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 28px;
  border-radius: 24px;
  background: #241f27;
  color: #f5efe6;
  border: var(--strong) solid var(--fillEdge);
}
.org-copy {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.org-h {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  margin: 0;
}
.org-note {
  color: #b7ada0;
}
.org-cta {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  background: #f5efe6;
  color: #241f27;
}
.org-cta:hover {
  color: #241f27;
  text-decoration: underline;
}
/* The theme's focus ring is drawn for the page ground; on the Ink band it needs Paper. */
.org-cta:focus-visible {
  outline-color: #f5efe6;
}
/* On a phone the band's padding left the label a few pixels short of one line, so it broke
   in two (Clinton's review, 29 September 2026): a slimmer band, and a full-width button. */
@media (max-width: 29.99em) {
  .org-band {
    padding: 24px 18px;
  }
  .org-cta {
    width: 100%;
    padding: 0 16px;
  }
}

/* H. FAQ */
.faq-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.home-screen-h {
  text-wrap: wrap;
}
/* Without script the device drawings keep their fallback scale, which is wider than a phone;
   clip rather than let the page scroll sideways. */
#main {
  overflow-x: clip;
}

.hero-apps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Ask Able's example: one panel per starter, and the parts that play in. */
.ask-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ask-panel .strong {
  margin: 0;
}
.ask-bubble.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: ask-caret 0.9s steps(1) infinite;
}
.ask-thinking {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--textSecondary);
}
.ask-dots {
  display: inline-flex;
  gap: 5px;
}
.ask-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--textAccent);
  animation: ask-dot 1s ease-in-out infinite;
}
.ask-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.ask-dots span:nth-child(3) {
  animation-delay: 0.3s;
}
[data-ask-reveal].is-waiting {
  visibility: hidden;
}
[data-ask-reveal].is-arriving {
  animation: ask-arrive 0.36s ease-out both;
}
.ask-tracks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ask-track {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surfaceAlt);
  border: var(--hair) solid var(--border);
}
.ask-track-play {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--positive);
  color: var(--onPositive);
}
.ask-track-text {
  display: flex;
  flex-direction: column;
}
.ask-answer {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--surfaceAlt);
  border: var(--hair) solid var(--border);
}
.ask-answer p {
  margin: 0;
}
.ask-answer p + p {
  margin-top: 8px;
}
@keyframes ask-caret {
  50% {
    opacity: 0;
  }
}
@keyframes ask-dot {
  0%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@keyframes ask-arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* With reduced motion the script shows the answer at once; nothing here moves either. */
@media (prefers-reduced-motion: reduce) {
  .ask-bubble.is-typing::after,
  .ask-dots span,
  [data-ask-reveal].is-arriving {
    animation: none;
  }
}

/* The captions under the two iPad drawings. The device is a centred object with a rounded frame,
   so on a wide screen a left-set caption lines up with nothing but the bezel's outer curve;
   centred, it sits under the device as a whole. On a phone the drawing fills the width and the
   caption stays set left with the text around it. Clinton's review, 29 September 2026. */
@media (min-width: 56.5625em) {
  .hero-figure figcaption,
  .home-screen-figure figcaption {
    text-align: center;
  }
}

/* The help example's offer: a real control inside the example, doing on this website what the
   answer describes for the app, with a way back. */
.ask-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--positiveTint);
  border: var(--strong) solid var(--fillEdge);
}
.ask-offer p {
  margin: 0;
  flex: 1 1 100%;
}
.ask-offer-done {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--successText);
  font-weight: 600;
}
.ask-offer-done svg {
  flex: none;
  margin-top: 2px;
}

.ask-offer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* The three looks: pills that stay put. The one on carries a tick as well as the selected tint and
   border, and the line below says it in words, so it never rests on colour alone. The three are
   one fixed width with the label centred, so a tick appearing never resizes a pill or moves the
   others. The tick is shown with display, never visibility: a child set visible would show
   through the example's hidden "looking" state (Clinton's review, 3 October 2026). */
.ask-offer-buttons:has(.ask-look) {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
}
.ask-look {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 0 16px;
  border-radius: 100px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  color: var(--textPrimary);
  background: var(--surface);
  border: var(--strong) solid var(--borderStrong);
}
.ask-look-tick {
  display: none;
  flex: none;
}
.ask-look[aria-pressed="true"] {
  background: var(--selectedTint);
  border-color: var(--positive);
}
.ask-look[aria-pressed="true"] .ask-look-tick {
  display: block;
}
.ask-undo {
  min-height: 48px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--textPrimary);
  text-decoration: underline;
  cursor: pointer;
}

/* How it works ends with the way in. */
.how-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.how-cta .muted {
  flex: 1 1 260px;
}

/* The two iPad pictures (the hero's Move library and the Five doors home screen): Claude
   Design's exports of 4 October 2026, three per picture, one per theme, each the whole device
   with transparent corners. Only the current theme's picture is displayed, and
   the others are lazy, so they are never fetched. High contrast follows prefers-contrast in
   "Match my system", as the colours do. */
.shot {
  display: block;
  width: 100%;
  height: auto;
  /* The same soft ink shadow below the device as the drawn phones carry. drop-shadow follows
     the picture's transparent corners, where a box-shadow would draw a rectangle. */
  filter: drop-shadow(0 22px 26px rgba(36, 31, 39, 0.24));
}
.shot-dark,
.shot-high-contrast {
  display: none;
}
[data-theme="dark"] .shot-light,
[data-theme="highContrast"] .shot-light {
  display: none;
}
[data-theme="dark"] .shot-dark,
[data-theme="highContrast"] .shot-high-contrast {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .shot-light {
    display: none;
  }
  :root:not([data-theme]) .shot-dark {
    display: block;
  }
}
@media (prefers-contrast: more) {
  :root:not([data-theme]) .shot-light,
  :root:not([data-theme]) .shot-dark {
    display: none;
  }
  :root:not([data-theme]) .shot-high-contrast {
    display: block;
  }
}

/* High contrast takes no shadow (`--shadow1` and `--shadow2` are none there): the device's rim
   carries its edge. The same rule for the drawn phones is in site.css. */
[data-theme="highContrast"] .shot {
  filter: none;
}
[data-theme="highContrast"] .moments-phone > .device-body {
  box-shadow: inset 0 0 0 2px var(--phoneBezelRim);
}
@media (prefers-contrast: more) {
  :root:not([data-theme]) .shot {
    filter: none;
  }
  :root:not([data-theme]) .moments-phone > .device-body {
    box-shadow: inset 0 0 0 2px var(--phoneBezelRim);
  }
}