/* ===========================================================================
   THE BODY - Gift Certificates, phone + tablet (<= 1079px). On top of css/mobile.css.
   Adaptation (no mobile frames in Figma). See MOBILE-CONTRACT.md.
   Section ids from css/gift-certificates.css. The builder, the treatment cards, the
   occasion cards, the four steps and the FAQ become section-level CSS grids, so that
   the groups the desktop draws with absolute coordinates stay groups in a column:
   each empty background div (.step / .summary / .gcard / .occ) spans its card's rows
   and paints under the copy placed on top of it. Card gaps are a top margin on the
   background, card padding is a margin on the first / last row (--cp).
   =========================================================================== */

.page { --cp: clamp(22px, 4.2cqw, 30px); }

/* small tracked labels stay on one line (their Figma box is only as wide as the desktop text) */
.page .sec .t.hk.up.nw { width: auto; }

/* ---------- certificate card (hero 292:39, preview 293:69, closing 296:70) ----------
   The card's copy becomes a short column; the cream ornament stays absolute on the right
   edge, cut by the card as on desktop. Phones get a smaller ornament in the top-right
   corner (below) so the message can use the card's full width. */
.page .sec .cert {
  width: min(100%, 460px); height: auto; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px 28px 26px; border-radius: 22px;
}
.page .sec [data-f="292:39"] { width: min(100%, 520px); }
.page .sec .cert > .a { width: auto; max-width: 60%; }
.page .sec .cert > .orn {
  position: absolute; left: auto; right: -17%; top: 7%;
  width: auto; height: 86%; aspect-ratio: 1; max-width: none;
}
.page .sec .cert > :nth-child(3) { margin-top: 38px; }        /* GIFT CERTIFICATE */
.page .sec .cert > :nth-child(4) { margin-top: 8px; }         /* the amount */
.page .sec .cert > .cert-msg { margin-top: 30px; }
.page .sec .cert > :last-child { margin-top: 24px; }          /* TB-••••-•••• */
.page .sec .cert > .cert-msg { -webkit-line-clamp: 3; }

/* ---------- 01 hero: label, title, copy, the two buttons side by side, the card ---------- */
.page .sec[data-f="292:3"] { flex-direction: row; flex-wrap: wrap; column-gap: 12px; }
.page .sec[data-f="292:3"] > :not(.btn) { flex-basis: 100%; }
.page .sec[data-f="292:3"] > [data-f="292:30"] { margin-top: 4px; }
.page .sec[data-f="292:3"] > .btn { margin-top: 10px; }
.page .sec[data-f="292:3"] > .cert { flex-basis: auto; margin-top: 44px; }

/* ---------- 02 the builder ----------
   Columns: card padding | step ring | gap | content | card padding.
   Rows: step 1 (1-3), step 2 (4-8), step 3 (9-11), Preview label (12), card (13),
   summary (14-20). The date field (row 7) only exists while "Schedule a date" is on. */
.page .sec[data-f="293:2"] > .builder-in {
  width: 100%;
  display: grid;
  grid-template-columns: var(--cp) 36px 14px minmax(0, 1fr) var(--cp);
  align-items: start;
}
.page .sec[data-f="293:2"] > .builder-in > * { grid-column: 2 / 5; width: auto; }
.page .sec[data-f="293:2"] > .builder-in > .step,
.page .sec[data-f="293:2"] > .builder-in > .summary { grid-column: 1 / -1; align-self: stretch; height: auto; border-radius: 22px; }
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:4"]  { grid-row: 1 / 4; }
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:29"] { grid-row: 4 / 9; margin-top: 14px; }
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:48"] { grid-row: 9 / 12; margin-top: 14px; }
.page .sec[data-f="293:2"] > .builder-in > .summary          { grid-row: 14 / 21; margin-top: 14px; }

/* step heads: ring + heading */
.page .sec[data-f="293:2"] > .builder-in > .step-ring { grid-column: 2; width: 36px; height: 36px; align-self: center; }
.page .sec[data-f="293:2"] > .builder-in > h2 { grid-column: 4 / 5; align-self: center; margin-bottom: 0; }
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:6"],
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:8"]  { grid-row: 1; margin-top: var(--cp); }
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:31"],
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:33"] { grid-row: 4; margin-top: calc(14px + var(--cp)); }
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:50"],
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:52"] { grid-row: 9; margin-top: calc(14px + var(--cp)); }

