/* =============================================================
   order-sales.css — remarketing ORDER page (additions)
   Loads AFTER order.css. Only the new sales pieces + the two
   version states live here; shared components come from order.css.
   ============================================================= */

:root {
  --sage:      #868C4A;   /* brand sage — used ONLY for the sticky attention CTA */
  --sage-deep: #6E7539;
}

/* ===== Version gating (generic / personal) ===== */
body.is-generic .v-personal { display: none !important; }
body.is-personal .v-generic { display: none !important; }
/* name token span in the hero eyebrow — inherits eyebrow styling, never highlighted */
.oc-name { color: inherit; font: inherit; }

/* ===== Bigger CTA across the page ===== */
.btn--xl { padding: 24px 46px; font-size: clamp(17px, 1.5vw, 21px); }
@media (max-width: 900px) { .btn--xl { width: 100%; justify-content: center; padding: 20px 28px; } }

/* personal already has the hero card as its first CTA — drop the duplicate band */
body.is-personal .ctaband { display: none; }
.ctaband { background: var(--cream); padding-block: clamp(36px, 7vw, 88px); text-align: center; }
.ctaband__inner { max-width: 640px; margin: 0 auto; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 30px); }
.ctaband__meta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; font-size: 13px; letter-spacing: 0.03em; color: var(--blush); }
.ctaband__meta span { display: inline-flex; align-items: center; gap: 9px; }
.ctaband__meta i { width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold-deep); display: inline-block; }

/* ===== S03 · "מה עוד לא פגשת" — progress 1/7 + checklist ===== */
.meet { background: var(--sand); }
.meet__inner { text-align: center; }
.meet__inner .eyebrow { display: block; }
.progress { max-width: 720px; margin: 0 auto clamp(30px, 4vw, 44px); text-align: start; background: var(--cream); border: 1px solid var(--line); padding: clamp(22px, 3vw, 32px); }
.progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.progress__label { font-family: var(--f-body); font-weight: 600; font-size: var(--fs-b-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blush); }
.progress__count { font-family: var(--f-display); font-size: var(--fs-d-s); color: var(--brown-ink); direction: rtl; }
.progress__count b { color: var(--accent-deep); }
.progress__bar { display: flex; gap: 6px; }
.progress__seg { flex: 1; height: 12px; background: var(--sand-2); border: 1px solid var(--line); position: relative; overflow: hidden; }
.progress__seg.is-done { background: var(--accent); border-color: var(--accent-deep); }
.progress__seg.is-done::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,252,245,0.18) 0 4px, transparent 4px 8px); }
.progress__seg.is-next { border-color: var(--accent); animation: segNext 1.35s var(--ease) infinite; }
@keyframes segNext { 0%, 100% { background: var(--sand-2); box-shadow: none; } 50% { background: var(--accent); box-shadow: 0 0 0 3px rgba(203,136,116,0.28); } }
@media (prefers-reduced-motion: reduce) { .progress__seg.is-next { animation: none; background: rgba(203,136,116,0.35); } }
.progress__caption { margin: 16px 0 0; font-size: var(--fs-b-s); line-height: 1.6; color: var(--brown); }
.meet__lead { font-family: var(--f-display); font-size: var(--fs-d-l); line-height: 1.2; color: var(--brown-ink); margin: 0 0 clamp(20px, 2.6vw, 28px); text-wrap: balance; }
.checklist { list-style: none; margin: 0 auto; padding: 0; max-width: 680px; text-align: start; display: flex; flex-direction: column; gap: 14px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--fs-b-m); line-height: 1.6; color: var(--brown-ink); }
.checklist__ico { flex: none; width: 24px; height: 24px; border: 1px solid var(--accent); display: grid; place-items: center; margin-top: 2px; }
.checklist__ico::after { content: ""; width: 15px; height: 15px; background: var(--accent-deep); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat; }

/* ===== S04 · price point (emphasis, NOT a discount comparison) ===== */
.pricepoint { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0 0 clamp(26px, 3.2vw, 36px); }
.pricepoint__amount { font-family: var(--f-display); font-size: var(--fs-d-xxl); line-height: 0.9; color: var(--brown-ink); }
.pricepoint__cur { font-family: var(--f-display); font-size: var(--fs-d-m); color: var(--accent-deep); }
.pricepoint__note { flex-basis: 100%; font-family: var(--f-body); font-size: var(--fs-b-xs); letter-spacing: 0.04em; color: var(--blush); margin-top: 6px; }

