/* Axelle — homepage restart sample, 2026-11-05.
   The restart grammar, shared with the For Daughter set: one idea
   per screen, a few lines at most, the page runs long.
   Calibration, 2026-11-05: the STRUCTURE is plain-American clear —
   obvious doors, obvious order, nothing that needs taste to decode.
   Romance lives only in the words and the imagery.
   One colour family only: rosewood #8A5A5E and its own tints/shades,
   on the ivory ground of the brand. Letter spacing tight throughout.

   NAVY VARIANT, 2026-11-05 (her direction, 16:19): she does not want
   a "women's colour" — the palette should read medical, and she asked
   whether the AxwenBio colour can be used. In this variant ONLY, the
   rosewood accent family is swapped for the AXWEN 藏青 family
   (#0C2B3A → #2A5A6E and its tints) in the same roles and the same
   variable names, so layout and copy stay pixel-identical to the
   rosewood version. Ivory/white ground unchanged; gold appears only
   inside the logo artwork itself. Sample for her side-by-side ruling
   — pending, not a final. The rosewood files remain untouched.

   NAVYMAIN, 2026-11-05 (her decisions, 16:26–16:33): the company
   blue is THE colour, unified. Gold is out of all page furniture —
   no gold rules, labels or accents anywhere; it survives only
   inside the locked logo artwork itself. Her 16:32–16:33 ruling
   then fixed both the amount and the blue itself: the blue is ONE
   strip at the very top of the page and nothing more （「顶部一条
   就行」), and it is ONE single hex across the whole site — no
   gradient pairs, no shade families. So the blue lives in a single
   token, --blue, spent in exactly one place: the slim strip across
   the very top, with nothing inside it. Below the strip the header
   is a white row: the locked wordmark artwork at the LEFT,
   unaltered, seated on its own ivory field (its field colour,
   #FAF7F0, extended by the nameplate pad so it reads as one
   field), navigation to the right. The hero text panel and the
   Partners & Standards screen are back on light ground, exactly
   as in the bright layout. The shade options she picked from
   (blueshade1–9) differed only in that one hex.

   COLOUR LOCKED, 2026-11-05 (her decision, 16:44): THE blue is
   shade 7, peacock blue 孔雀藍 #006E8C — one single hex for the
   whole set. 藏青 and every other shade are superseded and void.
   This build's --blue token below now carries that locked value.

   COLOUR REVERSED, 2026-11-05 (her final word, 17:28): the
   platform's main colour is now a PLUM of the AstraZeneca family,
   REPLACING peacock blue entirely for the platform （「替代孔雀
   蓝」). Peacock blue #006E8C is superseded and void, the same
   day it was locked. ADJUSTED the same evening (her word, 17:29,
   「稍微改一点颜色」): AZ's own hex #830051 is NOT used — she
   does not want the platform to read as an imitation of
   AstraZeneca. The platform plum is our own house value
   #80075C: same plum family, shifted slightly warmer and a
   little less blue-purple (hue 323→318, saturation 100→90),
   still deep and refined. Imitation is avoided three ways: our
   own shade, our own word, and no symbol — and NO gold or yellow
   is borrowed from their mark anywhere in the page furniture.
   The single-colour rule is unchanged: ONE colour only, the
   whole wordmark one colour, no accent letters. --blue below
   (name kept from the blue rounds; it is the build's single
   main-colour token) now carries the house plum, and the accent
   tokens derived from it carry plum-family values in the same
   roles as before.

   DEEPENED + WORDMARK SAMPLE + NO SLOGAN, 2026-11-05 (her
   words, 17:32–17:33): (1) the house plum is deepened one step,
   #80075C → #7B0456 — deeper, toward AstraZeneca's darker
   plum, still NOT AZ's own #830051; the plum-derived accent
   tokens step down with it (--rose #822967 → #7D2262,
   --rose-deep #400F31 → #3B0C2E, --line follows the main
   hex). (2) In THIS SAMPLE ONLY, the header wordmark is the
   single-colour deep-ink Axelle extracted from the round-7
   秀气 specimen (乙， all-ink), seated at the TOP-LEFT of the
   header row; the locked gold-X artwork remains the live
   lock everywhere else (the footer of this very page still
   carries it) and is replaced here only so she can see the
   new mark in place. (3) 「也不要有标语了」: the hero carries
   NO slogan — the settled two-line headline is out of this
   build, replaced by a short factual head, and the closing
   screen's repetition of the same lines is out too. The old
   headline stays untouched on the live site until the
   Monday batch. */