/* step 1: tabs, then the open panel (chips + help text, or chips + note) */
.page .sec[data-f="293:2"] > .builder-in > .tabs { grid-row: 2; margin-top: 22px; }
.page .sec[data-f="293:2"] > .builder-in > [data-panel] {
  grid-row: 3; margin: 20px 0 var(--cp);
  display: flex; flex-direction: column; align-items: stretch; gap: 16px;
}
.page .sec[data-f="293:2"] .builder-in [data-panel] > .a { width: 100%; }
.page .sec[data-f="293:2"] .builder-in .tab { min-height: 44px; padding: 12px 28px 12px 0; font-size: 15px; line-height: 20px; }

/* chips: wrapping rows of 44px pills */
.page .sec[data-f="293:2"] .builder-in .chips { width: 100%; gap: 8px; }
.page .sec[data-f="293:2"] .builder-in .chip {
  min-height: 44px; padding: 0 18px;
  font-size: 14.5px; line-height: 19px;
}

/* step 2: delivery chips, then the fields full width */
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:35"] { grid-row: 5; margin-top: 22px; }
.page .sec[data-f="293:2"] > .builder-in > #f-email { grid-row: 6; margin-top: 16px; }
.page .sec[data-f="293:2"] > .builder-in > #f-date  { grid-row: 7; margin-top: 10px; }
.page .sec[data-f="293:2"] > .builder-in > #f-name  { grid-row: 8; margin: 10px 0 var(--cp); }

/* step 3: message, then the presets */
.page .sec[data-f="293:2"] > .builder-in > #f-msg { grid-row: 10; margin-top: 22px; height: 112px; }
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:57"] { grid-row: 11; margin: 14px 0 var(--cp); }

/* fields: full width, 52px tall; 16px type so iOS does not zoom the page on focus */
.page .sec[data-f="293:2"] .builder-in .field {
  width: 100%; min-width: 0; min-height: 52px;
  padding: 15px 18px; border-radius: 14px;
  font-size: 16px; line-height: 20px;
}
.page .sec[data-f="293:2"] .builder-in .field.is-narrow { width: 100%; }
.page .sec[data-f="293:2"] .builder-in .field::placeholder { font-size: 14.5px; }
.page .sec[data-f="293:2"] .builder-in input.field { height: 52px; text-overflow: ellipsis; }   /* the long "Print at home" placeholder ends in "…", not a cut letter */
.page .sec[data-f="293:2"] .builder-in [data-panel] > .field { width: 100%; }
.page .sec[data-f="293:2"] .builder-in .field::-webkit-date-and-time-value { text-align: left; }

/* preview: label + card, right above the summary */
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:67"] { grid-row: 12; margin-top: 40px; }
.page .sec[data-f="293:2"] > .builder-in > .cert { grid-row: 13; grid-column: 1 / -1; width: 100%; margin-top: 12px; justify-self: center; }

/* summary: label left, value right on each row, a hairline under each */
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:82"],
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:83"] { grid-row: 14; margin-top: calc(14px + var(--cp) - 4px); }
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:81/rule"] { grid-row: 15; }
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:85"],
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:86"] { grid-row: 16; }
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:84/rule"] { grid-row: 17; }
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:88"],
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:89"] { grid-row: 18; }
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:87/rule"] { grid-row: 19; }
.page .sec[data-f="293:2"] > .builder-in > .k-mute.up:not([data-f="293:67"]) { justify-self: start; align-self: baseline; margin-bottom: 14px; }
.page .sec[data-f="293:2"] > .builder-in > .r {
  justify-self: end; align-self: baseline; margin-bottom: 14px;
  max-width: calc(100% - 96px); white-space: normal; text-align: right;
}
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:85"],
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:86"],
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:88"],
.page .sec[data-f="293:2"] > .builder-in > [data-f="293:89"] { margin-top: 14px; }
.page .sec[data-f="293:2"] > .builder-in > #continue { grid-row: 20; width: auto; justify-self: stretch; min-height: 56px; margin: 22px 0 var(--cp); }

/* ---------- 03 gift an experience: four cards, one per row ----------
   Columns: card padding | copy | price | card padding. Five rows per card
   (label, title, copy, hairline, duration + price). The full-card link overlay spans
   the same rows and columns as the card's background, so the whole card stays a link. */