/* single opening testimonial (testi-1) */
.soloshot { max-width: 420px; margin: clamp(34px, 4.6vw, 56px) auto 0; }
.soloshot img { width: 100%; height: auto; border: 1px solid var(--line); background: var(--cream); padding: 12px; }
.soloshot figcaption { font-size: var(--fs-b-xs); color: var(--blush); text-align: center; padding-top: 12px; letter-spacing: 0.03em; }

/* ===== S05b · after the cards (generic) ===== */
.afterbf { background: var(--cream); }
.afterbf__inner { text-align: center; }
.afterbf__lead { font-family: var(--f-display); font-size: var(--fs-d-l); line-height: 1.18; color: var(--brown-ink); margin: 0 0 20px; text-wrap: balance; }
.afterbf__lead em { font-family: var(--f-hand); font-style: normal; color: var(--accent-deep); }

/* ===== S06 · moments ===== */
.moments { background: var(--sand); }
.moments__head { text-align: center; max-width: 640px; margin: 0 auto clamp(34px, 4.4vw, 52px); }
.moments__head .h2 { margin-bottom: 14px; }
.moments__head .lede { margin-inline: auto; }
.moments__list { list-style: none; margin: 0 0 clamp(30px, 4vw, 46px); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.8vw, 34px); }
.moment { border-top: 1px solid var(--line); padding-top: 20px; }
.moment__num { font-family: var(--f-display); font-size: var(--fs-d-l); color: var(--blush); direction: ltr; display: block; margin-bottom: 12px; }
.moment__body { font-size: var(--fs-b-m); line-height: 1.7; color: var(--brown); margin: 0; }
.moment__body b { color: var(--brown-ink); font-weight: 600; }
.moments__punch { position: relative; text-align: center; max-width: 52ch; margin: clamp(30px, 4.4vw, 48px) auto 0; padding: clamp(26px, 3.6vw, 40px) clamp(24px, 4vw, 46px); background: var(--cream); border: 1px solid var(--line); }
.moments__punch p { margin: 0; font-family: var(--f-display); font-size: var(--fs-d-m); line-height: 1.3; color: var(--brown-ink); text-wrap: balance; }
.moments__punch-mark { position: absolute; inset-block-start: 0; inset-inline-start: 50%; transform: translate(50%, -50%) rotate(45deg); width: 13px; height: 13px; background: var(--accent); }

/* ===== S07 · recap (personal, short reminder) ===== */
.recap { background: var(--cream); }
.recap__head { text-align: center; max-width: 640px; margin: 0 auto clamp(34px, 4.4vw, 52px); }
.recap__head .h2 { margin-bottom: 14px; }
.recap__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 30px); max-width: 900px; margin-inline: auto; }
.recap__item { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: start; border-top: 1px solid var(--line); padding-top: clamp(18px, 2.2vw, 26px); }
.recap__num { font-family: var(--f-display); font-size: var(--fs-d-l); color: var(--accent); line-height: 0.9; direction: ltr; }
.recap__title { font-family: var(--f-display); font-size: var(--fs-d-m); color: var(--brown-ink); margin: 0 0 8px; }
.recap__body p { margin: 0; font-size: var(--fs-b-m); line-height: 1.7; color: var(--brown); }
.recap__body b { color: var(--brown-ink); font-weight: 600; }

/* ===== S08 · recognised gift chapter (personal) ===== */
.already { background: var(--brown); color: var(--cream); }
.already__head { text-align: center; max-width: 640px; margin: 0 auto clamp(34px, 4.4vw, 50px); }
.already__head .eyebrow { color: var(--gold); }
.already__head .h2 { color: var(--cream); margin-bottom: 14px; }
.already__head .lede { color: rgba(255,252,245,0.8); margin-inline: auto; }
.already__card { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: clamp(26px, 4vw, 60px); align-items: start; margin: 0 auto; }
.already__cover { position: relative; max-width: 300px; margin: 0 auto; border: 1px solid rgba(237,204,148,0.4); box-shadow: 0 40px 80px rgba(0,0,0,0.45); overflow: hidden; }
.already__cover img { width: 100%; height: auto; display: block; }
/* veil — reads "text intentionally hidden", cover stays recognisable on top */
.already__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,17,12,0) 34%, rgba(21,17,12,0.5) 62%, rgba(21,17,12,0.86) 100%); pointer-events: none; }
.already__seal {
  position: absolute; inset-block-start: 14px; inset-inline-start: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--gold); color: var(--brown-ink);
  font-family: var(--f-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em;
  padding: 7px 13px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}