/* TYPE SCALE-UP, 2026-11-06 (her word, 16:17, 「字都要大一些」+
   「不能用小字了」): every text size on the page steps up one
   grade — small text x1.18 with a 14px floor (no small print
   anywhere, footers and fine print included), mid sizes x1.13,
   headings/display x1.10, hierarchy kept quiet, no shouting.
   ONE EXCEPTION, her correction the same minute: the hero
   headline (.stage-headline, "Menopause care, online.") keeps
   its size EXACTLY — 66px desktop / 37px mobile, untouched.
   Copy, layout, colours and the tightax19 wordmark unchanged. */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fraunces-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fraunces-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
}
@font-face {
  font-family: "Jost";
  src: url("assets/jost-var.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
}

:root {
  --rose: #892371;
  --rose-panel: #EED9EA;
  --rose-wash: #F8F0F8;
  --rose-mid: #C9A3C2;
  --rose-deep: #3F062A;
  /* TEXT COLOUR — her ruling 2026-11-06 17:50 「文字就用深青」:
     text moves from the old ink family to the deep-teal family.
     Headings/titles/nav (--ink) = deep teal #0E5561 exactly; body
     text (--body) = the same hue deepened, #0A3D45, so long text
     stays legible; small labels/captions (--rose-stone token,
     legacy name) follow the body shade #0A3D45. Plum stays an
     accent only: bands, wordmark, eyebrows/entry words and link
     underlines (--rose / --rose-deep / --main unchanged). Token
     names are legacy; values are current. */
  --rose-stone: #0A3D45;
  --ink: #0E5561;
  --body: #0A3D45;
  --line: rgba(131, 0, 81, .26);
  /* THE main colour (her 16:32–16:33 rule, unchanged): one
     single hex for the whole site, no gradient pairs, no shade
     families. Spent in one place only, the slim strip at the
     very top. Value history: 藏青 #0C2B3A, then LOCKED
     2026-11-05 16:44 peacock blue 孔雀藍 #006E8C, then REVERSED
     by her final word 2026-11-05 17:28 — platform main colour
     becomes a plum of the AZ family, peacock superseded — then
     ADJUSTED 17:29 at her word: NOT AZ's own #830051; our own
     house plum #80075C (same family, slightly warmer, a little
     less blue-purple), so the platform never reads as an AZ
     imitation — then DEEPENED one step at her word (17:32 the
     same evening): #7B0456, deeper and toward AZ's darker
     plum, still not AZ's hex — then SUPERSEDED by her pick
     (17:48): from the plum-variants sheet she chose No. 3,
     #5D057D — the plum base with the blue-violet weight
     increased, clear of AZ's red-leaning plum and of Alloy's
     deep purple. #7B0456 and #80075C are void — then FINAL
     (her settled word, 2026-11-05 17:56, 「那用他家的吧，
     就这样定了」): the platform main colour is AstraZeneca's
     own plum #830051 EXACTLY. She ruled an identical colour
     is fine （「颜色一模一样没事的」); the brand distinguishes
     itself by its name and its typeface, not by dodging the
     shade. #5D057D and every earlier value are void. Token
     name --blue kept from the blue rounds; it is the single
     main-colour token. */
  --blue: #830051;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; overflow-x: hidden; }

body {
  font-family: "Jost", sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.eyebrow {
  font-size: 20px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin: 0;
}

.arr { color: var(--rose); }

.sec-title {
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 52px;
  margin: 22px 0 0;
}

.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px 96px;
}

.screen-inner { width: 100%; max-width: 1248px; margin: 0 auto; }

/* ---------- 1 · masthead ---------- */

/* her 16:33 structure: one slim strip of THE blue across the
   very top, nothing inside it */
.mast-strip { height: 56px; background: var(--blue); }

/* below it a white header row: wordmark at the left,
   navigation to the right */
.mast-row {
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 0 56px;
  background: #fff;
}

.mast-right { display: flex; align-items: center; gap: 44px; }

.mast-nav { display: flex; gap: 34px; }

.mast-nav a, .mast-signin {
  font-size: 20px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

/* the header wordmark with NO field behind it: her ruling
   of 17:38, 「logo 底色都不要了」 — the pad is gone entirely,
   no patch, no border, no colour of any kind; the letters
   sit directly on the white header row. From the 17:32
   round, IN THIS SAMPLE ONLY, the artwork seated here is
   the extracted single-colour Axelle (round-7 specimen,
   乙）; the locked artwork itself is untouched and still
   stands in the footer below. */
.mast-mark {
  display: block;
}

.mast-mark img { height: 68px; width: auto; display: block; }

/* ---------- 2 · the opening screen ---------- */

.stage {
  display: grid;
  grid-template-columns: 1fr 46%;
  min-height: calc(100vh - 114px);
}

.stage-text {
  padding: 88px 48px 64px 96px;
  display: flex;
  flex-direction: column;
}

/* her settled headline: two lines, always two lines */
.stage-headline {
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 66px;
  line-height: 1.14;
  margin: 30px 0 32px;
}

.stage-headline .ln { display: block; white-space: nowrap; }

.stage .eyebrow { font-size: 20px; letter-spacing: .08em; }

.stage-line {
  font-size: 24px;
  line-height: 1.75;
  color: var(--body);
  margin: 0;
  max-width: 460px;
}

.stage-doors { margin-top: 44px; display: flex; align-items: baseline; gap: 36px; }

.stage-enter {
  align-self: flex-start;
  font-size: 20px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rose-deep);
  border-bottom: 1px solid var(--rose);
  padding-bottom: 6px;
}

.stage-enter-plain {
  font-size: 20px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.stage-note {
  margin: auto 0 0;
  padding-top: 56px;
  font-size: 20px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rose-stone);
}

/* the hero text panel is back on light ground (her 16:33
   ruling): ivory/white with dark type, exactly as in the
   bright layout — the blue stays in the top strip only */

.stage-photo { margin: 0; }

.stage-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

/* ---------- 3 · the doors of care ---------- */

.cat-rows { margin-top: 68px; }

.cat-row {
  display: grid;
  grid-template-columns: 380px 1fr 40px;
  gap: 48px;
  padding: 44px 0;
  align-items: baseline;
  text-decoration: none;
}

.cat-row:hover .cat-name { color: var(--rose-deep); }

.cat-name {
  font-family: "Fraunces", serif;
  font-weight: 520;
  font-size: 37px;
}

.cat-line { font-size: 22px; line-height: 1.7; color: var(--body); }

.cat-arrow { font-size: 25px; color: var(--rose); text-align: right; }

.cat-note {
  margin: 52px 0 0;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 22.5px;
  color: var(--body);
}

/* ---------- 4 · how it works ---------- */

.steps {
  list-style: none;
  margin: 72px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.step { padding-top: 34px; }

.step-no {
  display: block;
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 44px;
  color: var(--ink);
  margin-bottom: 26px;
}

.step-name {
  display: block;
  font-family: "Fraunces", serif;
  font-weight: 520;
  font-size: 29px;
  line-height: 1.35;
  margin-bottom: 14px;
}

.step-line { display: block; font-size: 22px; line-height: 1.7; color: var(--body); }

/* ---------- 5 · partners and standards ---------- */

/* back on light ground (her 16:33 ruling): the pale wash, as
   in the bright layout — the blue stays in the top strip only */
/* final22 (her 07:12, 「04妈妈也用粉色底么」): the wash is OUT —
   pink grounds are banned for a medicine shop; this screen
   stands on white like every other mother screen. */
.standards { background: #fff; }

.std-rows { margin-top: 68px; }

.std-row {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  padding: 44px 0;
  align-items: baseline;
}

.std-name {
  font-family: "Fraunces", serif;
  font-weight: 520;
  font-size: 37px;
}

.std-line { font-size: 22px; line-height: 1.7; color: var(--body); }

/* ---------- 6 · For Daughter: a room of her own ---------- */

.daughter .stage-text { padding-top: 88px; }

.daughter-name {
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 83.5px;
  line-height: 1.04;
  margin: 30px 0 32px;
}

.daughter-photo img { object-position: 50% 16%; }

/* ---------- 7 · knowledge ---------- */

.know-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 40px;
}

.know-line {
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 44px;
  margin: 22px 0 0;
}

.know-soon {
  margin: 0;
  font-size: 20px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rose-stone);
  white-space: nowrap;
}

/* ---------- 8 · questions ---------- */

.faq-list { margin-top: 68px; max-width: 820px; }

.faq-item { padding: 42px 0; }

.faq-q {
  font-family: "Fraunces", serif;
  font-weight: 520;
  font-size: 30px;
  margin: 0 0 14px;
}

.faq-a { font-size: 22px; line-height: 1.75; color: var(--body); margin: 0; max-width: 640px; }

/* ---------- 9 · the closing line ---------- */

.closing { align-items: center; text-align: center; }

.closing-col { max-width: 820px; }

.closing .eyebrow { text-align: center; }

.closing-line {
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 57px;
  line-height: 1.3;
  margin: 44px 0 40px;
}

.closing-line .ln { display: block; }

.closing-sub { font-size: 22px; line-height: 1.8; color: var(--body); margin: 0; }

/* ---------- 10 · the trust strip ---------- */

.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 84px 96px;
}

.trust-item {
  margin: 0;
  text-align: center;
  font-size: 22px;
  letter-spacing: .02em;
  color: var(--body);
}

/* ---------- 11 · footer ---------- */

.colophon {
  padding: 84px 96px 96px;
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

.colo-mark { width: 340px; height: auto; display: block; }
.colo-mark.mark-a { height: 50px; width: auto; }

.colo-line { font-size: 22px; margin: 6px 0 18px; }

.colo-line a { color: var(--rose-deep); }

.colo-fine {
  font-size: 20px;
  line-height: 1.7;
  color: var(--rose-stone);
  margin: 0 0 8px;
  max-width: 560px;
}

/* ---------- mobile ---------- */

@media (max-width: 760px) {

  .mast-strip { height: 40px; }
  .mast-row { height: 72px; padding: 0 14px; gap: 16px; }
  .mast-right { gap: 16px; }
  .mast-nav { gap: 12px; }
  .mast-nav a, .mast-signin { font-size: 20px; letter-spacing: .04em; }
  .mast-nav a:nth-child(2), .mast-nav a:nth-child(3) { display: none; }
  .mast-mark img { height: 21px; }

  .stage { grid-template-columns: 1fr; min-height: 0; }
  .stage-photo { order: -1; height: 52vh; }
  .stage-text { padding: 44px 24px 58px; }
  .stage-headline { font-size: 37px; margin: 24px 0 24px; }
  .stage-line { font-size: 24px; }
  .stage-doors { margin-top: 32px; gap: 24px; }
  .stage-note { padding-top: 42px; }

  .screen { min-height: 0; padding: 96px 20px; }
  .sec-title { font-size: 39px; }

  .cat-rows { margin-top: 48px; }
  .cat-row { grid-template-columns: 1fr 32px; gap: 10px; padding: 34px 0; }
  .cat-name { font-size: 31px; grid-column: 1; }
  .cat-line { grid-column: 1; }
  .cat-arrow { grid-column: 2; grid-row: 1; }

  .steps { grid-template-columns: 1fr; gap: 44px; margin-top: 52px; }
  .step-no { font-size: 36px; margin-bottom: 18px; }

  .std-rows { margin-top: 48px; }
  .std-row { grid-template-columns: 1fr; gap: 10px; padding: 34px 0; }
  .std-name { font-size: 31px; }

  .daughter-name { font-size: 59.5px; margin: 24px 0 24px; }

  .know-inner { flex-direction: column; gap: 22px; }
  .know-line { font-size: 33px; }

  .faq-list { margin-top: 48px; }
  .faq-item { padding: 32px 0; }
  .faq-q { font-size: 26px; }

  .closing-line { font-size: 38.5px; margin: 36px 0 32px; }
  .closing-sub { font-size: 22px; }

  .trust { grid-template-columns: 1fr; gap: 18px; padding: 64px 24px; }

  .colophon { flex-direction: column; gap: 36px; padding: 64px 24px 72px; }
  .colo-mark { width: 260px; }
  .colo-mark.mark-a { height: 40px; width: auto; }
}

/* ---------- per-screen side mark, 2026-11-06 ----------
   Her marking system: below the first screen, every screen
   carries ONE standalone letter at its top-right corner,
   marking whose content it is — the A (plum, gold wave) on
   mother-side screens, the gold E on daughter-side screens.
   The locked icon artwork is used as-is, no circle, no pad.
   The full wordmark stays in the masthead only (first screen);
   from the second screen on, the standalone letter alone —
   the footer carries the standalone A as its logo (final14). */
.screen, .stage, .trust, .colophon { position: relative; }

.screen-mark {
  position: absolute;
  top: 40px;
  right: 96px;
  height: 46px;
  width: auto;
  z-index: 3;
}

@media (max-width: 760px) {
  .screen-mark { top: 26px; right: 20px; height: 34px; }
}

/* the homepage's For Daughter screen is a split stage: its
   mark sits at the top-right corner of the TEXT panel, clear
   of the photograph (on mobile the stage stacks, photo first,
   and the mark returns to the screen's own top-right). */
.stage .screen-mark { right: calc(46% + 40px); }

@media (max-width: 760px) {
  .stage .screen-mark { right: 20px; }
}

/* ---------- FEWER LINES, final18, 2026-11-06 ----------
   Her word, 23:21: 「不要有那么多线条」 — every decorative
   hairline is out: the rule over the category rows and under
   each row, the rule over each step, the rules over/under
   the standards rows and the FAQ items, and the rules over
   the trust strip and the footer. Whitespace separates now.
   Kept, by the same ruling's terms: the plum band at the very
   top, the entry-link underline (.stage-enter), and the one
   hairline under the header row (.mast-row), without which
   the white header would float into the white first screen.
   Sparse screens were already centred (.screen is a centred
   flex column; .screen-inner is centred by margin) — nothing
   was stretched and no filler was added. */

/* ---------- MORE PHOTOS + DECK COMPOSITION, final19, 2026-11-06 ----------
   Her word, 23:58: 「少一些文字，简单明了，多一些图片」 and the
   pitch-deck test: one message per screen, the photograph is the
   hero, only a few big lines. Text-led screens gain a real photo:
   a full-width band, or a two-column duo (text left, photo right).
   Type: running body steps up to 22px, secondary text floors at
   20px — nothing on the site computes below 20px. */
.photo-band { margin: 0 0 60px; }
.photo-band img { width: 100%; height: 330px; object-fit: cover; object-position: 50% 32%; display: block; }
.duo { display: grid; grid-template-columns: 1fr 38%; gap: 76px; align-items: center; width: 100%; max-width: 1248px; margin: 0 auto; }
.duo-photo { margin: 0; }
.duo-photo img { width: 100%; height: 66vh; object-fit: cover; display: block; }
.duo .steps, .duo .std-rows { margin-top: 56px; }
.duo .steps { grid-template-columns: 1fr; gap: 40px; }
.duo .std-row { grid-template-columns: 1fr; gap: 8px; padding: 30px 0; }
.trust-photo { grid-column: 1 / -1; margin: 0 0 8px; }
.trust-photo img { width: 100%; height: 300px; object-fit: cover; object-position: 50% 40%; display: block; }
.closing .photo-band { width: 100%; max-width: 1248px; margin-bottom: 64px; }
@media (max-width: 760px) {
  .photo-band img { height: 210px; }
  .duo { grid-template-columns: 1fr; gap: 36px; }
  .duo-photo { order: -1; }
  .duo-photo img { height: 42vh; }
  .trust-photo img { height: 200px; }
}
/* closing band crop: keep the laughing face in frame (final19 fix) */
.closing .photo-band img { height: 420px; object-position: 50% 24%; }
@media (max-width: 760px) { .closing .photo-band img { height: 240px; } }

/* closing screen in duo form (final19): text left, photo right */
.closing .duo .closing-col { text-align: left; }
.closing .duo .eyebrow { text-align: left; }

/* ---------- final20 SELF-AUDIT, 2026-11-07 （她 00:07–00:08） ----------
   (1) Page 08: the trust strip's curtain photograph is removed
   (HTML side) — cropped into a wide thin band it read as abstract
   streaks; the strip stands on its three lines alone.
   (2) 「一些文字还是小」, judged on the 390 phone renders by eye:
   every secondary line that sat at 20px next to big headlines
   goes to 22px — eyebrows, stage entries and notes, knowledge
   "Opening soon", footer fine print, nav. Force-tested at 390:
   no horizontal overflow. */
.eyebrow, .stage .eyebrow, .stage-enter, .stage-enter-plain,
.stage-note, .know-soon, .colo-fine,
.mast-nav a, .mast-signin { font-size: 22px; }

/* ---------- final21 TYPE UP + BANDS + LEADING, 2026-11-07 ----------
   Her words, 07:00: 「小字再变大看看效果」「重要的页还是要加上
   色条」; 07:01: 「有些行间距小一点，否则看起来太散了」.
   (1) TYPE: every non-headline size steps up one notch, 22 -> 24px
   (the hero headline keeps 66/37 exactly, her standing exception;
   all headings/display sizes untouched).
   (2) LEADING: multi-line prose gathers one step — line-height
   down ~0.15 on body blocks only; headline leading untouched.
   (3) BAND: the closing screen gains the plum band at its very
   top, same build as the masthead strip (56px / 40px mobile,
   var(--blue)), as a bookend to the first screen; its A mark
   steps down below the band, the way marks sit below the
   masthead band on the opening screens. */
.eyebrow, .stage .eyebrow, .stage-enter, .stage-enter-plain,
.stage-note, .know-soon, .colo-fine, .mast-nav a, .mast-signin,
.cat-line, .cat-note, .step-line, .std-line, .faq-a,
.closing-sub, .trust-item, .colo-line { font-size: 24px; }

.stage-line { line-height: 1.6; }
.cat-line, .step-line, .std-line, .colo-fine { line-height: 1.55; }
.faq-a { line-height: 1.6; }
.closing-sub { line-height: 1.65; }

.sec-band {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: var(--blue);
  z-index: 2;
}
.closing .screen-mark { top: 76px; }
@media (max-width: 760px) {
  .sec-band { height: 40px; }
  .closing .screen-mark { top: 56px; }
}

/* ================================================================
   final22 — COMPOSITION PASS, 2026-11-07. Moves only, from the
   competitor design study + her spacing rulings of 07:10 and the
   addenda of 07:11–07:14. The settled system holds throughout:
   plum + gold + deep teal + white, teal text, 24px floor, copy
   unchanged, no retail devices anywhere (07:14 guardrail: the
   house stays a medical house, never a consumer-goods store).
   ================================================================ */

/* ---------- (a) SPACING GATHERING, her 07:10 rulings ----------
   「第二页行间距太大了」「为什么要那么大，看上去很散」「其他
   页面也有这样的情况」: the audit probed every screen's gaps
   (gapprobe.py, desktop + 390); the pattern everywhere was dead
   air BETWEEN gathered groups (88–136px) and oversized lead-ins
   (52–84px). Gathered = the within-group rhythm (14–26px) stays,
   the gaps between groups and the lead-ins come down one full
   step; sparse screens stay centred but their inner air is
   gathered too. Nothing was shrunk in type; no filler added. */

/* page 02, the exemplar: headline/subline/doors/note pulled into
   one gathered column (was: 32 + 44 + dead air to a 56px-padded
   note pinned to the bottom) */
.stage-headline { margin: 16px 0 24px; }
.stage-doors { margin-top: 36px; }
.stage-note { margin-top: 40px; padding-top: 0; }

/* list screens: lead-in 68 -> 48, row padding 44 -> 32,
   closing note lead 52 -> 40 */
.cat-rows, .std-rows, .faq-list { margin-top: 48px; }
.cat-row, .std-row { padding: 32px 0; }
.cat-note { margin-top: 40px; }

/* steps: lead-in 72 -> 48, number-to-name 26 -> 18,
   duo lead-in 56 -> 44, duo step gap 40 -> 32, duo row
   padding 30 -> 26 */
.steps { margin-top: 48px; }
.step-no { margin-bottom: 18px; }
.duo .steps, .duo .std-rows { margin-top: 44px; }
.duo .steps { gap: 32px; }
.duo .std-row { padding: 26px 0; }

/* section title lead 22 -> 16, both stylesheets' .sec-title */
.sec-title { margin-top: 16px; }

/* sparse/centred screens: padding 110 -> 84 top/bottom, so the
   centred block sits gathered instead of floating */
.screen { padding-top: 84px; padding-bottom: 84px; }

/* trust strips: padding 84 -> 64 top/bottom, item gaps 40 -> 32 */
.trust { padding-top: 64px; padding-bottom: 64px; gap: 32px; }

/* footers: padding 84/96 -> 64/72, mark-to-text gap 56 -> 44 */
.colophon { padding-top: 64px; padding-bottom: 72px; gap: 44px; }
.colo-line { margin-bottom: 12px; }

@media (max-width: 760px) {
  .screen { padding-top: 72px; padding-bottom: 72px; }
  .stage-headline { margin: 16px 0 20px; }
  .trust { padding-top: 52px; padding-bottom: 52px; }
  .colophon { padding-top: 52px; padding-bottom: 60px; }
}

/* ---------- (b) PAGE 03 GATHERING (her 07:11) ----------
   「03文字往中间挪」: the five doors stop sprawling edge to
   edge (name | line | arrow at 380px + 1fr + 40px). The rows
   narrow to a centred column (max 860px): name and line grouped
   on one baseline, the arrow sits 28px behind the line instead
   of at the far edge. On mobile the line wraps UNDER the name
   inside the same column, arrow still close behind. */
.care .screen-inner { max-width: 860px; }
.cat-row {
  grid-template-columns: max-content 1fr 40px;
  gap: 28px;
}
.cat-arrow { text-align: left; }
@media (max-width: 760px) {
  .cat-row { grid-template-columns: 1fr 32px; gap: 10px 28px; }
}

/* ---------- (c) PAGE 08 — THE TEAL FIELD (her 07:14) ----------
   「深青可以的」, ONE screen only: the trust strip becomes a
   full-width deep teal #0E5561 field, bleeding to both edges,
   a real field (min-height 46vh, content centred), its three
   lines in white, the A in its official white artwork variant.
   Every other page stays white-ground. */
main > .trust-teal {
  background: #0E5561;
  min-height: 46vh;
  align-items: center;
  align-content: center;
}
main > .trust-teal .trust-item { color: #fff; }
@media (max-width: 760px) {
  main > .trust-teal { min-height: 0; }
}

/* ---------- (d) PAGE 02 HERO PHOTO SHRINKS (her 07:16) -------
   「首页照片小一点，不需要半屏」: the hero photo column goes
   from 46% (half-screen) to 33% (one third); the text column
   takes the freed space — same copy, headline still 66px, the
   photo's crop register (laughing, sunlight) unchanged, only
   narrower. Scoped to the homepage's own stage (body > main >
   .stage): the For Daughter screen (06) carries no photo, and
   the daughter cover has its own stylesheet. Mobile: the
   stacked photo is capped at 36vh so it no longer dominates
   the first phone screen; its mark offset follows the new
   column width. */
main > .stage { grid-template-columns: 1fr 33%; }
.stage .screen-mark { right: calc(33% + 40px); }
@media (max-width: 760px) {
  .stage-photo { height: 36vh; }
  .stage .screen-mark { right: 20px; }
}

/* ================================================================
   final23 — CORRECTION PASS, 2026-11-07. The page-number mixup,
   owned plainly: her 07:11 「03文字往中间挪」 meant the HOW IT
   WORKS screen (stamp PAGE 04 — her PDF view runs one page off),
   but final22 applied the gathering to the five-doors screen
   (stamp PAGE 03). This pass swaps the two: the gathering moves
   to page 04, and page 03 returns to its final21 layout. Nothing
   else changes — final22's composition moves, the teal field,
   zero pink, the 33% hero and the 24px floor all stand.
   ================================================================ */

/* ---------- (e) PAGE 03 REVERTED to the final21 layout --------
   The narrowing of final22 block (b) is undone, value for value:
   the doors sprawl full width again (inner column back to
   1248px; rows back to 380px + 1fr + 40px with a 48px gap; the
   arrow back at the far right, right-aligned; mobile gap back
   to 10px). The sitewide spacing gathering of block (a) is NOT
   part of the narrowing and stays (rows keep their gathered
   32px padding, the list keeps its 48px lead-in). */
.care .screen-inner { max-width: 1248px; }
.cat-row {
  grid-template-columns: 380px 1fr 40px;
  gap: 48px;
}
.cat-arrow { text-align: right; }
@media (max-width: 760px) {
  .cat-row { grid-template-columns: 1fr 32px; gap: 10px; }
}

/* ---------- (f) PAGE 04 GATHERING (her 07:11, right page) -----
   「03文字往中间挪」, applied where she meant it: the HOW IT
   WORKS screen. The steps stop hugging the left column of the
   duo grid (the photo column beside them has been empty since
   the tai chi photo came out). The duo collapses to one
   narrower column (720px) centred on the page, and the whole
   group — eyebrow, headline, the three steps — is centred with
   it. Copy unchanged, word for word; the gathered step rhythm
   of block (a) stays (44px lead-in, 32px step gap). The A mark
   keeps its top-right post, untouched. */
.how .duo {
  grid-template-columns: 1fr;
  max-width: 720px;
}
.how .duo-text { text-align: center; }

/* ---------- (g) SECOND SPACING SWEEP (her 07:24) -------------
   「有些还要收一点」: one more modest notch on the loosest
   remaining knobs, picked by the gap probe run on final23
   (gapprobe.py @1440). The probe's homepage offenders: p03's
   64px row rhythm (32 + 32 row padding) under an 80px lead;
   p04's 78px lead and 66px between steps (the steps' own
   padding-top 34 + the 32 gap); list lead-ins still at 48.
   Sparse screens stay centred — their padding comes in one
   notch, symmetrically, and nothing else about them moves. */
.cat-rows, .std-rows, .faq-list { margin-top: 42px; }
.cat-row, .std-row { padding: 27px 0; }
.cat-note { margin-top: 36px; }
.steps { margin-top: 42px; }
.duo .steps, .duo .std-rows { margin-top: 38px; }
.step { padding-top: 27px; }
.stage-doors { margin-top: 32px; }
.stage-note { margin-top: 36px; }
.screen { padding-top: 78px; padding-bottom: 78px; }
.trust { padding-top: 58px; padding-bottom: 58px; }
.colophon { padding-top: 58px; padding-bottom: 64px; gap: 40px; }
@media (max-width: 760px) {
  .screen { padding-top: 66px; padding-bottom: 66px; }
  .trust { padding-top: 48px; padding-bottom: 48px; }
  .colophon { padding-top: 48px; padding-bottom: 54px; }
}

/* ================================================================
   final24 — HERO PHOTO SMALLER, 2026-11-07. Her word, 07:31:
   「首页照片也小一点」 — the 也 matters: she has SEEN the
   final22 shrink (46% -> 33%, live in final23 / view6) and asks
   for one step more. ONLY the homepage hero (page 02) moves:
   desktop photo column 33% -> 25% of the row width; the text
   column takes the freed space; same photo, same copy, headline
   still 66px desktop, crop register unchanged, only narrower.
   Mobile: the stacked photo height cap 36vh -> 28vh. Everything
   else is final23, value for value.
   ================================================================ */
main > .stage:not(.daughter) { grid-template-columns: 1fr 25%; }
main > .stage:not(.daughter) .screen-mark { right: calc(25% + 40px); }
/* page 06 pinned at its final23 values: final22's hero rule was
   unscoped and had been carrying the daughter screen's empty
   second column and its E mark with it (33% / calc(33% + 40px)).
   The shrink is page 02 only, so page 06 is held exactly where
   final23 left it, desktop and mobile alike. */
main > .stage.daughter { grid-template-columns: 1fr 33%; }
main > .stage.daughter .screen-mark { right: calc(33% + 40px); }
@media (max-width: 760px) {
  /* the stacked form the task names: final23's mobile hero never
     actually stacked — the unscoped main > .stage rule (0,1,1)
     outranked the mobile .stage rule (0,1,0), leaving the photo
     and the squeezed text side by side at 261px + 129px. Here
     the hero stacks in one column and the photo cap is 28vh. */
  main > .stage:not(.daughter) { grid-template-columns: 1fr; }
  main > .stage.daughter { grid-template-columns: 1fr 33%; }
  .stage-photo { height: 28vh; }
  .stage .screen-mark { right: 20px; }
  main > .stage.daughter .screen-mark { right: 20px; }
}

/* ================================================================
   final25 — PHOTO MAP + HERO COPY, 2026-11-07. Her plan (08:04):
   homepage hero = a MEDICINE photo; across the inner pages only
   2–3 women photos survive (05 field blonde, 07 café, daughter
   10); everything else becomes medicine/product photography.
   And her copy ruling (08:06): the hero stops saying
   "menopause" — headline "Care for women, / online.", subline
   "Prescription care for adult women, ...". Page 02 only; every
   other page's copy is untouched in this pass.
   ================================================================ */
/* hero crop: the narrow 25% column reads the bottle mouth and
   the central tablets — object-position shifts the cover window
   right so both stay in frame */
main > .stage:not(.daughter) .stage-photo img { object-position: 50% 50%; }
/* page 03: one medicine photo above the door rows, gathered —
   centred, modest, the rows keep their final23 full width */
.door-photo { margin: 44px auto 0; max-width: 680px; }
.door-photo img { width: 100%; height: 370px; object-fit: cover; display: block; }
/* page 04: the parcel under step 3, inside the centred column */
.step-photo { margin: 48px auto 0; max-width: 340px; }
.step-photo img { width: 100%; height: 300px; object-fit: cover; object-position: 50% 40%; display: block; }
/* page 05: medicine photo inside the standards text column;
   the field blonde keeps the duo's right column to herself */
.std-photo { margin: 48px 0 0; max-width: 560px; }
.std-photo img { width: 100%; height: 280px; object-fit: cover; display: block; }
@media (max-width: 760px) {
  main > .stage:not(.daughter) .stage-photo img { object-position: 50% 35%; }
  .door-photo, .std-photo { max-width: 100%; }
  .door-photo img { height: 280px; }
  .std-photo img { height: 220px; }
  .step-photo img { height: 260px; }
}

/* ================================================================
   final26 — PAGE 04 TWO COLUMNS + PAGE 06 PHOTO, 2026-11-07.
   Her screenshot of page 04 (08:30, 「右边太空了」) showed the
   OLD left-aligned build from an older PDF; final23 had already
   centred the steps, and this pass goes one step further: the
   screen fills its width in two columns. Left column = steps 1
   and 2 stacked, gathered; right column = the parcel photo
   (candidate-08, now a full column visual) with step 3 under
   it. Eyebrow + headline stay centred on top. Mobile stacks:
   steps 1, 2, photo, step 3. The crop window sits low
   (object-position 82%): in the source the parcel stands at
   the foot of the door (y 62–88%), and a mid-frame window in
   this wide-short slot cropped it out entirely — parcel in
   frame is the whole point of the photograph.
   Page 06 (her 08:30 steer): candidate-10, the contraceptive
   calendar pack, fills the daughter screen's right column —
   the slot that stood empty beside the text. It lives ONLY
   here now (off page 18, zero-duplicate rule). The E mark
   keeps its post; copy untouched.
   ================================================================ */
.how .how-head { text-align: center; width: 100%; max-width: 1248px; margin: 0 auto; }
.how-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 76px;
  width: 100%; max-width: 1248px; margin: 52px auto 0; align-items: start;
}
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 32px; }
.how-photo { margin: 0; }
.how-photo img { width: 100%; height: 300px; object-fit: cover; object-position: 50% 82%; display: block; }
.how-step3 { margin-top: 34px; }
.daughter-photo img { object-position: 50% 50%; }
@media (max-width: 760px) {
  .how-cols { grid-template-columns: 1fr; gap: 40px; margin-top: 44px; }
  .how-photo img { height: 280px; }
}

/* ================================================================
   final27 — PAGE 03 TEXT RELAYOUT, 2026-11-07. Her screenshot of
   the five doors with one instruction: 「文字重新排版」. Diagnosis
   (probe27, measured on final26 at 1440): the grid's baseline
   alignment itself was true (first-baseline delta 0.00px on all
   five rows, two-line names included), but the SYSTEM around it
   read ragged — the description column was 1fr (732px), so each
   description floated in a different amount of air and wrapped
   at a different rhythm; the one short name with a two-line
   description (Weight) read as sunk; and the arrows sat at the
   page's far edge (x 1304), detached from the text they belong
   to. The relayout fixes the system, not the words:
   (1) columns are now FIXED — name 380px, description
       minmax(0, 560px), arrow 40px, gaps 48px — so the
       description starts at the same x on every row and wraps
       inside one consistent measure (~560px);
   (2) align-items: baseline is kept and re-asserted here: the
       description's first line shares the name's first baseline
       on every row — for the two-line name (Non-Hormonal
       Relief) the description aligns with the name's FIRST
       line, which is exactly what baseline alignment does;
   (3) the arrow moves into its own fixed column immediately
       after the description zone (description area + one 48px
       gap), left-aligned so every arrow glyph shares one x
       (1132 at 1440, was 1304) — one straight arrow column,
       attached to the block, not flung to the far edge;
   (4) row padding re-asserted at the gathered 27px top/bottom,
       equal on all five rows.
   The medicine photo above the rows and the closing line below
   are untouched; copy is word-for-word unchanged; the A mark
   keeps its post. Desktop only (min-width 761px): the mobile
   form — name + arrow on the top row, description below —
   stands exactly as final26 left it.
   ================================================================ */
@media (min-width: 761px) {
  .care .cat-row {
    grid-template-columns: 380px minmax(0, 560px) 40px;
    gap: 48px;
    padding: 27px 0;
    align-items: baseline;
  }
  .care .cat-arrow { text-align: left; }
}

/* ================================================================
   final28 — PAGE 05 DOCTOR ACCENT, 2026-11-07 (her 08:57:
   「你先选了，放上去」). Beside the standards copy, the medicine
   photograph still leads: cand04 keeps the wide frame and
   doctor-03 (clinician in a white coat, at her laptop — the
   calmest, most trustworthy portrait of the doctor set) sits
   SMALLER beside it as profession imagery only. No name, no
   title, no caption: she is not presented as our doctor; the
   standards text itself says the network is being finalized.
   ================================================================ */
.std-media { display: flex; gap: 24px; align-items: stretch; margin: 48px 0 0; max-width: 560px; }
.std-media .std-photo { margin: 0; flex: 1 1 auto; min-width: 0; }
.std-doctor { margin: 0; flex: 0 0 168px; }
.std-doctor img { width: 100%; height: 280px; object-fit: cover; object-position: 50% 20%; display: block; }
@media (max-width: 760px) {
  .std-doctor { flex-basis: 128px; }
}

/* ================================================================
   final29 — DOORS PAGINATION + TIGHTER DOOR ROWS + SEARCH,
   2026-11-07. Her rulings of 09:15–09:18, in order:
   (1) 「哪一页是药品 也做成翻到第二页」 + 「点击下一页就是
       第二页」: the five doors split across TWO pages joined by
       a Next row. Page one (section.care): the medicine photo,
       doors 1–3, and the Next row ("More care areas", gold
       arrow). Page two (section.care-more, new): doors 4–5 and
       the closing line. The frame accumulates — future doors
       append in the same rhythm, on this page then on further
       pages behind it; the homepage itself stays lean
       (「一页一页累积，别都在主页面里」).
   (2) 「行间距变小，文字排齐了」: door-row vertical padding
       27px -> 21px on BOTH doors pages, the Next row included;
       the final27 fixed-column system (name 380 | description
       minmax(0,560) | arrow 40, gaps 48, baseline alignment) is
       extended to page two unchanged, so names, descriptions
       and arrows hold one column across both pages.
   (3) SEARCH (framework): a quiet 🔍 Search entry in the
       masthead, deep teal, 24px; one tap opens one simple
       field. The field is a soft teal wash with NO border —
       the site's few-lines discipline holds. Design mock only:
       search activates when real products land, matching by
       product name or by number (mother H/N/T/S, daughter E).
   ================================================================ */
.care .cat-row, .care-more .cat-row { padding: 21px 0; }
.care-more .screen-inner { max-width: 1248px; }
@media (min-width: 761px) {
  .care-more .cat-row {
    grid-template-columns: 380px minmax(0, 560px) 40px;
    gap: 48px;
    align-items: baseline;
  }
  .care-more .cat-arrow { text-align: left; }
}
.cat-row.next-row .cat-arrow { color: #EFAB00; }
.mast-search {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 24px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.search-panel { padding: 26px 56px 30px; background: #fff; }
.search-input {
  width: 100%; max-width: 560px; display: block;
  font: inherit; font-size: 24px; color: var(--body);
  background: rgba(14, 85, 97, .07); border: 0; padding: 14px 18px;
}
.search-input::placeholder { color: var(--body); opacity: .65; }
.search-input:focus { outline: none; background: rgba(14, 85, 97, .13); }
@media (max-width: 760px) {
  .search-panel { padding: 20px 14px 24px; }
}

/* ================================================================
   final30 — 2026-11-07 (her 09:25–09:44 batch):
   (a) doors page one: the CARE eyebrow is deleted and the
       medicine photo is enlarged about half again (680x370,
       was 560x300; mobile height 220 -> 280). The bottle and
       the spilled tablets stay fully in frame.
   (b) page 04: waist-02 (HER pick, 09:43 — the waist close-up,
       tape numbers legible; waist-01/03 stay in reserve) sits
       gathered under the Weight row, modest, whole frame,
       never cropped (height auto).
   (c) line sweep: the masthead hairline is REMOVED — sections
       separate by whitespace (her 09:42 「不要线」). Entry-link
       underlines and the page-head bands stay.
   (d) closing page (stamp 08): the full tightax19 wordmark
       stands centred above the closing lines on white; the
       standalone A is OFF this page (logo rule change, 09:44).
   ================================================================ */
.weight-photo { margin: 44px 0 0; max-width: 380px; }
.weight-photo img { width: 100%; height: auto; display: block; }
.closing-mark { margin: 0 auto 52px; }
.closing-mark img { width: 280px; height: auto; display: block; }
@media (max-width: 760px) {
  .weight-photo { max-width: 320px; }
  .closing-mark img { width: 220px; }
}

/* ================================================================
   final31 — DOORS PAGE: FIVE NAMES ONLY, ONE PAGE, 2026-11-07.
   Her rulings of 09:52–09:55, settled in sequence:
   (1) 「最好系列名称一页，就五个系列名称」: the final29/30
       two-page doors split is undone. All five series names
       sit on ONE page — headline, the enlarged medicine
       photo, five rows, the waist photograph gathered under
       the rows, the closing line last. section.care-more is
       deleted; everything after it shifts up one page (the
       review set is 20 pages again).
   (2) The series page carries ONLY the five names: the
       description column is removed from all five rows.
       Rows are name + arrow, one size, aligned as one set.
       (This settles the 09:52 「前后文字一样大」 item —
       with the descriptions gone, the size question is
       moot.) Desktop rows: the name holds its 380px column
       and the arrow takes its own 40px column one 48px gap
       after it — one straight arrow column attached to the
       names, not flung to the far edge; row padding stays
       at the gathered 21px. The phone form (name + arrow)
       already matched and stands.
   (3) PAGINATION — recorded, not built here: the news-style
       numbered pager she asked for at 09:52–09:53 ("1 · 2 …
       Next", plain deep-teal type, no boxes) is the standing
       pattern INSIDE each series, where the product lists
       accumulate page by page behind each door. The series
       names page itself carries no pager, and the product
       pages are framework/future — no real products until
       contracts are signed, so none are built in this pass.
   ================================================================ */
@media (min-width: 761px) {
  .care .cat-row { grid-template-columns: 380px 40px; }
}

/* ================================================================
   final32 — ONE CHANGE, 2026-11-07 (her word 10:12,
   「把咖啡照片删掉」). The cafe photograph leaves the closing
   screen; nothing replaces it. With the photo gone, the duo
   collapses to a single centred column and the closing lines
   return to the centred form the section's own base rules
   (.closing, align-items/text-align center) already intend:
   plum band, the centred tightax19 wordmark, and the lines,
   standing on type and whitespace.
   ================================================================ */
.closing .duo { grid-template-columns: 1fr; max-width: 820px; }
.closing .duo .closing-col { text-align: center; margin: 0 auto; }
.closing .duo .eyebrow { text-align: center; }

/* ================================================================
   final33 — WEIGHT ROW UNIT, 2026-11-07 (her 10:27, with her
   screenshot of this page: 「减肥照片挪上去文字拍右边」).
   ONE layout change. The waist photograph (waist-02) leaves
   its place below the five rows and moves UP into the Weight
   row: photo on the LEFT, the "Weight" name and its arrow to
   the RIGHT of the photo, name and arrow centred against the
   photo's height so the three read as one composed unit.
   The other four rows keep their final31 form exactly (name
   in the 380px column, arrow in its own column after one
   48px gap, 21px row padding). The Weight row's text does
   NOT return to the other names' left edge — beside the
   photo is her explicit instruction. The photo keeps its
   whole frame (no crop, height auto from the 3:2 original);
   the standalone below-rows .weight-photo placement is gone
   (its base rule above now only serves this in-row figure,
   margin and cap neutralised here). Row padding stays 21px
   so the five rows keep one rhythm; the closing line keeps
   its 36px lead below the unit.
   ================================================================ */
.care .weight-row .weight-photo { margin: 0; max-width: none; }
@media (min-width: 761px) {
  .care .weight-row {
    grid-template-columns: 320px max-content 40px;
    gap: 48px;
    align-items: center;
  }
}
@media (max-width: 760px) {
  .care .weight-row {
    grid-template-columns: 176px 1fr 32px;
    gap: 10px 18px;
    align-items: center;
  }
  .care .weight-row .weight-photo { grid-column: 1; grid-row: 1; }
  .care .weight-row .cat-name { grid-column: 2; grid-row: 1; }
  .care .weight-row .cat-arrow { grid-column: 3; grid-row: 1; }
}

/* ================================================================
   final34 — VOICE-CALL BATCH, 2026-11-07 (her words, 11:54–12:01
   EST, spoken because typing is too tiring; built and
   self-checked before she sees it).
   ITEM 1 — PAGE 03 REBALANCE (her screenshot complaint: 「全盘到
   左边去了，右边全空」): the five-doors page stops hugging the
   left. Title, rows and closing note gather into ONE centred
   column (780px) inside the page's inner width; the medicine
   photo was already centred at 680px and keeps its place in
   that column. Plain rows: name in its 380px column, the arrow
   in its own 40px column at the column's right edge — names
   one left edge, arrows one straight column, the group centred
   in the page width, no dead right half. The Weight unit keeps
   photo-left / text-right (final33, her 10:27) and gains AIR
   (her 「挤得要死」): photo-to-name gap 48 -> 64px, row padding
   21 -> 38px top/bottom, its arrow aligned with the other
   arrows at the column's right edge. Mobile: the column runs
   full width; the Weight unit keeps its side-by-side form
   with a wider photo-to-text gap (18 -> 24px) and 30px of
   vertical room.
   ITEM 2 — PAGE 04 PHOTO: candidate-08 (the parcel at the
   door) is OUT, sitewide — she has ordered this before and it
   stayed; it does not stay now. In its place, doctor-c01 from
   the library (male provider in scrubs, tablet in hand,
   talking with a seated patient; Pexels 4266944, Cedric
   Fauntleroy, Free licence verified on its page 2026-11-07):
   profession imagery only, no name, no title. The crop window
   moves from the parcel setting (82%) to 30% so both faces
   stay in frame in the wide slot.
   ITEM 3 — PAGE 05: the small doctor-03 portrait beside the
   standards medicine photo is REMOVED (her word this call).
   Candidate-04 and the field blonde stand; after item 2 the
   site's only doctor photograph is the consultation frame on
   page 04.
   ================================================================ */
.care .sec-title { width: 100%; max-width: 780px; margin: 16px auto 0; }
.care .cat-rows { max-width: 780px; margin-left: auto; margin-right: auto; }
.care .cat-note { width: 100%; max-width: 780px; margin: 44px auto 0; }
@media (min-width: 761px) {
  .care .cat-row { grid-template-columns: 380px 1fr 40px; }
  .care .cat-row .cat-arrow { grid-column: 3; justify-self: end; }
  .care .weight-row {
    grid-template-columns: 320px 1fr 40px;
    gap: 64px;
    padding: 38px 0;
  }
}
.how-photo img { object-position: 50% 30%; }
@media (max-width: 760px) {
  .care .weight-row { gap: 10px 24px; padding: 30px 0; }
}

/* ================================================================
   final35 — MARK PLACEMENT UNIFIED (her ruling 2026-11-07
   12:04–12:05 EST, supersedes any drifting positions):
   the full wordmark sits at the LEFT wherever it appears;
   the single-letter marks sit at the RIGHT — one corner, one
   size, every page. The two masthead wordmarks already stand
   at the left of their rows (unchanged). Two moves here:
   (1) the closing page's wordmark leaves the centre for the
   LEFT edge of the page's inner column (it was centred under
   the final30 three-places amendment; her word now is
   placement consistency — full logo LEFT);
   (2) the two stage screens' A marks give up their composed
   calc() right offsets (25% / 33% + 40px) for the common
   right anchor, right: 96px — the same corner as every other
   letter mark. The banded pages' marks (closing, the two
   shop shelves) keep the stepped-down top that clears their
   bands; the right anchor and the 46px size are one for all.
   ================================================================ */
@media (min-width: 761px) {
  main > .stage:not(.daughter) .screen-mark,
  main > .stage.daughter .screen-mark { right: 96px; }
}
.closing-mark { margin: 0 auto 52px 0; }

/* ================================================================
   final34 CONSOLIDATION, 2026-11-07 (closing pass on the call
   batch). Two placement completions:
   (1) PAGE 03 SPREAD: the centred series column widens
   780 -> 920px, so the five rows compose further across the
   desktop width; the column stays centred (margin auto), so
   the left and right whitespace stay even by construction.
   The vial photograph keeps its centred place in the column,
   composed over the rows; the Weight unit is unchanged
   (photo left, name right, arrow at the column's right edge).
   (2) FOOTER MARK (her mark rule, footers included): the
   homepage footer carries only the letter A — it moves to
   the RIGHT of the footer text. The flex order changes; the
   boxes themselves do not.
   ================================================================ */
.care .sec-title, .care .cat-rows, .care .cat-note { max-width: 920px; }
.colophon .colo-mark { order: 2; margin-left: auto; }
.colophon .colo-text { order: 1; }

/* ================================================================
   final37 — HER TWO CORRECTIONS, 2026-11-08 22:54 (spoken at the
   end of the night; prep for the 2026-11-09 08:00 session).
   ITEM 1 — PAGE 04 PHOTO: the male-doctor consultation frame
   (doctor-c01) is REJECTED by her ("那个男医生的照片也不行")
   and is out — markup and asset both. In its place, doctor-c02
   from the library (telehealth over the provider's shoulder:
   the patient visible on the laptop screen describing her
   symptoms, the provider's own face never shown, bright white
   room; Pexels 7195091, Kaboompics, Free licence): it is the
   online consultation itself, which is what this page sells.
   The crop window aims at the consultation — laptop screen and
   the provider's hands in frame — at 22% from the top.
   ITEM 2 — PAGE 03 WEIGHT ROW REVERSED (her words: 「量腰围的
   挪到右边来，右边空在那里」): the waist photograph leaves the
   left of its row for the RIGHT side, into the empty space
   there; "Weight →" stands at the LEFT, its name in the same
   380px column as the other four series names, so the five
   rows read one way again. The photograph keeps its whole
   frame at its settled 320px width (height auto, no crop).
   The other four rows and the page's centred 920px column are
   untouched. Mobile: the same reading order in one line —
   name, arrow, then the photo at the right at 176px wide.
   ================================================================ */
.how-photo img { object-position: 50% 22%; }
@media (min-width: 761px) {
  .care .weight-row {
    grid-template-columns: 380px 40px 1fr;
    gap: 48px;
    padding: 38px 0;
  }
  .care .weight-row .cat-name { grid-column: 1; grid-row: 1; }
  .care .weight-row .cat-arrow { grid-column: 2; grid-row: 1; justify-self: start; }
  .care .weight-row .weight-photo { grid-column: 3; grid-row: 1; justify-self: end; width: 320px; }
}
@media (max-width: 760px) {
  .care .weight-row {
    grid-template-columns: 1fr 32px 176px;
    gap: 10px 16px;
    padding: 30px 0;
    align-items: center;
  }
  .care .weight-row .cat-name { grid-column: 1; grid-row: 1; }
  .care .weight-row .cat-arrow { grid-column: 2; grid-row: 1; }
  .care .weight-row .weight-photo { grid-column: 3; grid-row: 1; }
}

/* ================================================================
   final39 — LOGO POSITION, FINAL UNIFIED RULE (her ruling
   2026-11-09 08:42: 「logo 位置都要统一 / 在左上角」). ALL marks
   go TOP-LEFT on every screen: full wordmark (already left in
   the masthead / closing / footer), standalone A top-left.
   This overrides the 2026-11-07 "letters right" convention and
   every composed calc() right offset. The banded closing screen
   keeps its stepped-down top (76px) so the mark clears the band;
   the left anchor is the same. Footer letter mark returns to
   the left of the footer text.
   ================================================================ */
.screen-mark { left: 96px; right: auto; }
.stage .screen-mark,
main > .stage:not(.daughter) .screen-mark,
main > .stage.daughter .screen-mark { left: 96px; right: auto; }
.colophon .colo-mark { order: 0; margin-left: 0; margin-right: auto; }
.colophon .colo-text { order: 1; }
@media (max-width: 760px) {
  .screen-mark,
  .stage .screen-mark,
  main > .stage:not(.daughter) .screen-mark,
  main > .stage.daughter .screen-mark { left: 20px; right: auto; }
}

/* A1 states panel (her word 2026-11-09): the eight states sit on
   the right, over the photograph's empty lower area, so a visitor
   knows at once whether she can be served. */
.stage { position: relative; }
.stage-states { position: absolute; right: 44px; top: 48px; width: 384px; background: #fff; border: 1px solid #E7E0D2; padding: 24px 26px 20px; }
.states-label { margin: 0 0 14px; font-size: 14px; letter-spacing: .13em; text-transform: uppercase; color: #5E7377; }
.states-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.state-chip { font-size: 19px; color: var(--ink, #0E5561); text-decoration: none; border: 1px solid #D8CFBB; border-radius: 999px; padding: 7px 16px; line-height: 1.2; }
@media (max-width: 760px) {
  .stage-states { position: static; width: auto; margin: 20px 24px 28px; }
}

/* States panel moved to the bottom of the left column
   (her word 2026-11-09: 左边下面). */
.stage-states { position: static; width: 400px; max-width: 100%; margin-top: auto; }

/* Air between the headline and the copy under it (her word
   2026-11-09: the copy must not crowd the main headline). */
.stage-line { margin-top: 40px; }

/* The hero photograph stands shorter, not full height
   (her word 2026-11-09: 不需要满屏). */
@media (min-width: 761px) {
  main > .stage .stage-photo { align-self: start; height: 62%; }
}

/* Hero photo shorter still (her word 2026-11-09: 药片不要那么长). */
@media (min-width: 761px) {
  main > .stage .stage-photo { height: 44%; }
}

/* The full masthead row fits on one line now that Cart stands
   beside Sign In: tighter gaps in the right-hand group. */
.mast-right { gap: 30px; }
.mast-nav { gap: 26px; }
.mast-row { overflow: hidden; }

/* Masthead fits on one line (Cart no longer clipped), and the
   states panel stands under the photograph on the right
   (her words 2026-11-09). */
.mast-right { gap: 24px; }
.mast-nav { gap: 20px; }
.mast-nav a, .mast-signin { font-size: 20px; }
.stage-states { position: absolute; right: 44px; top: 48%; width: 384px; margin: 0; }
@media (max-width: 760px) {
  .stage-states { position: static; width: auto; margin: 20px 24px 28px; }
}

.stage-photo img { object-position: 50% 38%; }

/* Pills centred in the frame; the states box shares the
   photograph's left edge; Cart is the basket icon
   (her words 2026-11-09). */
.stage-photo img { object-position: 63% 38%; }
.stage-states { left: 67%; right: auto; }
.mast-cart { display: inline-flex; align-items: center; }

/* The states box takes the photograph's exact width and left
   edge; the eight states stand four to a row (her words
   2026-11-09). */
.stage-states { left: 75%; width: 25%; }
.states-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.state-chip { text-align: center; }
@media (max-width: 760px) {
  .stage-states { left: auto; width: auto; }
}

/* Pills centred in the frame; photograph and states box step
   down together a little (her words 2026-11-09). */
.stage-photo { margin-top: 38px; }
.stage-photo img { object-position: 55% 45%; }
.stage-states { top: calc(48% + 38px); }
@media (max-width: 760px) {
  .stage-photo { margin-top: 0; }
  .stage-states { top: auto; }
}

.stage-photo img { object-position: 50% 50%; }

/* The photograph no longer hugs the page edge; the states box
   keeps the same two edges (her words 2026-11-09). */
.stage-photo { margin-right: 44px; }
.stage-states { width: calc(25% - 44px); }

/* The right-hand pair steps toward the middle; its right gap
   now matches the left text inset (her words 2026-11-09). */
.stage-photo { margin-right: 96px; }
.stage-states { width: calc(25% - 96px); }

/* The pair keeps its full width and steps left as one piece,
   so the chips keep their room (corrects the squeezed pass). */
.stage-photo { margin-left: -96px; }
.stage-states { left: calc(75% - 96px); width: 25%; }

/* Each row carries its series label (her words 2026-11-09). */
.cat-no { font: 600 17px 'Source Sans 3', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8A9A9C; margin-right: 20px; }

/* The series screen stands whole in one screen (her words
   2026-11-09: the second page is the series, in one screen). */
.screen.care { padding-top: 42px; padding-bottom: 42px; }
.screen.care .cat-row { padding: 23px 0; }
.screen.care .sec-title { margin-bottom: 30px; }
.screen.care .cat-note { margin-top: 26px; }

/* The two doors stand on the first page, under the headline
   block (her words 2026-11-09). */
.stage-doors { display: flex; gap: 18px; margin-top: 36px; }
.door-btn { font: 600 21px 'Source Sans 3', sans-serif; letter-spacing: .02em; padding: 15px 32px; border-radius: 999px; text-decoration: none; }
.door-women { background: #830051; color: #FFFFFF; }
.door-daughters { background: #EFAB00; color: #0E5561; }
@media (max-width: 760px) { .stage-doors { flex-wrap: wrap; } }

/* The five series stand as cards, two over three, each label
   with its own name (her words 2026-11-09: 二个和三个排;
   the earlier list layout was ruled 不合格). */
.screen.care .cat-rows { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; margin-top: 40px; }
.screen.care .cat-row { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 28px; background: #FFFFFF; border: 1px solid #E7E0D2; border-radius: 3px; }
.screen.care .cat-row:nth-child(1), .screen.care .cat-row:nth-child(2) { grid-column: span 3; }
.screen.care .cat-row:nth-child(3), .screen.care .cat-row:nth-child(4), .screen.care .cat-row:nth-child(5) { grid-column: span 2; }
.screen.care .cat-no { margin: 0 0 10px; }
.screen.care .cat-name { font-size: 30px; line-height: 1.15; }
.screen.care .weight-photo { margin: -26px -28px 20px; width: calc(100% + 56px); }
.screen.care .weight-photo img { width: 100%; height: 118px; object-fit: cover; display: block; }
.screen.care .cat-note { margin-top: 30px; }
@media (max-width: 760px) {
  .screen.care .cat-row { grid-column: span 6 !important; }
}

/* Series names anchor to the bottom of their cards, so the
   two rows read level. */
.screen.care .cat-name { margin-top: auto; }
.screen.care .weight-photo img { height: 104px; }

/* Every series card carries its own small photograph
   (her words 2026-11-09: 五个系列五个小照片, 一目了然). */
.screen.care .cat-photo { margin: -26px -28px 20px; width: calc(100% + 56px); }
.screen.care .cat-photo img { width: 100%; height: 104px; object-fit: cover; display: block; }

/* The field portrait crops to her face in the card strip. */
.screen.care .cat-photo img[src*="photo-field"] { object-position: 50% 28%; }
.screen.care .cat-photo img[src*="hero-daylight"] { object-position: 50% 30%; }

/* Card photographs show each series' own medicine
   (her words 2026-11-09: 照片要对应的药片). */
.screen.care .weight-photo img, .screen.care .cat-photo img { object-position: 50% 50%; }
.screen.care .weight-photo img[src*="glp1-pen"] { object-position: 72% 50%; }
/* The cream tube crops to its cap end in the card strip. */
.screen.care .cat-photo img[src*="cream-tube"] { object-position: 50% 92%; }

.screen.care .cat-photo img[src*="cream-strip"] { object-position: 50% 50%; }

/* Cards run shorter, photographs taller, and each label sits
   close above its name (her words 2026-11-09). */
.screen.care .cat-photo img, .screen.care .weight-photo img { height: 150px; }
.screen.care .cat-photo, .screen.care .weight-photo { margin-bottom: 0; }
.screen.care .cat-no { margin: 18px 0 8px; }
.screen.care .cat-name { margin-top: 0; }
.screen.care .cat-row { padding-bottom: 22px; }

/* The old list rule's 48px gap still lived between the card's
   parts; out. And what can be clicked carries a gold underline,
   everywhere the same (her words 2026-11-09). */
.screen.care .cat-row { gap: 0; }
.screen.care .cat-name { text-decoration: underline; text-decoration-color: #EFAB00; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* The hand appears wherever a card can be clicked. */
.screen.care .cat-row { cursor: pointer; }

/* Plum bands on the three working screens, A2 A3 A4
   (her words 2026-11-09); the marks step down below them. */
.care .screen-mark, .how .screen-mark, .standards .screen-mark { top: 76px; }
@media (max-width: 760px) {
  .care .screen-mark, .how .screen-mark, .standards .screen-mark { top: 56px; }
}

/* A3 and A4 stand on one screen now (her words 2026-11-09):
   the three standards run as a strip under the steps, and the
   closing page becomes A8. Both old photographs are out. */
.how .std-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  max-width: 1248px; margin: 40px auto 0; border-top: 1px solid #E7E0D2; padding-top: 28px; }
.how .std-cell .std-name { display: block; margin-bottom: 8px; }
.how .std-cell .std-line { display: block; }
.screen.how { padding-top: 96px; padding-bottom: 40px; }
.how-photo img { height: 250px; }
.how-steps { gap: 26px; }

/* The merged A3 screen fits its 900: photograph a touch
   shorter, gaps a touch tighter, type untouched. */
.screen.how { padding-top: 88px; padding-bottom: 30px; }
.how-photo img { height: 208px; }
.how .std-strip { margin-top: 28px; padding-top: 22px; }
.how-cols { margin-top: 38px; }
.how-step3 { margin-top: 24px; }
.how .std-strip { padding-top: 16px; }
.how-cols { margin-top: 34px; }
.how-photo img { height: 196px; }
.how .std-strip { margin-top: 24px; }

/* Her layout for this screen (2026-11-09): the standards stand
   on the left, the three steps on the right; the in-progress
   notes run small, and the FDA line stands two sizes larger. */
.how-cols { grid-template-columns: 1fr 1fr; }
.how-std { display: grid; gap: 36px; align-content: start; }
.how .std-note { display: block; font-size: 19px; line-height: 1.5; color: #5E7377; margin-top: 6px; }
.how .std-cell.fda .std-name { font-size: 36px; }

/* The step numbers are out (her words 2026-11-09) and the
   two columns sit lower on the screen. */
.how-cols { margin-top: 92px; }
.how .step-name { display: block; margin-bottom: 10px; }

/* The title belongs to the steps, so it stands over the right
   column (her words 2026-11-09: it has nothing to do with the
   FDA side). */
.how-right2 .sec-title { text-align: left; margin-bottom: 44px; }

/* Her sizing for this screen (2026-11-09): the steps title
   smaller, the FDA line the largest on the screen. */
.how-right2 .sec-title { font-size: 34px; }
.how .std-cell.fda .std-name { font-size: 46px; }

/* All of this screen's type steps down a notch (her words
   2026-11-09), the FDA line still the largest; a photograph
   of pharmacists checking the shelves stands under it. */
.how-right2 .sec-title { font-size: 30px; }
.how .std-name { font-size: 25px; }
.how .std-cell.fda .std-name { font-size: 40px; }
.how .step-name { font-size: 23px; }
.how .std-line, .how .step-line { font-size: 20px; }
.how .std-note { font-size: 17px; }
.how .std-photo2 { margin: 6px 0 0; }
.how .std-photo2 img { width: 100%; height: 132px; object-fit: cover; object-position: 50% 38%; display: block; }

/* A safe-use warning stands under the steps (her words
   2026-11-09: 挪点地方放一个安全用药的警示图). */
.how .safety-note { display: flex; gap: 16px; align-items: flex-start; margin-top: 44px;
  border: 1px solid #E7E0D2; padding: 20px 22px; max-width: 560px; }
.how .safety-icon { flex: none; margin-top: 3px; }
.how .safety-name { display: block; font: 600 21px 'Source Serif 4', serif; color: #0E5561; margin-bottom: 6px; }
.how .safety-line { display: block; font-size: 18px; line-height: 1.55; color: #40605F; }

/* The steps side runs tighter (her words 2026-11-09). */
.how-steps { gap: 14px; }
.how .step-line { line-height: 1.45; }
.how .std-photo2 img { object-position: 50% 50%; }
/* Title-to-steps distance tightened again (her words 2026-11-09). */
.how-right2 .how-title { margin-bottom: 10px; }
.how-steps { gap: 10px; }
.how .safety-note { margin-top: 36px; }
/* Whole screen pulled tighter (her words 2026-11-09: 排紧一点). */
.how .how-cols { margin-top: 58px; }
.how .std-rows { gap: 26px; }
.how .std-photo2 { margin-top: 22px; }
.how .safety-note { margin-top: 30px; }
/* The steps column sits a touch lower (her words 2026-11-09). */
.how-right2 { padding-top: 68px; }

/* Only carries the gold (her words 2026-11-09). */
.how .only-gold { color: #EFAB00; }
/* The steps title hugs its first step (measured gap was 71px). */
.how-right2 .sec-title { margin-bottom: 6px; }
/* Product screens in the flow (A4-A6), built 2026-11-09. */
.products { padding: 0 96px; }
.products .screen-mark { top: 76px; }
.prod-eyebrow { margin-top: 108px; font-size: 17px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #8A9A9C; }
.products .sec-title { margin-top: 10px; }
.prod-intro { margin-top: 12px; font-size: 21px; color: #40605F; }
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.prod-card { border: 1px solid #E7E0D2; background: #fff; padding: 24px 26px 22px;
  display: flex; flex-direction: column; }
.prod-photo { height: 188px; margin: 0 0 20px; overflow: hidden; }
.prod-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-panel { height: 188px; margin: 0 0 20px; background: #FBF7EA; }
.prod-name { font: 600 26px 'Source Serif 4', serif; color: #0E5561; margin-bottom: 8px; }
.prod-line { font-size: 20px; line-height: 1.5; color: #40605F; }
.prod-price { margin-top: auto; padding-top: 20px; font-size: 18px; color: #5E7377; }
.prod-foot { margin-top: 34px; font-size: 18px; color: #5E7377; }
/* A4 fix: the eyebrow clears the A mark; grid breathes a touch less. */
.prod-eyebrow { margin-top: 142px; }
.prod-grid { margin-top: 34px; }
.prod-photo, .prod-panel { height: 180px; }
/* A3 and A4: the A mark stands top-right (her words 2026-11-09).
   !important because the file's older mark rules outrank plain
   selectors; consolidation owed in the cleanup pass. */
.screen.how .screen-mark, .screen.products .screen-mark { left: auto !important; right: 96px !important; }
@media (max-width: 760px) {
  .screen.how .screen-mark, .screen.products .screen-mark { right: 20px !important; }
}

/* Direct product cards (her words 2026-11-09): no intro line,
   no empty panels — the card is the product. */
.prod-grid { margin-top: 46px; }
.prod-card { padding: 34px 30px 28px; }
.prod-name { font-size: 28px; margin-bottom: 12px; }
.prod-line { font-size: 21px; }
.prod-price { padding-top: 40px; }

/* Two series share the A4 screen (her words 2026-11-09). */
.prod-eyebrow.second { margin-top: 52px; }
.products .prod-grid + .prod-eyebrow { margin-top: 52px; }
/* Compression so two series share one 900px screen. */
.prod-eyebrow { margin-top: 128px; }
.products .sec-title { font-size: 30px; margin-top: 6px; }
.prod-grid { margin-top: 26px; }
.prod-card { padding: 24px 26px 20px; }
.prod-name { font-size: 25px; margin-bottom: 8px; }
.prod-line { font-size: 19px; }
.prod-price { padding-top: 24px; }
.prod-eyebrow.second { margin-top: 36px; }
.prod-foot { margin-top: 26px; }
/* Card internals: kill inherited heading margins (measured). */
.products .prod-name { margin-top: 0; }
.products .prod-line { margin: 0; }
.products .prod-price { padding-top: 18px; margin: 0; }
.prod-eyebrow.second { margin-top: 30px; }
.prod-foot { margin-top: 20px; }

/* Simple price list (her words 2026-11-09): series, name, price.
   No boxes; whitespace separates the rows. */
.prod-list { margin-top: 30px; }
.prod-row { display: flex; align-items: baseline; gap: 22px;
  padding: 13px 0; margin: 0; }
.prod-row .prod-name { font-family: 'Source Serif 4', serif;
  font-weight: 600; font-size: 26px; color: #0E5561; }
.prod-row .prod-price { font-size: 20px; color: #5E7377;
  padding: 0; margin: 0; }

.prod-note { font-size: 16px; color: #8A9A9C; margin: 8px 0 0; }
/* Tighter rows on the mother product pages (her words 2026-11-09). */
.prod-row { padding: 8px 0; }
.prod-list { margin-top: 24px; }

/* All five series on one page: two columns (her words 2026-11-09). */
.prod-cols { display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 76px; }
.prod-col .prod-eyebrow:first-child { margin-top: 128px; }
.prod-cols + .prod-foot { margin-top: 40px; }
@media (max-width: 760px) {
  .prod-cols { grid-template-columns: 1fr; }
  .prod-col .prod-eyebrow.second { margin-top: 30px; }
}
/* Balance the two columns: the right column spreads its two
   series so its foot lands near the left column's (her words). */
.prod-col { display: flex; flex-direction: column; }
.prod-col:last-child .prod-eyebrow.second { margin-top: auto;
  padding-top: 48px; }
/* Rows a touch tighter still (her words 2026-11-09). */
.prod-row { padding: 6px 0; }
.prod-list { margin-top: 18px; }
.prod-eyebrow.second { margin-top: 24px; }
/* After the move (series 2 right), the LEFT column is shorter:
   its second series drops to the foot; the right column's
   eyebrows keep the normal gap. */
.prod-col:last-child .prod-eyebrow.second { margin-top: 24px;
  padding-top: 0; }
.prod-col:first-child .prod-eyebrow.second { margin-top: auto;
  padding-top: 48px; }
/* Left column: its two series move toward the middle as one
   group instead of one pinned to the foot (her choice). */
.prod-col:first-child { justify-content: center; gap: 54px; }
.prod-col:first-child .prod-eyebrow:first-child { margin-top: 0; }
.prod-col:first-child .prod-eyebrow.second { margin-top: 0;
  padding-top: 0; }

/* Left column back to natural flow: S2 sits right under S1,
   and a payment hint fills the space below (her words). */
.prod-col:first-child { justify-content: flex-start; gap: 0; }
.prod-col:first-child .prod-eyebrow:first-child { margin-top: 128px; }
.prod-col:first-child .prod-eyebrow.second { margin-top: 24px; }
.prod-hint { margin-top: 40px; max-width: 460px; }
.prod-hint-label { font-family: 'Source Sans 3', sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .14em;
  text-transform: uppercase; color: #B98A1F; margin: 0 0 8px; }
.prod-hint-line { font-size: 19px; line-height: 1.5;
  color: #33565B; margin: 0; }

/* The two closing lines composed as one footer row:
   prescription note left, price note right, one baseline. */
.prod-footer { display: flex; justify-content: space-between;
  align-items: baseline; gap: 40px; margin-top: 46px; }
.prod-footer .prod-foot { margin: 0; font-size: 17px; color: #5E7377; }
.prod-footer .prod-note { margin: 0; font-size: 17px; color: #5E7377; }

/* One closing line only (her words: if it does not fit,
   delete some). The price note stands alone at the right. */
.prod-footer { justify-content: flex-end; }
/* Lift the closing row off the bottom edge (her words):
   top-start flow, less top offset, footer follows the columns. */
.products { justify-content: flex-start; }
.prod-col .prod-eyebrow:first-child { margin-top: 104px; }
.prod-col:first-child .prod-eyebrow:first-child { margin-top: 104px; }
.prod-footer { margin-top: 30px; }

/* Daughter door: no plum on the girls' side. The entry link
   follows the house rule — gold underline, hand cursor. */
.stage-enter { color: #0E5561 !important;
  text-decoration: underline;
  text-decoration-color: #EFAB00;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px; cursor: pointer; }
/* Kill the old plum border under the daughter door link;
   the arrow goes gold with the underline. */
.stage-enter { border-bottom: none !important; }
.stage-enter .arr { color: #EFAB00; }

/* A6 mother closing, the E8 tail design in the mother file. */
.closing6 { display: block; padding: 0 96px 44px; text-align: left;
  justify-content: flex-start; }
.closing6 .tail-brand { text-align: center; font-size: 19px;
  line-height: 1.55; color: #33565B; margin: 0; padding: 34px 0 30px; }
.closing6 .tail-brand a { color: #0E5561; }
.closing6 .tail-strip { height: 40px; background: #830051;
  margin: 0 -96px; }
.closing6 .tail-grid { display: grid;
  grid-template-columns: 1.7fr .65fr; gap: 36px; padding: 40px 0 30px; }
.closing6 .tail-logo { height: 40px; width: auto; display: block;
  margin-bottom: 18px; }
.closing6 .tail-tag { font-size: 17px; line-height: 1.5;
  color: #33565B; margin: 0; }
.closing6 .tail-col h4 { font-size: 14px; letter-spacing: .14em;
  text-transform: uppercase; color: #33565B; margin: 4px 0 16px;
  font-weight: 600; }
.closing6 .tail-col a { display: block; font-size: 17px;
  color: #0E5561; text-decoration: none; margin: 0 0 8px; }
.closing6 .tail-fine { border-top: 1px solid #E0D5BE; padding-top: 22px; }
.closing6 .tail-fine p { font-size: 14.5px; line-height: 1.5;
  color: #5E7377; margin: 0 0 8px; }
@media (max-width: 760px) {
  .closing6 { padding: 0 20px 36px; }
  .closing6 .tail-strip { margin: 0 -20px; }
  .closing6 .tail-grid { grid-template-columns: 1fr; }
}

/* A5 — her note, copied from the live site, nothing added. */
.note5 { justify-content: center; }
.note5-inner { max-width: 900px; margin: 0 auto; text-align: left; }
.note5-eyebrow { font-family: 'Source Sans 3', sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: .16em;
  text-transform: uppercase; color: #B98A1F; margin: 0 0 30px; }
.note5-body { font-size: 23px; line-height: 1.65; color: #0E5561;
  margin: 0; }
.note5-fr { font-size: 21px; font-style: italic; color: #33565B;
  margin: 34px 0 0; }
.note5-en { font-size: 21px; color: #33565B; margin: 6px 0 0; }
.note5-sign { font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px; line-height: 1.35; color: #830051; margin: 38px 0 0; }
.note5-sign span { font-size: 19px; color: #33565B; }
.note5 .screen-mark { left: auto; right: 96px; }
@media (max-width: 760px) {
  .note5-inner { padding: 0 4px; }
  .note5-body { font-size: 20px; }
  .note5 .screen-mark { right: 20px; }
}

/* A4 bottom-right corner: the one small door to the mother
   everyday shelf (same pattern as E6). Note sits beneath it. */
.prod-corner { text-align: right; }
.prod-corner-link { font-family: 'Source Sans 3', sans-serif;
  font-size: 18px; font-weight: 600; color: #0E5561;
  text-decoration: underline; text-decoration-color: #EFAB00;
  text-decoration-thickness: 2px; text-underline-offset: 5px;
  cursor: pointer; }
.prod-corner-link .arr { color: #EFAB00; }
.prod-corner .prod-note { margin-top: 10px; }

/* Every medicine name is clickable (into the questionnaire):
   house rule — gold underline, hand cursor. */
.products a.prod-name { text-decoration: underline;
  text-decoration-color: #EFAB00; text-decoration-thickness: 2px;
  text-underline-offset: 5px; cursor: pointer; }

/* The homepage assessment entry sits under the two doors. */
.stage-assess { margin: 24px 0 0; font: 600 20px 'Source Sans 3', sans-serif; }
.stage-assess a { color: #0E5561; text-decoration: underline; text-decoration-color: #EFAB00; text-decoration-thickness: 2px; text-underline-offset: 6px; cursor: pointer; }
@media (max-width: 760px) { .stage-assess { font-size: 19px; } }

/* The feedback line in the closing column. */
.closing6 .tail-feedback { margin-top: 18px; font-size: 19px; }
.closing6 .tail-feedback a { color: #0E5561; text-decoration: underline; text-decoration-color: #EFAB00; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Phone pass, 2026-11-09: masthead trim, states panel, card order,
   stacked standards/steps, one-column products, guide entry line. */
@media (max-width: 760px) {
  .mast-nav a:nth-child(2), .mast-nav a:nth-child(3) { display: none; }
  .mast-search { display: none; }
  .stage-states { position: static; left: auto; right: auto; top: auto; width: auto; max-width: none; margin: 30px 0 0; }
  .screen.care .cat-rows { display: flex; flex-direction: column; }
  .screen.care .cat-row[href="#series-hormone"] { order: 1; }
  .screen.care .cat-row[href="#series-targeted"] { order: 2; }
  .screen.care .cat-row[href="#series-nonhormonal"] { order: 3; }
  .screen.care .cat-row[href="#series-skin"] { order: 4; }
  .screen.care .cat-row[href="#series-weight"] { order: 5; }
  .screen.care .sec-title { padding-top: 44px; }
  .how .how-cols { grid-template-columns: 1fr; }
  .how-right2 { padding-top: 0; }
  .products { padding: 0 20px; }
  .prod-cols { grid-template-columns: 1fr; }
  .products .prod-row { flex-wrap: wrap; gap: 4px 16px; }
  .products .prod-price { padding-top: 0; }
  .stage.daughter .stage-enter { font-size: 17px; letter-spacing: .06em; white-space: nowrap; }
}
.closing6 .tail-legal a { color: #33565B; text-decoration: underline; text-decoration-color: #EFAB00; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ===== BATCH 2026-11-09 EVENING — her live review of the launched
   site, item by item. One consolidated pass at the end of the file
   so each instruction lands once. ===== */

/* Masthead fits her laptop width (nothing clipped at 1280);
   the wordmark sits a touch lower and a touch further right. */
.mast-mark { margin-top: 6px; margin-left: 10px; }
@media (min-width: 761px) and (max-width: 1400px) {
  .mast-nav { gap: 18px; }
  .mast-nav a, .mast-search, .mast-signin { font-size: 15.5px; }
  .mast-mark img { height: 30px; }
}

/* A1: the composition draws toward the middle. */
@media (min-width: 1100px) {
  main > .stage { padding: 0 150px; grid-template-columns: 1fr 40%; }
  .stage-text { padding-left: 0; }
  .stage-photo { margin: 0; }
  .stage-states { left: auto; right: 150px; width: 400px; }
}

/* A2 on phones: reading order by position, now that every card
   carries the same href. */
@media (max-width: 760px) {
  .screen.care .cat-rows .cat-row:nth-child(1) { order: 1; }
  .screen.care .cat-rows .cat-row:nth-child(3) { order: 2; }
  .screen.care .cat-rows .cat-row:nth-child(2) { order: 3; }
  .screen.care .cat-rows .cat-row:nth-child(4) { order: 4; }
  .screen.care .cat-rows .cat-row:nth-child(5) { order: 5; }
}

/* A3: the copy moves up; the pharmacy photograph grows taller;
   the photograph and the warning box share one bottom line. */
.screen.how { padding-top: 40px; }
.how .how-cols { margin-top: 26px; }
.how-std { display: flex; flex-direction: column; gap: 36px; }
.how .std-photo2 { margin-top: auto; }
.how .std-photo2 img { height: 210px; }
.how-right2 { display: flex; flex-direction: column; padding-top: 0; }
.how .safety-note { margin-top: auto; }

/* A5: the photograph stands beside the note. */
.note5-inner { max-width: 1248px; display: grid;
  grid-template-columns: 380px 1fr; gap: 64px; align-items: start; }
.note5-photo { margin: 0; }
.note5-photo img { width: 100%; height: 520px; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .note5-inner { grid-template-columns: 1fr; gap: 28px; }
  .note5-photo img { height: 300px; }
}

/* The daughter cover inside the mother flow: gold band, and the
   E mark below it, like the daughter side's own head screens. */
.coverflow .sec-band.gold { background: #EFAB00; }
.coverflow .screen-mark { top: 76px; }
@media (max-width: 760px) { .coverflow .screen-mark { top: 56px; } }

/* The mother closing: the two columns draw toward the middle,
   and the hairline above the fine print runs shorter. */
@media (min-width: 761px) {
  .closing6 .tail-grid { grid-template-columns: 460px 260px;
    justify-content: center; gap: 110px; }
  .closing6 .tail-fine { max-width: 940px; margin: 0 auto; }
}

/* Search results, under the search panel. */
.search-results { padding: 6px 96px 22px; display: flex;
  flex-direction: column; }
.search-results[hidden] { display: none; }
.search-hit { font: 600 19px 'Source Sans 3', sans-serif; color: #0E5561;
  text-decoration: underline; text-decoration-color: #EFAB00;
  text-decoration-thickness: 2px; text-underline-offset: 5px;
  padding: 7px 0; cursor: pointer; }
.search-none { font-size: 18px; color: #5E7377; margin: 8px 0 4px; }
@media (max-width: 760px) { .search-results { padding: 6px 20px 18px; } }

/* A3 alignment repair: the two columns stretch to one height, so
   the auto margins can level the photograph and the warning box. */
.how .how-cols { align-items: stretch; }
.how .std-photo2 { margin-bottom: 0; line-height: 0; }
.how .std-photo2 img { display: block; }

/* The in-flow cover's photograph fills its column, like the
   daughter cover's own side photograph. */
.coverflow .stage-photo { margin: 0; align-self: stretch; }
.coverflow .stage-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .coverflow .stage-photo img { height: 300px; } }

/* The hero-height trims above are for the A1 hero only; the
   in-flow daughter cover keeps its full-height photograph. */
@media (min-width: 761px) {
  main > .stage.coverflow .stage-photo { align-self: stretch; height: auto; }
}

/* The in-flow cover carries a photograph, unlike the old text
   guide screen the two-column mobile rule was kept for: on
   phones it stacks like the hero. */
@media (max-width: 760px) {
  main > .stage.coverflow { grid-template-columns: 1fr; }
  main > .stage.coverflow .stage-photo { height: 300px; }
  .coverflow .stage-photo img { height: 100%; }
  main > .stage.coverflow .screen-mark { right: 20px; top: auto; bottom: 24px; }
}

@media (max-width: 760px) {
  main > .stage.coverflow .screen-mark { top: 76px; bottom: auto; }
}

/* The in-flow cover's E moves to the right (her ruling
   2026-11-09 19:12: anything crowded on the left moves right). */
.coverflow .screen-mark { left: auto; right: 40px; }
@media (max-width: 760px) {
  main > .stage.coverflow .screen-mark { left: auto; right: 20px; }
}

main > .stage.coverflow .screen-mark { left: auto; right: 40px; }
@media (max-width: 760px) {
  main > .stage.coverflow .screen-mark { left: auto; right: 20px; }
}
.coverflow .stage-photo img { object-position: 43% 30%; }

/* The mother closing draws closer to the middle (her ruling
   2026-11-09 19:19: not laid out so spread apart). */
.closing .tail-grid { grid-template-columns: 400px 250px; column-gap: 80px; }
.closing .tail-fine { max-width: 840px; }

.closing6 .tail-grid { grid-template-columns: 400px 250px; column-gap: 80px; }
.closing6 .tail-fine { max-width: 840px; }

/* Every clickable name carries the gold line (her ruling
   2026-11-09 19:22), and the closing hairline ends with the
   columns: the stretch out to the right is cut. */
.cat-row .cat-name { text-decoration: underline; text-decoration-color: #EFAB00; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.closing6 .tail-fine { max-width: 730px; }

/* The cover photograph widens to the right edge (her ruling
   2026-11-09 19:24): the white strip at the right goes, the
   bottle takes that room, bottle and tablets together in frame.
   The E sits in the middle, at the seam. */
@media (min-width: 761px) {
  main > .stage.coverflow { padding-right: 0; grid-template-columns: 1fr 470px; }
  main > .stage.coverflow .screen-mark { left: auto; right: 498px; }
}
.coverflow .stage-photo img { object-position: 64% 30%; }

/* Full-check fix (2026-11-09 20:35): the phone masthead
   clipped "For Daughters" mid-word and hid two links.
   On phones the row now wraps and every link shows. */
@media (max-width: 760px) {
  .mast-row { height: auto; min-height: 72px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
  .mast-right { flex-wrap: wrap; row-gap: 8px; }
  .mast-nav { flex-wrap: wrap; row-gap: 8px; }
  .mast-nav a:nth-child(2), .mast-nav a:nth-child(3) { display: inline; }
}

@media (max-width: 760px) {
  .mast-search { display: inline-block; }
}

/* Phone tightening (2026-11-09 20:41): body line-height
   1.60-1.65 and 66px section padding read scattered on a
   phone. Phones only; desktop untouched. */
@media (max-width: 760px) {
  .stage-line { line-height: 1.45; }
  .note5-body { line-height: 1.48; }
  .screen.note5 { padding-top: 44px; padding-bottom: 44px; }
}

/* ============================================================
   MOBILE REBUILD (2026-11-09 21:00, her order: 电脑先定版，
   手机重新编程，一屏一屏改）. One consolidated phone layer;
   desktop rules above are untouched. Sizes are set for a
   390-430px phone held in one hand.
   ============================================================ */
@media (max-width: 760px) {
  /* Masthead: compact — strip slimmer, tight nav rows. */
  .mast-strip { height: 44px; }
  .mast-row { min-height: 0; padding: 10px 16px 12px; row-gap: 10px; }
  .mast-mark img { width: 92px; }
  .mast-nav { gap: 8px 18px; }
  .mast-nav a, .mast-search, .mast-signin { font-size: 15px; }
  /* Hero: photo first and full width, headline fitted. */
  .stage { padding: 0 0 30px; }
  .stage-photo { margin: 0 0 22px; }
  .stage-photo img { width: 100%; height: 240px; object-fit: cover; }
  .stage-text { padding: 0 20px; }
  .stage-headline { font-size: 40px; line-height: 1.16; }
  .stage-line { font-size: 19px; line-height: 1.5; margin-top: 14px; }
  .stage-doors { display: flex; gap: 12px; margin-top: 20px; }
  .door-btn { flex: 1; text-align: center; padding: 14px 6px; font-size: 18px; }
  .stage-assess { margin-top: 16px; font-size: 17px; }
  .stage-note { font-size: 16px; letter-spacing: .14em; margin-top: 22px; }
  .states-panel { margin: 18px 20px 0; padding: 14px 16px; }
  /* Section rhythm on phones. */
  .screen { padding-left: 20px; padding-right: 20px; }
  .sec-title { font-size: 34px; }
  /* Products: rows stay one line, name + price. */
  .prod-name { font-size: 23px; }
  .prod-price { font-size: 16.5px; }
  .prod-eyebrow { margin-top: 30px; }
  /* Note: photo full width, text calm. */
  .note5-photo img, .note-photo img { width: 100%; height: 280px; object-fit: cover; }
  .note5-body { font-size: 19px; line-height: 1.52; }
  /* Daughter cover on the mother page. */
  .daughter-name { font-size: 44px; }
  .coverflow-photo img { width: 100%; height: 300px; object-fit: cover; }
}

/* Same viewport rule as the daughter side (2026-11-09
   21:02): desktop screens fill the window exactly, so one
   screen never shows the next screen's band. */
@media (min-width: 761px) {
  .screen { min-height: 100vh; }
}

/* Mobile rebuild, second pass: on phones the product price
   stays on the name's first line, right aligned — never
   drops underneath (seen in the first-pass render). */
@media (max-width: 760px) {
  .prod-row { display: flex; align-items: baseline; gap: 14px; }
  .prod-name { flex: 1 1 auto; }
  .prod-price { flex: 0 0 auto; margin-left: auto; text-align: right; white-space: nowrap; }
}

@media (max-width: 760px) {
  .prod-row { flex-wrap: nowrap; }
}

@media (max-width: 760px) {
  #series-hormone .prod-row { flex-wrap: nowrap; }
  #series-hormone .prod-price { margin-left: auto; }
}

/* The cover is the last screen: at one full viewport tall
   it can finally scroll until its gold band touches the
   top of the window (2026-11-09 21:07, her words: 黄线移
   不上去 — the page ran out of scroll before it). */
@media (min-width: 761px) {
  .stage.coverflow { min-height: 100vh; }
}

/* The A sits a touch lower in its screens (2026-11-09
   21:09, her photo of the steps screen: 「A 下移一点，
   别太多」). 76px → 92px. */
.screen .screen-mark { top: 92px; }

/* Prices right-align so every "/ month" ends on the same
   edge (2026-11-09 21:10, her photo of the products screen:
   「month 和 month 对齐」). */
.products .prod-row { display: flex; align-items: baseline; }
.products .prod-price { margin-left: auto; text-align: right; }

/* Desktop directory bar, Megs-style (2026-11-09 21:13, her
   words: 「应该是和megs一样 排到右边 一列」「电脑和手机
   是不同的」): on computers the nav is ONE row at the right,
   never wrapping, never clipped — at narrower windows the
   type and gaps step down so the row always fits. The phone
   layout below 760px is separate and untouched. */
@media (min-width: 761px) {
  .mast-row { flex-wrap: nowrap; }
  .mast-right, .mast-nav { flex-wrap: nowrap; }
  .mast-nav a, .mast-search, .mast-signin { white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .mast-row { padding-left: 40px; padding-right: 40px; }
  .mast-nav { gap: 16px; }
  .mast-nav a, .mast-search, .mast-signin { font-size: 14px; }
  .mast-mark img { width: 118px; }
}
@media (min-width: 761px) and (max-width: 940px) {
  .mast-row { padding-left: 24px; padding-right: 24px; }
  .mast-nav { gap: 11px; }
  .mast-nav a, .mast-search, .mast-signin { font-size: 12.5px; }
  .mast-mark img { width: 100px; }
}

/* Phone first screen fits one portrait screen (2026-11-09
   21:14: 「手机也应该是一屏一屏 竖屏」): masthead, photo,
   headline, line, doors and the assessment link together
   fill the first phone screen; the states panel follows. */
@media (max-width: 760px) {
  .mast-row { row-gap: 6px; padding-top: 8px; padding-bottom: 10px; }
  .mast-mark img { width: 84px; }
  .stage-photo img { height: 200px; }
  .stage-line { margin-top: 12px; }
  .stage-doors { margin-top: 16px; }
  .stage-assess { margin-top: 14px; }
}

/* The assessment link breaks before "Take" on phones only
   (2026-11-09 21:15, her words: 「把Take另起一行」);
   desktop keeps the single line. */
.mob-br { display: none; }
@media (max-width: 760px) { .mob-br { display: block; } }

/* Names that would wrap get a smaller size instead
   (2026-11-09 21:18, her rule: 「看到要回头的 就把字变
   小一点」): the series card names stay on one line. */
@media (max-width: 760px) {
  .cat-name { font-size: 25.5px; white-space: nowrap; }
}

@media (max-width: 760px) {
  #care .cat-name { font-size: 25.5px; }
}

/* Phone product rows: every price on its own line, the
   same for all rows (2026-11-09 21:19, her ruling: 「要么
   字变小 在一行 要么价格都另起一行」 — the longest names
   cannot share a line at a readable size, so all prices
   take their own line). Desktop keeps name + price on
   one line, right aligned. */
@media (max-width: 760px) {
  #series-hormone .prod-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  #series-hormone .prod-price { margin-left: 0; text-align: left; }
}

/* PHONE TYPE SCALE (2026-11-09 21:20, her ruling: 「手机
   版本 文字都要变小」「手机屏幕很小」): every phone size
   steps down; desktop untouched. */
@media (max-width: 760px) {
  .mast-nav a, .mast-search, .mast-signin { font-size: 13.5px; }
  .stage-title .ln { font-size: 34px; }
  .stage-line { font-size: 16.5px; }
  .door-btn { font-size: 16px; }
  .stage-assess a { font-size: 15px; }
  .state-chip { font-size: 16px; }
  .sec-title { font-size: 27px; }
  #care .cat-name { font-size: 23px; }
  .cat-note { font-size: 15.5px; }
  .std-name { font-size: 21px; }
  .std-line { font-size: 16.5px; }
  .only-gold { font-size: 34px; }
  .step-name { font-size: 20px; }
  .step-line { font-size: 16.5px; }
  .safety-name { font-size: 18px; }
  #series-hormone h3 { font-size: 25px; }
  #series-hormone .prod-name { font-size: 21px; }
  #series-hormone .prod-price { font-size: 16px; }
  .prod-hint-line { font-size: 16px; }
  .note5-body { font-size: 16.5px; }
  .note5-fr, .note5-en { font-size: 18px; }
  .search-input { font-size: 18px; }
}

@media (max-width: 760px) {
  .stage .ln { font-size: 34px; }
}

/* Phone marks sit in the white strip at each screen's top,
   clear of any photo (2026-11-09 21:21, her photo of the
   note screen: 「logo 在照片上」); the note photo also
   starts lower so the two never touch. */
@media (max-width: 760px) {
  .screen .screen-mark { top: 14px; }
  .screen.note5 { padding-top: 66px; }
}

/* Phone directory bar in two rows (2026-11-09 21:23, her
   design: 「留下划线吧 做成二排 点击」): wordmark above,
   six entries in two rows of three, each with the site's
   gold underline, all tappable. Desktop keeps the single
   right-hand row. */
@media (max-width: 760px) {
  .mast-right { display: flex; flex-wrap: wrap; width: 100%; row-gap: 10px; }
  .mast-nav { display: contents; }
  .mast-right > a, .mast-right > button, .mast-nav > a {
    flex: 0 0 33.33%; text-align: left; padding-bottom: 3px;
  }
  .mast-nav a, .mast-search, .mast-signin {
    text-decoration: underline; text-decoration-color: #EFAB00;
    text-decoration-thickness: 2px; text-underline-offset: 4px;
  }
}

/* Phone: no directory bar at all (2026-11-09 21:24, her
   final word: 「那就把目录删除」「越简单越好」) — the
   wordmark, the photo and the two door buttons carry the
   homepage. Desktop keeps its single right-hand row. */
@media (max-width: 760px) {
  .mast-right { display: none; }
}

/* Phone logos step down too (2026-11-09 21:26, her words:
   「手机版本 文字 logo 都变小吧」). */
@media (max-width: 760px) {
  .mast-mark img { width: 68px; }
  .screen .screen-mark { width: 30px; }
  #daughter .screen-mark { width: 23px; }
  .tail-logo { width: 88px; }
}

@media (max-width: 760px) {
  .closing6 .tail-logo { width: 88px; }
}

/* Phone screens sit one to a screen (2026-11-09 21:27,
   her ask: 「手机能不能设置一屏一屏的呢」): every screen
   is at least one phone-screen tall and scrolling rests
   screen by screen; lists longer than a screen flow on. */
@media (max-width: 760px) {
  html { scroll-snap-type: y proximity; }
  .stage, .screen { scroll-snap-align: start; min-height: 100vh; min-height: 100svh; }
  .stage { min-height: calc(100vh - 89px); min-height: calc(100svh - 89px); }
}

@media (max-width: 760px) {
  #how .sec-title { font-size: 27px; }
  #how .std-name { font-size: 21px; }
  #how .std-line { font-size: 16.5px; }
  #how .step-name { font-size: 20px; }
  #how .step-line { font-size: 16.5px; }
  #how .safety-name { font-size: 18px; }
}

/* DESKTOP TYPE SCALE (2026-11-09 21:31, her ruling: 「电脑
   版本 也小一号吧」「看着挺吓人的」): every desktop size
   steps down one notch; layout and alignment unchanged. */
@media (min-width: 761px) {
  .mast-nav a, .mast-search, .mast-signin { font-size: 14px; }
  .stage .ln { font-size: 58px; }
  .stage-line { font-size: 21px; }
  .door-btn { font-size: 18.5px; }
  .stage-note { font-size: 21px; }
  .state-chip { font-size: 17px; }
  #care .sec-title { font-size: 44px; }
  #care .cat-name { font-size: 27px; }
  .cat-note { font-size: 19px; }
  #how .sec-title { font-size: 27px; }
  #how .std-name { font-size: 22px; }
  #how .std-line { font-size: 18px; }
  #how .step-name { font-size: 20.5px; }
  #how .step-line { font-size: 18px; }
  #how .safety-name { font-size: 19px; }
  .only-gold { font-size: 35px; }
  #series-hormone h3 { font-size: 24px; }
  #series-hormone .prod-name { font-size: 23px; }
  #series-hormone .prod-price { font-size: 18px; }
  .prod-hint-line { font-size: 17px; }
  .prod-note { font-size: 15.5px; }
  .note5-body { font-size: 20.5px; }
  .note5-fr, .note5-en { font-size: 19px; }
  .tail-tag { font-size: 15.5px; }
  .search-input { font-size: 20px; }
}

/* Desktop prices sit close to their names (2026-11-09
   21:35, her photo of the live products screen: 「价格要
   靠近药品名称啊」「太散了」): no more push to the far
   edge, and the two columns draw together. Phone rows
   keep each price on its own line. */
@media (min-width: 761px) {
  .products .prod-price { margin-left: 20px; }
  #series-hormone .prod-cols { max-width: 1060px; margin-left: auto; margin-right: auto; column-gap: 72px; }
}

/* Every screen mark at the same place (2026-11-09 21:37,
   her words: 「logo 太上」「都应该在差不多位置」): top 92,
   right 96 on desktop, the A standard, cover included. */
@media (min-width: 761px) {
  .screen .screen-mark { top: 92px; right: 96px; }
  #daughter .screen-mark { top: 92px; right: 96px; }
}

@media (min-width: 761px) {
  #care .screen-mark { left: auto; }
}

/* Phone marks sit BELOW the colour band (2026-11-09 21:40,
   her phone photos: on every banded screen the A was half
   buried under the 40px band, 「系列的A都没有了」). Band 40
   + 14 gap = top 54, every mother screen, note included
   (its photo moves down to stay clear). */
@media (max-width: 760px) {
  .screen.screen-mark { top: 54px; }
  #daughter.screen-mark { top: 54px; }
  .screen.note5 { padding-top: 102px; }
}

@media (max-width: 760px) {
  .screen .screen-mark { top: 54px; }
  #daughter .screen-mark { top: 54px; }
}

/* Phone products: series apart, products close to their
   own series (2026-11-09 21:43, her words: 「系列和系列
   分开 药品和他自己的系列靠近点」「别都混一起」); a new
   theme starts on a new screen with air (「换一屏 要空
   一点」「内容不能连一起」): the note and the closing
   get a real gap before them. */
@media (max-width: 760px) {
  #series-hormone .prod-eyebrow { margin-top: 54px; margin-bottom: 2px; }
  #series-hormone .prod-col:first-child > .prod-eyebrow:first-child { margin-top: 10px; }
  #series-hormone .sec-title { margin-bottom: 4px; }
  #series-hormone .prod-list { margin-top: 2px; }
  .screen.note5 { margin-top: 12vh; }
  .screen.closing6 { margin-top: 12vh; }
}

/* Every gold line becomes the wave (2026-11-09 21:46, her
   words: 「黄线都改波浪线吧」「直线看了有点奇怪」). The
   colour stays gold: it is the wave inside the A itself. */
.cat-name, .products a.prod-name, .stage-assess a, .stage-enter,
.prod-corner-link, .search-hit, .closing6 .tail-feedback a,
.closing6 .tail-legal a, .mast-nav a, .mast-search, .mast-signin {
  text-decoration-style: wavy;
}

/* Clickable without a line (2026-11-09 21:52: the wave
   was 不好看， and the straight line 奇怪 before it; the
   other platforms underline nothing in their lists, the
   whole row is the link and a small arrow says go). The
   wave and the line both come off the names; a small
   gold arrow follows the name instead. Sentence links
   keep their thin straight line. */
.products a.prod-name, .cat-name {
  text-decoration: none;
}
.products a.prod-name::after, .cat-name::after {
  content: " \2192";
  color: #EFAB00;
  font-weight: 400;
}
.stage-assess a, .stage-enter, .prod-corner-link, .search-hit {
  text-decoration-style: solid;
}

/* Group zones (2026-11-09 21:56, her words: 「看不出谁和
   谁是一个区域」 after spacing alone): the wrapper is
   layout-transparent on desktop (display: contents, the
   approved arrangement is untouched); on phones each
   series becomes one soft warm block, name and products
   inside, white between blocks. */
.zone { display: contents; }
.products a.prod-name::after { content: "\00a0\2192"; }
@media (max-width: 760px) {
  .products .zone {
    display: block;
    background: #FAF6EC;
    border-radius: 16px;
    padding: 18px 16px 20px;
    margin-bottom: 16px;
  }
  .products .zone .prod-eyebrow { margin-top: 0; }
}

/* Phone titles step down (2026-11-09 22:01, her words:
   「手机不像电脑」 series names smaller on phones, rows
   a touch tighter, nothing sprawling). Desktop as
   approved. */
@media (max-width: 760px) {
  .products .sec-title { font-size: 25px; }
  .products .prod-row { line-height: 1.32; }
}

@media (max-width: 760px) {
  .products .zone { margin-bottom: 28px; }
}

/* Phone A4 order (2026-11-09 22:04, on her question
   about the mother series gaps): the two hint blocks
   sat between Series A2 and A3 in the stacked phone
   flow, opening a 254px hole in the rhythm. On phones
   the columns dissolve and the hints take their place
   after the last series, where they read as the list's
   footnote. Desktop keeps its approved arrangement. */
@media (max-width: 760px) {
  .products .prod-cols { display: flex; flex-direction: column; }
  .products .prod-col { display: contents; }
  .products .prod-hint { order: 99; }
}

/* Phone: no A or E marks (2026-11-09 22:07, her ruling:
   the phone screen is small and nobody minds the
   marks there; desktop keeps them). The wordmarks in
   the masthead and closing stay. The note screen's
   extra top air, which existed to clear its mark,
   relaxes with the mark gone. */
@media (max-width: 760px) {
  img.screen-mark { display: none; }
  .screen.note5 { padding-top: 76px; }
}

/* Desktop A4 prices right-align (2026-11-09 22:13, her
   ruling from the live photo: 「右对齐就行」 — this
   supersedes the afternoon's close-to-name spacing on
   desktop; name and price stay one row, every price in
   a column ends on the same right edge). Phones keep
   the price on its own line under the name. */
@media (min-width: 761px) {
  .products .prod-price { margin-left: auto; }
}

/* Prices close and bigger (2026-11-09 22:14, her words:
   「太散了 我说过很多次了 价格变大一点」 — the scatter
   was the complaint all along, so the prices come back
   next to the names and step up, the amount bold and
   largest, the same system as the daughter shelves). */
@media (min-width: 761px) {
  .products .prod-price { margin-left: 20px; font-size: 19px; }
  .products .prod-price .amt { font-size: 22px; }
}
@media (max-width: 760px) {
  .products .prod-price { font-size: 17px; }
  .products .prod-price .amt { font-size: 19px; }
}

@media (min-width: 761px) {
  .products .prod-row .prod-price { font-size: 19px; }
}

/* The ID rule from the type scale-down was holding the
   price at 18; meet it on its own ground. And on her
   word 「有距离就尽量往前挪」, the price moves up
   close behind the name. */
@media (min-width: 761px) {
  #series-hormone .prod-price { font-size: 19px; margin-left: 6px; }
}

/* Homepage logo down two notches, stage text nudged
   toward the middle (2026-11-09 22:20-22:21, her
   rulings from the live photos: 「还要往中间移一点」
   for the hero, 「稍微往下移」 for the daughter cover,
   「首页logo 太大了 变小二号」). Desktop only; the
   locked wordmark file itself is untouched, only its
   rendered height changes. */
@media (min-width: 761px) {
  .mast-mark img { height: 24px; }
  .stage .stage-text { padding-top: 144px; }
}

/* One link language, site-wide (2026-11-09 22:29, her
   final word: 「直线 波浪线都删除 都改箭头吧 都统一」):
   no straight line and no wave under any clickable
   text; a small gold arrow follows the name instead.
   The masthead menu stays plain text. */
.cat-name, .screen.care .cat-name, .cat-row .cat-name,
.products a.prod-name, .stage-assess a, .stage-enter,
.prod-corner-link, .search-hit,
.closing6 .tail-feedback a, .closing6 .tail-legal a,
.mast-nav a, .mast-search, .mast-signin {
  text-decoration: none; border-bottom: none;
}
.stage-assess a::after, .prod-corner-link::after,
.search-hit::after, .closing6 .tail-feedback a::after,
.closing6 .tail-legal a::after {
  content: "\00a0\2192"; color: #EFAB00;
}

/* Prices read as one aligned block (2026-11-09 22:31:
   「month 后面对齐」with the price kept close to the
   name): the name takes a fixed column, From holds a
   reserved slot whether it appears or not, the amount
   right-aligns, and the unit follows — so every
   "/ month" starts on the same line down the column.
   Desktop only; phones keep their own arrangement. */
@media (min-width: 761px) {
  .products .prod-row { display: flex; align-items: baseline; }
  .products .prod-name { flex: 0 0 262px; }
  .products .prod-price { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 6px; }
  .products .p-from { flex: 0 0 46px; }
  .products .prod-price .amt { flex: 0 0 94px; text-align: right; }
  /* The right-hand column's series stood too close
     together (22:31: 「A3-A5 系列之间分开点 别都混一起」,
     and there is room below): separate the groups. */
  .products .prod-group + .prod-group { margin-top: 46px; }
}

@media (min-width: 761px) {
  .products .prod-col + .prod-col .zone + .zone .prod-eyebrow { margin-top: 50px; }
}

@media (min-width: 761px) {
  .products .prod-name { flex: 0 0 304px; }
  .products .prod-price { flex-shrink: 0; gap: 5px; }
  .products .p-from { flex: 0 0 44px; }
  .products .prod-price .amt { flex: 0 0 90px; }
  .products .p-unit { white-space: nowrap; }
}

@media (min-width: 761px) {
  .products .prod-name { flex-shrink: 0; }
  .products .p-from { flex: 0 0 42px; }
  .products .prod-price { gap: 4px; }
  .products .prod-price .amt { flex-basis: 86px; }
  /* Daughter cover (2026-11-09 22:35, from her live
     photos: 「For Daughter 往下移 文字变小一点」):
     the cover words sit lower and the name is one
     notch smaller; the hero's own position is unchanged. */
  #daughter .stage-text { padding-top: 172px; }
  #daughter .daughter-name { font-size: 76px; }
  /* More of the tablets in frame (22:35: 「加几颗药」):
     the same real photo, its window shifted left so
     the scatter joins the bottle in the tall column. */
  #daughter .stage-photo img { object-position: 42% 50%; }
}

@media (min-width: 761px) {
  .products .prod-name { flex-basis: 312px; white-space: nowrap; }
}

/* Mid-width safety (2026-11-09 23:34, her laptop photo
   of the live A4: on a windowed or zoomed screen the
   two catalogue columns are too narrow for name plus
   price on one line, and Safari pushes the right
   column's prices off the screen entirely). Below
   1360 the catalogue runs in ONE column: every price
   sits close behind its name, units aligned. */
@media (min-width: 761px) and (max-width: 1359px) {
  .prod-cols { grid-template-columns: 1fr; }
  .prod-col + .prod-col { margin-top: 44px; }
  .prod-col .prod-eyebrow:first-child { margin-top: 0; }
}

/* Wide screens (2026-11-09 23:40, her direction on the
   call: prices a step forward toward their names, and
   much more air in the middle before the next column's
   names begin). */
@media (min-width: 1360px) {
  .prod-cols { gap: 0 110px; }
  .products .prod-name { flex-basis: 308px; }
}

/* Prices forward (2026-11-09 23:35, her order from
   her photo of the live page): the price cluster sat
   at the far right of each row, a wide empty gap
   after the name. The auto margin comes out; the
   cluster now starts right after the fixed name
   column, so every price sits forward, close to its
   name, and the From / amount / unit slots keep the
   units aligned down each column. */
@media (min-width: 761px) {
  #series-hormone .prod-name { flex: 0 1 auto; }
  #series-hormone .prod-price { margin-left: 2px; }
}

/* Her final word on prices (2026-11-09 23:41): the
   layout stays exactly as photographed; only the
   prices move forward. Amounts now sit tight behind
   From (no more wide empty slot before $23), while
   the / month column stays aligned at the back. */
.products .prod-price .amt { text-align: left; }


/* Steps on phones (2026-11-10 00:37): the same
   tightening as the daughter steps — the three
   steps sat too far apart. Desktop unchanged. */
@media (max-width: 760px) {
  .steps { gap: 26px; }
  .duo .steps { gap: 26px; }
  .step, .rx-steps .step { padding-top: 10px; }
  .how .steps .step { padding-top: 10px; }
}

/* Daughter cover E, final (2026-11-10 00:41, her
   correction): not on the photo, not over the title —
   the top-right corner of the WHITE frame, just left
   of the photo seam, at the usual mark height. The
   photo column is a fixed 470 wide, so the seam sits
   at 100% - 470px at every width. */
#daughter .screen-mark { right: auto; left: calc(100% - 516px); }

/* Homepage pass (2026-11-10 00:47, from her photos of
   the live page): the masthead wordmark steps up from
   24 to 28; the hero text and photo draw together
   toward the middle on wide screens instead of
   sitting at opposite edges; every gold arrow goes
   bold and a step larger so it can actually be seen. */
.mast-mark img { height: 40px; }
@media (min-width: 1200px) {
  main > .stage:not(.daughter) {
    grid-template-columns: minmax(0, 600px) 470px;
    justify-content: center;
    column-gap: 72px;
  }
}
.products a.prod-name::after, .cat-name::after,
.stage-assess a::after, .prod-corner-link::after,
.search-hit::after, .closing6 .tail-feedback a::after,
.closing6 .tail-legal a::after {
  font-weight: 700;
  font-size: 1.15em;
}

/* Hero text back up one notch (2026-11-10 00:50,
   her words: the bigger masthead had pushed the
   headline down; it returns up one grid step). */
main > .stage:not(.daughter) .stage-text { padding-top: 88px; }

/* Last line meets the box (2026-11-10 00:50, her
   words): the hero's last text row and the states
   box beside it share one bottom edge. */
@media (min-width: 1200px) {
  .stage-states { margin-top: 9px; }
}

/* Prices as one tight piece (2026-11-10 00:54, her
   live photo): no fixed slots — the price sits close
   behind the name, From and the amount are tight, and
   the amount and its unit are one connected piece
   ($100/month reads as a single whole). The old slot
   widths scattered the pieces in her browser. */
@media (min-width: 761px) {
  .products .prod-name { flex: 0 1 auto; }
  .products .prod-price { display: inline-flex; align-items: baseline; gap: 5px; margin-left: 6px; flex: 0 1 auto; }
  .products .p-from { flex: 0 0 auto; }
  .products .prod-price .amt { flex: 0 0 auto; text-align: left; }
}

/* Cover headline moves right (2026-11-10 01:05,
   her words): "For Daughter" sat too far left with
   the middle empty; the whole text block steps
   right toward the photo. */
#daughter .stage-text { margin-left: 64px; }

/* Hero sync pass (2026-11-10 01:12, her photos):
   1) The states box hung from the right edge under
      the photo and did not move with the text; it
      now sits in the text column's own flow, under
      the text, and moves with it at every width.
   2) The sentence above the two door buttons, and
      the buttons themselves, move up.
   3) The masthead logo steps a little right. */
@media (min-width: 761px) {
  main > .stage:not(.daughter) .stage-states { position: static; grid-column: 1; justify-self: start; width: 400px; margin-top: 30px; }
  .stage-line { margin-top: 8px; }
  .stage-doors { margin-top: 24px; }
}
.mast-mark { margin-left: 16px; }

/* All marks step down-left a little (2026-11-10
   01:13, her words): every A moves 24px left and
   24px down from wherever it sits, cover E too. */
.screen-mark { transform: translate(-24px, 24px); }

/* Phone cover: headline moves up (2026-11-10 08:36,
   her phone screenshot, item 1): the white gap
   between the photo and "For Daughter" was 145px;
   the text block's top padding closes most of it. */
@media (max-width: 760px) {
  #daughter .stage-text { padding-top: 16px; }
}

/* Phone batch (2026-11-10 morning, her numbered
   list; desktop untouched):
   - The phone logo was squeezed into a fixed box
     (68x40, object-fit fill) and looked deformed;
     it now keeps its real proportions and runs
     wider.
   - A cart symbol sits at the masthead's far right
     on phones only; the desktop masthead is
     unchanged (the cart is display:none there).
   - The stage grids no longer stretch their rows
     across the screen height, which was dumping a
     tall empty gap between each photo and its
     headline; rows pack at the top and the headline
     sits a fixed step under the photo. */
.mast-cart { display: none; }
@media (max-width: 760px) {
  .mast-mark img { width: auto; }
  .mast-cart { display: inline-flex; align-items: center; margin-left: auto; padding-left: 14px; }
  .stage { align-content: start; }
  main > .stage:not(.daughter) .stage-text { padding-top: 28px; }
  #daughter .stage-text { padding-top: 24px; }
}

/* Phone batch, second pass: the cart's first home
   sat inside .mast-right, which phones hide
   entirely; it now lives in the mast row itself.
   The hero photo also gives up its bottom margin
   so the headline step matches the cover's. */
@media (max-width: 760px) {
  main > .stage:not(.daughter) .stage-photo { margin-bottom: 0; }
  main > .stage:not(.daughter) .stage-text { padding-top: 10px; }
}

/* Phone marks, four pages only (2026-11-10, her
   words: not every page; put them where there is
   room): A on the series screen and the steps
   screen, at the top right where the air is; the
   cover's E at the bottom right of its white field.
   Everywhere else phone marks stay hidden, and
   desktop marks keep last night's places. */
@media (max-width: 760px) {
  #care .screen-mark, #how .screen-mark { display: block; position: absolute; top: 64px; right: 24px; left: auto; height: 28px; transform: none; }
  #daughter .screen-mark { display: block; position: absolute; top: auto; bottom: 28px; right: 24px; left: auto; height: 36px; transform: none; }
}

/* Series anchors land exactly on their series
   (2026-11-10): a breath of margin so the series
   heading is not flush with the screen top. */
#series-hormone .zone { scroll-margin-top: 14px; }

/* Phone prices and zone tops (2026-11-10, her
   items 5 and 6):
   - Each series group becomes a small table: the
     name on its own row, then From / amount / unit
     in shared columns at the right, so the amounts
     line up in a column and the units line up too.
     "Price at launch" rows simply right-align.
   - The series eyebrows lose the 54px top margin
     that left a tall empty band inside each tinted
     zone (her A2-A5 note; applied to all five zones
     alike so the page keeps one rhythm). */
@media (max-width: 760px) {
  #series-hormone .prod-list { display: grid; grid-template-columns: max-content max-content max-content; justify-content: end; column-gap: 5px; row-gap: 4px; }
  #series-hormone .prod-row { display: contents; }
  #series-hormone .prod-price { display: contents; }
  #series-hormone .prod-name { grid-column: 1 / -1; margin-top: 16px; }
  #series-hormone .prod-price .amt { text-align: right; }
  #series-hormone .prod-row:has(.prod-price:not(:has(.amt))) { display: block; grid-column: 1 / -1; }
  #series-hormone .prod-row:has(.prod-price:not(:has(.amt))) .prod-price { display: block; text-align: right; }
  #series-hormone .prod-row:has(.prod-price:not(:has(.amt))) .prod-name { margin-top: 16px; }
  #series-hormone .zone .prod-eyebrow { margin-top: 6px; }
}

/* Phone note text (2026-11-10, her item 7): the
   letter's long paragraph sets justified with
   hyphenation on phones, so the block reads full
   and even instead of ragged with a bite missing.
   The wording itself is untouched. */
@media (max-width: 760px) {
  .note5-body { text-align: justify; hyphens: auto; }
}

/* Gold arrows heavier still (2026-11-10 09:51, her
   words: 「黄的箭头加粗」— 700 still read thin on the
   homepage render, so every gold arrow goes to 900). */
.products a.prod-name::after, .cat-name::after,
.stage-assess a::after, .prod-corner-link::after,
.search-hit::after, .closing6 .tail-feedback a::after,
.closing6 .tail-legal a::after {
  font-weight: 900;
}

/* States box under the photo (2026-11-10 09:52, her
   words: 「框要在药片照片下面」). The photo and the box
   now travel as one right-hand column; on phones the
   wrapper dissolves so the phone order stays exactly
   as it was (photo, text, box). */
main > .stage .stage-states { position: static; width: auto; margin: 24px 0 0; left: auto; right: auto; top: auto; }
@media (max-width: 760px) {
  .stage-side { display: contents; }
}

/* Masthead and hero placement (2026-11-10 09:56, her
   words: logo right, the nav block left, its words
   bigger and bolder, a cart on desktop too, the photo
   down a step and a little smaller). Desktop only;
   the phone masthead keeps its own settled layout. */
@media (min-width: 761px) {
  .mast-mark { margin-left: 56px; }
  .mast-nav a, .mast-signin, .mast-search { font-size: 23px; font-weight: 600; }
  .mast-cart { display: inline-flex; align-items: center; }
  main > .stage:not(.daughter) .stage-photo { margin-top: 84px; width: 88%; }
  main > .stage:not(.daughter) .stage-states { width: 88%; }
}

/* Masthead fit at desktop widths (same 09:56 batch):
   with the cart shown, the row must still fit inside
   the window, so the nav gaps tighten. */
@media (min-width: 761px) {
  .mast-mark { margin-left: 40px; }
  .mast-right { gap: 24px; }
  .mast-nav { gap: 20px; }
  .mast-nav a, .mast-signin, .mast-search { font-size: 22px; }
}

/* Masthead fit, second pass (same 09:56 batch): the
   row's own padding narrows so logo, nav and cart all
   sit inside the window with the cart at the right. */
@media (min-width: 761px) {
  .mast-row { padding-left: 32px; padding-right: 32px; }
  .mast-right { gap: 20px; }
  .mast-nav { gap: 16px; }
}

/* Masthead fit, final pass (same 09:56 batch): font
   stays 22 and bold; the fit comes from the gaps and
   the logo's margin so all three pieces sit inside. */
@media (min-width: 761px) {
  .mast-mark { margin-left: 24px; }
  .mast-right { gap: 16px; }
  .mast-nav { gap: 12px; }
  .mast-nav a, .mast-signin, .mast-search { font-size: 21px; }
}

/* Masthead fit in the laptop band (same 09:56 batch):
   between 761 and 1199 the row tightens one step so
   the cart stays inside narrower windows too. */
@media (min-width: 761px) and (max-width: 1199px) {
  .mast-mark { margin-left: 16px; }
  .mast-right { gap: 12px; }
  .mast-nav { gap: 10px; }
  .mast-nav a, .mast-signin, .mast-search { font-size: 19px; }
}

/* Masthead fit in the laptop band, second pass (same
   09:56 batch): the band's nav is uppercase and wider,
   so it tightens once more; Sign In and the cart must
   both stay inside the window. */
@media (min-width: 761px) and (max-width: 1199px) {
  .mast-row { padding-left: 24px; padding-right: 24px; }
  .mast-mark { margin-left: 8px; }
  .mast-right { gap: 10px; }
  .mast-nav { gap: 8px; }
  .mast-nav a, .mast-signin, .mast-search { font-size: 17px; }
}

@media (min-width: 761px) and (max-width: 1099px) {
  .mast-right { gap: 8px; }
  .mast-nav { gap: 6px; }
  .mast-nav a, .mast-signin, .mast-search { font-size: 16px; }
}

/* Phone gold arrows clearly visible (2026-11-10
   10:00, her words: 「细了看不清」): on phones every
   gold arrow goes larger, to 900, with a hair of
   stroke so the glyph reads at arm's length. */
@media (max-width: 760px) {
  .products a.prod-name::after, .cat-name::after,
  .stage-assess a::after, .prod-corner-link::after,
  .search-hit::after, .closing6 .tail-feedback a::after,
  .closing6 .tail-legal a::after {
    font-weight: 900; font-size: 1.3em; -webkit-text-stroke: .6px #EFAB00;
  }
}

/* Phone prices: "From" hugs the amount (2026-11-10
   10:03, her words: 「from 能不能靠着$ 离那么远干嘛」):
   the word right-aligns inside its column so it sits
   right against the $. Amounts and units keep their
   aligned columns. */
@media (max-width: 760px) {
  .prod-list .p-from { text-align: right; }
}

/* Phone: products inside one series sit tighter
   (2026-11-10 10:04, her words: 「每一个系列里面的
   药品间距变小 他们是一个区域」). */
@media (max-width: 760px) {
  .prod-list { row-gap: 2px; }
  .prod-list .prod-name { margin-top: 10px; }
}

/* Phone: name and price pressed together (2026-11-10
   10:06, her words: 「价格和药品名称间距变小」「都要
   按一起」): no row gap inside a product, the price
   line sits right under its name. */
@media (max-width: 760px) {
  .prod-list { row-gap: 0; }
  .prod-list .prod-name { line-height: 1.15; }
  .prod-list .p-from, .prod-list .amt, .prod-list .p-unit { margin-top: 1px; }
}

@media (max-width: 760px) {
  .prod-list .p-from, .prod-list .amt, .prod-list .p-unit { line-height: 1.05; }
}

@media (max-width: 760px) {
  #series-hormone .prod-list { row-gap: 0; }
  #series-hormone .prod-name { margin-top: 10px; margin-bottom: 0; }
}

/* Phone: product names to the left edge (2026-11-10
   10:07, her words: 「药品名称往左对齐」): the name
   spans the full list width and aligns left with the
   series title; the price group keeps its right-side
   columns underneath. */
@media (max-width: 760px) {
  #series-hormone .prod-list { grid-template-columns: 1fr max-content max-content max-content; }
  #series-hormone .prod-name { text-align: left; }
  #series-hormone .p-from { grid-column: 2; }
}

/* Phone: name and price on ONE line (2026-11-10
   10:08, her words: 「文字都变小 价格在一排 排不下
   再分二排」): smaller type, the price rides on the
   name's line at the right; only a pair that truly
   cannot fit wraps to a second line. */
@media (max-width: 760px) {
  #series-hormone .prod-list { display: block; }
  #series-hormone .prod-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 12px; }
  #series-hormone .prod-name { grid-column: auto; margin: 0; font-size: 17.5px; text-align: left; }
  #series-hormone .prod-price { display: inline-flex; align-items: baseline; gap: 5px; margin-left: auto; }
  #series-hormone .p-from { grid-column: auto; font-size: 13.5px; }
  #series-hormone .amt { font-size: 16.5px; }
  #series-hormone .p-unit { font-size: 13.5px; }
}

@media (max-width: 760px) {
  #series-hormone .prod-row { column-gap: 10px; }
  #series-hormone .prod-name { flex: 0 1 auto; font-size: 17.5px; }
  #series-hormone .prod-price { margin-left: 0; }
}

@media (max-width: 760px) {
  #series-hormone .prod-row { flex-direction: row; align-items: baseline; }
}

@media (max-width: 760px) {
  #series-hormone .prod-name { font-size: 16px; }
}

@media (max-width: 760px) {
  #series-hormone .prod-price { margin-left: auto; }
}

/* Series label above its box, names one step smaller
   (2026-11-10 10:13, her words: 「把A1那行灰字挪到框
   上面去」「药品名称再变小」). */
#series-hormone .prod-eyebrow { margin: 22px 0 8px; }
@media (max-width: 760px) {
  #series-hormone .prod-name { font-size: 14.5px; }
}

/* Series title outside the box too (2026-11-10
   10:14, her words: 「系列名称也挪到框外面」): label
   and title above, the box holds only the medicines. */
#series-hormone .sec-title { margin: 0 0 10px; }

/* Phone: the tint box hugs its medicines (2026-11-10
   10:14, her words: 「框上下多余的切掉」). */
@media (max-width: 760px) {
  #series-hormone .zone { padding-top: 16px; padding-bottom: 14px; }
}

@media (max-width: 760px) {
  #series-hormone .prod-list { margin-top: 0; margin-bottom: 0; }
  #series-hormone .prod-row:first-child { margin-top: 0; }
}

@media (max-width: 760px) {
  #series-hormone .prod-name { font-size: 16px; }
}

/* Phone: series header smaller, right-aligned
   (2026-11-10 10:16, her words: 「系列变小 右对齐」). */
@media (max-width: 760px) {
  #series-hormone .prod-eyebrow { text-align: right; }
  #series-hormone .sec-title { text-align: right; font-size: 24px; }
}

@media (max-width: 760px) {
  #series-hormone .prod-name { font-size: 17.5px; }
}

/* Phone: the SERIES line stays left; only the series
   NAME goes right (2026-11-10 10:17, her words:
   「Series 那句话还是留在左边 只是把系列名称挪到
   右边」). */
@media (max-width: 760px) {
  #series-hormone .prod-eyebrow { text-align: left; }
}

/* Phone: the SERIES lines are dropped altogether
   (2026-11-10 10:18, her words: 「或者把手机的那几
   排series都删除吧」): only the series name remains
   above each box. */
@media (max-width: 760px) {
  #series-hormone .prod-eyebrow { display: none; }
}

@media (max-width: 760px) {
  #series-hormone .sec-title { font-size: 21px; }
}

/* Phone: EVERY product is one line, always (2026-11-10
   10:19, her words: 「要在一屏 最基本的」): names size
   down until name and price share the line; no wraps. */
@media (max-width: 760px) {
  #series-hormone .prod-row { flex-wrap: nowrap; }
  #series-hormone .prod-name { font-size: 14px; min-width: 0; }
  #series-hormone .prod-price { flex-shrink: 0; }
}

/* Phone gold arrows bolder still (2026-11-10 10:20,
   her words: 「黄色箭头还要加粗」). */
@media (max-width: 760px) {
  .products a.prod-name::after, .cat-name::after,
  .stage-assess a::after, .prod-corner-link::after,
  .search-hit::after, .closing6 .tail-feedback a::after,
  .closing6 .tail-legal a::after {
    font-size: 1.35em; -webkit-text-stroke: 1px #EFAB00;
  }
}

/* Desktop: clickable arrows bolder too (2026-11-10
   10:29, her words: 「电脑的点击线头也要变粗」), and
   the products screen's A mark rises to its title:
   the band deletion and the title move shortened
   this screen's top, leaving the mark floating by
   the medicine rows (her words: 「为什么这个logo
   掉下来了」). */
@media (min-width: 761px) {
  .products a.prod-name::after, .cat-name::after,
  .stage-assess a::after, .prod-corner-link::after,
  .search-hit::after, .closing6 .tail-feedback a::after,
  .closing6 .tail-legal a::after {
    -webkit-text-stroke: .6px #EFAB00;
  }
  #series-hormone .screen-mark { top: 30px; }
}

/* Phone: the daughter cover's E leaves the bottom
   corner (2026-11-10 10:33, her words: 「这算什么」)
   and takes the deliberate place beside the cover
   title, like every other screen's mark. */
@media (max-width: 760px) {
  #daughter .screen-mark { top: 46%; bottom: auto; }
}

@media (max-width: 760px) {
  #series-hormone .p-from { width: 34px; text-align: right; }
  #series-hormone .amt { width: 62px; text-align: right; }
  #series-hormone .p-unit { width: 50px; text-align: left; }
}
.prod-note { color: #EFAB00; font-size: 15px; }

@media (max-width: 760px) {
  #series-hormone { padding-left: 12px; padding-right: 12px; }
  #series-hormone .zone { padding-left: 6px; padding-right: 6px; }
  #series-hormone .p-from { width: 32px; }
  #series-hormone .amt { width: 69px; }
  #series-hormone .p-unit { width: 48px; }
  #series-hormone .prod-price { gap: 1px; }
  #series-hormone a.prod-name { letter-spacing: -0.3px; }
}

/* Masthead and catalogue mark, her review round of
   2026-11-10 10:44-10:45: logo and cart move inward
   (「logo 和购物车往中间移一点」), nav items spread
   (「栏目之间隔开一点」), nav letter-spacing tightens
   (「字间距可以变小一点」), and the catalogue's A
   rises to the eyebrow line (「A要往上移」). */
@media (min-width: 1200px) {
  .mast-mark { margin-left: 64px; }
}
@media (min-width: 761px) and (max-width: 1199px) {
  .mast-mark { margin-left: 40px; }
}
@media (min-width: 761px) {
  .mast-cart { margin-right: 40px; }
  .mast-nav { column-gap: 22px; }
  .mast-nav a { letter-spacing: 1.3px; }
  #series-hormone .screen-mark { top: -2px; }
}

@media (min-width: 761px) {
  .mast-cart { margin-right: 0; transform: translateX(-40px); }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .mast-cart { transform: translateX(-84px); }
}

/* THE MARK LAW (2026-11-10 10:46, her words: 「A 或者
   E 永远在右上角 不能掉下来」): every mark, every
   screen, one height at the top-right. And desktop
   prices take the same fixed columns as the phone
   (「价格数字对齐」, said twice). */
@media (min-width: 761px) {
  section .screen-mark, .stage .screen-mark { top: 32px !important; }
  #series-hormone .p-from { width: 46px; text-align: right; }
  #series-hormone .amt { width: 93px; text-align: right; }
  #series-hormone .p-unit { width: 70px; text-align: left; }
}
@media (max-width: 760px) {
  #daughter .screen-mark { top: 56px; bottom: auto; }
  #care.screen-mark, #how.screen-mark { top: 56px; }
}

@media (min-width: 761px) {
  #series-hormone .prod-row { display: grid; grid-template-columns: 311px 44px 93px 68px; column-gap: 6px; align-items: baseline; }
  #series-hormone .prod-price { display: contents; }
  #series-hormone .p-from, #series-hormone .amt, #series-hormone .p-unit { width: auto; }
  #series-hormone .prod-row:not(:has(.amt)) .prod-price { display: block; grid-column: 2 / 5; }
}

.tail-brand a { text-decoration: none; }
.tail-brand a::after { content: " \2192"; color: #EFAB00; font-weight: 900; }

/* The daughter cover carries NO mark (2026-11-10
   10:52, her order): the screen is important and
   stands alone. */
#daughter .screen-mark { display: none !important; }
.mast-cart, .mast-mark { text-decoration: none; }

/* The daughter cover, composed (2026-11-10, her
   layout): the E returns at the TOP-LEFT, the copy
   moves down to clear it, ENTER THE SHOP turns
   gold, and the photo is pulled a little toward
   its bottom-right — more pills, higher in frame. */
#daughter .screen-mark { display: block !important; right: auto; }
@media (min-width: 1200px) { #daughter .screen-mark { left: 214px; } }
@media (min-width: 761px) and (max-width: 1199px) { #daughter .screen-mark { left: 120px; } }
@media (max-width: 760px) { #daughter .screen-mark { left: 20px; } }
.coverflow .stage-enter { color: #EFAB00; }
@media (min-width: 761px) {
  .coverflow .stage-text { margin-top: 64px; }
  .coverflow .stage-photo img { object-position: 74% 42%; }
}
@media (max-width: 760px) {
  .coverflow .stage-text { margin-top: 28px; }
  .coverflow .stage-photo img { object-position: 60% 40%; }
}

@media (min-width: 1200px) { #daughter .screen-mark { left: 238px; } }
@media (min-width: 761px) {
  #daughter .screen-mark { top: 52px !important; }
  #daughter a.stage-enter { color: #EFAB00 !important; }
}

/* ENTER THE SHOP is gold at EVERY width (the
   first pass only caught the desktop — her phone
   screenshot, 2026-11-10 15:39). */
#daughter a.stage-enter { color: #EFAB00 !important; }

/* Five series, second row (2026-11-10, her
   orders): the three cards sit a little lower
   and breathe a little wider. First row and the
   outer edges do not move. */
@media (min-width: 761px) {
  #care .cat-row:nth-of-type(n+3) .cat-photo img,
  #care .cat-row:nth-of-type(n+3) .weight-photo img { height: 118px; }
  #care .cat-row:nth-of-type(3) { margin-right: 6px; }
  #care .cat-row:nth-of-type(4) { margin-left: 6px; margin-right: 6px; }
  #care .cat-row:nth-of-type(5) { margin-left: 6px; }
}

/* Evening round, 2026-11-10 (her review):
   card names never strand their arrow on the
   next line; the search box sits in the middle;
   the daughter cover copy moves a little down
   and right, its mark moving with the title. */
.cat-name { white-space: nowrap; }
.search-input { margin-inline: auto; }
.search-results { max-width: 560px; margin-inline: auto; }
@media (min-width: 761px) {
  section#daughter .stage-copy .stage-text { margin-top: 88px; margin-left: 24px; }
  section#daughter .cover-mark { left: 262px; }
}

/* Phone catalogue names one size up (2026-11-10,
   her order: too small to read). The one-line
   rule still holds; verified row by row. */
@media (max-width: 760px) {
  .products a.prod-name { font-size: 15px; }
}

/* Evening round 2, 2026-11-10 (her review):
   phone product names at 15 (the ID-layered
   rules needed the stronger word); the cover
   copy and its mark step down and right
   together; link arrows bigger and bolder;
   the closing screen's fine print rides up
   with its own screen, clear of the cover. */
@media (max-width: 760px) {
  .products a.prod-name { font-size: 15px !important; }
}
@media (min-width: 1200px) {
  section#daughter .stage-text { margin-top: 88px; margin-left: 88px; }
  section#daughter .screen-mark { left: 174px; top: 68px !important; }
}
.arr { font-size: 1.15em; font-weight: 700; }
.products a.prod-name::after, .cat-name::after { font-size: 1.12em; font-weight: 700; }
.closing6 .tail-fine { margin-top: 44px; }

/* The one phone name that outgrows 15px on its
   line keeps the line by tightening its spacing
   (same treatment as the daughter shelf's
   longest name). */
@media (max-width: 760px) {
  .products a.tight-name { letter-spacing: -1.2px !important; }
}

/* Phone cover copy up a little (2026-11-10,
   her order). */
@media (max-width: 760px) {
  section#daughter .stage-text { padding-top: 8px; }
}

/* Phone series cards shorter (2026-11-10, her
   order): the photo band drops from 150 to 104. */
@media (max-width: 760px) {
  .screen.care .cat-photo img, .screen.care .weight-photo img { height: 104px; }
}

/* The junction between the safety reminder and
   the catalogue (2026-11-10, her design): a gold
   band in flow, with air around it, because the
   reminder and the prices are two separate
   faces. Reminder text itself is gold, like the
   notice headings. */
.junction-band { position: static; height: 40px; background: #830051; margin-top: 40px; margin-bottom: 28px; }
.safety-note .safety-name { color: #EFAB00 !important; }
.products .prod-note { color: #EFAB00; }

/* The safety box pulled in tighter, its text a
   touch smaller (2026-11-10, her order); the 911
   sentence is deleted from the box, it is not
   website copy. */
.how .safety-note { padding: 13px 16px; gap: 12px; }
.how .safety-name { font-size: 19px; margin-bottom: 4px; }
.how .safety-line { font-size: 16px; line-height: 1.4; }

/* FULLCHECK 2026-11-10 — phone daughter cover: the photo is
   pulled right and down so the e mark rests on white at
   top-left (left 20, rel top 56), clear of the gold band
   above and the photo below. The photo row keeps its 300px
   height (108 margin + 192 photo), so the cover text does
   not move. Desktop cover untouched. */
@media (max-width: 760px) {
  section#daughter .stage-photo { margin: 4px 0 0 auto; width: 74%; height: 192px; }
  section#daughter .stage-photo img { height: 192px; }
}

/* FULLCHECK 2026-11-10 — phone closing screen: the late
   desktop rule (400px + 250px columns) had defeated the
   phone single-column rule, pushing the whole Contact
   column off-canvas. Restores one column on the phone;
   desktop closing untouched. */
@media (max-width: 760px) {
  .closing6 .tail-grid { grid-template-columns: 1fr; }
}

/* Desktop small text raised (2026-11-10, her
   order: nothing this small). Desktop only; the
   phone build does not follow. The note screen
   is untouched, it is frozen by her order. */
@media (min-width: 761px) {
  .states-label { font-size: 17px; }
  .prod-hint-label { font-size: 17px; }
  .closing6 h4 { font-size: 17px; }
  .closing6 .tail-fine p { font-size: 16.5px; }
  .closing6 .tail-legal a { font-size: 16.5px; }
}

/* Closing wordmark a little wider and centred,
   with Opening soon centred under it (2026-11-10,
   her order). Phone only; the desktop two-column
   closing does not follow. */
@media (max-width: 760px) {
  .closing6 .tail-logo { display: block; width: 120px; margin-inline: auto; }
  .closing6 .tail-tag { text-align: center; }
}

/* The daughter cover stands alone on the phone
   (2026-11-10, her order): a full screen of its
   own, a few extra empty lines at the bottom, so
   the previous screen never shows inside it. */
@media (max-width: 760px) {
  section#daughter { min-height: 100dvh; align-content: start; }
}

/* Homepage wordmark widened a little to the same
   proportion as the closing one, height unchanged
   (2026-11-10, her order; the widened logo is
   finalised as the standard). Nothing else moves. */
.mast-mark img { width: 120px; }

/* Type-up round (2026-11-10 late, her order: do
   them all in one go). Small text raised, links
   raised, A3 lines larger and darker, the
   products mark lifted above the copy, and the
   slash pulled tight against the amount. The
   frozen note screen is not touched. */
@media (min-width: 761px) {
  .door-btn { font-size: 20px; }
  .states-label { font-size: 19px; }
  .state-chip { font-size: 19px; }
  #how .std-line { font-size: 21px; }
  #how .std-note { font-size: 19px; color: #33565B; }
  #how .step-line { font-size: 21px; }
  .prod-hint-label { font-size: 19px; }
  .prod-hint-line { font-size: 19px; }
  #series-hormone .prod-note { font-size: 19px; }
  .closing6 .tail-tag { font-size: 19px; }
  .closing6 .tail-col h4 { font-size: 19px; }
  .closing6 .tail-fine p { font-size: 19px; }
  .closing6 a { font-size: 19px; }
  #series-hormone .screen-mark { top: 6px; }
  .prod-price .p-unit { margin-left: -3px; }
}
@media (max-width: 760px) {
  .stage-line { font-size: 18px; }
  .stage-note { font-size: 17.5px; }
  .door-btn { font-size: 18px; }
  .states-label { font-size: 17px; }
  .state-chip { font-size: 17px; }
  .cat-note { font-size: 17px; }
  #how .std-line { font-size: 19px; }
  #how .std-note { font-size: 17px; color: #33565B; }
  #how .step-line { font-size: 19px; }
  .prod-hint-label { font-size: 17px; }
  .prod-hint-line { font-size: 17.5px; }
  .closing6 .tail-col h4 { font-size: 17px; }
  .closing6 .tail-fine p { font-size: 16.5px; }
  .closing6 a { font-size: 17px; }
  .prod-price .p-from, .prod-price .p-unit { font-size: 15px; }
}

/* Type-up round, second pass (2026-11-10 late):
   the products mark above the copy at last, and
   the Tell-us link up with the other links. */
@media (min-width: 761px) {
  #series-hormone .screen-mark { top: 0px !important; }
  .closing6 .tail-feedback a { font-size: 19px; }
}

/* ================================================================
   2026-11-14 BATCH (her orders, one fix at a time, verified).
   Scoped overrides only; nothing else in this file is touched.
   ================================================================ */

/* Cart: bigger, and further left (desktop only). */
@media (min-width: 761px) {
  .mast-cart svg { width: 32px; height: 32px; }
  .mast-cart { transform: translateX(-56px); }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .mast-cart { transform: translateX(-36px); }
}

/* Mother shelf: From hugs the amount; amounts align in one column. */
@media (min-width: 761px) {
  #series-hormone .prod-row { grid-template-columns: 1fr 44px max-content 68px !important; }
}
@media (max-width: 760px) {
  #series-hormone .prod-price { gap: 5px !important; }
  #series-hormone .prod-row .amt { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; }
}

/* Shelf A: up (desktop), and the shelf content down a bit. */
@media (min-width: 761px) {
  #series-hormone .screen-mark { transform: translateY(-16px); }
  #series-hormone { padding-top: 30px; }
}
/* Shelf rows: tighter line spacing. */
#series-hormone .prod-row { padding-top: 3px !important; padding-bottom: 3px !important; }

/* How section: the A sits above the content, not on its row (phones). */
@media (max-width: 760px) {
  .screen.how .screen-mark { top: 40px !important; }
}

/* Note photo: full head on phones (object-position to the top). */
@media (max-width: 760px) {
  .note5-photo img { object-position: 50% 0%; }
}
/* Note photo: thin plum band directly above it (her one exception). */
.note5-photo::before { content: ""; display: block; height: 14px; background: #830051; }

/* Daughter cover: F aligns with the photo's left edge (phones). */
@media (max-width: 760px) {
  #daughter .stage-text { margin-left: 81px !important; }
}

/* Gold band: a few lines of air above it (phones). */
@media (max-width: 760px) {
  #daughter { margin-top: 56px; }
}

/* Closing fine print: paragraphs separated a bit more. */
.closing6 .tail-fine p { margin-bottom: 20px; }
.closing6 .tail-fine p:last-child { margin-bottom: 0; }