/* Create flow (v2). Layout for its screens; shared pieces live in ../components.css. */

/* --- Start --------------------------------------------------------------------------- */
.screen-start { padding-bottom: calc(var(--s4) + var(--safe-bottom)); }
.hero { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s2) 0 var(--s5); }
.hero-fan {
  position: relative; height: 210px; margin: 0 auto var(--s12); width: 100%;
}
.hero-fan img {
  position: absolute; left: 50%; bottom: 0;
  width: 124px; aspect-ratio: var(--card-ratio);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  transform-origin: 50% 150%;
  transform: translateX(-50%) rotate(var(--r)) translateY(var(--y));
  animation: fan-in 900ms var(--ease-spring) both, bob 6s ease-in-out infinite;
  animation-delay: var(--d), calc(var(--d) * 5 + 900ms);
}
.hero-fan img:nth-child(1) { --r: -24deg; --y: 14px; --d: 0ms; }
.hero-fan img:nth-child(2) { --r: -12deg; --y: 4px; --d: 70ms; }
.hero-fan img:nth-child(3) { --r: 0deg; --y: 0px; --d: 140ms; z-index: 1; }
.hero-fan img:nth-child(4) { --r: 12deg; --y: 4px; --d: 210ms; }
.hero-fan img:nth-child(5) { --r: 24deg; --y: 14px; --d: 280ms; }
@keyframes fan-in {
  from { transform: translateX(-50%) rotate(0deg) translateY(40px); opacity: 0; }
}
@keyframes bob {
  50% { translate: 0 -5px; }
}
.hero-title { margin: 0; font-size: var(--text-3xl); }
/* Once the customer starts (types, picks a chip, adds photos) the fan tucks away so the
   composer and its button stay on screen. The layout changes in one step and create.js glides
   the title and composer from where they were (FLIP); only the fan's scale animates here. */
.hero-fan { transition: scale var(--dur-3) var(--ease-out); transform-origin: 50% 100%; }
body.is-composing .hero-fan { height: 130px; margin-bottom: var(--s8); scale: 0.62; }
body.is-composing .hero-title { font-size: var(--text-2xl); }
/* Short phone screens (small Android in-app browsers, ~550-600px tall): a smaller fan, so the draw
   button is on the first screen without scrolling. */
@media (max-width: 1023px) and (max-height: 620px) {
  body.is-composing .hero-fan { height: 80px; margin-bottom: var(--s4); scale: 0.4; }
  body.is-composing .hero { padding-bottom: var(--s3); }
}

/* Ad and idea links (body.from-idea, hb-e5x): on phones, finished decks in their boxes take the fan's
   place and grow into whatever height the screen has spare, so the draw button stays on the first
   screen; the page's first screen ends a little early so "What you get" peeks up from below. */
.hero-box { margin: 0 0 var(--s4); display: flex; justify-content: center; min-height: 0; }
.hero-box picture { display: contents; }
.hero-box img {
  display: block; height: 100%; width: auto; max-width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: 50% 45%; border-radius: var(--radius-m); box-shadow: var(--shadow-card);
}
@media (max-width: 1023px) {
  body.from-idea .hero-fan { display: none; }
  body.from-idea .hero { justify-content: flex-end; padding-top: var(--s3); }
  body.from-idea .hero-box { flex: 1 1 0; min-height: 96px; max-height: 300px; }
  body.from-idea .screen-start { min-height: calc(100dvh - 40px); }
}
@media (min-width: 1024px) { .hero-box { display: none; } }
@media (max-width: 1023px) and (max-height: 620px) {
  body.from-idea .hero-box { min-height: 72px; margin-bottom: var(--s3); }
}