.page .sec[data-f="294:2"] {
  display: grid;
  grid-template-columns: var(--cp) minmax(0, 1fr) auto var(--cp);
  column-gap: 0; row-gap: 0; align-items: start;
}
.page .sec[data-f="294:2"] > * { grid-column: 2 / 4; width: auto; }
.page .sec[data-f="294:2"] > [data-f="294:5"],
.page .sec[data-f="294:2"] > [data-f="294:6"],
.page .sec[data-f="294:2"] > [data-f="294:7"],
.page .sec[data-f="294:2"] > [data-f="294:50"] { grid-column: 1 / -1; }
.page .sec[data-f="294:2"] > [data-f="294:5"] { grid-row: 1; margin-bottom: 16px; }
.page .sec[data-f="294:2"] > [data-f="294:6"] { grid-row: 2; margin-bottom: 18px; }
.page .sec[data-f="294:2"] > [data-f="294:7"] { grid-row: 3; margin-bottom: 18px; }
.page .sec[data-f="294:2"] > [data-f="294:50"] { grid-row: 25; margin-top: 24px; white-space: normal; }

.page .sec[data-f="294:2"] > .gcard,
.page .sec[data-f="294:2"] > .gcard-link { grid-column: 1 / -1; align-self: stretch; height: auto; margin-top: 14px; border-radius: 22px; }
.page .sec[data-f="294:2"] > .gcard-link { z-index: 1; }
/* touch screens have no hover: the "Gift this" cue stays visible as the card's tap hint */
.page .sec[data-f="294:2"] > .gcard-link::after {
  top: calc(var(--cp) + 1px); right: var(--cp);
  font-size: 11px; line-height: 14px; letter-spacing: 1.8px;
  opacity: 1; translate: 0 0;
}
.page .sec[data-f="294:2"] > .k-clay { margin-top: calc(14px + var(--cp)); padding-right: 96px; }   /* category label, clear of the cue */
.page .sec[data-f="294:2"] > h3 { margin-top: 12px; }
.page .sec[data-f="294:2"] > p.hl, .page .sec[data-f="294:2"] > p.mono { margin-top: 12px; }
.page .sec[data-f="294:2"] > [data-f="294:50"] { margin-top: 24px; }
.page .sec[data-f="294:2"] > .rule { margin-top: 24px; }
.page .sec[data-f="294:2"] > [data-f="294:21"], .page .sec[data-f="294:2"] > [data-f="294:34"],
.page .sec[data-f="294:2"] > [data-f="294:47"], .page .sec[data-f="294:2"] > [data-f="388:95"] { grid-column: 2; align-self: baseline; margin: 14px 0 var(--cp); }
.page .sec[data-f="294:2"] > .r { grid-column: 3; align-self: baseline; margin: 14px 0 var(--cp) 12px; text-align: right; }
.page .sec[data-f="294:2"] > [data-f="388:91"] { white-space: normal; }

