/* Noto Sans JP — subset to the 9 Japanese glyphs this page actually shows
   (日本語 / 醤油ラーメン), inlined as base64. The full family is ~250 sliced
   woff2 files behind a 228 KB CSS manifest; this is 2.5 KB and costs no
   render-blocking request to fonts.googleapis.com. Regenerate with:
   fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&text=<glyphs> */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format('woff2');
  unicode-range: U+30e1, U+30e9, U+30f3, U+30fc, U+65e5, U+672c, U+6cb9, U+8a9e, U+91a4;
}

/* ==========================================================================
   Mealfy — landing styles
   ========================================================================== */

:root {
  --accent: #FF6600;
  --accent-deep: #d84e3c;
  --ink: #2A2320;
  --ink-soft: #6B5F58;
  --cream: #fffaf6;
  --card: #FFFFFF;
  --line: #F0E2D6;

  --radius-card: 18px;
  --radius-panel: 32px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px rgba(120, 60, 20, .10);
  --shadow-float: 0 18px 40px rgba(120, 60, 20, .16);
  --shadow-phone: 0 40px 80px rgba(90, 45, 15, .28);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-jp: "Noto Sans JP", var(--font);

  /* Surfaces and one-off colours that dark mode swaps. Everything below is
     defined here in full so the dark block only has to redefine values —
     never introduce a colour whose only definition lives in a media query. */
  --hero-glow: #FFF1E4;
  /* Inset chip on a card. Light: the page's cream, a shade below the white
     card. Dark: a shade *above* the card — going darker there would sink it
     into the card instead of lifting it off. */
  --inset: var(--cream);
  --topnav-bg: rgba(255, 250, 246, .82);
  --on-accent: #fff;
  --invert-bg: var(--ink);
  --invert-ink: #fff;
  --invert-ink-soft: rgba(255, 255, 255, .70);
  --invert-line: var(--ink);
  --tag-vegan-bg: #E0F6E6;
  --tag-vegan-ink: #34C759;
  --tag-spicy-bg: #FFE1E0;
  --tag-spicy-ink: #FF3B30;
  --panel-from: #FF7A29;
  --panel-to: var(--accent-deep);

  color-scheme: light;
}

/* Dark theme
   --------------------------------------------------------------------------
   Only the tokens change; no rule below this point needs a dark variant.
   The accent warms up slightly (#FF7A33) because the pure orange vibrates
   against a near-black ground, and --accent-deep has to get *lighter* rather
   than deeper to stay readable as link colour on dark. */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #FF7A33;
    --accent-deep: #FF9457;
    --ink: #F5EDE7;
    --ink-soft: #A79A91;
    --cream: #17130F;
    --card: #211B17;
    --line: #342C25;

    --shadow-soft: 0 10px 30px rgba(0, 0, 0, .38);
    --shadow-float: 0 18px 40px rgba(0, 0, 0, .50);
    --shadow-phone: 0 40px 80px rgba(0, 0, 0, .65);

    --hero-glow: #2C1F16;
    --inset: #2C2420;
    --topnav-bg: rgba(23, 19, 15, .82);
    --on-accent: #1A1209;
    /* The "dark accent" bento card inverts again on dark — a near-black card
       on a near-black page would vanish, so it becomes the light one. */
    --invert-bg: #F0E6DE;
    --invert-ink: #1B1512;
    --invert-ink-soft: rgba(27, 21, 18, .68);
    --invert-line: #F0E6DE;

    /* Tinted tag backs, rebuilt as low-alpha washes of the same iOS system
       green/red so the tags keep their identity without glowing. */
    --tag-vegan-bg: rgba(52, 199, 89, .16);
    --tag-vegan-ink: #4ADE72;
    --tag-spicy-bg: rgba(255, 59, 48, .16);
    --tag-spicy-ink: #FF6B61;

    --panel-from: #C2461B;
    --panel-to: #8E3320;

    color-scheme: dark;
  }
}

/* Base
   ========================================================================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--accent-deep);
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Buttons
   ========================================================================== */

.cta {
  display: inline-block;
  padding: 15px 34px;
  border-radius: var(--radius-pill);
  font-size: 1.05rem;
  font-weight: 650;
  text-decoration: none;
  transition: transform .15s ease;
}