.what-you-get {
  max-width: var(--page, 560px); margin: 0 auto;
  padding: var(--s5) var(--gutter, var(--s5)) calc(var(--s8) + var(--safe-bottom));
  display: flex; flex-direction: column; gap: var(--s3);
  border-top: 1px solid var(--paper-2);
}
body:not([data-screen="start"]) .what-you-get { display: none; }
.wyg-title { margin: 0; font-size: var(--text-xl); }
.what-you-get p { margin: 0; }
.wyg-steps { list-style: none; margin: var(--s2) 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: var(--s3); }
.wyg-steps li { counter-increment: step; position: relative; padding-left: 44px; min-height: 32px; }
.wyg-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-weight: 700; font-size: var(--text-s);
}
.wyg-steps strong { display: block; }
.wyg-steps span { color: var(--ink-2); font-size: var(--text-s); }
.wyg-actions { display: flex; flex-direction: column; gap: var(--s2); }
@media (min-width: 1024px) { .what-you-get { max-width: 720px; } }

.composer {
  padding: var(--s4) var(--s5) var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
}
.composer .field { min-height: 48px; }
.composer-tools { display: flex; gap: var(--s2); }
.composer-tools .btn { flex: 1; min-height: 46px; padding: 0 var(--s3); font-size: var(--text-s); white-space: nowrap; }
.photo-btn { cursor: pointer; }
.composer-note { text-align: center; margin: calc(-1 * var(--s1)) 0 0; }
/* "Draw my free preview" stays on one line on the narrowest phones (320px) */
#draw-btn { white-space: nowrap; }
@media (max-width: 359px) { #draw-btn { font-size: var(--text-m); padding: 0 var(--s3); } }

.photos { display: flex; flex-direction: column; gap: var(--s1); }
.photo-strip {
  display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--s5)); padding: var(--s1) var(--s5);
}
.photo-strip::-webkit-scrollbar { display: none; }
.thumb {
  position: relative; flex: none; width: 60px; height: 60px;
  border-radius: 12px; overflow: hidden; background: var(--paper-2);
  animation: pop-in var(--dur-2) var(--ease-spring) both;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff;
  font-size: 13px; line-height: 22px; cursor: pointer;
}
.thumb-count { display: grid; place-items: center; font-weight: 600; color: var(--ink-2); font-size: var(--text-s); }
@keyframes pop-in { from { transform: scale(0.6); opacity: 0; } }
.photo-deck-row { min-height: 52px; border: 0; }
.photo-plan { margin: 0; color: var(--ink-2); line-height: 1.4; }
.photo-plan:empty { display: none; }

/* --- Table (drawing + preview) --------------------------------------------------------- */
.screen-table { padding-bottom: calc(var(--s4) + var(--safe-bottom)); }
.round-pill {
  padding: 6px 12px; border-radius: var(--radius-pill); background: var(--paper-2);
  font-size: var(--text-xs); font-weight: 600; color: var(--ink-2);
}
.deck-head { padding: var(--s2) 0 var(--s4); min-height: 118px; }
.status { margin: 0 0 var(--s1); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.status::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px;
  border-radius: 50%; background: var(--accent); vertical-align: 1px;
  animation: pulse 1.1s ease-in-out infinite;
}
body.is-ready .status::before { background: var(--good); animation: none; }
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.7); } }
.deck-title { margin: 0; font-size: var(--text-2xl); transition: opacity var(--dur-2); }
.deck-title.is-swapping { opacity: 0; }
.deck-tagline { margin: var(--s2) 0 0; font-size: var(--text-m); min-height: 1.45em; }
.swatches { display: flex; gap: 6px; margin-top: var(--s3); height: 14px; }
.swatches span {
  width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  animation: pop-in var(--dur-2) var(--ease-spring) both;
}