.page .sec[data-f="294:2"] > [data-f="294:10"], .page .sec[data-f="294:2"] > [data-f="294:10/link"] { grid-row: 4 / 9; }
.page .sec[data-f="294:2"] > [data-f="294:13"] { grid-row: 4; }
.page .sec[data-f="294:2"] > [data-f="294:15"] { grid-row: 5; }
.page .sec[data-f="294:2"] > [data-f="294:17"] { grid-row: 6; }
.page .sec[data-f="294:2"] > [data-f="294:20/rule"] { grid-row: 7; }
.page .sec[data-f="294:2"] > [data-f="294:21"], .page .sec[data-f="294:2"] > [data-f="294:22"] { grid-row: 8; }
.page .sec[data-f="294:2"] > [data-f="294:23"], .page .sec[data-f="294:2"] > [data-f="294:23/link"] { grid-row: 9 / 14; }
.page .sec[data-f="294:2"] > [data-f="294:26"] { grid-row: 9; }
.page .sec[data-f="294:2"] > [data-f="294:28"] { grid-row: 10; }
.page .sec[data-f="294:2"] > [data-f="294:30"] { grid-row: 11; }
.page .sec[data-f="294:2"] > [data-f="294:33/rule"] { grid-row: 12; }
.page .sec[data-f="294:2"] > [data-f="294:34"], .page .sec[data-f="294:2"] > [data-f="294:35"] { grid-row: 13; }
.page .sec[data-f="294:2"] > [data-f="294:36"], .page .sec[data-f="294:2"] > [data-f="294:36/link"] { grid-row: 14 / 20; }
.page .sec[data-f="294:2"] > [data-f="294:39"] { grid-row: 14; }
.page .sec[data-f="294:2"] > [data-f="294:41"] { grid-row: 15; }
.page .sec[data-f="294:2"] > [data-f="294:43"] { grid-row: 16; }
.page .sec[data-f="294:2"] > [data-f="294:36/soon"] { grid-row: 17; grid-column: 2; justify-self: start; margin-top: 18px; }   /* cedar: Coming Soon pill, not giftable for now (2026-10-28) */
.page .sec[data-f="294:2"] > [data-f="294:46/rule"] { grid-row: 18; }
.page .sec[data-f="294:2"] > [data-f="294:47"], .page .sec[data-f="294:2"] > [data-f="294:48"] { grid-row: 19; }
.page .sec[data-f="294:2"] > [data-f="388:84"], .page .sec[data-f="294:2"] > [data-f="388:84/link"] { grid-row: 20 / 25; }
.page .sec[data-f="294:2"] > [data-f="388:87"] { grid-row: 20; }
.page .sec[data-f="294:2"] > [data-f="388:89"] { grid-row: 21; }
.page .sec[data-f="294:2"] > [data-f="388:91"] { grid-row: 22; }
.page .sec[data-f="294:2"] > [data-f="388:94/rule"] { grid-row: 23; }
.page .sec[data-f="294:2"] > [data-f="388:95"], .page .sec[data-f="294:2"] > [data-f="388:96"] { grid-row: 24; }

/* ---------- 04 two minutes: the four steps as a vertical timeline ----------
   Ring in the left column, the sage line threading the rings, copy to the right. */
.page .sec[data-f="294:51"] {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 18px; row-gap: 0; align-items: start;
}
.page .sec[data-f="294:51"] > * { grid-column: 2; width: auto; }
.page .sec[data-f="294:51"] > [data-f="294:52"] { grid-column: 1 / -1; grid-row: 1; margin-bottom: 16px; }
.page .sec[data-f="294:51"] > [data-f="294:54"] { grid-column: 1 / -1; grid-row: 2; margin-bottom: 36px; }
.page .sec[data-f="294:51"] > .ring44 { grid-column: 1; width: 44px; height: 44px; }
.page .sec[data-f="294:51"] > [data-f="294:58"] { grid-row: 3 / 5; }
.page .sec[data-f="294:51"] > [data-f="294:65"] { grid-row: 5 / 7; }
.page .sec[data-f="294:51"] > [data-f="294:72"] { grid-row: 7 / 9; }
.page .sec[data-f="294:51"] > [data-f="294:79"] { grid-row: 9 / 11; }
.page .sec[data-f="294:51"] > h3 { margin-top: 6px; }
.page .sec[data-f="294:51"] > [data-f="294:61"] { grid-row: 3; }
.page .sec[data-f="294:51"] > [data-f="294:68"] { grid-row: 5; }
.page .sec[data-f="294:51"] > [data-f="294:75"] { grid-row: 7; }
.page .sec[data-f="294:51"] > [data-f="294:82"] { grid-row: 9; }
.page .sec[data-f="294:51"] > p.hl { margin: 6px 0 34px; }
.page .sec[data-f="294:51"] > [data-f="294:63"] { grid-row: 4; }
.page .sec[data-f="294:51"] > [data-f="294:70"] { grid-row: 6; }
.page .sec[data-f="294:51"] > [data-f="294:77"] { grid-row: 8; }
.page .sec[data-f="294:51"] > [data-f="294:84"] { grid-row: 10; margin-bottom: 0; }
/* the line runs from the first ring's centre to the last ring (rings are paper-filled, so it passes behind them) */
.page .sec[data-f="294:51"] > [data-f="294:85"] {
  grid-column: 1; grid-row: 3 / 9; justify-self: center; align-self: stretch;
  width: 1px; height: auto; margin-top: 22px;
}

/* ---------- 05 start from the occasion: six photo cards, one per row ----------
   Copy sits on the photo (a soft scrim keeps it legible on a narrow card); the price
   line keeps its underline and arrow (drawn after the price, the arrow img is hidden),
   and the card's link covers the whole card. Four rows per card: title, copy, note, price. */