.already__seal svg { width: 15px; height: 15px; }
.already__side .body { color: rgba(255,252,245,0.86); margin: 0 0 clamp(20px, 2.6vw, 28px); }
.already__side .body b { color: var(--gold); font-weight: 600; }
.already__side .eyebrow { color: var(--gold); }
.already__side .h2 { color: var(--cream); margin-bottom: 12px; }
.already__side .lede { color: rgba(255,252,245,0.82); }
.already__note { font-family: var(--f-hand); font-size: var(--fs-h-m); color: var(--gold); margin: 0 0 14px; }

/* ===== S12 · Checkout — product card, notes (from your-book vocab) ===== */
.co__product { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.2vw, 24px); background: linear-gradient(180deg, #FFFBF2 0%, #FBF3E2 100%); border: 1px solid var(--gold-deep); padding: clamp(22px, 2.8vw, 32px); margin-bottom: clamp(28px, 3.4vw, 40px); }
.co__product-name { font-family: var(--f-display); font-size: var(--fs-d-m); color: var(--brown-ink); margin: 0 0 14px; line-height: 1.18; }
.co__product-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.co__product-list li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-b-s); line-height: 1.5; color: var(--brown); }
.co__product-list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; transform: rotate(45deg); border: 1px solid var(--gold-deep); }
.co__product-aside { display: flex; align-items: flex-start; }
.co__product-price { display: flex; align-items: baseline; gap: 7px; }
.co__product-price .amt { font-family: var(--f-display); font-size: var(--fs-d-xl); line-height: 0.9; color: var(--brown-ink); }
.co__product-price .cur { font-family: var(--f-display); font-size: var(--fs-d-m); color: var(--gold-deep); }
.co__contact-note, .co__birth-help { font-size: var(--fs-b-s); line-height: 1.6; color: var(--blush); margin: -6px 0 16px; }
.co__birth-help a { color: var(--accent-deep); border-bottom: 1px solid var(--line); }
.co__birth-note { font-size: var(--fs-b-s); line-height: 1.6; color: var(--brown-ink); font-weight: 600; margin: -6px 0 18px; display: flex; gap: 9px; align-items: flex-start; }
.co__birth-note::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; transform: rotate(45deg); background: var(--gold-deep); }
@media (min-width: 700px) { .co__product { grid-template-columns: 1fr auto; align-items: center; } }

/* ===== Field states — empty highlight + filled ✓ (indicator lives on the label row, never over the value) ===== */
/* empty required field — kept calm/neutral so the fresh form feels inviting */
.field.is-empty-hint { background: var(--cream); }
.field.is-empty-hint .field__label { color: var(--blush); }
.field.is-filled { background: rgba(134,140,74,0.11); }
/* required field still empty after a blocked submit */
.field.is-error { background: rgba(190,70,55,0.1); box-shadow: inset 0 0 0 1.5px rgba(178,58,44,0.85); }
.field.is-error .field__label { color: #a83a2c; }
.field.is-filled .field__label { color: var(--sage-deep); display: inline-flex; align-items: center; gap: 7px; }
.field.is-filled .field__label::after {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--sage);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}
/* copy emphasis + section closings */
/* generic "what is HD" is cream so it doesn't merge with the sand testimonials that follow */
.whatis.v-generic { background: var(--cream); }
.whatis__cta { text-align: center; margin-top: clamp(34px, 4.4vw, 56px); }
.whatis__body .hand { font-size: 1.62em; line-height: 1; color: var(--accent-deep); }
/* buttons with a longer two-part label get room between the lines */
.btn { line-height: 1.3; row-gap: 3px; }
/* birth-time helper note should breathe, not hug the field box */
.co__birth-help { margin-top: 16px; margin-bottom: 22px; }
/* lead sits closer to the hero copy */
.lead { padding-top: clamp(4px, 0.8vw, 14px); }
/* generic: no scroll cue, and pull the lead up close to the hero copy */
body.is-generic .hero__scrollcue { display: none; }
body.is-generic .lead { padding-top: 0; }
/* personal hero punch line, above the scroll cue */
.hero__hook { font-family: var(--f-display); font-size: var(--fs-d-l); line-height: 1.14; color: var(--brown-ink); margin: clamp(14px, 2vw, 24px) auto 0; max-width: none; text-wrap: balance; }
.hero__hook em { font-family: var(--f-hand); font-style: normal; color: var(--accent-deep); }