.felt { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding-bottom: var(--s4); }
.screen-table { overflow-x: clip; }   /* carousel cards peek past the page edge */
.cards {
  --cw: min(43vw, 210px);                        /* a card at rest; the carousel scales it up */
  --ch: calc(var(--cw) * 1110 / 816);
  --dw: min(36vw, 172px);                        /* the shuffling deck while cards draw */
  --row: 0.44;                                   /* dealt cards, as a share of --cw */
  --row-gap: 10px;
  --deal-top: calc(var(--dw) * 1110 / 816 + 92px);
  position: relative;
  width: 100%;
}
.cards .pcard {
  position: absolute; top: 0; left: 50%;
  width: var(--cw);
  transform: translate(var(--x, -50%), var(--y, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transition: transform var(--dur-3) var(--ease-spring);
  cursor: pointer;
}
/* While drawing: the deck shuffles large in the middle, a line of verbs turns under it, and
   each card is dealt to a row below as it lands, turning face up. No outlines, no bar. */
.cards[data-layout="deal"] { height: calc(var(--deal-top) + var(--ch) * var(--row) + 16px); }
.cards[data-layout="deal"] .shuffler { top: 22px; translate: -50% 0; width: var(--dw); }
.cards[data-layout="deal"] .pcard { z-index: 1; --s: var(--row); --y: calc(var(--deal-top) - var(--ch) * (1 - var(--row)) / 2); }
.cards[data-layout="deal"] .pcard:nth-child(1) { --x: calc(-1.5 * (var(--cw) * var(--row) + var(--row-gap)) - var(--cw) / 2); --r: -3deg; }
.cards[data-layout="deal"] .pcard:nth-child(2) { --x: calc(-0.5 * (var(--cw) * var(--row) + var(--row-gap)) - var(--cw) / 2); --r: -1deg; }
.cards[data-layout="deal"] .pcard:nth-child(3) { --x: calc(0.5 * (var(--cw) * var(--row) + var(--row-gap)) - var(--cw) / 2); --r: 1deg; }
.cards[data-layout="deal"] .pcard:nth-child(4) { --x: calc(1.5 * (var(--cw) * var(--row) + var(--row-gap)) - var(--cw) / 2); --r: 3deg; }
.spin-words {
  position: absolute; left: 0; right: 0; top: calc(var(--dw) * 1110 / 816 + 42px); margin: 0;
  text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--text-l); color: var(--ink-2); white-space: nowrap;
  opacity: 0; transition: opacity 170ms var(--ease-out), translate 170ms var(--ease-out);
  pointer-events: none;
}
.spin-words.is-on { opacity: 1; }
.spin-words.is-out { opacity: 0; translate: 0 6px; }
.cards[data-layout="carousel"] .spin-words { opacity: 0; }
/* Ready: the four cards become a carousel (lib/carousel.js writes each card's transform) */
.cards[data-layout="carousel"] { height: calc(var(--ch) * 1.34 + 24px); }
.cards[data-layout="carousel"] .pcard { top: calc(var(--ch) * 0.22); transition: none; }
.cards[data-layout="carousel"].cz-settling .pcard { transition: transform 640ms var(--ease-spring); }
.cards[data-layout="carousel"] .shuffler { opacity: 0; }
.cz-label { text-align: center; margin: var(--s1) 0 0; min-height: 1.45em; font-weight: 600; font-size: var(--text-s); color: var(--ink-2); }
.card-caption { display: none; }

.actions {
  display: flex; flex-direction: column; gap: var(--s2);
  animation: rise var(--dur-3) var(--ease-spring) both;
}
.actions-row { display: flex; gap: var(--s2); }
.actions-row .btn { flex: 1; }
.actions-note { text-align: center; margin: 0; }
/* the preview in its clear case, twice (lib/productshot.js), under the buttons */
.c-product { margin: var(--s3) 0 0; }
.c-product[hidden] { display: none; }
.c-product .d-shots-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.c-product .d-shot { margin: 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #dcd3c6; }
.c-product .d-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-product .d-shots-cap { margin: var(--s2) 0 0; text-align: center; color: var(--ink-2); }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }

/* --- Photos screen --------------------------------------------------------------------- */
.screen-photos { padding-bottom: calc(var(--s8) + var(--safe-bottom)); }
.photos-help { margin: var(--s1) 0 var(--s4); font-size: var(--text-s); }
.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.slot {
  position: relative; aspect-ratio: var(--card-ratio);
  border: 0; padding: 0; border-radius: 8px; overflow: hidden;
  background: var(--paper-2) center / cover no-repeat;
  box-shadow: var(--shadow-1); cursor: pointer;
}
.slot span {
  position: absolute; left: 4px; top: 4px; padding: 2px 6px; border-radius: 6px;
  background: rgba(255,255,255,0.92); font-size: 12px; font-weight: 700;
}
.slot span.red { color: #c8102e; }
.slot.is-preview { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); max-height: 50dvh; overflow-y: auto; }
.pick-grid button {
  aspect-ratio: 1; border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: var(--paper-2) center / cover no-repeat;
}
.pick-grid button[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }

/* --- Sheets content ------------------------------------------------------------------- */
.sheet-sub { margin: 0 0 var(--s4); font-size: var(--text-s); }
.sheet-done { margin-top: var(--s4); }
.tweak-box { padding: var(--s3) var(--s4); margin-bottom: var(--s3); }
#tweak-chips { margin-bottom: var(--s4); }
.sheet-foot { text-align: center; margin: var(--s3) 0 0; }
/* the buy sheet's summary and the CTA beside it: /v2/qty.css (lib/buyflow.js) */
.buy-price { font-size: var(--text-m) !important; }

@media (min-width: 700px) and (max-width: 1023px) {
  .hero-title { font-size: 3.5rem; }
}
.actions-row .btn { white-space: nowrap; padding: 0 var(--s3); }
body.is-composing .hero { justify-content: center; }

/* --- Desktop: the composer beside the fan, the hand beside its story ------------------------ */
@media (min-width: 1024px) {
  /* Start: the fan and the promise on the left, the composer on the right */
  .screen-start {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
    grid-template-rows: auto 1fr; column-gap: 64px; align-items: center;
    padding-bottom: var(--s12);
  }
  .screen-start > .topbar { grid-column: 1 / -1; }
  .hero { justify-content: center; padding: var(--s8) 0; }
  .hero-fan { height: 320px; margin-bottom: 72px; }
  .hero-fan img { width: 190px; border-radius: 12px; }
  .hero-title { font-size: var(--text-3xl); }
  /* the page is wide enough: composing changes nothing but the text box */
  body.is-composing .hero-fan { height: 320px; margin-bottom: 72px; scale: 1; }
  body.is-composing .hero-title { font-size: var(--text-3xl); }
  body.is-composing .hero { justify-content: center; }
  .composer { padding: var(--s6) var(--s8) var(--s6); gap: var(--s4); }
  .composer .field { min-height: 120px; font-size: var(--text-l); }
  .composer .chips { margin: 0; }
  .photo-strip { margin: 0; padding: var(--s1) 0; flex-wrap: wrap; overflow: visible; }

  /* Table: the story and the buttons on the left, the hand on the right */
  .screen-table {
    display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr; column-gap: 64px; align-content: start;
    padding-bottom: var(--s10);
  }
  .screen-table > .topbar { grid-column: 1 / -1; }
  .deck-head { grid-column: 1; grid-row: 2; padding-top: var(--s10); min-height: 0; }
  .deck-title { font-size: var(--text-2xl); }
  .actions { grid-column: 1; grid-row: 3; padding-top: var(--s6); }
  .felt { grid-column: 2; grid-row: 2 / span 3; padding: var(--s6) 0; }
  .cards { --cw: min(230px, calc((100dvh - 260px) / 1.34 * 816 / 1110)); --dw: 210px; --row: 0.5; --row-gap: 16px; }
  body.is-ready .felt { justify-content: center; }
  /* the arrows sit under the hand, either side of its label, clear of the cards */
  .cards[data-layout="carousel"] .cz-arrow { top: auto; bottom: -44px; translate: none; }
  .cards[data-layout="carousel"] .cz-prev { left: calc(50% - 190px); }
  .cards[data-layout="carousel"] .cz-next { right: calc(50% - 190px); }
  .cz-label { line-height: 44px; margin-top: 2px; }

  /* Photos: a wider grid */
  .screen-photos { max-width: 1000px; }
  .slot-grid { grid-template-columns: repeat(8, 1fr); gap: var(--s3); }
  .pick-grid { grid-template-columns: repeat(5, 1fr); }
}

/* --- Commission intent (/v2/create/?commission=…): the preview still comes first ------------- */
.commission-kicker {
  margin: 0 0 var(--s1); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}

/* --- After the preview: print it, or hand it to an art director ---------------------------- */
.next-steps { display: flex; flex-direction: column; gap: var(--s2); }
.next-steps.is-commission { flex-direction: column-reverse; }
/* a photo idea drawn with no photo: "Add your photos, redraw free" leads, on one line at 320px */
.photo-redraw { white-space: nowrap; }
/* The Christmas order-by line above Print (lib/christmas.js): quiet, close to the button it explains */
.xmas-line { margin: 0 0 calc(-1 * var(--s1)); text-align: center; line-height: 1.35; text-wrap: balance; }
.xmas-line[hidden] { display: none; }
@media (max-width: 359px) { .photo-redraw { font-size: var(--text-m); padding: 0 var(--s3); } }
.next-ad { flex-direction: column; gap: 1px; line-height: 1.2; min-height: 58px; }
.next-ad-sub { font-size: var(--text-xs); font-weight: 500; opacity: 0.66; }

/* The art-director sheet: tier, the cards they like, notes, email */
.ad-sheet { max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain; }
.ad-form { display: flex; flex-direction: column; gap: var(--s3); }
.ad-tier { grid-auto-rows: minmax(54px, auto); }
.ad-tier button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.2; }
.ad-tier button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
.ad-tier button span { font-weight: 500; font-size: var(--text-xs); color: var(--ink-3); }
.ad-tier button span span { font-size: inherit; }
.ad-tier-note { margin: calc(-1 * var(--s1)) 0 0; text-align: center; }
.ad-path-note { margin: 0; font-size: var(--text-s); text-align: center; color: var(--ink-2); }
.ad-keep { border: 0; margin: 0; padding: 0; min-width: 0; }
/* a photos brief (hb-g1ogr): the buyer's own photos where the preview cards would be */
.ad-photo { aspect-ratio: 1; border-radius: 7px; overflow: hidden; box-shadow: var(--shadow-card); }
.ad-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-keep legend, .ad-field > span { padding: 0; margin-bottom: 6px; font-size: var(--text-s); font-weight: 600; }
.ad-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.ad-card {
  position: relative; padding: 0; border: 0; background: none; cursor: pointer;
  aspect-ratio: var(--card-ratio); border-radius: 7px; transition: transform var(--dur-1) var(--ease-out);
}
.ad-card img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; box-shadow: var(--shadow-card);
  transition: opacity var(--dur-2) var(--ease-out);
}
.ad-card[aria-pressed="false"] img { opacity: 0.55; }
.ad-card[aria-pressed="true"] { transform: translateY(-4px); }
.ad-card[aria-pressed="true"] img { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.ad-card-mark {
  position: absolute; right: -5px; top: -5px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
  background: var(--paper); color: var(--ink-3); box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2), color var(--dur-2);
}
.ad-card[aria-pressed="true"] .ad-card-mark { background: var(--accent); color: #fff; transform: scale(1.12); }
.ad-field { display: flex; flex-direction: column; min-width: 0; }
.ad-field .field {
  font-size: var(--text-m); padding: 11px 14px; border-radius: var(--radius-s);
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
}
.ad-field .field:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.ad-field textarea.field { resize: none; min-height: 84px; }
.ad-field .stepper .field { padding: 10px 4px; }
.ad-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: end; }
.ad-form .sheet-foot { margin-top: calc(-1 * var(--s1)); }
.ad-more { margin: calc(-1 * var(--s1)) 0 0; }
@media (min-width: 1024px) {
  .ad-sheet { width: 560px; max-height: calc(100dvh - 48px); }
}