.page .sec[data-f="405:2"] {
  display: grid;
  grid-template-columns: var(--cp) minmax(0, 1fr) var(--cp);
  column-gap: 0; row-gap: 0; align-items: start;
}
.page .sec[data-f="405:2"] > * { grid-column: 2; width: auto; }
.page .sec[data-f="405:2"] > [data-f="405:3"] { grid-column: 1 / -1; grid-row: 1; margin-bottom: 16px; }
.page .sec[data-f="405:2"] > [data-f="405:5"] { grid-column: 1 / -1; grid-row: 2; margin-bottom: 18px; }
.page .sec[data-f="405:2"] > .occ,
.page .sec[data-f="405:2"] > .occ-link { grid-column: 1 / -1; align-self: stretch; height: auto; margin-top: 14px; border-radius: 20px; }
.page .sec[data-f="405:2"] > .occ::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(28,23,19,.58) 0%, rgba(28,23,19,.34) 55%, rgba(28,23,19,.56) 100%);
}
.page .sec[data-f="405:2"] > .occ > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page .sec[data-f="405:2"] > .occ > img.crop { top: 0; height: 100%; object-fit: cover; object-position: 50% 40%; }
.page .sec[data-f="405:2"] > .occ-link { z-index: 1; border: 0; }
.page .sec[data-f="405:2"] > h3 { margin-top: calc(14px + var(--cp)); }
.page .sec[data-f="405:2"] > p.hl { margin-top: 10px; }
.page .sec[data-f="405:2"] > p.pe-none {
  justify-self: start; margin: 48px 0 var(--cp);
  padding-bottom: 5px; border-bottom: 1px solid var(--paper);
  display: flex; align-items: center; gap: 10px;
}
.page .sec[data-f="405:2"] > p.pe-none::after {
  content: ""; width: 13px; height: 9px; flex: none;
  background: url("../assets/gift-arrow-paper.svg") center / contain no-repeat;
}
.page .sec[data-f="405:2"] > img.pe-none { display: none; }

.page .sec[data-f="405:2"] > [data-f="405:9"],  .page .sec[data-f="405:2"] > [data-f="405:15"] { grid-row: 3 / 7; }
.page .sec[data-f="405:2"] > [data-f="405:10"] { grid-row: 3; }
.page .sec[data-f="405:2"] > [data-f="405:12"] { grid-row: 4; }
.page .sec[data-f="405:2"] > [data-f="405:15/t"] { grid-row: 6; }
.page .sec[data-f="405:2"] > [data-f="405:18"], .page .sec[data-f="405:2"] > [data-f="405:26"] { grid-row: 7 / 11; }
.page .sec[data-f="405:2"] > [data-f="405:19"] { grid-row: 7; }
.page .sec[data-f="405:2"] > [data-f="405:21"] { grid-row: 8; }
.page .sec[data-f="405:2"] > [data-f="405:23"] { grid-row: 9; }
.page .sec[data-f="405:2"] > [data-f="405:26/t"] { grid-row: 10; }
.page .sec[data-f="405:2"] > [data-f="405:30"], .page .sec[data-f="405:2"] > [data-f="405:36"] { grid-row: 11 / 15; }
.page .sec[data-f="405:2"] > [data-f="405:31"] { grid-row: 11; }
.page .sec[data-f="405:2"] > [data-f="405:33"] { grid-row: 12; }
.page .sec[data-f="405:2"] > [data-f="405:36/t"] { grid-row: 14; }
.page .sec[data-f="405:2"] > [data-f="405:39"], .page .sec[data-f="405:2"] > [data-f="405:45"] { grid-row: 15 / 19; }
.page .sec[data-f="405:2"] > [data-f="405:40"] { grid-row: 15; }
.page .sec[data-f="405:2"] > [data-f="405:42"] { grid-row: 16; }
.page .sec[data-f="405:2"] > [data-f="405:45/t"] { grid-row: 18; }
.page .sec[data-f="405:2"] > [data-f="405:49"], .page .sec[data-f="405:2"] > [data-f="405:57"] { grid-row: 19 / 23; }
.page .sec[data-f="405:2"] > [data-f="405:50"] { grid-row: 19; }
.page .sec[data-f="405:2"] > [data-f="405:52"] { grid-row: 20; }
.page .sec[data-f="405:2"] > [data-f="405:54"] { grid-row: 21; }
.page .sec[data-f="405:2"] > [data-f="405:57/t"] { grid-row: 22; }
.page .sec[data-f="405:2"] > [data-f="405:60"], .page .sec[data-f="405:2"] > [data-f="405:66"] { grid-row: 23 / 27; }
.page .sec[data-f="405:2"] > [data-f="405:61"] { grid-row: 23; }
.page .sec[data-f="405:2"] > [data-f="405:63"] { grid-row: 24; }
.page .sec[data-f="405:2"] > [data-f="405:66/t"] { grid-row: 26; }