.cta:hover {
  transform: translateY(-1px);
}

a:focus-visible,
.cta:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.closer a:focus-visible {
  outline-color: #fff;
}

.cta--light {
  /* Always light: it only ever sits on the warm .closer__panel, which keeps
     its gradient in both themes. */
  background: #fff;
  color: #d84e3c;
  box-shadow: 0 8px 20px rgba(120, 40, 10, .22);
}

.cta--accent {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 24px rgba(217, 79, 43, .28);
}

/* Hero
   ========================================================================== */

.hero {
  padding: 64px 0 0;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--hero-glow) 0%, var(--cream) 62%);
  text-align: center;
  overflow: hidden;
}

.hero__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -.01em;
}

.hero__brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: var(--shadow-soft);
}

.hero__title {
  margin: 22px 0 16px;
  font-size: clamp(2.1rem, 6.2vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.03em;
}

/* Two-tone heading: the second line steps back, as on the reference. */
.hero__title-soft {
  color: var(--ink-soft);
  opacity: .55;
}

.hero__subtitle {
  max-width: 38ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
}

.hero .cta {
  margin-top: 30px;
}

/* Collage — phone centre stage, cards floating around it
   ========================================================================== */

.collage {
  margin-top: 48px;
  padding: 0 24px;
}

/* Fixed-ratio stage so the absolutely-placed cards keep their relationship
   to the phone at every width. */
.collage__stage {
  position: relative;
  width: 100%;
  max-width: 980px;
  height: 660px;
  margin: 0 auto;
}

/* Device frame — real iPhone 14 Pro PNG laid over the screenshot.
   Aperture flood-filled from the asset's alpha channel: x 80..1258,
   y 80..2635 in a 1339x2716 frame — i.e. exactly 1179x2556, the native size
   of the screenshots. Same ratio, so the shot fills the opening edge to edge
   with nothing cropped and no gutters. */
/* Height comes from .phone__frame in the flow — the PNG's own 1339x2716
   proportion — so the container matches the frame whether .phone is in the
   flow (mobile) or absolutely placed (collage). An aspect-ratio here would
   fight the frame's natural height once .phone is static. */
.phone {
  position: relative;
  margin: 0;
}

.phone__screen {
  position: absolute;
  top: 2.9455%;
  left: 5.9746%;
  width: 88.0508%;
  height: 94.1090%;
  overflow: hidden;
  border-radius: 7.5% / 3.5%;
  /* Drop shadow sits on the screen, not the frame, so it follows the corners. */
  box-shadow: var(--shadow-phone);
}

.phone__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.phone__frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* Two frames, overlapping: the raw photo behind, the result in front. */
.phone--before,
.phone--after {
  position: absolute;
  bottom: -140px;
}

.phone--before {
  left: 50%;
  z-index: 0;
  width: 264px;
  margin-left: -284px;
  transform: rotate(-5deg);
}

.phone--after {
  left: 50%;
  z-index: 1;
  width: 317px;
  margin-left: -77px;
  transform: rotate(3deg);
}

.phone__caption {
  position: absolute;
  z-index: 2;
  top: -34px;
  left: 50%;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

.phone__caption--accent {
  color: var(--accent-deep);
}

/* Floating cards */
.orbit {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-float);
  text-align: left;
  white-space: nowrap;
}

.orbit__label {
  color: var(--ink-soft);
  font-size: .76rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.orbit__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .95rem;
  font-weight: 600;
}

.orbit__from {
  color: var(--ink-soft);
  font-weight: 500;
}

.orbit__arrow {
  color: var(--accent);
}

.orbit__to {
  color: var(--ink);
}

.orbit__to--big {
  color: var(--accent-deep);
  font-size: 1.15rem;
  font-weight: 700;
}

.orbit__codes {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.orbit--lang {
  top: 40px;
  left: 0;
  transform: rotate(-3deg);
}

.orbit--price {
  top: 96px;
  right: 0;
  transform: rotate(2.5deg);
}

.orbit--tags {
  top: 300px;
  left: 8px;
  flex-direction: row;
  gap: 8px;
  padding: 12px 14px;
  transform: rotate(2deg);
}

/* Japanese runs only — the system stack has no CJK glyphs, so without this the
   fallback face (and its weight) changes from one OS to the next. */
[lang="ja"] {
  font-family: var(--font-jp);
  font-weight: 500;
}

/* Diet / heat tags — shared by collage and bento */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Same pairs the app itself uses on the menu screen — iOS system green and
   red on their tinted backs — so a tag looks identical here and in-app. */
.tag--vegan {
  background: var(--tag-vegan-bg);
  color: var(--tag-vegan-ink);
}

.tag--spicy {
  background: var(--tag-spicy-bg);
  color: var(--tag-spicy-ink);
}

/* Lucide leaf / flame, inline so they inherit the tag's colour and need no
   network request. */
.tag__icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Story
   ========================================================================== */

.story {
  padding-top: 76px;
  padding-bottom: 12px;
  text-align: center;
}

.story__text {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

/* Section headings
   ========================================================================== */

.section-title {
  margin: 0 0 18px;
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  letter-spacing: -.015em;
}

.section-title--center {
  text-align: center;
}

.section-title__soft {
  color: var(--ink-soft);
  opacity: .5;
}

/* Benefits — bento grid (3 up, 2 wide)
   ========================================================================== */

.benefits {
  padding-top: 64px;
  /* Slim: .closer reserves 150px above its panel for the overhanging phone,
     and that space reads as this section's bottom margin already. */
  padding-bottom: 32px;
}

.benefits .section-title {
  margin-bottom: 36px;
}

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.bento__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

/* Bottom row: two cards spanning three columns. */
.bento__card--wide {
  grid-column: span 3;
}

.bento__body {
  flex: 0 0 auto;
}

.bento__title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  letter-spacing: -.01em;
}

.bento__text {
  margin: 0;
  color: var(--ink-soft);
  font-size: .96rem;
}

/* Visual half of each card — pushed to the bottom so the cards line up. */
.bento__visual {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* Dark accent card, as on the reference. */
.bento__card--dark {
  border-color: var(--invert-line);
  background: var(--invert-bg);
  color: var(--invert-ink);
}

.bento__card--dark .bento__text {
  color: var(--invert-ink-soft);
}

/* Translation mini-card */
.mini {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--inset);
  font-size: .9rem;
}

.mini__from {
  color: var(--ink-soft);
}

.mini__arrow {
  color: var(--accent);
  font-weight: 700;
}

.mini__to {
  font-weight: 650;
}

/* Price conversion */
.rate {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.rate__old {
  color: var(--ink-soft);
  font-size: 1rem;
  text-decoration: line-through;
}

.rate__new {
  color: var(--accent-deep);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Wide cards carrying a real screenshot: text left, screen right, the shot
   cropped by the card's bottom edge. */
.bento__card--shot {
  flex-direction: row;
  align-items: center;
  gap: 28px;
  padding-bottom: 0;
  overflow: hidden;
}

.bento__card--shot .bento__body {
  flex: 1 1 0;
  padding-bottom: 26px;
}

.bento__visual--shot {
  flex: 0 0 264px;
  margin-top: 0;
  align-self: flex-end;
}

/* Framed screen inside a card, cropped by the card's bottom edge. */
.phone--card {
  width: 100%;
  margin-bottom: -22%;
}

.phone--card .phone__screen {
  box-shadow: none;
}

/* Top nav — sticky, translucent over the hero's gradient
   ========================================================================== */

.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--topnav-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.topnav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 24px;
}

.topnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -.01em;
  text-decoration: none;
}

.topnav__brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

/* Centre group takes the slack on both sides, so the links sit dead centre
   regardless of how wide the brand and CTA are. */
.topnav__links {
  display: flex;
  gap: 30px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.topnav__links a {
  position: relative;
  color: var(--ink-soft);
  font-size: .96rem;
  font-weight: 550;
  text-decoration: none;
  transition: color .15s;
}

.topnav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .18s ease;
}

.topnav__links a:hover {
  color: var(--ink);
}

.topnav__links a:hover::after {
  transform: scaleX(1);
}

.topnav__cta {
  flex: none;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: .94rem;
  font-weight: 650;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(217, 79, 43, .26);
  transition: transform .15s ease;
}

.topnav__cta:hover {
  transform: translateY(-1px);
}

/* Anchor targets clear the sticky bar instead of hiding under it. */
[id] {
  scroll-margin-top: 80px;
}

/* FAQ
   ========================================================================== */

.faq {
  padding-top: 64px;
  padding-bottom: 8px;
}

.faq__list {
  max-width: 760px;
  margin: 0 auto;
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

/* Kill the native disclosure triangle in both engines. */
.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}

.faq__item[open] .faq__q::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq__q:hover {
  color: var(--accent-deep);
}

.faq__a {
  padding: 0 4px 22px;
  color: var(--ink-soft);
  line-height: 1.65;
}

.faq__a p {
  margin: 0;
}

.faq__a a {
  color: var(--accent-deep);
}

/* Closer — rounded accent panel, watermark, phone breaking the top edge
   ========================================================================== */

.closer {
  padding: 150px 24px 72px;
}

.closer__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 24px;
  /* Matches .wrap so the panel's edges line up with every other section. */
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 56px 60px;
  border-radius: var(--radius-panel);
  background: linear-gradient(135deg, var(--panel-from) 0%, var(--panel-to) 100%);
  color: #fff;
  overflow: hidden;
}

/* Oversized brand mark bleeding out of the panel. */
.closer__watermark {
  position: absolute;
  bottom: -.34em;
  left: -.06em;
  color: rgba(255, 255, 255, .12);
  font-size: clamp(7rem, 20vw, 15rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.closer__content {
  position: relative;
  z-index: 1;
}

.closer__eyebrow {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, .82);
  font-size: .95rem;
  font-weight: 600;
}

.closer__title {
  margin: 0 0 28px;
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}

/* Phone rises out of the panel's top edge. */
.phone--closer {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 255px;
  margin-top: -209px;
  margin-bottom: -60px;
  transform: rotate(-4deg);
}

/* How it works — numbered steps, counter-driven badges
   ========================================================================== */

.howto {
  padding-top: 64px;
}

.howto__steps {
  counter-reset: howto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.howto__step {
  counter-increment: howto;
  position: relative;
  padding: 26px 24px 26px 68px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.howto__step::before {
  content: counter(howto);
  position: absolute;
  top: 26px;
  left: 24px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: .92rem;
  font-weight: 700;
}

.howto__title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}

.howto__text {
  margin: 0;
  color: var(--ink-soft);
  font-size: .96rem;
}

/* About (plain-language description for OAuth/store review)
   ========================================================================== */

.about {
  padding-top: 64px;
  padding-bottom: 8px;
}

.about h3 {
  margin: 24px 0 8px;
  font-size: 1rem;
}

.about p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: .94rem;
}

/* Site footer
   ========================================================================== */

.site-footer {
  padding: 56px 0 40px;
  color: var(--ink-soft);
  font-size: .9rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

.site-footer__name {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.site-footer__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.site-footer__tagline {
  margin: 8px 0 0;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.site-footer a {
  color: var(--ink-soft);
}

/* Current page in the inner-page footer nav: same rhythm as the links
   around it, but not a link to where you already are. */
.site-footer__here {
  color: var(--ink);
  font-weight: 600;
}

.site-footer__copy {
  max-width: 880px;
  margin: 28px auto 0;
  padding: 0 24px;
  font-size: .85rem;
}

/* Site header (inner pages)
   ========================================================================== */

.site-header {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header__icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.site-header__name {
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -.01em;
  text-decoration: none;
}

/* Document pages (terms, privacy)
   ========================================================================== */

.doc {
  max-width: 720px;
  padding-top: 48px;
  padding-bottom: 72px;
  line-height: 1.7;
}

.doc__title {
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  letter-spacing: -.02em;
}

.doc__updated {
  margin: 0 0 40px;
  color: var(--ink-soft);
  font-size: .92rem;
}

.doc__lang {
  display: flex;
  gap: 8px;
  margin: 0 0 28px;
}

.doc__lang-btn {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: .9rem;
  /* Anchors now, not buttons — each language is its own URL. */
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}

.doc__lang-btn:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
}

.doc__lang-btn.is-active {
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 600;
}

.doc h2 {
  margin: 40px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 1.3rem;
  letter-spacing: -.015em;
}

.doc h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.doc h3 {
  margin: 26px 0 6px;
  font-size: 1.05rem;
}

.doc p,
.doc li {
  color: var(--ink-soft);
}

.doc p {
  margin: 0 0 14px;
}

.doc ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.doc li {
  margin-bottom: 6px;
}

.doc strong {
  color: var(--ink);
}

/* Tablet
   ========================================================================== */

@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .topnav__links {
    gap: 20px;
  }

  .bento__card--wide {
    grid-column: span 2;
  }

  .collage__stage {
    height: 540px;
  }

  .phone--before,
  .phone--after {
    bottom: -120px;
  }

  .phone--before {
    width: 200px;
    margin-left: -214px;
  }

  .phone--after {
    width: 244px;
    margin-left: -58px;
  }

  .orbit {
    padding: 12px 15px;
  }

  .orbit--lang  { top: 24px;  left: 0; }
  .orbit--price { top: 96px;  right: 0; }
  .orbit--tags  { top: 260px; left: 0; }

  /* Screenshot cards stack: the shot needs more room than a side column. */
  .bento__card--shot {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .bento__visual--shot {
    flex: 0 0 auto;
    align-self: center;
    width: min(260px, 70%);
  }

  .closer__panel {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 48px 40px 52px;
    text-align: center;
  }

  .phone--closer {
    order: -1;
    margin-top: -170px;
    margin-bottom: 8px;
  }
}

/* Mobile
   ========================================================================== */

@media (max-width: 600px) {
  .wrap {
    padding: 0 20px;
  }

  .howto__steps {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 44px 0 0;
  }

  .hero__brand-icon {
    width: 30px;
    height: 30px;
  }

  .hero__title {
    margin: 18px 0 14px;
  }

  .hero .cta {
    margin-top: 26px;
  }

  /* The orbiting cards stop being a collage and become a stacked strip:
     absolute placement has no room to work below ~600px. */
  .collage {
    margin-top: 36px;
    padding: 0 20px;
  }

  .collage__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    height: auto;
  }

  /* Only the result screen survives on mobile — two frames side by side
     would be too small to read. */
  .phone--before {
    display: none;
  }

  /* Back into the flow, but still `relative`: .phone__screen is absolute and
     takes its percentages from the nearest positioned ancestor. `static` here
     would hand it .collage__stage instead, and the screen would overflow the
     frame. */
  .phone--after {
    position: relative;
    bottom: auto;
    left: auto;
    width: min(250px, 70vw);
    margin: 0 0 4px;
    transform: none;
  }

  .phone__caption {
    display: none;
  }

  .orbit {
    position: static;
    width: 100%;
    max-width: 320px;
    transform: none;
  }

  .orbit--tags {
    justify-content: center;
  }

  .cta {
    padding: 14px 28px;
    font-size: 1rem;
  }

  .story {
    padding-top: 52px;
    padding-bottom: 8px;
  }

  .benefits {
    padding-top: 48px;
    padding-bottom: 24px;
  }

  .bento {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bento__card,
  .bento__card--wide {
    grid-column: span 1;
  }

  .bento__card {
    gap: 16px;
    padding: 22px 20px;
  }

  .bento__card--shot {
    padding-bottom: 0;
  }

  .bento__card--shot .bento__body {
    padding-bottom: 0;
  }

  .bento__visual--shot {
    width: min(230px, 66%);
  }

  .closer {
    padding: 120px 20px 56px;
  }

  .closer__panel {
    padding: 36px 24px 40px;
    border-radius: 26px;
  }

  .phone--closer {
    width: min(200px, 58vw);
    margin-top: -150px;
  }

  /* Narrow screens: brand + Download only. The section anchors would wrap
     onto a second row and push the hero down. */
  .topnav__links {
    display: none;
  }

  .topnav__inner {
    gap: 12px;
    padding: 10px 16px;
  }

  .topnav__cta {
    margin-left: auto;
    padding: 8px 16px;
    font-size: .9rem;
  }

  .faq__q {
    font-size: 1rem;
  }

  .site-footer__inner {
    flex-direction: column;
    gap: 20px;
  }

  .site-footer {
    padding: 28px 0 32px;
  }

  .doc {
    padding-top: 32px;
    padding-bottom: 56px;
  }
}

/* Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cta {
    transition: none;
  }

  .cta:hover {
    transform: none;
  }
}