/* --- The grandparents' landing page (/grandkids/: body[data-landing], api/landing_pages.py) --------
   One headline, finished decks, one big button that opens the photo library. Big type throughout
   (19 px and up); the composer is still in the page, hidden, and does the drawing. */
body[data-landing] .screen-start .hero,
body[data-landing] #composer { display: none; }
.gk { flex: 1; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s3) 0 var(--s2); min-height: 0; }
.gk-title { margin: 0; font-size: 2.25rem; line-height: 1.08; }
.gk-lede { margin: 0; font-size: 1.25rem; line-height: 1.4; color: var(--ink); }
.gk-photo { margin: 0; flex: 1 1 0; min-height: 150px; max-height: 380px; display: flex; justify-content: center; }
.gk-photo picture { display: contents; }
.gk-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  border-radius: var(--radius-m); box-shadow: var(--shadow-card);
}
.btn.gk-pick {
  min-height: 72px; padding: var(--s3) var(--s5); font-size: 1.375rem; font-weight: 700; line-height: 1.2;
  border-radius: var(--radius-m); text-align: center;
}
.btn.gk-pick:disabled { opacity: 1; cursor: progress; }
.gk-note { margin: 0; text-align: center; font-size: 1.1875rem; color: var(--ink-2); }
@media (max-width: 1023px) and (max-height: 620px) {
  .gk-title { font-size: 1.875rem; }
  .gk-photo { min-height: 96px; }
}
@media (min-width: 1024px) {
  .screen-start > .gk { grid-column: 1 / -1; }
  .gk {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 56px; row-gap: var(--s5);
    grid-template-areas: "title photo" "lede photo" "pick photo" "note photo"; align-content: center;
    padding: var(--s8) 0;
  }
  .gk-title { grid-area: title; font-size: 3.5rem; align-self: end; }
  .gk-lede { grid-area: lede; font-size: 1.5rem; }
  .gk-photo { grid-area: photo; max-height: none; min-height: 0; }
  .gk-photo img { height: auto; aspect-ratio: 1; }
  .btn.gk-pick { grid-area: pick; max-width: 520px; }
  .gk-note { grid-area: note; text-align: left; }
}