/* ---------- 06 corporate: copy, button, then the photo ---------- */
.page .sec[data-f="295:69"] > .btn { margin-top: 10px; }
.page .sec[data-f="295:69"] > .ph { margin-top: 36px; border-radius: 22px; }

/* ---------- 07 for recipients: the dark band becomes an inset card ---------- */
.page .sec[data-f="296:2"] { padding-top: 0; padding-bottom: 0; }
.page .sec .redeem {
  position: relative; left: auto; top: auto; width: 100%; height: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 40px var(--cp) 36px; border-radius: 24px;
}
.page .sec .redeem > [data-f="296:7"] { font-size: clamp(30px, 7.6cqw, 40px); line-height: 1.15; }
.page .sec .redeem > .btn { margin-top: 10px; }

/* ---------- 08 questions: the shared accordion (css/faq.css + mobile.css), 2026-10-28 ----------
   heading, intro, then the list in the column; mobile.css sizes the rows */
.page .sec[data-f="296:12"] > [data-f="296:15"] { margin: 6px 0 6px; }

/* ---------- 09 closing: copy, the buttons side by side, the tilted card ---------- */
.page .sec[data-f="296:43"] { flex-direction: row; flex-wrap: wrap; column-gap: 12px; }
.page .sec[data-f="296:43"] > :not(.btn) { flex-basis: 100%; }
.page .sec[data-f="296:43"] > .btn { margin-top: 10px; }
/* tilt about the centre (not Figma's top-left corner), narrower than the column so the
   rotated corners stay inside it */
.page .sec[data-f="296:43"] > .cert {
  flex-basis: auto; width: min(88%, 440px); margin: 56px auto 20px;
  transform-origin: 50% 50%;
}