/* personal hero card — compact "your chart is ready" strip inside the hero */
.herocard { width: min(440px, 100%); margin: clamp(20px, 3vw, 30px) auto 0; text-align: start; background: var(--cream); border: 1px solid var(--gold-deep); box-shadow: 0 18px 44px rgba(61,45,28,0.09); padding: clamp(18px, 2.4vw, 24px); }
.herocard__lead { margin: 0 0 14px; font-size: var(--fs-b-s); line-height: 1.5; color: var(--brown); }
.herocard__facts { list-style: none; margin: 0 0 clamp(16px, 2vw, 20px); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.herocard__facts li { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--cream); }
.herocard__facts li[data-fact="name"], .herocard__facts li[data-fact="place"] { grid-column: 1 / -1; }
.herocard__k { font-size: var(--fs-b-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blush); }
.herocard__v { font-family: var(--f-display); font-size: var(--fs-d-s); font-weight: 500; color: var(--brown-ink); }
.herocard__v.is-missing { font-family: var(--f-body); font-size: var(--fs-b-xs); font-weight: 500; font-style: italic; letter-spacing: 0.02em; color: var(--blush); }
.herocard__facts li:has(.is-missing) { background: var(--sand); }
/* mini 1/7 progress inside the card */
.herocard__prog { margin: 0 0 clamp(16px, 2vw, 20px); }
.herocard__prog-bar { display: flex; gap: 4px; margin-bottom: 8px; }
.herocard__prog-bar i { flex: 1; height: 7px; background: var(--sand-2); border: 1px solid var(--line); }
.herocard__prog-bar i.is-done { background: var(--accent); border-color: var(--accent-deep); }
.herocard__prog-label { font-size: var(--fs-b-xs); letter-spacing: 0.02em; color: var(--blush); }
.herocard__prog-label b { color: var(--accent-deep); font-family: var(--f-display); }
.herocard__cta { width: 100%; justify-content: center; padding: 16px 22px; font-size: 15.5px; }
.herocard__cta .btn__price { font-size: 17px; font-weight: 700; }
.herocard__edit { display: inline-flex; align-items: center; gap: 6px; margin: 12px auto 0; width: fit-content; font-size: var(--fs-b-xs); color: var(--blush); border-bottom: 1px solid transparent; }
.herocard__edit svg { width: 13px; height: 13px; }
.herocard__edit:hover { color: var(--accent-deep); border-color: var(--line); }
.herocard[hidden] { display: none; }
body.is-generic .herocard { display: none !important; }
/* keep the price on one line with its currency mark */
.btn__price { white-space: nowrap; }
/* first CTA is wider */
.ctaband .btn { min-width: min(460px, 100%); justify-content: center; }
/* accent colour for the hand-written emphases in the generic lead line */
.lead__hook .hand { color: var(--accent-deep); }

/* ===== Conversion boosts ===== */
/* quiet trust anchor under the first CTA */
.ctaband__trust { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-b-xs); letter-spacing: 0.02em; color: var(--blush); margin: 6px 0 0; text-wrap: pretty; }
.ctaband__trust svg { width: 15px; height: 15px; flex: none; color: var(--sage-deep); }

/* "you've already sampled" levers */
.flip__tease { margin: clamp(16px, 2.4vw, 24px) auto 0; text-align: center; font-family: var(--f-hand); font-size: var(--fs-h-m); line-height: 1.4; color: var(--gold); max-width: 40ch; }
.already__tease { margin: 16px 0 0; text-align: center; font-family: var(--f-hand); font-size: var(--fs-h-s); color: var(--gold); }