body[data-landing] .what-you-get { font-size: 1.25rem; }
body[data-landing] .what-you-get .tiny,
body[data-landing] .wyg-steps span { font-size: 1.1875rem; }
body[data-landing] .wyg-title { font-size: 2rem; }
body[data-landing] #wyg-draw { min-height: 72px; font-size: 1.25rem; font-weight: 700; border-radius: var(--radius-m); }
body[data-landing] .wyg-actions .btn-ghost { min-height: 60px; font-size: 1.1875rem; }

.gk-decks {
  max-width: var(--page, 560px); margin: 0 auto;
  padding: var(--s6) var(--gutter, var(--s5)) calc(var(--s8) + var(--safe-bottom));
  display: flex; flex-direction: column; gap: var(--s4);
  border-top: 1px solid var(--paper-2); font-size: 1.25rem;
}
body:not([data-screen="start"]) .gk-decks { display: none; }
.gk-decks-title { margin: 0; font-size: 2rem; }
.gk-deck-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.gk-deck { display: flex; flex-direction: column; gap: var(--s2); color: var(--ink); text-decoration: none; font-size: 1.1875rem; font-weight: 600; }
.gk-deck img { width: 100%; height: auto; border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.gk-other { margin: var(--s3) 0 0; font-size: 1.1875rem; }
.gk-other a { color: var(--ink-2); }
@media (min-width: 1024px) {
  .gk-decks { max-width: 960px; }
  .gk-deck-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A line still waiting for its words ([words: …], the Custom page's doors, hb-22wtj): shown yellow until Echo writes it. */
.words-todo { background: #fff1a8; color: #5a4600; border-radius: 4px; padding: 0 3px; font-weight: 600; }