/* =========================== tablets (600-1079px) =========================== */
@media (min-width: 600px) {
  /* gift an experience: two cards per row, like the desktop's row of four halved.
     Card B columns are 6-9; each pair shares its rows, so hairlines line up. */
  .page .sec[data-f="294:2"] {
    grid-template-columns: var(--cp) minmax(0, 1fr) auto var(--cp) 16px var(--cp) minmax(0, 1fr) auto var(--cp);
  }
  .page .sec[data-f="294:2"] > [data-f="294:23"], .page .sec[data-f="294:2"] > [data-f="294:23/link"],
  .page .sec[data-f="294:2"] > [data-f="388:84"], .page .sec[data-f="294:2"] > [data-f="388:84/link"] { grid-column: 6 / 10; }
  .page .sec[data-f="294:2"] > [data-f="294:10"], .page .sec[data-f="294:2"] > [data-f="294:10/link"],
  .page .sec[data-f="294:2"] > [data-f="294:36"], .page .sec[data-f="294:2"] > [data-f="294:36/link"] { grid-column: 1 / 5; }
  .page .sec[data-f="294:2"] > [data-f="294:26"], .page .sec[data-f="294:2"] > [data-f="294:28"],
  .page .sec[data-f="294:2"] > [data-f="294:30"], .page .sec[data-f="294:2"] > [data-f="294:33/rule"],
  .page .sec[data-f="294:2"] > [data-f="388:87"], .page .sec[data-f="294:2"] > [data-f="388:89"],
  .page .sec[data-f="294:2"] > [data-f="388:91"], .page .sec[data-f="294:2"] > [data-f="388:94/rule"] { grid-column: 7 / 9; }
  .page .sec[data-f="294:2"] > [data-f="294:34"], .page .sec[data-f="294:2"] > [data-f="388:95"] { grid-column: 7; }
  .page .sec[data-f="294:2"] > [data-f="294:35"], .page .sec[data-f="294:2"] > [data-f="388:96"] { grid-column: 8; }
  /* rows: cards 1+2 share 4-8, cards 3+4 share 9-14 (row 12 = the cedar Coming Soon pill, empty on the Face card) */
  .page .sec[data-f="294:2"] > [data-f="294:23"], .page .sec[data-f="294:2"] > [data-f="294:23/link"] { grid-row: 4 / 9; }
  .page .sec[data-f="294:2"] > [data-f="294:26"] { grid-row: 4; }
  .page .sec[data-f="294:2"] > [data-f="294:28"] { grid-row: 5; }
  .page .sec[data-f="294:2"] > [data-f="294:30"] { grid-row: 6; }
  .page .sec[data-f="294:2"] > [data-f="294:33/rule"] { grid-row: 7; }
  .page .sec[data-f="294:2"] > [data-f="294:34"], .page .sec[data-f="294:2"] > [data-f="294:35"] { grid-row: 8; }
  .page .sec[data-f="294:2"] > [data-f="294:36"], .page .sec[data-f="294:2"] > [data-f="294:36/link"] { grid-row: 9 / 15; }
  .page .sec[data-f="294:2"] > [data-f="294:39"] { grid-row: 9; }
  .page .sec[data-f="294:2"] > [data-f="294:41"] { grid-row: 10; }
  .page .sec[data-f="294:2"] > [data-f="294:43"] { grid-row: 11; }
  .page .sec[data-f="294:2"] > [data-f="294:36/soon"] { grid-row: 12; }
  .page .sec[data-f="294:2"] > [data-f="294:46/rule"] { grid-row: 13; }
  .page .sec[data-f="294:2"] > [data-f="294:47"], .page .sec[data-f="294:2"] > [data-f="294:48"] { grid-row: 14; }
  .page .sec[data-f="294:2"] > [data-f="388:84"], .page .sec[data-f="294:2"] > [data-f="388:84/link"] { grid-row: 9 / 15; }
  .page .sec[data-f="294:2"] > [data-f="388:87"] { grid-row: 9; }
  .page .sec[data-f="294:2"] > [data-f="388:89"] { grid-row: 10; }
  .page .sec[data-f="294:2"] > [data-f="388:91"] { grid-row: 11; }
  .page .sec[data-f="294:2"] > [data-f="388:94/rule"] { grid-row: 13; }
  .page .sec[data-f="294:2"] > [data-f="388:95"], .page .sec[data-f="294:2"] > [data-f="388:96"] { grid-row: 14; }
  .page .sec[data-f="294:2"] > [data-f="294:50"] { grid-row: 15; }

  /* occasions: two cards per row, as on desktop. Card B columns are 5-7. */
  .page .sec[data-f="405:2"] { grid-template-columns: var(--cp) minmax(0, 1fr) var(--cp) 14px var(--cp) minmax(0, 1fr) var(--cp); }
  .page .sec[data-f="405:2"] > .occ, .page .sec[data-f="405:2"] > .occ-link { grid-column: 1 / 4; }
  .page .sec[data-f="405:2"] > [data-f="405:18"], .page .sec[data-f="405:2"] > [data-f="405:26"],
  .page .sec[data-f="405:2"] > [data-f="405:39"], .page .sec[data-f="405:2"] > [data-f="405:45"],
  .page .sec[data-f="405:2"] > [data-f="405:60"], .page .sec[data-f="405:2"] > [data-f="405:66"] { grid-column: 5 / 8; }
  .page .sec[data-f="405:2"] > [data-f="405:19"], .page .sec[data-f="405:2"] > [data-f="405:21"],
  .page .sec[data-f="405:2"] > [data-f="405:23"], .page .sec[data-f="405:2"] > [data-f="405:26/t"],
  .page .sec[data-f="405:2"] > [data-f="405:40"], .page .sec[data-f="405:2"] > [data-f="405:42"],
  .page .sec[data-f="405:2"] > [data-f="405:45/t"],
  .page .sec[data-f="405:2"] > [data-f="405:61"], .page .sec[data-f="405:2"] > [data-f="405:63"],
  .page .sec[data-f="405:2"] > [data-f="405:66/t"] { grid-column: 6; }
  /* rows: pairs share 3-6, 7-10, 11-14 */
  .page .sec[data-f="405:2"] > [data-f="405:18"], .page .sec[data-f="405:2"] > [data-f="405:26"] { grid-row: 3 / 7; }
  .page .sec[data-f="405:2"] > [data-f="405:19"] { grid-row: 3; }
  .page .sec[data-f="405:2"] > [data-f="405:21"] { grid-row: 4; }
  .page .sec[data-f="405:2"] > [data-f="405:23"] { grid-row: 5; }
  .page .sec[data-f="405:2"] > [data-f="405:26/t"] { grid-row: 6; }
  .page .sec[data-f="405:2"] > [data-f="405:30"], .page .sec[data-f="405:2"] > [data-f="405:36"] { grid-row: 7 / 11; }
  .page .sec[data-f="405:2"] > [data-f="405:31"] { grid-row: 7; }
  .page .sec[data-f="405:2"] > [data-f="405:33"] { grid-row: 8; }
  .page .sec[data-f="405:2"] > [data-f="405:36/t"] { grid-row: 10; }
  .page .sec[data-f="405:2"] > [data-f="405:39"], .page .sec[data-f="405:2"] > [data-f="405:45"] { grid-row: 7 / 11; }
  .page .sec[data-f="405:2"] > [data-f="405:40"] { grid-row: 7; }
  .page .sec[data-f="405:2"] > [data-f="405:42"] { grid-row: 8; }
  .page .sec[data-f="405:2"] > [data-f="405:45/t"] { grid-row: 10; }
  .page .sec[data-f="405:2"] > [data-f="405:49"], .page .sec[data-f="405:2"] > [data-f="405:57"] { grid-row: 11 / 15; }
  .page .sec[data-f="405:2"] > [data-f="405:50"] { grid-row: 11; }
  .page .sec[data-f="405:2"] > [data-f="405:52"] { grid-row: 12; }
  .page .sec[data-f="405:2"] > [data-f="405:54"] { grid-row: 13; }
  .page .sec[data-f="405:2"] > [data-f="405:57/t"] { grid-row: 14; }
  .page .sec[data-f="405:2"] > [data-f="405:60"], .page .sec[data-f="405:2"] > [data-f="405:66"] { grid-row: 11 / 15; }
  .page .sec[data-f="405:2"] > [data-f="405:61"] { grid-row: 11; }
  .page .sec[data-f="405:2"] > [data-f="405:63"] { grid-row: 12; }
  .page .sec[data-f="405:2"] > [data-f="405:66/t"] { grid-row: 14; }
  .page .sec[data-f="405:2"] > p.pe-none { align-self: end; }
  .page .sec[data-f="405:2"] > h3 { font-size: 26px; }
  .page .sec[data-f="294:2"] > [data-f="388:91"] { letter-spacing: 0; }   /* each protocol line fits the half-width card */   /* "Something serious" on one line, so each pair's copy starts level */
}