/* checkout micro-progress */
/* (legacy costeps removed — replaced by card-based checkout below) */

/* SSL note with a small lock */
.form-submit-note { display: flex; align-items: center; justify-content: center; gap: 6px; }
.form-submit-note svg { width: 14px; height: 14px; flex: none; color: var(--sage-deep); }

/* ===== Card-based checkout ===== */
.cof { display: flex; flex-direction: column; gap: 14px; }
.cocard { border: 1px solid var(--line); background: var(--cream); transition: border-color var(--fast), background var(--fast); }
.cocard.is-waiting { border-color: var(--line); background: var(--cream); }
.cocard.is-active { border-color: var(--accent); box-shadow: 0 10px 30px rgba(61,45,28,0.06); }
.cocard.is-complete { border-color: var(--sage); background: rgba(134,140,74,0.06); }
.cocard__head { width: 100%; display: flex; align-items: center; gap: 14px; padding: clamp(16px, 2vw, 22px); background: none; border: 0; cursor: pointer; text-align: start; font-family: inherit; }
.cocard__num { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-family: var(--f-display); font-size: 15px; color: var(--blush); transition: all var(--fast); }
.cocard.is-active .cocard__num { border-color: var(--accent); color: var(--accent-deep); }
.cocard.is-complete .cocard__num { border-color: var(--sage); background: var(--sage); color: transparent; font-size: 0; }
.cocard.is-complete .cocard__num::after { content: ""; width: 16px; height: 16px; background: var(--cream); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat; }
.cocard__titles { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cocard__title { font-family: var(--f-display); font-size: var(--fs-d-s); color: var(--brown-ink); }
.cocard__summary { font-size: var(--fs-b-xs); color: var(--sage-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cocard:not(.is-complete) .cocard__summary { display: none; }
.cocard__state { flex: none; width: 20px; height: 20px; color: var(--blush); position: relative; transition: transform var(--fast); }
.cocard__state::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-inline-end: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.cocard[data-open="false"] .cocard__state::after { transform: translateY(1px) rotate(-135deg); }
.cocard.is-complete .cocard__state { color: var(--sage-deep); }
/* completed card shows a small pencil (edit) instead of the chevron */
.cocard.is-complete .cocard__state::after { border: 0; width: 15px; height: 15px; transform: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center/15px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center/15px no-repeat; }
.cocard__body { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.cocard[data-open="true"] .cocard__body { max-height: 720px; }
.cocard__body > * { margin-inline: clamp(16px, 2vw, 22px); }
.cocard__body > :last-child { margin-bottom: clamp(18px, 2.2vw, 24px); }
.cocard__body .fgrid { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .cocard__body { transition: none; } }

/* segmented toggle */
.cotoggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--sand-2); border: 1px solid var(--line); padding: 4px; margin-bottom: 16px; }
.cotoggle input { position: absolute; opacity: 0; pointer-events: none; }
.cotoggle label { position: relative; z-index: 2; text-align: center; padding: 11px 10px; font-size: var(--fs-b-s); color: var(--brown); cursor: pointer; transition: color var(--fast); user-select: none; }
.cotoggle__thumb { position: absolute; z-index: 1; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 4px); background: var(--cream); border: 1px solid var(--gold-deep); box-shadow: 0 4px 12px rgba(61,45,28,0.08); transition: transform var(--fast); }
.cotoggle:has(#forOther:checked) .cotoggle__thumb { transform: translateX(-100%); }
.cotoggle:has(#forSelf:checked) label[for="forSelf"],
.cotoggle:has(#forOther:checked) label[for="forOther"] { color: var(--brown-ink); font-weight: 600; }

.cofield-note { font-size: var(--fs-b-xs); line-height: 1.5; color: var(--blush); margin: 7px clamp(16px, 2vw, 22px) 0; }
.coorderer { margin-bottom: 4px; }
.coorderer[hidden] { display: none; }

/* inline help toggle (sits under the birth-place field) */
.cohelp-toggle { display: inline-block; background: none; border: 0; padding: 0; margin: 9px clamp(16px, 2vw, 22px) 0; font-family: inherit; font-size: var(--fs-b-xs); color: var(--accent-deep); cursor: pointer; border-bottom: 1px solid var(--line); }
.cohelp[hidden] { display: none; }
.cohelp { margin-top: 10px; background: var(--sand); border-inline-start: 3px solid var(--gold-deep); padding: 12px 16px; }
.cohelp p { margin: 0; font-size: var(--fs-b-s); line-height: 1.6; color: var(--brown); }
.cohelp a { color: var(--accent-deep); border-bottom: 1px solid var(--line); }

/* ready line before the button — guiding text, becomes the reward when all complete */
.co__ready { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 4px 0 0; font-family: var(--f-hand); font-size: var(--fs-h-m); color: var(--blush); transition: color var(--fast); }
.co__ready.is-ready { color: var(--sage-deep); }
.co__ready.is-ready::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--sage); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat; }
/* checkout content needs side gutter so it doesn't hug the screen edge on mobile */
.form-sec__inner { padding-inline: var(--gutter); }
/* scroll cue also on desktop */
.hero__scrollcue { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-top: clamp(22px, 3vw, 40px); color: var(--blush); animation: cueBounce 1.8s var(--ease) infinite; }
.hero__scrollcue svg { width: 24px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .hero__scrollcue { animation: none; } }
/* mobile: layout only — type sizing is handled by the fluid scale tokens */
@media (max-width: 900px) {
  .brk { display: none; }
}
/* eyebrows above the section titles — larger so they actually read */
.eyebrow { font-size: var(--fs-d-s); letter-spacing: 0.2em; }
.lead__accent { font-weight: 600; color: var(--brown-ink); border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.layers__close { position: relative; max-width: 60ch; margin: clamp(30px, 3.8vw, 50px) auto 0; padding-top: clamp(24px, 2.8vw, 34px); text-align: center; }
.layers__close::before { content: ""; position: absolute; top: 0; inset-inline-start: 50%; transform: translateX(50%); width: 46px; height: 2px; background: var(--accent); }
.layers__close p { margin: 0; font-family: var(--f-display); font-size: var(--fs-d-m); line-height: 1.3; color: var(--brown-ink); text-wrap: balance; }
.recap__close { position: relative; max-width: 60ch; margin: clamp(30px, 3.8vw, 50px) auto 0; padding-top: clamp(24px, 2.8vw, 34px); font-size: var(--fs-b-m); line-height: 1.75; color: var(--brown); text-align: center; text-wrap: pretty; }
.recap__close::before { content: ""; position: absolute; top: 0; inset-inline-start: 50%; transform: translateX(50%); width: 46px; height: 2px; background: var(--accent); }
/* a filled field that arrived pre-filled from the chart — soft entrance pulse once */
.field.is-prefilled { animation: fieldSettle 900ms var(--ease) both; }
@keyframes fieldSettle { 0% { background: rgba(134,140,74,0.3); } 100% { background: rgba(134,140,74,0.11); } }
@media (prefers-reduced-motion: reduce) { .field.is-prefilled { animation: none; } }

/* ===== City autocomplete dropdown ===== */
.place-wrap { position: relative; }
.place-dropdown {
  position: absolute; top: calc(100% + 2px); right: 0; left: 0; z-index: 120;
  background: var(--cream); border: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(61,45,28,0.13);
  list-style: none; margin: 0; padding: 0;
  max-height: 240px; overflow-y: auto; overflow-x: hidden;
}
.place-dropdown[hidden] { display: none; }
.place-dropdown__item {
  padding: 9px 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--line);
}
.place-dropdown__item:last-child { border-bottom: none; }
.place-dropdown__item:hover,
.place-dropdown__item:focus { background: var(--sand); outline: none; }
.place-dropdown__primary { font-size: 13.5px; color: var(--brown-ink); }
.place-dropdown__secondary { font-size: 11.5px; color: var(--brown); opacity: 0.65; direction: ltr; text-align: right; }

/* ===== Sticky CTA — sage, occasional pulse ===== */
.sticky--sage .btn {
  --btn-bg: var(--sage); --btn-fg: var(--cream);
  background: var(--sage); border-color: var(--sage); color: var(--cream);
}
.sticky--sage .btn:hover { background: var(--sage-deep); border-color: var(--sage-deep); }
.sticky--sage.is-visible { animation: stickyPulse 7s var(--ease) 2s infinite; }
@keyframes stickyPulse {
  0%, 82%, 100% { transform: none; box-shadow: 0 18px 44px rgba(61,45,28,0.28); }
  86% { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 0 0 rgba(134,140,74,0.55), 0 18px 44px rgba(61,45,28,0.28); }
  92% { transform: none; box-shadow: 0 0 0 16px rgba(134,140,74,0), 0 18px 44px rgba(61,45,28,0.28); }
}
@media (prefers-reduced-motion: reduce) { .sticky--sage.is-visible { animation: none; } }

/* ===== dev/simulate panel ===== */
.devkit { position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 90; font-family: var(--f-body); }
.devkit__tab { background: var(--brown-ink); color: var(--cream); border: 0; padding: 9px 16px; font-size: 12.5px; letter-spacing: 0.06em; cursor: pointer; box-shadow: 0 10px 30px rgba(61,45,28,0.3); }
.devkit__panel { display: none; position: absolute; inset-block-end: 44px; inset-inline-end: 0; width: 260px; background: var(--cream); border: 1px solid var(--line); padding: 16px; box-shadow: 0 30px 70px rgba(61,45,28,0.3); }
.devkit.is-open .devkit__panel { display: block; }
.devkit.is-open .devkit__tab { background: var(--accent-deep); }
.devkit__x { position: absolute; top: 8px; inset-inline-end: 10px; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--blush); cursor: pointer; }
.devkit__title { font-family: var(--f-display); font-size: 16px; color: var(--brown-ink); margin: 0 0 12px; }
.devkit__row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.devkit__row label { font-size: 11px; letter-spacing: 0.06em; color: var(--blush); }
.devkit__row select, .devkit__row input { border: 1px solid var(--line); background: var(--cream); padding: 7px 8px; font-family: var(--f-body); font-size: 13px; color: var(--brown-ink); }
.devkit__actions { display: flex; gap: 8px; margin-top: 4px; }
.devkit__actions .btn { flex: 1; padding: 9px 10px; font-size: 12.5px; }

/* ===== Hero personal greeting — reads as a warm line, not a tracked label ===== */
.hero__eyebrow--greet { display: block; text-transform: none; letter-spacing: 0.01em; font-weight: 500; font-size: var(--fs-b-s); color: var(--brown); max-width: 40ch; margin-inline: auto; line-height: 1.6; }
.hero__eyebrow--greet::before, .hero__eyebrow--greet::after { display: none; }

/* ===== GPT Objection Block ===== */
.gptb{max-width:840px;margin:0 auto;background:var(--cream);border:1px solid var(--line);font-family:var(--f-body)}
.gptb__sum{list-style:none;display:grid;grid-template-columns:1fr auto;align-items:start;gap:clamp(16px,2vw,28px);padding:clamp(24px,2.8vw,34px) clamp(20px,2.6vw,32px);cursor:pointer}
.gptb__sum::-webkit-details-marker{display:none}
.gptb__eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;font-weight:500}
.gptb__q{font-family:var(--f-display);font-size:clamp(24px,2.6vw,32px);line-height:1.25;color:var(--fg);margin:0;transition:color var(--fast)}
.gptb__peek{display:flex;flex-direction:column;gap:clamp(18px,2vw,24px);margin:clamp(18px,2vw,24px) 0 0}
.gptb__peek p{margin:0;font-size:clamp(15.5px,1.3vw,17px);line-height:1.85;color:var(--fg);text-wrap:pretty}
.gptb__more{margin:clamp(18px,2vw,22px) 0 0;font-size:13.5px;letter-spacing:.02em;color:var(--accent-deep);text-decoration:underline;text-underline-offset:4px;transition:color var(--fast)}
.gptb__sum:hover .gptb__more{color:var(--accent)}
.gptb[open] .gptb__more{display:none}
.gptb__plus{width:22px;height:22px;margin-top:8px;color:var(--brown);transition:transform var(--med) var(--ease),color var(--fast);flex:none}
.gptb[open] .gptb__plus{transform:rotate(45deg);color:var(--accent)}
.gptb__sum:hover .gptb__q,.gptb[open] .gptb__q{color:var(--accent-deep)}
.gptb__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--med) var(--ease)}
.gptb[open] .gptb__body{grid-template-rows:1fr}
.gptb__inner{overflow:hidden}
.gptb__pad{padding:clamp(24px,2.6vw,30px) clamp(20px,2.6vw,32px) clamp(26px,3vw,34px);border-top:1px solid var(--line)}
.gptb__story{display:flex;flex-direction:column;gap:clamp(18px,2vw,24px);margin:0 0 clamp(26px,3vw,34px)}
.gptb__story p{margin:0;font-size:clamp(15.5px,1.3vw,17px);line-height:1.85;color:var(--fg);text-wrap:pretty}
.gptb__quote{font-weight:600;color:var(--accent-deep)}
.gptb__cols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.gptb__col{background:var(--cream-2);padding:clamp(18px,2vw,24px)}
.gptb__col--book{background:#F6EFE3}
.gptb__col-h,.gptb__col p.gptb__col-h{font-family:var(--f-body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-subtle);margin:0 0 12px}
.gptb__col--book .gptb__col-h,.gptb__col--book p.gptb__col-h{color:var(--accent)}
.gptb__col p{margin:0;font-family:var(--f-display);font-weight:300;font-size:clamp(19px,1.8vw,23px);line-height:1.6;color:var(--fg)}
.gptb__col--book p{font-weight:400}
.gptb__after{margin:clamp(26px,3vw,34px) 0 0;font-size:clamp(17px,1.5vw,19px);font-weight:500;line-height:1.75;color:var(--fg);text-wrap:pretty;max-width:56ch}
.gptb__aside{margin:clamp(20px,2.2vw,26px) 0 0;border-top:1px solid var(--line);padding-top:clamp(16px,1.8vw,20px);font-size:13.5px;line-height:1.7;color:var(--fg-subtle)}
@media (max-width:620px){.gptb__cols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gptb__body{transition:none}}
.hero__eyebrow--greet .oc-name { font-weight: 700; color: var(--brown-ink); }

/* ===== Value context (650) — factual, not a struck-through comparison ===== */
.valuectx { max-width: 58ch; margin: 0 auto clamp(24px, 3vw, 34px); padding: 16px 22px; border: 1px solid var(--line); border-inline-start: 3px solid var(--gold-deep); background: var(--cream-2); text-align: start; }
.valuectx p { margin: 0; font-size: var(--fs-b-s); line-height: 1.7; color: var(--brown); }
.valuectx b { color: var(--brown-ink); font-weight: 600; }

/* ===== Recognised gift chapter — mini flipbook of her own book ===== */
.phone__screen { container-type: inline-size; }
.already__book { position: relative; width: fit-content; margin: 0 auto; }
.already__book .already__seal { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; z-index: 6; }
.already__book .flip__swipehint { display: block; margin-top: 14px; text-align: center; color: rgba(237,204,148,0.7); }
.already__book .flip__controls { justify-content: center; }
.already__book .flip__arrow { border-color: rgba(237,204,148,0.4); color: var(--gold); }
.already__book .flip__arrow:hover { border-color: var(--gold); background: rgba(237,204,148,0.1); }
.already__book .flip__dot { background: rgba(237,204,148,0.32); }
.already__book .flip__dot.is-active { background: var(--gold); transform: scale(1.3); }
.already__name { position: absolute; top: 11.6%; left: 0; right: 0; z-index: 3; pointer-events: none; text-align: center; padding: 0 5%; font-family: var(--f-display); font-weight: 400; font-size: 10cqw; line-height: 1.08; color: #6f6656; text-wrap: balance; }

/* ===== Responsive ===== */
@media (max-width: 760px) {
  .moments__list { grid-template-columns: 1fr; gap: 16px; }
  .already__card { grid-template-columns: 1fr; gap: 26px; }
  .recap__item { grid-template-columns: auto 1fr; }
  /* hero should not center itself into the middle of the screen — start near the top */
  .hero { min-height: auto; display: block; padding-block: clamp(20px, 6vw, 34px) clamp(22px, 7vw, 36px); }
  .hero__scrollcue { margin-top: clamp(16px, 4vw, 24px); }
  /* first CTA band — trim the big whitespace on mobile */
  .ctaband { padding-block: clamp(38px, 11vw, 64px); }
}