/* =========================== phones (<= 599px) =========================== */
@media (max-width: 599px) {
  /* card: the ornament moves into the top-right corner, so the message gets the full width */
  .page .sec .cert { padding: 24px 24px 22px; border-radius: 20px; }
  .page .sec .cert > .a { max-width: 100%; }
  .page .sec .cert > :nth-child(2) { white-space: nowrap; }
  .page .sec .cert > .orn { right: -9%; top: -12px; width: 42%; height: auto; }
  .page .sec .cert > :nth-child(3) { margin-top: 30px; }
  .page .sec .cert > .cert-msg { margin-top: 26px; }
  .page .sec .cert > :last-child { margin-top: 20px; }

  /* hero + closing titles keep Figma's line breaks (a <br> cannot be dropped without gluing
     the words together), so each is sized to the column: every designed line fits on one
     line, as on desktop. Column = 100cqw - 2 x 20px gutter; "GIVE AN HOUR THAT" is 9.3 em
     wide, "SCHEDULE IT FOR THE" 10 em. */
  .page .sec [data-f="292:30"] { font-size: calc((100cqw - 40px) / 9.4); }
  .page .sec [data-f="296:47"] { font-size: calc((100cqw - 40px) / 10.1); }

  /* hero + closing: the two buttons share the row */
  .page .sec[data-f="292:3"] > .btn,
  .page .sec[data-f="296:43"] > .btn { flex: 1 1 0; width: auto; min-width: 0; padding: 0 10px; }

  /* builder: step headings step down so they fit beside the ring */
  .page .sec[data-f="293:2"] > .builder-in > h2 { font-size: 24px; line-height: 1.12; }
  .page .sec[data-f="293:2"] .builder-in .chip { padding: 0 16px; }

}