/* ==========================================================================
   Vimento — site design system
   Brand: brand/README.md (Playfair Display wordmark, ink on cream, gold for accents).
   Body face: Atkinson Hyperlegible Next — drawn by the Braille Institute for low-vision
   readers, which is who we are writing for. Both fonts self-hosted, latin subset, OFL.

   Contents
     1. Fonts + tokens          6. Forms
     2. Base + type             7. Notices, badges, dialog, toast
     3. Layout                  8. Landing page
     4. Header + footer         9. Account pages (dashboard, upload, gallery)
     5. Buttons                10. Legal / long-form text, utilities, motion
   ========================================================================== */

/* 1. Fonts + tokens ------------------------------------------------------- */

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("/assets/fonts/atkinson-next-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Playfair Display";
    src: url("/assets/fonts/playfair-latin.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* colour — brand four, plus the paper of an old album page and two status colours */
    --cream:      #faf9f6;   /* page */
    --paper:      #f1ebe0;   /* album-page band */
    --paper-edge: #e3dacb;   /* rules and borders on cream/paper */
    --ink:        #1a1815;   /* text, dark band */
    --ink-soft:   #2b2824;   /* raised surface on the dark band */
    --grey:       #5c5650;   /* secondary text: 6.9:1 on cream */
    --gold:       #c5973e;   /* buttons, one rule; never small text on cream (2.5:1) */
    --gold-hover: #d4a853;
    --gold-text:  #7a5a12;   /* gold as text on cream/paper: 5.1:1 */
    --on-ink:     #faf9f6;
    --on-ink-2:   #bdb5a8;   /* secondary text on ink: 8:1 */
    --ok:         #2f6b3f;
    --ok-bg:      #e6efe4;
    --bad:        #a8321e;
    --bad-bg:     #f8e6e1;
    --bezel:      #232323;

    /* type */
    --serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --sans:  "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --fs-small: 1rem;                                      /* 16 — the floor */
    --fs-body:  clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem); /* 18 → 19 */
    --fs-lead:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);     /* 20 → 24 */
    --fs-h3:    clamp(1.375rem, 1.3rem + 0.35vw, 1.625rem);  /* 22 → 26 */
    --fs-h2:    clamp(2rem, 1.6rem + 1.8vw, 3rem);           /* 32 → 48 */
    --fs-h1:    clamp(2.625rem, 1.9rem + 3.4vw, 4.5rem);     /* 42 → 72 */

    /* space */
    --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
    --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;
    --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
    --section: clamp(4rem, 3rem + 5vw, 8rem);

    /* shape — one radius per kind of thing, not one for everything */
    --r-button: 14px;
    --r-panel:  20px;
    --r-print:  3px;
    --r-bezel:  12px;

    --shadow-print: 0 1px 2px rgba(26, 24, 21, 0.10), 0 10px 24px -8px rgba(26, 24, 21, 0.28);
    --shadow-frame: 0 2px 4px rgba(26, 24, 21, 0.18), 0 28px 60px -20px rgba(26, 24, 21, 0.45);
    --tap: 3.25rem; /* 52px minimum tap target */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 2. Base + type ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.6;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.005em;
    margin: 0 0 var(--s4);
    text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-family: var(--sans); font-weight: 700; font-size: var(--fs-body); line-height: 1.4; }

p { margin: 0 0 var(--s4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); max-width: 34em; }
.muted { color: var(--grey); }
.small { font-size: var(--fs-small); line-height: 1.5; }
strong, b { font-weight: 700; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

:focus { outline: none; }
:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
    border-radius: 4px;
}
.band-ink :focus-visible { outline-color: var(--gold); }

::selection { background: #ecd9b0; color: var(--ink); }

.skip-link {
    position: absolute; left: var(--s4); top: -100px; z-index: 100;
    background: var(--ink); color: var(--on-ink);
    padding: var(--s3) var(--s4); border-radius: var(--r-button);
    font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--s4); }

.visually-hidden, .sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 3. Layout --------------------------------------------------------------- */

.wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 46rem; }
/* p4: signed-in pages share one left edge with the wordmark and the tabs, so the title never jumps sideways between
   pages. Pages of cards (Home, Living photos, Another frame) use the whole width; pages of forms and lists (Add photos,
   Orders, Settings, the WiFi and plan pages, thanks) keep the 46rem column, at that same left edge. */
.nav-app .wrap--narrow { max-width: 76rem; }
.nav-app .wrap--narrow > * { max-width: 46rem; }
.wrap--text { max-width: 40rem; }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.band-paper { background: var(--paper); }
.band-ink { background: var(--ink); color: var(--on-ink); }
.band-ink a { color: var(--on-ink); }
.band-ink .muted { color: var(--on-ink-2); }

.section-head { max-width: 40rem; margin-bottom: var(--s7); }
.section-head p { color: var(--grey); font-size: var(--fs-lead); line-height: 1.5; }
.band-ink .section-head p { color: var(--on-ink-2); }

.stack > * + * { margin-top: var(--s4); }

/* 4. Header + footer ------------------------------------------------------ */

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250, 249, 246, 0.94);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid var(--paper-edge);
}
.site-header__bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
    min-height: 4.25rem;
}
.wordmark { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; padding: var(--s2) 0; }
.wordmark svg { height: 1.55rem; width: auto; }
.wordmark:focus-visible { outline-offset: 6px; }

.site-nav { display: flex; align-items: center; gap: clamp(0.75rem, 0.3rem + 2vw, 2rem); }
.site-nav a:not(.btn) {
    text-decoration: none; font-size: var(--fs-small); font-weight: 700;
    min-height: 2.75rem; display: inline-flex; align-items: center;
    border-bottom: 2px solid transparent;
}
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"]:not(.btn) { border-bottom-color: var(--gold); }
.site-nav a:not(.btn) { white-space: nowrap; }   /* "Your living photo" stays on one line on a phone */
@media (max-width: 26rem) { .site-header__bar { gap: var(--s2); } .site-nav { gap: 0.6rem; } .site-nav a:not(.btn) { font-size: 0.9375rem; } }
@media (max-width: 36rem) { .site-nav__how { display: none !important; } }

/* signed-in pages: "Order a frame" + name on the bar, tabs underneath (Sign out is on Settings, D5) */
.site-header__who { display: flex; align-items: center; gap: var(--s4); font-size: var(--fs-small); }
.site-header .site-header__frame { min-height: 2.5rem; padding: 0.4rem 0.9rem; font-size: 0.9375rem; white-space: nowrap; }
.site-header--app .link-button { white-space: nowrap; }
@media (max-width: 30rem) { .site-header--app .site-header__name { display: none; } .site-header__who { gap: var(--s3); } .site-header .site-header__frame { padding: 0.4rem 0.7rem; font-size: 0.875rem; } }
/* Another frame (includes/another-frame.php): its own card on Home and Your order, a frame with a photo on it */
.af-card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--s4);
    background: #fffdf8; border: 1px solid #e4cf9f; border-radius: var(--r-panel); margin: 0 0 var(--s5); }
.af-card__look { border-radius: 12px; background: var(--cream); overflow: hidden; }
.af-card__look img { width: 100%; height: auto; }
.af-card__title { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); margin: 0 0 var(--s2); }
.af-card__prices { margin: 0; line-height: 1.45; }
.af-card__go { grid-column: 1 / -1; min-height: 2.75rem; padding: 0.5rem 1.1rem; font-size: 1rem; }
@media (min-width: 40rem) { .af-card__go { grid-column: 2; justify-self: start; margin-top: calc(-1 * var(--s2)); } }
@media (min-width: 40rem) { .af-card { grid-template-columns: 11rem minmax(0, 1fr); padding: var(--s4) var(--s5); } }
.home-grid aside .af-card { grid-template-columns: 7.5rem minmax(0, 1fr); }
.home-grid aside .af-card__go { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
/* m2: one rule for the buttons of Home's side cards and the thanks page's offer: full width on a phone, their own width
   on a desktop (the another-frame button was full width beside a small "Invite family"). */
@media (max-width: 39.99rem) {
    .home-grid aside .af-card__go { justify-self: stretch; }
    .home-grid aside .panel > .btn, .offer-second > .btn { display: flex; width: 100%; justify-content: center; }
}
/* the Another frame page: two choices side by side, one line on the difference above them */
.af-choices { display: grid; gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 56rem) { .af-choices { grid-template-columns: 1fr 1fr; align-items: start; } .af-choices--one { grid-template-columns: minmax(0, 36rem); } }
.af-choice { background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--r-panel); padding: var(--s5); }
.af-choice__look { border-radius: 14px; background: var(--cream); overflow: hidden; margin: 0 0 var(--s4); }
.af-choice__look img { width: 100%; height: auto; }
.af-choice__title { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); margin: 0 0 var(--s3); }
.af-choice > p { color: var(--grey); }
.af-choice__list { margin: 0 0 var(--s5); padding-left: 1.2rem; display: grid; gap: var(--s1); }
.af-choice .swatches { margin: 0 0 var(--s4); }
.af-choice__small { margin: var(--s3) 0 0; font-size: var(--fs-small); color: var(--grey); }
.af-help { margin-top: var(--s6); color: var(--grey); }
.site-header__name { color: var(--grey); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 30rem) { .site-header__name { display: none; } }
.link-button {
    appearance: none; background: none; border: 0; padding: var(--s2) 0; margin: 0;
    font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
    text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px;
    min-height: 2.75rem;
}
.link-button--quiet { color: var(--grey); font-weight: 400; padding-inline: var(--s2); }
.link-button--quiet:hover { color: var(--bad); }
.app-tabs { border-top: 1px solid var(--paper-edge); }
/* D5: one row that scrolls sideways on a phone, never two rows; the scrollbar is hidden (the cut-off tab shows there is more) */
.app-tabs__row { display: flex; flex-wrap: nowrap; column-gap: clamp(1.1rem, 0.4rem + 2.5vw, 2.5rem); overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.app-tabs__row::-webkit-scrollbar { display: none; }
/* N16: the edge where more tabs wait fades out (the header script sets the classes as the row scrolls) */
.app-tabs__row.is-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
.app-tabs__row.is-more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); }
.app-tabs__row.is-more-left.is-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
.app-tabs a {
    flex: none; display: inline-flex; align-items: center; min-height: 2.875rem; white-space: nowrap;
    font-weight: 700; font-size: var(--fs-small); text-decoration: none; color: var(--grey);
    border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.app-tabs a:hover { color: var(--ink); }
.app-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }

.site-footer { background: var(--paper); border-top: 1px solid var(--paper-edge); padding-block: var(--s8) var(--s6); font-size: var(--fs-small); }
.site-footer__grid { display: grid; gap: var(--s6); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.wordmark--footer svg { height: 1.4rem; }
.site-footer__brand p { color: var(--grey); margin-top: var(--s2); font-family: var(--serif); font-style: italic; font-size: 1.125rem; }
.site-footer__links { display: grid; gap: var(--s1); align-content: start; }
.site-footer__links a { text-decoration: none; min-height: 2.5rem; display: inline-flex; align-items: center; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__mail { font-weight: 700; font-size: 1.125rem; }
.site-footer__legal { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--paper-edge); color: var(--grey); }
.site-footer__optout { display: inline-block; margin-left: var(--s3); font-size: 0.875rem; color: var(--grey); }
@media (max-width: 47.99rem) { .site-footer__optout { display: block; width: fit-content; margin: var(--s2) 0 0; } }   /* p2: on its own line, on the copyright's edge */

/* 5. Buttons -------------------------------------------------------------- */

.btn {
    --btn-bg: var(--ink); --btn-fg: var(--on-ink); --btn-bd: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
    min-height: var(--tap); padding: 0.75rem 1.5rem;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 2px solid var(--btn-bd); border-radius: var(--r-button);
    font: 700 1.125rem/1.2 var(--sans); letter-spacing: 0.005em;
    text-decoration: none; text-align: center; text-wrap: balance; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary { --btn-bg: var(--gold); --btn-fg: var(--ink); --btn-bd: var(--gold); }
.btn-primary:hover { --btn-bg: var(--gold-hover); --btn-bd: var(--gold-hover); }
.btn-ink:hover { --btn-bg: #34302b; --btn-bd: #34302b; }
.btn-quiet { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn-quiet:hover { --btn-bg: rgba(26, 24, 21, 0.06); }
.band-ink .btn-quiet { --btn-fg: var(--on-ink); --btn-bd: var(--on-ink); }
.band-ink .btn-quiet:hover { --btn-bg: rgba(250, 249, 246, 0.08); }
.btn-danger { --btn-bg: transparent; --btn-fg: var(--bad); --btn-bd: var(--bad); }
.btn-danger:hover { --btn-bg: var(--bad-bg); }
.btn-danger-solid { --btn-bg: var(--bad); --btn-fg: #fff; --btn-bd: var(--bad); }

.btn-sm { min-height: 2.75rem; padding: 0.5rem 1.1rem; font-size: 1rem; border-radius: 12px; }
.btn-lg { min-height: 3.75rem; padding: 1rem 2rem; font-size: 1.25rem; border-radius: 16px; }
.btn-block { display: flex; width: 100%; }
.btn svg { flex: none; }

/* 6. Forms ---------------------------------------------------------------- */

.field { margin-bottom: var(--s5); }
.field label, .label { display: block; font-weight: 700; margin-bottom: var(--s2); }
.field .hint { display: block; color: var(--grey); font-size: var(--fs-small); margin-top: var(--s2); }
.input, .select, .textarea,
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="tel"],
.field select, .field textarea {
    display: block; width: 100%; min-height: var(--tap);
    padding: 0.75rem 1rem;
    font: 400 1.125rem/1.4 var(--sans); color: var(--ink);
    background: #fff; border: 2px solid #b9b0a2; border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea, .textarea { min-height: 7rem; resize: vertical; }
.input:focus, .select:focus, .textarea:focus, .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(197, 151, 62, 0.45);
}
/* An input with an error: red, on every form. Written as .field.field--error / .field …[aria-invalid] so it outranks
   .field input[type="text"] above (the plain .field--error input lost to it, and no input ever turned red). */
.field.field--error input, .field.field--error select, .field.field--error textarea,
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--bad); }
.field input[readonly] { background: var(--paper); color: var(--grey); }
.field .error { display: block; color: var(--bad); font-weight: 700; font-size: var(--fs-small); margin-top: var(--s2); }
.check { display: flex; gap: var(--s3); align-items: center; min-height: var(--tap); cursor: pointer; }   /* N18: the box level with its words */
.check input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--ink); flex: none; }
.field label.check { display: flex; margin-bottom: 0; }   /* N18: inside a .field too (.field label is a block) */
.check--top { align-items: flex-start; }
.check--top input { margin-top: .15rem; }
.try-sms__opt { font-weight: 400; color: var(--grey); }
.field .try-sms__box { margin-top: var(--s2); font-weight: 400; }
.try-sms__fine { margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--grey); }   /* free try: the carrier disclosures, one grey line */

/* 7. Notices, badges, dialog, toast --------------------------------------- */

.notice {
    padding: var(--s4) var(--s5); border-radius: 14px; border: 2px solid var(--paper-edge);
    background: #fff; font-size: var(--fs-body);
}
.notice--ok { border-color: #b9d2b4; background: var(--ok-bg); }
.notice--bad { border-color: #e7b9ae; background: var(--bad-bg); }
.notice--warm { border-color: #e4cf9f; background: #fbf3e2; }
.notice strong { display: block; margin-bottom: var(--s1); }

.badge {
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.2em 0.7em; border-radius: 999px;
    font-size: var(--fs-small); font-weight: 700; line-height: 1.5;
    background: var(--paper); color: var(--ink);
}
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--bad { background: var(--bad-bg); color: var(--bad); }
.badge--wait { background: #fbf3e2; color: var(--gold-text); }

dialog.dialog {
    width: min(30rem, calc(100vw - 2rem)); padding: var(--s6); border: 0; border-radius: var(--r-panel);
    background: var(--cream); color: var(--ink); box-shadow: var(--shadow-frame);
}
dialog.dialog::backdrop { background: rgba(26, 24, 21, 0.55); }
dialog.dialog h2 { font-size: 1.75rem; }
.dialog__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.dialog__actions .btn { flex: 1 1 10rem; }

/* crop dialog: a photo too tall or too wide for the video model (assets/js/photo-prep.js, free try and Add photos) */
.vcrop {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: var(--s4); background: rgba(26, 24, 21, 0.55); overscroll-behavior: contain;
}
.vcrop__panel {
    display: flex; flex-direction: column;
    width: min(44rem, 100%); height: min(100%, 54rem); padding: var(--s5);
    border-radius: var(--r-panel); background: var(--cream); color: var(--ink); box-shadow: var(--shadow-frame);
}
.vcrop__title { font-size: 1.75rem; margin-bottom: var(--s2); }
.vcrop__text { color: var(--grey); margin-bottom: var(--s4); }
.vcrop__stage { flex: 1 1 auto; min-height: 10rem; display: flex; align-items: center; justify-content: center; }
.vcrop__frame {
    position: relative; flex: none; touch-action: none; user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none; overflow: hidden; border-radius: var(--r-print); cursor: crosshair;
}
.vcrop__img { display: block; width: 100%; height: 100%; }
.vcrop__shade { position: absolute; box-shadow: 0 0 0 200vmax rgba(26, 24, 21, 0.62); pointer-events: none; }
.vcrop__box {
    position: absolute; cursor: move; outline: 2px solid #fff; outline-offset: -2px;   /* inside: the frame clips the outside */
    box-shadow: 0 0 0 1px rgba(26, 24, 21, 0.5), inset 0 0 0 1px rgba(26, 24, 21, 0.35);
    background:   /* thirds, faint */
        linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.67% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.67% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.67% + 0.5px), transparent calc(66.67% + 0.5px)),
        linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.67% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.67% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.67% + 0.5px), transparent calc(66.67% + 0.5px));
}
.vcrop__box:focus { outline: 2px solid #fff; outline-offset: -2px; }
.vcrop__box:focus-visible { outline: 3px solid var(--gold-hover); outline-offset: -3px; }
.vcrop.is-dragging .vcrop__box { cursor: grabbing; }
.vcrop__h { position: absolute; width: 2.75rem; height: 2.75rem; }   /* 44 px to touch, inside the box */
.vcrop__h::after { content: ""; position: absolute; width: 1.25rem; height: 1.25rem; border: 0 solid #fff; filter: drop-shadow(0 0 1px rgba(26, 24, 21, 0.7)); }
.vcrop__h--nw { top: 0; left: 0; cursor: nwse-resize; }
.vcrop__h--ne { top: 0; right: 0; cursor: nesw-resize; }
.vcrop__h--sw { bottom: 0; left: 0; cursor: nesw-resize; }
.vcrop__h--se { bottom: 0; right: 0; cursor: nwse-resize; }
.vcrop__h--nw::after { top: 0; left: 0; border-width: 4px 0 0 4px; }
.vcrop__h--ne::after { top: 0; right: 0; border-width: 4px 4px 0 0; }
.vcrop__h--sw::after { bottom: 0; left: 0; border-width: 0 0 4px 4px; }
.vcrop__h--se::after { bottom: 0; right: 0; border-width: 0 4px 4px 0; }
.vcrop__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.vcrop__actions .btn { flex: 1 1 12rem; }
@media (max-width: 34rem) {
    .vcrop { padding: 0; }
    .vcrop__panel { width: 100%; height: 100%; border-radius: 0; padding: var(--s4); }
    .vcrop__title { font-size: 1.375rem; }
    .vcrop__text { font-size: var(--fs-small); margin-bottom: var(--s3); }
    .vcrop__actions { flex-direction: column; margin-top: var(--s3); }
    .vcrop__actions .btn { flex: none; width: 100%; }
}

/* toasts made by assets/js/app.js (Echos.showToast) */
.toast-container {
    position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
    z-index: 200; display: grid; gap: var(--s2); width: min(30rem, calc(100vw - 2rem));
}
.toast {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--s3);
    padding: var(--s4) var(--s5); border-radius: 14px; background: var(--ink); color: var(--on-ink);
    box-shadow: var(--shadow-frame); font-size: var(--fs-small); font-weight: 700;
    opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s var(--ease);
}
.toast.visible { opacity: 1; transform: none; }
.toast-error { background: var(--bad); }
.toast-success .toast-icon { color: #9fd3a8; }
.toast-message { flex: 1; }
.toast-close { background: none; border: 0; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; min-width: 2.75rem; min-height: 2.75rem; }
.toast-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.toast-progress-bar { height: 100%; width: 100%; background: var(--gold); }

/* 8. Landing page --------------------------------------------------------- */

/* hero */
.hero { padding-block: var(--s5) var(--section); overflow: hidden; }
.hero__grid {
    display: grid; gap: var(--s5);
    grid-template-areas: "title" "stage" "buy";
}
.hero__title { grid-area: title; container-type: inline-size; }
.hero__stage { grid-area: stage; }
.hero__buy { grid-area: buy; }
.hero h1 { margin: var(--s2) 0 var(--s6); font-size: min(var(--fs-h1), 15cqi); }
/* Three fixed lines ("This frame / brings photos / to life"); the size above keeps the longest one on one line. */
.hero h1 .line { display: block; white-space: nowrap; }
/* The eyebrow wraps between its two sentences, never inside one. */
.hero .eyebrow .phrase { display: inline-block; }
/* "life" (Patrick 10-16: seedlings + tendril, no full stop): each letter grows up out of the baseline in turn, the dot
   of the i opens as a two-leaf sprout, a gold tendril grows out of the "e" where the full stop was, then the letters,
   leaves and tendril sway on their own slow rhythms. Screen readers get the hidden plain word.
   Reduce motion (section 10) jumps every animation to its end, so it all sits grown and still. */
.life { display: inline-block; color: var(--gold-text); white-space: nowrap; }
.life__word { display: inline-block; }
.life__l { display: inline-block; position: relative; transform-origin: 50% 100%;
    animation: vm-shoot 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) calc(0.3s + var(--i) * 0.16s) both,
               vm-stalk calc(4.2s + var(--i) * 0.9s) ease-in-out calc(2.6s + var(--i) * 0.3s) infinite; }
.life__stalk { display: inline-block; clip-path: inset(0.36em -0.1em 0 -0.1em); }
.life__bud { position: absolute; left: 50%; top: 0.04em; width: 0.46em; height: 0.44em; margin-left: -0.15em; overflow: visible; }
.life__sprig { fill: none; stroke: #6f8445; stroke-width: 3; stroke-linecap: round; }
.life__cot { fill: #7c8f4e; transform-box: view-box; transform-origin: 50% 56%;
    animation: vm-unfold 0.7s var(--ease) 1.1s both, vm-flutter 3.6s ease-in-out 2.4s infinite; }
.life__cot--r { --tilt: 7deg; animation-delay: 1.25s, 2.9s; }
.life__cot--l { --tilt: -7deg; }
.life__tendril { display: inline-block; width: 0.8em; height: 0.84em; margin-left: -0.04em; vertical-align: -0.04em; overflow: visible;
    transform-origin: 0 100%; animation: vm-tendril 7s ease-in-out 3s infinite; }
.life__stem { fill: none; stroke: var(--gold); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; animation: vm-draw 1.5s cubic-bezier(0.35, 0.1, 0.3, 1) 1.2s both; }
.life__leaf { fill: #7c8f4e; transform-box: fill-box; transform-origin: 0 100%; animation: vm-leaf 0.6s var(--ease) calc(1.8s + var(--d) * 0.35s) both, vm-leaf-sway 5s ease-in-out calc(3s + var(--d) * 0.8s) infinite; }
@keyframes vm-shoot { from { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes vm-stalk { 0%, 100% { transform: skewX(0); } 30% { transform: skewX(-3deg); } 70% { transform: skewX(2deg); } }
@keyframes vm-unfold { from { transform: scale(0) rotate(0); } to { transform: none; } }
@keyframes vm-flutter { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(var(--tilt)); } }
@keyframes vm-draw { from { stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes vm-leaf { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes vm-leaf-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
@keyframes vm-tendril { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
.hero__lead { margin: 0; }
.hero__sub { display: none; }
@media (max-width: 36rem) {
    .hero { padding-top: var(--s4); }
    .hero__grid { gap: var(--s4); }
    .hero__lead { display: none; }   /* Patrick 10-16: no lead paragraph on phones */
    /* Patrick 11-03: no eyebrow, no space above the frame, and one line under the colours in place of the price (the button still says it).
       The stage's negative margin takes the gap and most of the empty top of its 4:3 box (the frame starts about 5% of the width down). */
    .hero .eyebrow { display: none; }
    .hero h1 { margin: 0 0 var(--s2); }
    .hero__stage { margin-top: calc(-1 * var(--s4) - 3vw); }
    .hero__buy { margin-top: -5vw; position: relative; }
    .hero .swatches legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .hero .swatches { margin-bottom: var(--s3); }
    .hero .price { display: none; }
    .hero__sub { display: block; margin: 0 0 var(--s3); font-weight: 700; }
}
@media (min-width: 60rem) {
    .hero { padding-top: var(--s8); }
    .hero__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-areas: "title stage" "buy stage";
        grid-template-rows: auto 1fr;
        column-gap: clamp(2rem, 4vw, 5rem); row-gap: var(--s5);
        align-items: start;
    }
    .hero h1 { margin-top: var(--s4); }
    /* The frame grows into the empty right page margin (up to 14rem past the gutter); its top lines up with the headline. */
    .hero__stage { align-self: start; margin-top: calc(-1 * var(--s5)); margin-right: calc(-1 * (var(--gutter) + min(14rem, max(0px, (100vw - 76rem) / 2)))); }

}

/* gift.php, the search ads' page (Patrick 11-04): longer headline lines, the order button first, the free try a plain link. */
.page-gift .hero h1 { font-size: min(var(--fs-h1), 13.5cqi); }
.page-gift .deadline { margin: var(--s3) 0 0; }
.gift-try { margin: var(--s3) 0 var(--s4); }
.gift-try a { color: inherit; text-underline-offset: 0.2em; }

/* Desktop: the still photos under the frame (Patrick 10-16). The one on the screen now lifts, and a looping arrow
   draws from it up to the screen each time the clip changes (landing.js showPrint): a still photo in, a living photo out. */
.hero-prints { display: none; }
@media (min-width: 60rem) {
    .hero-prints {
        position: relative; display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr)); gap: var(--s4);
        max-width: min(36rem, 100% - 2 * var(--gutter)); margin: -9% auto 0; padding-top: 8.6rem;
    }
    .hero-print {
        background: #fdfcf8; padding: 6% 6% 18%; border-radius: var(--r-print); box-shadow: var(--shadow-print);
        transform: rotate(var(--tilt, -3deg)); opacity: 0.6; filter: saturate(0.6);
        transition: transform 0.6s var(--ease), opacity 0.6s ease, filter 0.6s ease, box-shadow 0.6s ease;
    }
    .hero-print:nth-child(odd) { --tilt: 3deg; }
    .hero-print:nth-child(3n) { --tilt: -1.5deg; }
    .hero-print img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #ddd; }
    .hero-print.is-on { transform: translateY(-0.6rem) rotate(0) scale(1.14); opacity: 1; filter: none; box-shadow: var(--shadow-frame); }
    .hero-prints__arrow {
        position: absolute; top: 0; width: 4.6rem; height: 7.9rem; overflow: visible;
        left: calc((var(--at) + 0.5) * (100% + var(--s4)) / var(--count) - var(--s4) / 2 - 2.3rem); transition: left 0.6s var(--ease);
    }
    .hero-prints__arrow path { fill: none; stroke: var(--gold-text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
    .hero-prints__arrow.is-drawn path { animation: vm-arrow 1.1s ease-out 0.3s forwards; }
    .hero-prints__arrow.is-drawn .hero-prints__head { animation: vm-arrow 0.3s ease-out 1.35s forwards; }
    /* the two leaves (landing.js drawArrow) sprout once the arrow is drawn, then sway */
    .hero-prints__arrow .hero-prints__leaf path { fill: #7c8f4e; stroke: none; transform-box: fill-box; transform-origin: 0 90%; transform: scale(0); }
    .hero-prints__arrow.is-drawn .hero-prints__leaf path {
        animation: vm-arrow-leaf 0.5s var(--ease) calc(1.5s + var(--d) * 0.25s) forwards, vm-leaf-sway 5s ease-in-out calc(2.3s + var(--d) * 0.7s) infinite;
    }
    @keyframes vm-arrow-leaf { from { transform: scale(0); } to { transform: scale(1); } }
    @keyframes vm-arrow { to { stroke-dashoffset: 0; } }
}

/* the frame, drawn in CSS: what shows until (or instead of) the 3D model */
.stage { position: relative; aspect-ratio: 4 / 3; } /* frame3d.js frames its model for a ~4:3 box */
.stage__mount { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; } /* frame3d.js owns the framing inside this box; shown once its screen plays */
.stage.is-3d .stage__mount { opacity: 1; }
.stage__mount canvas { width: 100% !important; height: 100% !important; display: block; }
.stage__fallback { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 0.6s ease; }
.stage.is-3d .stage__fallback { opacity: 0; pointer-events: none; }
.stage__fallback .device { width: 84%; }
.stage__floor {
    position: absolute; left: 10%; right: 10%; bottom: 3%; height: 10%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(26, 24, 21, 0.28), transparent 70%);
    filter: blur(6px); z-index: -1; transition: opacity 0.6s ease;
}
/* the 3D model brings its own contact shadow under its legs; the CSS floor belongs to the flat fallback only */
.stage.is-3d .stage__floor { opacity: 0; }

.device {
    --bezel-c: var(--bezel);
    position: relative; padding: 3.2% 3.4%; border-radius: var(--r-bezel);
    background: linear-gradient(160deg, color-mix(in srgb, var(--bezel-c) 88%, #fff) 0%, var(--bezel-c) 45%, color-mix(in srgb, var(--bezel-c) 85%, #000) 100%);
    box-shadow: var(--shadow-frame), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background 0.4s ease;
}
.device[data-color="white"] { --bezel-c: #ecebe7; }
.device[data-color="olive"] { --bezel-c: #5f573a; background: linear-gradient(160deg, #7a7050, #655c3f 50%, #524a32); }
.device__screen {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: #0d0d0e;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.device__screen img, .device__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the hero frame shows a clip as the frame does (normalize.py --fit blur): whole, on a soft dimmed copy of itself */
.stage .device__screen img, .stage .device__screen video { object-fit: contain; }
.stage .device__screen img.device__fill { inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(14px) brightness(0.78) saturate(0.9); }
.device__screen::after { /* faint glass */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 38%);
}

.media-toggle {
    position: absolute; right: calc(3.4% + 0.6rem); bottom: calc(3.2% + 0.6rem); z-index: 2;
    width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center;
    background: rgba(26, 24, 21, 0.62); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); cursor: pointer;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.media-toggle:hover { background: rgba(26, 24, 21, 0.85); }
.media-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* colour chooser */
.swatches { border: 0; padding: 0; margin: 0 0 var(--s5); }
.swatches legend { font-weight: 700; margin-bottom: var(--s3); padding: 0; }
.swatches__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch label {
    display: flex; align-items: center; gap: var(--s2); cursor: pointer;
    padding: var(--s2) var(--s3); min-height: 3.75rem;
    border: 2px solid var(--paper-edge); border-radius: 14px; background: #fff;
    text-align: left; line-height: 1.2; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.swatch__text { display: grid; min-width: 0; }
.swatch__chip {
    flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
}
.swatch__chip--charcoal { background: linear-gradient(145deg, #474747, #1f1f1f); }
.swatch__chip--white { background: linear-gradient(145deg, #ffffff, #e2e0db); }
.swatch__chip--olive { background: linear-gradient(145deg, #7d7352, #514930); }
.swatch__name { font-weight: 700; font-size: 1rem; }
.swatch__price { font-size: 0.9375rem; color: var(--grey); }
/* N6 (2026-10-14): on a phone the chip sits above its name, so "Charcoal" never touches the border and the three
   chips keep one height ("Olive Brown" on one line). */
@media (max-width: 36rem) {
    .swatch, .swatch label { height: 100%; }
    .swatch label { flex-direction: column; justify-content: center; text-align: center; padding: var(--s2) 0.25rem; gap: 0.3rem; }
    .swatch__price { display: none; }
    .swatch__chip { width: 1.375rem; height: 1.375rem; }
    .swatch__name { font-size: 0.875rem; white-space: nowrap; }
}
@media (max-width: 22rem) { .swatch__chip { display: none; } }
.swatch input:checked + label { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.swatch input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 3px; }

.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--s3); margin-bottom: var(--s4); }
.price__now { font-family: var(--serif); font-size: 2.5rem; line-height: 1; font-weight: 500; }
.price__note { font-weight: 700; }

.buy-cta { margin-bottom: var(--s3); }
.try-cta { margin-bottom: var(--s3); }   /* "Try it with my photo" under the buy button (funnel 10-04) */
.buy-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); color: var(--ink); }
.buy-facts li { display: flex; gap: var(--s3); align-items: baseline; }
.buy-facts li::before {
    content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%;
    background: var(--gold); transform: translateY(-0.1rem);
}
.deadline { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--paper-edge); color: var(--gold-text); font-weight: 700; }

/* before → after */
.compare { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 52rem) { .compare { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); } }
.compare figure { margin: 0; }
.compare figcaption { margin-top: var(--s4); font-weight: 700; }
.compare figcaption span { display: block; font-weight: 400; color: var(--grey); }
.print-wrap { display: grid; place-items: center; min-height: 14rem; padding: var(--s4); }
@media (min-width: 52rem) { .print-wrap { min-height: 22rem; } }
.print {
    background: #fdfcf8; padding: 4.5% 4.5% 13%; border-radius: var(--r-print);
    box-shadow: var(--shadow-print); transform: rotate(-2deg); max-width: 100%;
    transition: transform 0.4s var(--ease);
}
.print img { max-height: 20rem; width: auto; margin: 0 auto; background: #ddd; }
@media (min-width: 52rem) { .print img { max-height: 24rem; } }
.compare__screen .device { max-width: 44rem; }

.picker { margin-top: var(--s7); }
.picker__label { font-weight: 700; margin-bottom: var(--s3); }
.picker__row { display: flex; gap: var(--s3); overflow-x: auto; padding: var(--s2) var(--s1) var(--s3); scroll-snap-type: x proximity; }
.picker__btn {
    flex: none; scroll-snap-align: start; appearance: none; cursor: pointer;
    width: 6.5rem; padding: 0.35rem; border-radius: 10px; border: 2px solid transparent; background: #fff;
    display: grid; gap: 0.35rem; font: 700 0.9375rem/1.25 var(--sans); color: var(--ink); text-align: left;
    box-shadow: 0 1px 2px rgba(26, 24, 21, 0.12);
}
.picker__btn img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.picker__btn[aria-pressed="true"] { border-color: var(--ink); }
.picker__btn span { padding: 0 0.15rem 0.1rem; font-size: 0.9375rem; }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s7); counter-reset: step; }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.step { counter-increment: step; }
.step::before {
    content: counter(step);
    display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: var(--s4);
    border-radius: 50%; border: 2px solid var(--gold);
    font: 500 1.625rem/1 var(--serif); color: var(--ink);
}
.step h3 { margin-bottom: var(--s3); }
.step p { color: var(--grey); }
.step__art { margin-bottom: var(--s5); border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper); }
.step__art img { width: 100%; height: 100%; object-fit: cover; }

/* the real thing (dark band) */
.real { display: grid; gap: var(--s6); }
@media (min-width: 60rem) { .real { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s6); align-items: end; } }
.photo { margin: 0; }
.photo img { width: 100%; border-radius: 14px; }
.photo figcaption { margin-top: var(--s3); font-size: var(--fs-small); color: var(--on-ink-2); }
.proto { position: relative; border-radius: 14px; overflow: hidden; }
.proto img { border-radius: 0; }
.proto__screen {
    position: absolute; left: 0; top: 0; width: 1280px; height: 800px;
    transform-origin: 0 0; overflow: hidden; background: #0d0d0e; visibility: hidden;
}
.proto__screen.is-placed { visibility: visible; }
.proto__screen video, .proto__screen img { width: 100%; height: 100%; object-fit: cover; }
.real__side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (min-width: 60rem) { .real__side { grid-template-columns: 1fr; } }
.specs { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; gap: 0; border-top: 1px solid rgba(250, 249, 246, 0.16); }
@media (min-width: 40rem) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); } }
.specs li { padding: var(--s4) 0; border-bottom: 1px solid rgba(250, 249, 246, 0.16); }
.specs strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.375rem; color: var(--on-ink); }
.specs span { color: var(--on-ink-2); }

/* made for grandparents */
.grand { display: grid; gap: var(--s6); }
@media (min-width: 48rem) { .grand { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); row-gap: var(--s7); } }
.grand__item { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s4); align-items: start; }
.grand__icon {
    width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--cream);
    display: grid; place-items: center; color: var(--ink); border: 1px solid var(--paper-edge);
}
.grand__item h3 { margin-bottom: var(--s2); }
.grand__item p { color: var(--grey); }

/* pricing */
.plans { display: grid; gap: var(--s5); }
@media (min-width: 56rem) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan {
    display: flex; flex-direction: column; gap: var(--s4);
    padding: var(--s5); border-radius: var(--r-panel); background: #fff; border: 1px solid var(--paper-edge);
}
@media (max-width: 55.99rem) {
    .plan { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: var(--s4); row-gap: var(--s2); align-items: center; padding: var(--s4); }
    .plan__look { grid-row: 1 / span 2; }
    .plan h3 { align-self: end; }
    .plan .price { align-self: start; }
    .plan .price__now { font-size: 2rem; }
    .plan .btn { grid-column: 1 / -1; margin-top: var(--s3); }
}
.plan__look { border-radius: 12px; background: var(--paper); aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; }
.plan__look img { width: 100%; height: 100%; object-fit: cover; }
.plan__look--poster { background: var(--cream); aspect-ratio: 4 / 3; }
.plan__look--poster picture { display: contents; }
.plan__look--poster img { object-fit: contain; }
[data-poster-screen] { position: relative; overflow: hidden; }
.poster-screen { position: absolute; left: 0; top: 0; width: 160px; height: 100px; transform-origin: 0 0; overflow: hidden; background: #0d0d0e; visibility: hidden; pointer-events: none; }
.poster-screen.is-placed { visibility: visible; }
.poster-screen img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; aspect-ratio: auto !important; }
.poster-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0) 60%); }
.plan__look .device { width: 78%; }
.plan h3 { margin: 0; }
.plan .price { margin: 0; }
.plan .btn { margin-top: auto; }
.included { margin-top: var(--s7); display: grid; gap: var(--s5); }
@media (min-width: 48rem) { .included { grid-template-columns: 1fr 1fr; align-items: start; } }
.included h3 { margin-bottom: var(--s3); }

/* FAQ */
.faq { border-top: 1px solid var(--paper-edge); }
.faq details { border-bottom: 1px solid var(--paper-edge); }
.faq summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
    min-height: var(--tap); padding: var(--s4) 0;
    font: 500 var(--fs-h3)/1.25 var(--serif); text-wrap: balance;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid var(--ink);
    background:
        linear-gradient(var(--ink), var(--ink)) center / 0.9rem 2px no-repeat,
        linear-gradient(var(--ink), var(--ink)) center / 2px 0.9rem no-repeat;
    transition: transform 0.2s ease;
}
.faq details[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 0.9rem 2px no-repeat; }
.faq__answer { padding: 0 0 var(--s5); max-width: 40rem; color: var(--ink); }
.faq__answer p { color: var(--grey); }

.closing { text-align: left; }
.closing h2 { max-width: 16em; }
.closing .btn { margin-top: var(--s4); }

/* 9. Account pages -------------------------------------------------------- */

.page { padding-block: var(--s6) var(--s9); }
.page-head { margin-bottom: var(--s6); }
.page-head h1 { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); margin-bottom: var(--s3); }
.page-head p { color: var(--grey); font-size: var(--fs-lead); line-height: 1.45; max-width: 34em; }

.panel { background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--r-panel); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.panel + .panel { margin-top: var(--s5); }
.panel h2 { font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); }

.credits { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.credits__n { font: 500 3rem/1 var(--serif); }
.credits__text { font-size: var(--fs-lead); line-height: 1.35; }
.credits__text span { display: block; color: var(--grey); font-size: var(--fs-body); }

/* dashboard */
.home-grid { display: grid; gap: var(--s5); }
@media (min-width: 56rem) { .home-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.home-grid > * > :first-child { margin-top: 0; }   /* both columns start on one line (p3: .offer-second's margin pushed the right one down) */
/* One rule for actions inside a card (UI review m2): on a phone every button is full width; wider, a pair shares a
   row (.actions--row) and a lone button keeps its own width. */
@media (max-width: 29.99rem) {
    .home-grid .panel .btn, .onb .btn, .order-card .btn, .thanks-step .btn { display: flex; width: 100%; }
}
.actions { display: grid; gap: var(--s3); }
@media (min-width: 30rem) { .actions--row { grid-template-columns: 1fr 1fr; } }
.status-line { display: flex; gap: var(--s3); align-items: flex-start; }
.status-dot { flex: none; width: 0.9rem; height: 0.9rem; border-radius: 50%; margin-top: 0.45rem; background: #b9b0a2; }
.status-dot--on { background: #3f9a57; box-shadow: 0 0 0 4px rgba(63, 154, 87, 0.18); }
.status-dot--wait { background: var(--gold); }
/* Home, frames from several orders: one line per frame (its name, where it is, its WiFi). */
.frame-rows { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s4); }
.frame-rows p { margin: var(--s1) 0 0; color: var(--grey); }
.facts { list-style: none; padding: 0; margin: 0; }
.facts li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--paper-edge); }
.facts li:last-child { border-bottom: 0; }
.facts span:first-child { color: var(--grey); }
.facts span:last-child { font-weight: 700; text-align: right; }
.timeline { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s2); }
.timeline li { display: flex; gap: var(--s3); align-items: center; color: var(--grey); }
.timeline li::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid #b9b0a2; flex: none; }
.timeline li.is-done { color: var(--ink); }
.timeline li.is-done::before { background: var(--ok); border-color: var(--ok); }
.timeline li.is-now { color: var(--ink); font-weight: 700; }
.timeline li.is-now::before { border-color: var(--gold); background: var(--gold); }

.recent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 40rem) { .recent { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.recent a { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper); }
.recent img { width: 100%; height: 100%; object-fit: cover; }

/* upload (Add photos: one drop area that picks many, then a grid of the photos with each one's state) */
.picker-button { position: relative; }
.picker-button input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.add-photos {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3);
    width: 100%; min-height: 15rem; padding: var(--s6) var(--s5);
    border: 2px dashed #b9a57c; border-radius: var(--r-panel); background: #fffdf8;
    cursor: pointer; text-align: center; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.add-photos:hover, .add-photos.is-over { background: #fbf3e2; border-color: var(--gold); }
.add-photos.is-over { border-style: solid; }
.add-photos .btn { pointer-events: none; }
.add-photos__icon { color: var(--gold-text); }
.add-photos__hint { font-weight: 700; }
.add-photos__how { color: var(--grey); font-size: var(--fs-small); line-height: 1.5; max-width: 30em; }
.add-photos__how kbd {
    font: 700 0.875rem/1 var(--sans); padding: 0.15em 0.4em; border: 1px solid #b9b0a2; border-bottom-width: 2px;
    border-radius: 5px; background: #fff; color: var(--ink); white-space: nowrap;
}
/* The phone line by default; the computer line with a mouse on a wide screen. */
.how-computer { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 40rem) { .how-phone { display: none; } .how-computer { display: inline; } }
.add-photos--more { min-height: 0; padding: var(--s4) var(--s5); flex-direction: row; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.add-photos--more .add-photos__icon, .add-photos--more .add-photos__hint { display: none; }
.add-photos--more .btn { min-height: var(--tap); padding: 0.75rem 1.5rem; font-size: 1.125rem; }
.picker-button input:focus-visible + .add-photos { outline: 3px solid var(--ink); outline-offset: 4px; }

.upload-tip { margin: 0 0 var(--s4); font-size: var(--fs-small); line-height: 1.5; }
.upload-note { margin-bottom: var(--s5); }
.upload-note .muted { font-weight: 400; }

/* The grid: 3 across on a phone, 4 from 30rem, 5 from 40rem (25 photos = 5 rows on a computer). A photo that needs
   the person (held, screenshot, didn't send, didn't work) is a full-width card with its reason and buttons, first in the grid (right under "see below"). */
.photo-grid {
    list-style: none; padding: 0; margin: var(--s5) 0 0;
    display: grid; gap: var(--s2); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense;
}
@media (min-width: 30rem) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 40rem) { .photo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); } }
.photo-grid:empty { display: none; }
.ptile { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--paper); }
.ptile__pic { position: absolute; inset: 0; }
.ptile__img { width: 100%; height: 100%; object-fit: cover; }
.ptile__body {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 1.75rem var(--s2) var(--s2);
    background: linear-gradient(to top, rgba(26, 24, 21, 0.88) 0%, rgba(26, 24, 21, 0.6) 55%, rgba(26, 24, 21, 0) 100%);
    color: var(--on-ink);
}
.ptile__label { display: flex; align-items: center; gap: 0.25rem; margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.2; }
.ptile .qitem__bar { height: 6px; margin-top: 0.4rem; background: rgba(250, 249, 246, 0.3); }
.ptile--waiting .ptile__img, .ptile--skipped .ptile__img, .ptile--removed .ptile__img { opacity: 0.45; filter: grayscale(0.7); }
.ptile--ready { box-shadow: inset 0 0 0 3px var(--ok); }
.ptile--ready .ptile__body { background: linear-gradient(to top, rgba(31, 72, 42, 0.95) 0%, rgba(31, 72, 42, 0.7) 55%, rgba(31, 72, 42, 0) 100%); }
.ptile__open { position: absolute; inset: 0; border-radius: inherit; }
.ptile__open:focus-visible { outline-offset: -4px; }
.ptile--wide {
    grid-column: 1 / -1; order: -1; aspect-ratio: auto; display: grid; grid-template-columns: 6rem 1fr; gap: var(--s4); align-items: start;
    padding: var(--s3); padding-right: var(--s4); background: #fdf6f4; border: 1px solid #e7b9ae; border-radius: 16px;
}
.ptile--wide .ptile__pic { position: relative; width: 6rem; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--paper); }
.ptile--wide .ptile__body { position: static; padding: 0; background: none; color: var(--ink); }
.ptile__status { margin: 0; font-weight: 700; line-height: 1.35; color: var(--bad); }
.ptile--held .ptile__status, .ptile--flagged .ptile__status { color: var(--ink); }
.ptile--held, .ptile--flagged { background: #fbf3e2; border-color: #e4cf9f; }
.ptile__detail { margin: 0.15rem 0 0; color: var(--grey); font-size: var(--fs-small); line-height: 1.45; }
.ptile__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.qitem__bar { height: 8px; border-radius: 99px; background: var(--paper); margin-top: var(--s2); overflow: hidden; }
.qitem__bar span { display: block; height: 100%; width: 0; background: var(--gold); border-radius: inherit; transition: width 0.2s linear; }
.qitem__bar.is-indeterminate span { width: 35%; animation: vm-slide 1.6s ease-in-out infinite; }
@keyframes vm-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

.upload-done { margin-top: var(--s5); }
.allowance { margin: var(--s4) 0 0; font-size: var(--fs-body); }
.allowance strong { font-weight: 700; }
.add-photos .btn { width: min(100%, 20rem); }

/* gallery */
.gallery-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s4) var(--s6); }
.gallery-head > div { max-width: 40rem; }
.gallery-frame { max-width: 22rem; }
.gallery-summary { margin: calc(var(--s5) * -1) 0 var(--s5); }
.clip.is-highlight { outline: 3px solid var(--gold); outline-offset: 3px; }
/* Which frames play a living photo (2026-10-12): the filter row (chips, pick one) and, on each card, the "Plays on"
   checklist (real checkboxes, any number; UI review M1: chips there read as filters). Every control is at least 44 px
   high and the rows wrap; nothing scrolls sideways. */
.frame-filter { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }
.frame-filter__reach { margin: 0 0 var(--s3); font-size: var(--fs-small); line-height: 1.45; }
.frame-filter ~ .gallery-summary { margin-top: 0; }
.frame-chip {
    appearance: none; min-height: 2.75rem; padding: 0 var(--s4); border-radius: 99px; border: 2px solid var(--paper-edge);
    background: #fff; color: var(--ink); font: 700 1rem/1.2 var(--sans); cursor: pointer; max-width: 100%;
}
.frame-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.frame-chip:disabled { opacity: 0.6; cursor: default; }
.plays-on { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; }
.plays-on__label { padding: 0; margin-bottom: var(--s1); font-weight: 700; font-size: var(--fs-small); color: var(--grey); }
.plays-on__row { display: flex; align-items: center; gap: var(--s3); min-height: 2.75rem; cursor: pointer; font-size: 1rem; line-height: 1.3; }
.plays-on__row input { flex: none; width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--ink); cursor: pointer; }
.plays-on__row input:disabled { cursor: progress; }
.plays-on__none { margin-top: var(--s1); }
.clip[hidden] { display: none; }
.gallery { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.clip { background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--r-panel); overflow: hidden; display: flex; flex-direction: column; }
.clip__media { position: relative; aspect-ratio: 16 / 10; background: #0d0d0e; overflow: hidden; }
@media (max-width: 39.99rem) { .clip__media--tall { aspect-ratio: var(--clip-ratio, 4 / 5); } }   /* p7: a portrait or square photo in a box of its own shape (living-photos.js shapeBox), one card per row */
.clip__media img, .clip__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.clip__media .clip__backdrop { object-fit: cover; filter: blur(18px) brightness(0.55); transform: scale(1.15); }
.clip__play {
    position: absolute; inset: 0; margin: auto; width: 4.25rem; height: 4.25rem; border-radius: 50%;
    border: 0; background: rgba(250, 249, 246, 0.92); color: var(--ink); cursor: pointer;
    display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.clip__play svg { margin-left: 4px; }
.clip.is-playing .clip__play { opacity: 0; pointer-events: none; }
.clip__large {
    position: absolute; right: var(--s2); bottom: var(--s2); width: 2.75rem; height: 2.75rem; border-radius: 50%;
    border: 0; background: rgba(26, 24, 21, 0.62); color: var(--on-ink); cursor: pointer; display: grid; place-items: center;
}
.clip__large:hover, .clip__large:focus-visible { background: rgba(26, 24, 21, 0.85); }
/* The living photo at its real size: as wide as its own pixels allow, never wider, never taller than the screen. */
dialog.dialog--watch { width: max-content; max-width: calc(100vw - 1rem); padding: 0; background: #0d0d0e; overflow: hidden; }
dialog.dialog--watch::backdrop { background: rgba(13, 13, 14, 0.88); }
dialog.dialog--watch video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); margin: 0 auto; }
dialog.dialog--watch .dialog__close { --btn-bg: #0d0d0e; --btn-fg: var(--on-ink); --btn-bd: #0d0d0e; display: block; width: 100%; min-height: 2.75rem; border-radius: 0; }
.clip__veil {
    position: absolute; inset: 0; display: grid; align-content: end; gap: var(--s2);
    padding: var(--s4); color: var(--on-ink);
    background: linear-gradient(to top, rgba(26, 24, 21, 0.88) 0%, rgba(26, 24, 21, 0.35) 60%, rgba(26, 24, 21, 0.15) 100%);
}
.clip__veil strong { font-size: 1.125rem; }
.clip__veil p { font-size: var(--fs-small); line-height: 1.4; color: #e9e4db; margin: 0; }
.clip__veil .qitem__bar { background: rgba(250, 249, 246, 0.2); }
.clip__veil--bad { background: linear-gradient(to top, rgba(92, 24, 12, 0.92), rgba(26, 24, 21, 0.45)); }
.clip__body { padding: var(--s4); display: grid; gap: var(--s3); }
.clip__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.clip__date { color: var(--grey); font-size: var(--fs-small); }
.clip__title { margin-right: auto; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }   /* m15: each card's name */
.clip__tools { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.clip__note { margin: 0; color: var(--grey); font-size: var(--fs-small); line-height: 1.45; }
/* The card's last row: "Make a new version" left, "Delete" right, both on the card's text edge (UI review M1). */
.clip__toolbar { display: flex; gap: var(--s2) var(--s4); align-items: center; flex-wrap: wrap; border-top: 1px solid var(--paper-edge); padding-top: var(--s2); }
.clip__redo { display: flex; align-items: center; }
.clip__redo[hidden] { display: none; }
.clip__toolbar .clip__delete { margin-left: auto; padding-inline: 0; display: inline-flex; align-items: center; gap: 0.35rem; }
.clip__delete svg { flex: none; }
.clip__redo-left { color: var(--grey); font-size: var(--fs-small); }
.switch { display: inline-flex; align-items: center; gap: var(--s3); min-height: var(--tap); cursor: pointer; font-weight: 700; font-size: 1rem; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { width: 3.25rem; height: 1.9rem; border-radius: 99px; background: #cfc6b8; position: relative; transition: background 0.15s ease; flex: none; }
.switch__track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.9rem - 6px); height: calc(1.9rem - 6px);
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease;
}
.switch input:checked + .switch__track { background: var(--ok); }
.switch input:checked + .switch__track::after { transform: translateX(1.35rem); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--ink); outline-offset: 3px; }

.empty { text-align: center; padding: var(--s8) var(--s5); }
.empty h2 { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); }
.empty p { color: var(--grey); max-width: 28em; margin-inline: auto; margin-bottom: var(--s5); }

.skeleton { background: linear-gradient(90deg, var(--paper) 25%, #f7f2e9 50%, var(--paper) 75%); background-size: 200% 100%; animation: vm-shimmer 1.4s infinite; border-radius: var(--r-panel); min-height: 16rem; }
@keyframes vm-shimmer { to { background-position: -200% 0; } }

/* settings */
.jump { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s4); }
.jump a { font-weight: 700; min-height: 2.75rem; display: inline-flex; align-items: center; }
.settings-title { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); margin-bottom: var(--s4); }
.panel h3 { margin-bottom: var(--s4); }
.inline-field { display: flex; gap: var(--s3); align-items: stretch; }
.inline-field input { flex: 1; min-width: 0; }
.inline-field .btn { flex: none; }
fieldset.field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.field > legend { padding: 0; }   /* p5: the legend on the labels' edge (the browser gives it 2px each side) */
.hours__row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: end; }
.hours__row label { display: grid; gap: var(--s2); font-weight: 700; }
.hours__row input[type="time"] { min-height: var(--tap); padding: 0.5rem 0.75rem; font: 400 1.125rem/1.3 var(--sans); border: 2px solid #b9b0a2; border-radius: 12px; background: #fff; color: var(--ink); }
.hours__row input[type="time"]:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(197, 151, 62, 0.45); }
.more { border-top: 1px solid var(--paper-edge); padding-top: var(--s3); margin-top: var(--s3); }
.more summary { cursor: pointer; font-weight: 700; padding: var(--s2) 0; color: var(--grey); }
.more[open] summary { color: var(--ink); margin-bottom: var(--s3); }
.more--danger[open] summary { color: var(--bad); }
.more p { color: var(--grey); font-size: var(--fs-small); }
.token-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-bottom: var(--s3); }
.token-row .label { margin: 0; }
.device-token-display { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9375rem; word-break: break-all; background: var(--paper); padding: 0.35rem 0.6rem; border-radius: 8px; }
.member-list { margin: var(--s4) 0 var(--s5); }
.member-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--paper-edge); }
.member-item:first-child { border-top: 1px solid var(--paper-edge); }
.member-info { flex: 1 1 14rem; min-width: 0; }
.member-name { font-weight: 700; overflow-wrap: anywhere; }
.member-email { color: var(--grey); font-size: var(--fs-small); overflow-wrap: anywhere; }
.member-role { font-size: var(--fs-small); color: var(--grey); white-space: nowrap; }
.member-pending-label { margin-top: var(--s5); font-weight: 700; }
.invite-form { display: grid; gap: 0 var(--s4); align-items: end; }
/* Wide: the e-mail on its own line, then the select beside the button. In three columns the select's share of this
   narrow column was under 9rem and cut its longest choice off ("Add their own photos" read "Add their owr" at 1280);
   giving it room in one row left the e-mail field 10rem. Under 52rem the form stacks. */
@media (min-width: 52rem) { .invite-form { grid-template-columns: minmax(14rem, 1fr) auto; } .invite-form .field:first-child { grid-column: 1 / -1; } .invite-form .btn { margin-bottom: var(--s5); } }

/* after checkout (funnel refactor W2, 2026-10-04): the onboarding steps, Home's two cards, the upload batch */
.onb__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); }
.onb__head h2 { margin: 0; }
.onb__count { margin: 0; color: var(--gold-text); }
.onb__bar { height: 10px; border-radius: 99px; background: var(--paper); overflow: hidden; margin: var(--s3) 0 var(--s4); }
.onb__bar span { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
.onb__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.onb__list li { display: flex; gap: var(--s3); align-items: center; color: var(--grey); }
.onb__list li::before {
    content: ""; width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 2px solid #b9b0a2; flex: none;
    display: grid; place-items: center; font: 700 0.8125rem/1 var(--sans); color: #fff;
}
/* A done step: a tick in a green circle, the words greyed and struck through (UI review M3: a plain green dot read as
   "current", next to a gold one that was). */
.onb__list li.is-done { color: var(--grey); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: #b9b0a2; }
.onb__list li.is-done::before { content: "\2713"; background: var(--ok); border-color: var(--ok); }
.onb__list li.is-skipped::before { border-style: dashed; }
.onb__list li.is-now { color: var(--ink); font-weight: 700; }
.onb__list li.is-now::before { border-color: var(--gold); background: var(--gold); }
.onb__done { font-size: var(--fs-lead); line-height: 1.4; }
.onb__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.onb__more { font-weight: 700; min-height: 2.75rem; display: inline-flex; align-items: center; }
.onb .thanks-steps { margin-bottom: var(--s5); }
.thanks-lead { font-size: var(--fs-lead); line-height: 1.45; }
.thanks-step__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s3); }
.thanks-step__head h2 { margin-bottom: var(--s2); }
.thanks-step:not(.thanks-step-current) { padding-block: var(--s4); }
.thanks-step:not(.thanks-step-current) h2 { font-size: 1.25rem; }
.thanks-step:not(.thanks-step-current) p { margin: 0; }
.thanks-step-skipped { border-style: dashed; }
.thanks-step .btn-block + .onb-skip, .thanks-step .onb-skip + .btn, .thanks-step form + .onb-skip { margin-top: var(--s3); }
.thanks-step .onb-skip { margin-top: var(--s3); }
.thanks-step .onb-skip .btn { margin-top: 0; }
.thanks-order { margin-top: var(--s6); border-top: 1px solid var(--paper-edge); padding-top: var(--s4); }
.thanks-order summary { cursor: pointer; font-weight: 700; padding: var(--s3) 0; }
.onb .thanks-step-done h2::before { content: none; }
.offer-second { margin-top: var(--s5); border-color: #e4cf9f; background: #fffdf8; }
.offer-second h2 { font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); }
.home-big { font: 500 clamp(1.75rem, 1.5rem + 1vw, 2.25rem)/1.2 var(--serif); margin: var(--s2) 0; }
.home-left { color: var(--grey); }
.home-left strong { color: var(--ink); }
.mb-5 { margin-bottom: var(--s5); }

.batch { margin-top: var(--s5); padding: var(--s4) var(--s5); border: 2px solid var(--gold); border-radius: 16px; background: #fffdf8; }
.batch--done { border-color: #b9d2b4; background: #f6faf4; }
.batch__title { font-weight: 700; font-size: 1.125rem; line-height: 1.35; margin: 0; }
.batch__text { color: var(--grey); font-size: var(--fs-small); line-height: 1.45; margin: var(--s2) 0 0; }
.batch .qitem__bar { margin-top: var(--s3); }
.batch__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.batch__counts { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.batch__counts li { padding: var(--s2) var(--s3); border-radius: 12px; background: var(--paper); font-size: var(--fs-small); line-height: 1.3; color: var(--grey); }
.batch__counts strong { display: block; font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.batch__ready strong { color: var(--ok); }
.batch__fit { margin-top: var(--s4); font-size: var(--fs-small); }

.order-living { margin: var(--s5) 0; padding: var(--s4) var(--s5); border-radius: 16px; background: var(--paper); }
.order-living h3 { margin-bottom: var(--s2); }
.order-actions { display: grid; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 40rem) { .order-actions { display: flex; flex-wrap: wrap; } }

.frame-setup + .frame-setup { margin-top: var(--s5); }
.wifi-fields legend { margin-bottom: var(--s3); }
.wifi-note { font-size: var(--fs-small); margin-bottom: var(--s3); }
.wifi-status { font-size: var(--fs-small); margin: var(--s4) 0 0; }

/* confirmation dialogs made by assets/js/app.js (Echos.showModal) */
body.modal-open { overflow: hidden; }
.modal-overlay {
    position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: var(--s4);
    background: rgba(26, 24, 21, 0.55); opacity: 0; transition: opacity 0.2s ease;
}
.modal-overlay.visible { opacity: 1; }
.modal-content {
    width: min(30rem, 100%); background: var(--cream); border-radius: var(--r-panel); box-shadow: var(--shadow-frame);
    padding: var(--s6); transform: translateY(8px); transition: transform 0.2s var(--ease);
}
.modal-overlay.visible .modal-content { transform: none; }
.modal-header { display: flex; justify-content: space-between; align-items: start; gap: var(--s4); }
.modal-header h3 { font-size: 1.75rem; margin: 0; }
.modal-close { appearance: none; border: 0; background: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--grey); min-width: 2.75rem; min-height: 2.75rem; }
.modal-body { margin-top: var(--s4); }
.modal-footer { display: flex; flex-wrap: wrap-reverse; gap: var(--s3); margin-top: var(--s5); }
.modal-footer .btn { flex: 1 1 10rem; }

/* the two offers (assets/offers.js) */
.offer-overlay {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: var(--s4); background: rgba(26, 24, 21, 0.55);
}
@media (prefers-reduced-motion: no-preference) { .offer-overlay { animation: vm-fade 0.2s ease; } .offer-dialog { animation: vm-rise 0.25s var(--ease); } }
@keyframes vm-fade { from { opacity: 0; } }
@keyframes vm-rise { from { transform: translateY(10px); opacity: 0; } }
.offer-dialog {
    position: relative; width: 100%; max-width: 30rem; max-height: 92vh; overflow: auto;
    padding: var(--s6) var(--s5) var(--s5); border-radius: var(--r-panel); background: var(--cream); color: var(--ink);
    font-size: var(--fs-body); line-height: 1.55; box-shadow: var(--shadow-frame);
    border-top: 4px solid var(--gold);
}
.offer-dialog h2 { font-size: 1.875rem; margin: 0 2.5rem var(--s3) 0; line-height: 1.2; }
.offer-close {
    position: absolute; top: var(--s2); right: var(--s2); width: 3rem; height: 3rem; border: 0; background: none;
    font-size: 2rem; line-height: 1; cursor: pointer; color: var(--grey); border-radius: 50%;
}
.offer-close:hover { background: var(--paper); color: var(--ink); }
.offer-form label { display: block; font-weight: 700; margin: var(--s4) 0 var(--s2); }
.offer-form input[type=email], .offer-form input[type=tel] {
    display: block; width: 100%; min-height: var(--tap); padding: 0.75rem 1rem;
    font: 400 1.125rem/1.4 var(--sans); color: var(--ink); background: #fff; border: 2px solid #b9b0a2; border-radius: 12px;
}
.offer-form input[type=email]:focus, .offer-form input[type=tel]:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(197, 151, 62, 0.45); }
.offer-form .offer-check { display: flex; gap: var(--s3); align-items: flex-start; font-weight: 400; margin-top: var(--s4); font-size: var(--fs-small); line-height: 1.45; }
.offer-form .offer-check input { width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; flex: none; accent-color: var(--ink); }
.offer-optional { font-weight: 400; color: var(--grey); }
.offer-consent { font-size: 0.9375rem; line-height: 1.45; color: var(--grey); margin: var(--s4) 0; }
.offer-error { color: var(--bad); font-weight: 700; margin: var(--s2) 0; }
.offer-code {
    font: 700 1.75rem/1.2 var(--sans); letter-spacing: 0.08em; text-align: center;
    padding: var(--s4); margin: var(--s4) 0; border: 2px dashed var(--gold); border-radius: 12px; background: #fff; user-select: all;
}
.offer-actions { display: grid; gap: var(--s2); margin-top: var(--s5); }
.offer-dismiss {
    border: 0; background: none; padding: var(--s3); min-height: var(--tap); font: inherit; font-size: 1.0625rem;
    color: var(--grey); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer;
}
.offer-dismiss:hover { color: var(--ink); }

/* shared names used by the order, thanks and orders pages (their markup predates this file) */
.alert { padding: var(--s4) var(--s5); border-radius: 14px; border: 2px solid var(--paper-edge); background: #fff; margin: var(--s4) 0; }
.alert-error { border-color: #e7b9ae; background: var(--bad-bg); color: #7c2414; font-weight: 700; }
.alert-success { border-color: #b9d2b4; background: var(--ok-bg); color: #24542f; font-weight: 700; }
.form-group { margin-bottom: var(--s5); }
.form-group label { display: block; font-weight: 700; margin-bottom: var(--s2); }
.form-input {
    display: block; width: 100%; min-height: var(--tap); padding: 0.75rem 1rem;
    font: 400 1.125rem/1.4 var(--sans); color: var(--ink); background: #fff; border: 2px solid #b9b0a2; border-radius: 12px;
}
.form-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(197, 151, 62, 0.45); }
.btn-secondary { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn-secondary:hover { --btn-bg: rgba(26, 24, 21, 0.06); }
.card { background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--r-panel); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.empty-state { text-align: center; }
.empty-state h3 { font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); }
.empty-state p { color: var(--grey); }

/* order page (rebuilt 2026-10-12, beta tester 2): the frame playing, then price, color, how many and the buy button in
   the first screen (390 x 660 and 1280 x 720); everything else in closed rows below. The frame is the home page's hero
   (.stage, includes/hero-stage.php), the chips are its .swatches. */
.order-main { padding-block: var(--s3) var(--s9); }
.order-top { display: grid; gap: var(--s3); }
.order-stage { min-width: 0; }
.order-body { min-width: 0; }
.order-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); margin-bottom: var(--s3); }
.order-head h1 { font-size: clamp(1.625rem, 1.1rem + 2.4vw, 3rem); margin: 0; }
.order-head .price { margin: 0; gap: 0 var(--s2); }
.order-head .price__now { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
.order-pick { margin-bottom: var(--s3); }
.order-pick legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }  /* the chips say it */
.order-pick .swatch label { min-height: 3.25rem; }
.order-count .swatches__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-count .swatch label { justify-content: center; text-align: center; }
.order-count__note { font-size: 0.9375rem; color: var(--grey); }
.order-both { margin: calc(-1 * var(--s1)) 0 var(--s3); font-size: var(--fs-small); color: var(--grey); text-wrap: balance; }
/* N12: the line keeps its place with one frame (invisible, not gone), so Buy now never jumps when the count changes. */
.order-both.is-off { visibility: hidden; }
/* How many (B9, 2026-10-14): one row, the count between - and +, the total and the saving after it. 3.25rem buttons. */
.order-qty { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--s3); }
.order-qty__label { font-weight: 700; line-height: 3.5rem; }
.qty { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.qty__select { min-height: 3.25rem; padding: 0 var(--s3); border: 2px solid var(--paper-edge); border-radius: var(--r-button); background: #fff; font: inherit; }
.qty__select[hidden], .qty__step[hidden] { display: none; }
.qty__step { display: inline-flex; align-items: center; border: 2px solid var(--paper-edge); border-radius: var(--r-button); background: #fff; }
.qty__btn { width: 3.25rem; height: 3.25rem; border: 0; background: none; font: 500 1.5rem/1 var(--sans); color: var(--ink); cursor: pointer; border-radius: 12px; }
.qty__btn:hover:not(:disabled) { background: var(--paper); }
.qty__btn:disabled { color: var(--paper-edge); cursor: default; }
.qty__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.qty__n { min-width: 5.5rem; text-align: center; font-weight: 700; }
.qty__price { margin: 0; color: var(--grey); font-size: 0.9375rem; }
.qty__price [data-qty-price] { color: var(--ink); font-weight: 700; }
.order-notes p { margin: 0 0 var(--s3); }
/* The offer strip (includes/offer.php): the visitor's extra living photos and their one deadline, above the buy button on
   the order page, the home page and the living photo's own page. --waiting keeps its place until the release answers. */
.offer-strip { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0;
    background: var(--paper); color: var(--ink); font-weight: 700; font-size: 0.875rem; line-height: 1.35; text-wrap: balance; }
.offer-strip--waiting { visibility: hidden; min-height: 3.3rem; }
@media (min-width: 60rem) { .offer-strip { font-size: 1rem; } }
.offer-strip__count { display: inline-block; color: var(--gold-text); white-space: nowrap; }
.order-known { margin: 0 0 var(--s3); font-size: var(--fs-small); }
.order-offer { color: var(--ok); font-weight: 700; }
.order-after { margin: var(--s3) 0 0; font-weight: 700; text-align: center; }
.order-assent, .upload-rights { margin-top: var(--s2); color: var(--grey); font-size: var(--fs-small); }
.order-assent { text-align: center; }
.order-facts-list { margin-top: var(--s5); }
.order-christmas { font-weight: 700; }
.order-more { margin-top: var(--s7); }
.order-included ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.order-included li { display: flex; gap: var(--s3); align-items: baseline; }
.order-included li::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gold); transform: translateY(-0.1rem); }
.order-gift-note { margin-top: var(--s3); color: var(--grey); font-size: var(--fs-small); }
@media (max-width: 59.99rem) {
    /* the 4:3 stage has air above and below the frame: on a phone that air is given to the buy button */
    .order-stage { margin-block: calc(-1 * var(--s3)) calc(-1 * var(--s2)); }
    /* Buy now always in the first screen (Patrick 10-18 22:32): the 4:3 frame shrinks with the screen's height. */
    .order-stage .stage { max-width: calc((100vh - 24.5rem) * 4 / 3); max-width: calc((100svh - 24.5rem) * 4 / 3); min-width: 12rem; margin-inline: auto; }
    .order-top:has(.offer-strip:not([hidden])) .order-stage .stage { max-width: calc((100svh - 28rem) * 4 / 3); }
}
@media (max-width: 36rem) {
    /* a phone: the price sits beside the title, so the offer strip fits above the button in the first screen
       ("Free US shipping" is in the facts under the button and on the buy bar) */
    .order-head { flex-wrap: nowrap; }
    .order-head .price__note { display: none; }
    /* ...and the strip is tighter, so the button stays in the first screen (390 x 660) on the offer's last day too,
       when the live count makes it three lines */
    .offer-strip { margin-bottom: var(--s2); padding-block: var(--s1); }
    .offer-strip--waiting { min-height: 2.85rem; }
    /* While the strip has its place, the rest gives up a little air (under the frame, under the title, under the
       two-frames line), so the button is in the first screen with two frames chosen as well. */
    .order-top:has(.offer-strip:not([hidden])) .order-stage { margin-block: calc(-1 * var(--s4)) calc(-1 * var(--s5)); }
    .order-top:has(.offer-strip:not([hidden])) .order-head { margin-bottom: var(--s2); }
    .order-top:has(.offer-strip:not([hidden])) .order-both { margin-bottom: var(--s2); }
}
/* The extras screen between Buy and Stripe (/order-extras.php): what they chose, two boxes, the total, one button. */
.extras-main { padding-block: var(--s4) var(--s8); }
.extras-title { font-size: clamp(1.625rem, 1.2rem + 2vw, 2.5rem); margin: 0 0 var(--s3); text-wrap: balance; }
.extras-chosen, .extras-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin: 0 0 var(--s3); }
.extras-main .alert { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); font-size: var(--fs-small); line-height: 1.35; }
.extras-chosen { font-weight: 700; }
.extras-chosen__note { display: block; font-weight: 400; font-size: var(--fs-small); color: var(--grey); }
.extra { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: start; margin: 0 0 var(--s3);
    padding: var(--s3); border: 2px solid var(--paper-edge); border-radius: 14px; background: #fff; cursor: pointer; }
.extra input { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--ink); cursor: pointer; }
.extra input:disabled { cursor: default; }
.extra:has(input:checked) { border-color: var(--ink); }
.extra:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.extra__text { display: grid; gap: 0.15rem; }
.extra__text span { font-size: 0.9375rem; line-height: 1.35; color: var(--grey); }
.extra__price { font-weight: 700; white-space: nowrap; }
.extras-total { margin: var(--s4) 0 var(--s3); padding-top: var(--s3); border-top: 1px solid var(--paper-edge); justify-content: flex-start; }
.extras-total strong { font-family: var(--serif); font-size: 1.75rem; line-height: 1; font-weight: 500; margin-left: auto; order: 3; }
.extras-total__note { color: var(--grey); font-size: var(--fs-small); }
.extras-stripe, .extras-back, .extras-later { margin: var(--s2) 0 0; text-align: center; color: var(--grey); font-size: var(--fs-small); }
.extras-later { margin-top: var(--s4); }
.extras-back { margin-top: var(--s5); }
@media (min-width: 60rem) {
    .extras-main { padding-top: var(--s6); }
    .extra { padding: var(--s4); }
}
@media (min-width: 60rem) {
    .order-main { padding-top: var(--s5); }
    .order-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
    .order-stage { position: sticky; top: 5.5rem; margin-left: calc(-1 * min(6rem, max(0px, (100vw - 76rem) / 2))); }
    .order-body { padding-top: var(--s4); }
    .order-head { margin-bottom: var(--s4); row-gap: var(--s3); }
    .order-pick { margin-bottom: var(--s4); }
    .order-pick .swatch label { min-height: 3.75rem; }
}

/* The extras screen, rebuilt to sell (2026-10-14, includes/order-extras-page.php): the frame they chose with its
   picture, two offers as cards with real product pictures (two frames for two homes; a fan of prints for "every
   month"), and the order summary with one button. The pictures are the memorable part; everything else stays quiet. */
.xo { max-width: 72rem; }
.xo-steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0 0 var(--s5); padding: 0; font-size: var(--fs-small); color: var(--grey); counter-reset: xo; }
.xo-steps li { counter-increment: xo; display: flex; align-items: center; gap: var(--s2); }
.xo-steps li::before { content: counter(xo); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--paper-edge); font-weight: 700; font-size: 0.875rem; }
.xo-steps .is-done::before { content: "\2713"; background: var(--ink); border-color: var(--ink); color: var(--cream); }
.xo-steps .is-now { color: var(--ink); font-weight: 700; }
.xo-steps .is-now::before { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.xo-steps a { color: inherit; }
.xo .alert { margin: 0 0 var(--s4); }
.xo-grid { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 60rem) { .xo-grid { grid-template-columns: minmax(0, 1fr) 21.5rem; gap: var(--s7); } .xo-side { position: sticky; top: var(--s5); } }

.xo-chosen { display: grid; gap: var(--s4); background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--r-panel); padding: var(--s4); }
@media (min-width: 36rem) { .xo-chosen { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); align-items: center; padding: var(--s5); gap: var(--s5); } }
.xo-chosen__look { border-radius: 14px; background: var(--cream); overflow: hidden; }   /* the frame posters are shot on the page's cream */
.xo-chosen__look img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.xo-chosen__name { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); line-height: 1.12; margin: 0 0 var(--s2); }
.xo-chosen__price { font: 500 1.75rem/1 var(--serif); margin: 0 0 var(--s4); }
.xo-chosen__list { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); }
.xo-chosen__list li { position: relative; padding-left: 1.6rem; line-height: 1.4; }
.xo-chosen__list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--gold-text); font-weight: 700; }
.xo-chosen__change { margin: 0; font-size: var(--fs-small); }
.xo .offer-strip { margin: var(--s4) 0 0; }

.xo-h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); margin: var(--s7) 0 var(--s2); }
.xo-sub { color: var(--grey); margin: 0 0 var(--s5); }
.xo-offer { display: grid; background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--r-panel); overflow: hidden; }
.xo-offer + .xo-offer { margin-top: var(--s5); }
@media (min-width: 44rem) { .xo-offer { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.xo-offer__look { background: var(--paper); min-height: 11rem; position: relative; }
.xo-offer__body { padding: var(--s5) var(--s4); }
@media (min-width: 30rem) { .xo-offer__body { padding: var(--s5); } }
.xo-offer__body h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); margin: 0 0 var(--s3); }
.xo-offer__body > p { color: var(--grey); line-height: 1.5; margin: 0 0 var(--s4); }

/* two frames, two homes: the second stands a little behind and to the right */
.xo-offer__look.xo-two { background: var(--cream); }
.xo-two { display: grid; grid-template-columns: 1fr 1fr; align-items: center; align-content: center; padding: var(--s4) var(--s2); }
.xo-two__frame img { width: 100%; height: auto; }
/* N17: each poster is a frame on its own light ground, so where one overlapped the other its ground cut the back frame
   with a hard edge. The two now stand side by side, each in its own column, the second a little smaller and further back. */
.xo-two { gap: var(--s2); }
.xo-two__frame:first-child { transform: none; }
.xo-two__frame:last-child { transform: translateY(-4%) scale(0.9); }
@media (min-width: 44rem) { .xo-two { padding: var(--s5) var(--s4); } }
/* every month: three prints, fanned, the newest on top */
.xo-prints { display: grid; place-items: center; padding: var(--s5); }
.xo-prints__print { grid-area: 1 / 1; width: 7.25rem; padding: 0.45rem 0.45rem 1.4rem; background: #fff; border-radius: var(--r-print); box-shadow: var(--shadow-print); }
.xo-prints__print img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.xo-prints__print--0 { transform: translate(-3.4rem, 0.6rem) rotate(-9deg); }
.xo-prints__print--1 { transform: translate(3.3rem, 0.4rem) rotate(8deg); }
.xo-prints__print--2 { transform: translateY(-0.6rem) rotate(-1.5deg); }

/* the choices: a tile per thing, the box on the left, the price on the right */
.xo-plans { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.xo-pick { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); min-height: var(--tap);
    border: 2px solid var(--paper-edge); border-radius: var(--r-button); background: var(--cream); cursor: pointer; }
@media (max-width: 29.99rem) { .xo-pick { padding: var(--s3); gap: var(--s2) var(--s3); } }
.xo-pick input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--ink); cursor: pointer; }
.xo-pick input:disabled { cursor: default; }
.xo-pick:has(input:checked) { border-color: var(--ink); background: #fffdf8; }
.xo-pick:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.xo-pick__text { display: grid; gap: 0.1rem; line-height: 1.3; }
.xo-pick__text strong { font-size: 1.0625rem; }
.xo-pick__text span { font-size: 0.9375rem; color: var(--grey); }
.xo-pick__price { font: 500 1.375rem/1 var(--serif); white-space: nowrap; text-align: right; }
.xo-pick__price span { display: block; font: 400 0.875rem/1.3 var(--sans); color: var(--grey); }
.xo-best { position: absolute; top: -0.8rem; right: var(--s4); padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--gold); color: var(--ink); font: 700 0.8125rem/1.4 var(--sans); }
.xo-pick--best { border-color: #e4cf9f; }
.xo-terms { margin: var(--s4) 0 0; }
.xo-note { margin: var(--s3) 0 0; font-size: var(--fs-small); color: var(--grey); }

/* the summary: a receipt that adds up to the button */
.xo-sum { background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--r-panel); padding: var(--s5); }
.xo-sum__title { font-size: 1.5rem; margin: 0 0 var(--s3); }
.xo-sum__lines { list-style: none; margin: 0; padding: 0; }
.xo-sum__lines li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px dashed var(--paper-edge); line-height: 1.35; }
.xo-sum__lines li[hidden] { display: none; }
.xo-sum__lines li span:last-child { white-space: nowrap; font-weight: 700; }
.xo-sum__total { display: flex; justify-content: space-between; align-items: baseline; margin: var(--s4) 0 var(--s2); font-weight: 700; }
.xo-sum__total strong { font: 500 2rem/1 var(--serif); }
.xo-sum__then { margin: 0 0 var(--s3); font-size: var(--fs-small); }
.xo-go { margin-top: var(--s4); font-size: 1.125rem; padding-inline: var(--s4); }
.xo-sum .order-assent { margin: var(--s3) 0 0; }
.xo-sum__small { margin: var(--s2) 0 0; font-size: var(--fs-small); color: var(--grey); line-height: 1.45; }
.extras-page .buybar .btn { min-width: 9rem; }

/* add a second frame (/add-frame.php): the order cards are .extra, the colours .swatches (UI review M6) */
.add-frame-form { margin-bottom: var(--s4); }
.add-frame-orders { border: 0; padding: 0; margin: var(--s5) 0 0; min-width: 0; }
.add-frame-orders legend { padding: 0; margin-bottom: var(--s3); }
.add-frame-orders .extra:last-child { margin-bottom: 0; }
.add-frame-form .swatches { margin-top: var(--s5); }
.add-frame-form > .btn { margin-top: var(--s2); }

/* thanks page */
.thanks-main { padding-block: var(--s6) var(--s9); }
.thanks-main > h1 { font-size: clamp(2.125rem, 1.7rem + 2vw, 3rem); }
.thanks-main > h2 { font-size: 1.75rem; margin-top: var(--s7); }
.thanks-summary { margin: var(--s5) 0; padding: var(--s5); border-radius: var(--r-panel); background: var(--paper); display: grid; gap: 0; }
@media (min-width: 40rem) { .thanks-summary { grid-template-columns: 13rem 1fr; column-gap: var(--s5); } }
.thanks-summary dt { font-weight: 700; padding-top: var(--s3); }
.thanks-summary dd { margin: 0; padding-top: var(--s3); white-space: pre-line; }
@media (max-width: 39.99rem) { .thanks-summary dd { padding-top: 0; } }
.thanks-steps { list-style: none; padding: 0; margin: var(--s4) 0 var(--s6); display: grid; gap: var(--s4); }
.thanks-step { padding: var(--s5); border: 2px solid var(--paper-edge); border-radius: var(--r-panel); background: #fff; }
.thanks-step h2 { font-size: 1.5rem; margin-bottom: var(--s3); }
.thanks-step-current { border-color: var(--gold); }
.thanks-step-done h2::before { content: "\2713\00a0"; color: var(--ok); }
.thanks-step .btn { margin-top: var(--s3); }
.thanks-step form { margin-top: var(--s4); }
.thanks-muted { color: var(--grey); font-size: var(--fs-small); }
.thanks-skip { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: var(--s2); }
.thanks-main > p > .btn + .btn { margin-left: var(--s2); }

/* your order */
.order-card { padding: clamp(1.25rem, 1rem + 1vw, 2rem); margin-bottom: var(--s5); border: 1px solid var(--paper-edge); border-radius: var(--r-panel); background: #fff; }
.order-card h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); }
.order-card-headline { font-size: var(--fs-lead); line-height: 1.4; }
.orders-left { margin: 0; }
.orders-left strong { color: var(--ink); }
.orders-more { margin: var(--s6) 0 0; }   /* N2: the another-frame offer, one quiet line after the last order */
/* The four order steps as a stepper (UI review m7: four filled boxes read as buttons and took ~500 px on a phone):
   a dot per step, a tick when done, gold for now; a column on a phone, one row joined by a line from 40rem. */
.order-progress { list-style: none; padding: 0; margin: var(--s5) 0; display: grid; gap: var(--s2); }
.order-progress li { position: relative; display: flex; align-items: center; gap: var(--s3); color: var(--grey); font-size: var(--fs-small); line-height: 1.3; }
.order-progress li::before {
    content: ""; position: relative; z-index: 1; flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%;
    border: 2px solid #b9b0a2; background: #fff; display: grid; place-items: center; font: 700 0.8125rem/1 var(--sans); color: #fff;
}
.order-progress .is-done { color: var(--ink); }
.order-progress .is-done::before { content: "\2713"; background: var(--ok); border-color: var(--ok); }
.order-progress .is-current { color: var(--ink); font-weight: 700; }
.order-progress .is-current::before { background: var(--gold); border-color: var(--gold); }
@media (min-width: 40rem) {
    .order-progress { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
    .order-progress li { flex-direction: column; align-items: flex-start; gap: var(--s2); padding-right: var(--s2); }
    .order-progress li:not(:last-child)::after {   /* the line to the next step */
        content: ""; position: absolute; top: calc(0.6875rem - 1px); left: 1.375rem; right: 0; height: 2px; background: var(--paper-edge);
    }
    .order-progress li.is-done:not(:last-child)::after { background: var(--ok); }
}
.order-tracking { margin: var(--s4) 0; }
.order-tracking .btn { margin-top: var(--s3); }
.order-facts { display: grid; margin: var(--s4) 0; }
@media (min-width: 40rem) { .order-facts { grid-template-columns: 13rem 1fr; column-gap: var(--s5); } }
.order-facts dt { font-weight: 700; padding-top: var(--s3); }
.order-facts dd { margin: 0; padding-top: var(--s3); white-space: pre-line; }
@media (max-width: 39.99rem) { .order-facts dd { padding-top: 0; } }
.order-card > .btn { margin: var(--s3) var(--s2) 0 0; }
/* Ship-to address and its "Change address" form (orders.php, includes/ship_address.php) */
.order-facts dd.ship-to { white-space: normal; }
.ship-to .notice { margin: var(--s2) 0 var(--s3); font-size: var(--fs-small); }
.ship-to__address { margin: 0; }
.ship-to__again { margin: var(--s3) 0 0; font-weight: 700; }
.ship-to__locked { margin: var(--s3) 0 0; font-size: var(--fs-small); }
.ship-edit summary {
    display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; list-style: none;
    font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px;
}
.ship-edit summary::-webkit-details-marker { display: none; }
.ship-edit[open] summary { text-decoration: none; }
.ship-form { margin-top: var(--s2); padding: var(--s5); border-radius: 14px; background: var(--paper); }
.ship-form .notice { margin-top: 0; }
.ship-form .field { margin-bottom: var(--s4); }
.ship-form .field label .muted { font-weight: 400; }
.ship-form__row { display: grid; column-gap: var(--s4); }
@media (min-width: 30rem) { .ship-form__row { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.ship-form__note { font-size: var(--fs-small); }

/* admin (plain, readable) */
.admin-page .page-wrapper { padding-block: var(--s6) var(--s9); }
.admin-page .container { max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }
.admin-page .page-header { margin-bottom: var(--s5); }
.admin-page .page-header h1 { font-size: 2.5rem; margin-bottom: var(--s2); }
.admin-page .page-header p, .admin-page .text-secondary { color: var(--grey); }
.admin-page .text-small { font-size: 0.9375rem; }
.admin-page .table-wrapper { overflow-x: auto; background: #fff; border: 1px solid var(--paper-edge); border-radius: 14px; }
.admin-page .table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.admin-page .table th, .admin-page .table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--paper-edge); vertical-align: top; }
.admin-page .table th { font-weight: 700; background: var(--paper); white-space: nowrap; }
.admin-page .order-row:hover td { background: #fffdf8; }
.admin-page .form-select, .admin-page .form-input { min-height: 2.75rem; padding: 0.5rem 0.75rem; font: 400 1rem/1.3 var(--sans); border: 2px solid #b9b0a2; border-radius: 10px; background: #fff; width: 100%; }
.admin-page .btn-sm, .admin-page .btn-xs { min-height: 2.5rem; padding: 0.4rem 0.9rem; font-size: 0.9375rem; }

/* the owner's admin area (/admin/: includes/admin.php). Phone first; dense but never under 15px. */
.app-tabs__admin { margin-left: auto; }
.adm-nav { background: var(--ink); }
.adm-nav__row { display: flex; gap: 0.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-block: 0.35rem; }
.adm-nav__row::-webkit-scrollbar { display: none; }
.adm-nav a { flex: none; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.8rem; border-radius: 999px;
             color: var(--on-ink-2); font-size: 0.9375rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.adm-nav a:hover { color: var(--on-ink); }
.adm-nav a[aria-current="page"] { background: var(--on-ink); color: var(--ink); }
.adm { padding-block: var(--s5) var(--s8); font-size: 1rem; line-height: 1.5; }
.adm-h1 { font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem); margin-bottom: var(--s1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.adm-h1 .badge { font-family: var(--sans); font-size: 0.9375rem; }
.adm-h3 { font-family: var(--sans); font-weight: 700; font-size: 1rem; margin: var(--s4) 0 var(--s2); }
.adm-muted { color: var(--grey); }
.adm-note { font-size: 0.9375rem; margin-top: var(--s2); }
.adm-late { color: var(--bad); font-weight: 700; }
.adm-back { margin-bottom: var(--s2); font-size: 0.9375rem; }
.adm-empty { color: var(--grey); padding: var(--s3) 0; }
.adm-big { font-family: var(--serif); font-size: 2.5rem; line-height: 1.1; margin-bottom: var(--s2); font-variant-numeric: tabular-nums; }
.adm code, .adm-id { font-size: 0.8125rem; background: var(--paper); padding: 0.05em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }

.adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s3); margin: var(--s5) 0; }
.adm-tile { display: grid; align-content: start; gap: 0.15rem; padding: var(--s4); background: #fff; border: 1px solid var(--paper-edge);
            border-left: 6px solid var(--paper-edge); border-radius: 14px; color: var(--ink); text-decoration: none; }
a.adm-tile:hover { border-color: var(--ink); }
.adm-tile--ok { border-left-color: var(--ok); }
.adm-tile--warn { border-left-color: var(--gold); }
.adm-tile--bad { border-left-color: var(--bad); background: var(--bad-bg); }
.adm-tile__l { font-size: 0.875rem; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: 0.04em; }
.adm-tile__n { font-family: var(--serif); font-weight: 500; font-size: 2rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.adm-tile__s { font-size: 0.9375rem; color: var(--grey); }
.adm-tile--bad .adm-tile__s { color: var(--ink); }

.adm-sec { margin-top: var(--s6); }
.adm-sec h2 { font-size: 1.375rem; margin-bottom: var(--s3); }
.adm-sec__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.adm-sec__head a { font-size: 0.9375rem; }
.adm-cols { display: grid; gap: 0 var(--s6); }
@media (min-width: 52rem) { .adm-cols { grid-template-columns: 1fr 1fr; } }

.adm-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--paper-edge); border-radius: 14px; }
.adm-list li + li { border-top: 1px solid var(--paper); }
.adm-list li > a, .adm-list--plain li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem var(--s3); padding: var(--s3) var(--s4);
                   color: var(--ink); text-decoration: none; }
.adm-list li > a:hover { background: #fffdf8; }
.adm-list__main { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.adm-list__side { text-align: right; white-space: nowrap; font-size: 0.9375rem; }
.adm-list__sub { grid-column: 1 / -1; color: var(--grey); font-size: 0.9375rem; }
.adm-list--plain .adm-details { grid-column: 1 / -1; }
@media (max-width: 39.99rem) {
    .adm-list li > a, .adm-list--plain li { grid-template-columns: 1fr; }
    .adm-list__side { text-align: left; white-space: normal; }
}

.adm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid var(--paper-edge); border-radius: 14px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.adm-table th, .adm-table td { padding: 0.55rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--paper); }
.adm-table thead th { font-size: 0.8125rem; color: var(--grey); background: #fbfaf7; white-space: nowrap; }
.adm-table .n { text-align: right; white-space: nowrap; }
.adm-table tbody th { font-weight: 400; }
.adm-table__group th { background: var(--paper); font-weight: 700 !important; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey); }
.adm-table__note { display: block; font-size: 0.8125rem; color: var(--grey); }
.adm-table--num tbody th { min-width: 9rem; }
@media (max-width: 39.99rem) {
    .adm-table--num { font-size: 0.875rem; }
    .adm-table--num th, .adm-table--num td { padding: 0.5rem 0.4rem; }
    .adm-table--num tbody th { min-width: 0; padding-left: 0.6rem; }
    .adm-table--num .adm-table__note { display: none; }
}
.adm-table tr.is-late td:first-child { box-shadow: inset 4px 0 0 var(--bad); }
/* a list table: a table on a wide screen, one card per row on a phone */
.adm-table--cards { background: #fff; border: 1px solid var(--paper-edge); border-radius: 14px; overflow: hidden; }
@media (max-width: 47.99rem) {
    .adm-table--cards { background: none; border: 0; border-radius: 0; }
    .adm-table--cards thead { display: none; }
    .adm-table--cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem var(--s3); margin-bottom: var(--s3); padding: var(--s3) var(--s4);
                           background: #fff; border: 1px solid var(--paper-edge); border-radius: 14px; }
    .adm-table--cards tr.is-late { border-left: 6px solid var(--bad); }
    .adm-table--cards tr.is-late td:first-child { box-shadow: none; }
    .adm-table--cards td { display: block; padding: 0; border: 0; text-align: left; }
    .adm-table--cards td.n { text-align: left; }
    .adm-table--cards td::before { content: attr(data-label); display: block; font-size: 0.75rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.04em; }
    .adm-table--cards td:first-child, .adm-table--cards td:nth-child(2) { grid-column: 1 / -1; }
    .adm-table--cards td:first-child::before, .adm-table--cards td:nth-child(2)::before { display: none; }
}

.adm-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--s4) 0 var(--s3); }
.adm-pills a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.5rem; padding: 0 0.85rem; border: 1px solid var(--paper-edge);
               border-radius: 999px; background: #fff; font-size: 0.9375rem; text-decoration: none; }
.adm-pills a[aria-current] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.adm-pills__n { font-weight: 700; }
.adm-pills a[aria-current] .adm-late { color: #ffb4a6; }

.adm-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--s3); align-items: end;
               margin-bottom: var(--s3); padding: var(--s4); background: #fff; border: 1px solid var(--paper-edge); border-radius: 14px; }
.adm-filters label { display: grid; gap: 0.2rem; font-size: 0.875rem; font-weight: 700; color: var(--grey); }
.adm-filters__q { grid-column: 1 / -1; }
.adm-filters__check { display: flex !important; align-items: center; min-height: 2.75rem; color: var(--ink) !important; font-weight: 400 !important; }
.adm-filters__check input { width: 1.25rem; height: 1.25rem; margin: 0; }
.adm-more { grid-column: 1 / -1; }
.adm-more summary { cursor: pointer; font-size: 0.9375rem; font-weight: 700; min-height: 2.25rem; display: flex; align-items: center; }
.adm-more__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--s3); align-items: end; margin-top: var(--s2); }
.adm-table--cards td:first-child { white-space: nowrap; }
.adm-filters__go { display: flex; align-items: center; gap: var(--s3); font-size: 0.9375rem; }
.adm .input, .adm .select, .adm .textarea { min-height: 2.75rem; padding: 0.45rem 0.7rem; font-size: 1rem; border-radius: 10px; }
.adm .textarea { min-height: 4.5rem; }
.adm .btn-sm { min-height: 2.75rem; padding: 0.4rem 0.95rem; font-size: 0.9375rem; }

.adm-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s2) 0; }
.adm-actions form { margin: 0; }
.adm-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--s3); align-items: end;
            margin: var(--s3) 0; padding: var(--s4); background: var(--paper); border-radius: 14px; }
.adm-form label { display: grid; gap: 0.2rem; font-size: 0.875rem; font-weight: 700; }
.adm-form--inline { margin: 0; padding: var(--s3); }
.adm-label { margin: var(--s4) 0; }
/* Free tries (admin/tries.php, and the latest ones on the dashboard): photo and living photo side by side, the facts beside or under them */
.adm-tries { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.adm-try { display: grid; gap: var(--s3); padding: var(--s3); background: #fff; border: 1px solid var(--paper-edge); border-radius: 14px; }
@media (min-width: 52rem) { .adm-try { grid-template-columns: 22rem 1fr; } }
.adm-try__media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); align-self: start; }
.adm-try__media figure { margin: 0; min-width: 0; }
.adm-try__media img, .adm-try__media video, .adm-try__none { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--paper); border-radius: 10px; }
.adm-try__none { display: grid; place-items: center; padding: var(--s2); text-align: center; font-size: 0.875rem; color: var(--grey); }
.adm-try__media figcaption { font-size: 0.8125rem; color: var(--grey); margin-top: 0.2rem; }
.adm-try__facts { display: grid; align-content: start; gap: var(--s2); min-width: 0; }
.adm-try__facts p { margin: 0; }
.adm-try__who { font-weight: 700; overflow-wrap: anywhere; }
/* Review (admin/review.php): the living photo large, the photo small beside its facts, OK / Problem under it */
.adm-pills--sub { margin-top: 0; }
.adm-review { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.adm-review__item { display: grid; align-content: start; gap: var(--s3); padding: var(--s3); background: #fff; border: 1px solid var(--paper-edge); border-radius: 14px; }
.adm-review__item.is-problem { border-left: 6px solid var(--bad); }
.adm-review__item > video, .adm-review__item > .adm-try__none { display: block; width: 100%; aspect-ratio: 5 / 8; object-fit: contain; background: #111; border-radius: 10px; }
.adm-review__facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; }
.adm-review__facts p { margin: 0; }
.adm-review__photo img { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 8px; background: var(--paper); }
.adm-review__prompt { font-size: 0.875rem; white-space: pre-line; }
.adm-review__form { display: grid; gap: var(--s2); }
.adm-review__note { display: grid; gap: 0.2rem; font-size: 0.875rem; font-weight: 700; color: var(--grey); }
.adm-review__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.adm-review__buttons .btn { min-width: 6rem; }
.adm-review__problem { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad); }
.adm-tiles--5 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.adm-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--s2); }
.adm-thumbs a { display: grid; gap: 0.15rem; color: var(--ink); text-decoration: none; font-size: 0.8125rem; }
.adm-thumbs img, .adm-thumbs .adm-try__none { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--paper); }
.adm-thumbs span { color: var(--grey); overflow-wrap: anywhere; }

.adm-dl { display: grid; grid-template-columns: minmax(6.5rem, max-content) 1fr; gap: 0.35rem var(--s4); margin: 0; }
.adm-dl dt { color: var(--grey); font-size: 0.9375rem; }
.adm-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.adm-addr { padding: var(--s3) var(--s4); background: #fff; border: 1px solid var(--paper-edge); border-radius: 10px; font-size: 1.0625rem; }
.adm-quote { padding: var(--s3) var(--s4); background: #fff; border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; }
.adm-pre { white-space: pre-line; font-size: 0.9375rem; }
.adm-details summary { cursor: pointer; font-size: 0.9375rem; color: var(--grey); min-height: 2.25rem; display: flex; align-items: center; }
.adm-math { margin: var(--s4) 0; padding: var(--s4); background: #fff; border: 1px solid var(--paper-edge); border-radius: 14px; }
.adm-math .adm-h3 { margin-top: 0; }
.adm-math ol { margin: 0; padding-left: 1.25rem; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.adm-math__total { margin-top: var(--s3); font-size: 1.125rem; }
.adm-refund { margin-top: var(--s4); }
.adm-tl { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.adm-tl li { padding: 0.35rem 0; border-bottom: 1px solid var(--paper); }
.adm-tl time { display: inline-block; min-width: 8.5rem; color: var(--grey); font-variant-numeric: tabular-nums; }
.adm-log { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.adm-log li { padding: 0.5rem 0; border-bottom: 1px solid var(--paper); overflow-wrap: anywhere; }
.adm-log time { color: var(--grey); margin-right: 0.35rem; }
.adm-log code { display: block; margin-top: 0.2rem; }
.adm-scroll .adm-table td:first-child { white-space: nowrap; }
.adm-more summary::before, .adm-details summary::before { content: "▸"; margin-right: 0.4rem; }
.adm-more[open] > summary::before, .adm-details[open] > summary::before { content: "▾"; }
.adm-pager { display: flex; gap: var(--s4); justify-content: center; align-items: center; margin-top: var(--s4); }

/* sign in, create account, invitation */
.auth { padding-block: var(--s6) var(--s9); }
.auth__grid { display: grid; gap: var(--s8); }
@media (min-width: 60rem) {
    .auth { padding-top: var(--s8); }
    .auth__grid { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); align-items: center; gap: var(--s9); }
}
.auth__form { max-width: 30rem; }
.auth__form h1 { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); margin-bottom: var(--s3); }
.auth__lead { color: var(--grey); font-size: var(--fs-lead); line-height: 1.45; margin-bottom: var(--s6); }
.auth__form .notice { margin-bottom: var(--s5); }
.auth__form form { margin-top: var(--s5); }
.auth__more { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--paper-edge); display: grid; gap: var(--s3); }
.auth__more p { margin: 0; }
.auth__code label { font-weight: 400; color: var(--grey); font-size: var(--fs-small); } /* the 6-digit code: one quiet line under the link */
.auth__aside { display: none; }
@media (min-width: 60rem) { .auth__aside { display: grid; gap: var(--s3); justify-items: center; } .auth__look { width: 100%; max-width: 40rem; } .auth__look img { width: 100%; height: auto; } }
.auth__tagline { font-family: var(--serif); font-style: italic; font-size: 1.375rem; color: var(--grey); }

/* 10. Legal / long-form, utilities, motion -------------------------------- */

.legal, .prose { max-width: 42rem; margin-inline: auto; padding: var(--s7) var(--gutter) var(--s9); }
.legal h1 { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); }
.legal h2 { font-size: 1.625rem; margin-top: var(--s7); }
.legal p, .legal li { color: var(--ink); }
.legal ul { padding-left: 1.25rem; }
.legal blockquote { margin: var(--s4) 0; padding: var(--s4); border-left: 3px solid var(--gold); background: var(--paper); }
.sms-proof { margin: var(--s5) 0; }
.sms-proof img { display: block; max-width: 100%; height: auto; border: 1px solid var(--paper-edge); border-radius: 12px; }
.sms-proof figcaption { color: var(--grey); font-size: var(--fs-small); margin-top: var(--s2); }
.legal li { margin-bottom: var(--s2); }
.legal-updated { color: var(--grey); }
.legal-summary { background: var(--paper); border-radius: 14px; padding: var(--s5); margin: var(--s5) 0; }

.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }
.mb-0 { margin-bottom: 0; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* 11. Landing sales copy (hormozi pass, 2026-09-29) ----------------------- */

.eyebrow { margin: 0 0 var(--s3); font-weight: 700; font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-text); }
.risk-line { margin: 0 0 var(--s4); font-size: var(--fs-small); line-height: 1.45; color: var(--grey); }
.risk-line strong { color: var(--ink); }
.section-cta { margin-top: var(--s7); }

.offer-stack { margin-top: var(--s7); padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--r-panel); background: var(--paper); }
.offer-stack h3 { margin-bottom: var(--s4); }
.offer-stack__list { gap: var(--s3); }
.promise { margin-top: var(--s5); padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--r-panel); border: 2px solid var(--gold); background: #fff; }
.promise h3 { margin-bottom: var(--s3); }
.promise p { margin: 0 0 var(--s3); }
.promise p.small { margin: 0; color: var(--grey); }
.closing .deadline { max-width: 34em; }

.buybar { display: none; }
@media (max-width: 55.99rem) {
    .buybar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3);
        padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
        background: var(--cream); border-top: 1px solid var(--paper-edge); box-shadow: 0 -6px 20px rgba(26, 24, 21, 0.12);
    }
    .buybar[hidden] { display: none !important; }
    .buybar__text { display: grid; line-height: 1.2; }
    .buybar__text strong { font: 500 1.5rem/1 var(--serif); }
    .buybar__text span { font-size: 0.875rem; color: var(--grey); }
    .buybar .btn { flex: none; }
    .buybar__try { flex-basis: 100%; text-align: center; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
    body.has-buybar .site-footer { padding-bottom: 8rem; }
}

/* Get more photos (credits.php, commerce 09-30): two pack cards side by side, stacked on phones. */
.credit-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s4); margin: var(--s6) 0; }
.credit-pack { padding: var(--s5); border: 2px solid var(--paper-edge); border-radius: 16px; background: #fff; text-align: center; }
.credit-pack__name { font-family: var(--serif); font-weight: 500; font-size: 1.625rem; margin: 0 0 var(--s2); }
.credit-pack__price { font-family: var(--serif); font-size: 2.25rem; margin: 0; }
.credit-pack__each { margin: 0 0 var(--s4); }
/* The plan page (/credits.php). The terms beside a start button are the page's normal text: same size, same colour
   (auto-renewal law: never smaller or fainter than the text around them). */
.plan-card .credit-pack__price { margin-bottom: var(--s4); }
.plan-card__per { font-family: var(--sans, inherit); font-size: 1rem; }
.plan-card .btn { padding-inline: var(--s4); font-size: 1.125rem; }   /* "Start: $19.95 a month" on one line in a half-width card (UI review m3) */
.plan-terms { margin: var(--s4) 0 0; text-align: left; font-size: inherit; line-height: 1.5; color: var(--ink); }
.plan-terms--both { margin: calc(-1 * var(--s3)) 0 var(--s4); }   /* m4: the terms once, under both plan buttons */
.credits-redos { margin-top: var(--s8); }   /* N19: the Redos heading clear of the button above it */
.plan-line { margin: var(--s3) 0 0; }
.plan-line--thanks, .plan-line--gallery, .plan-line--frame_setup { margin: var(--s5) 0; }
.plan-line--gallery { margin-bottom: calc(var(--s5) * 2); }   /* .gallery-summary below pulls itself up by one --s5 */
.plan-line--settings { margin: 0; }
.plan-line > .btn { display: flex; width: fit-content; margin-top: var(--s3); }   /* the button (nothing left, a failed payment) on its own line */
.plan-line__go { margin: var(--s3) 0 0; }
.plan-now { margin: var(--s5) 0; padding: var(--s4) var(--s5); border-radius: 16px; background: var(--paper); }
.plan-now p:last-child { margin-bottom: 0; }
.plan-h2 { font-size: 1.375rem; margin: var(--s6) 0 var(--s2); }
.plan-action { margin: var(--s4) 0 0; }
.plan-card-change { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--paper-edge); }   /* B12: change my card */
.plan-action summary { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.plan-action form { margin-top: var(--s2); padding: var(--s4) var(--s5); border: 2px solid var(--paper-edge); border-radius: 16px; background: #fff; }

/* Funnel refactor (2026-10-04): the try links, the "What happens after you pay" box. */
.section-cta-note { margin: var(--s3) 0 0; font-size: var(--fs-small); }
.closing__try { margin-top: var(--s4); }
.order-next-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.order-next-steps li { display: grid; gap: var(--s1); }
.order-next-when { font-weight: 700; color: var(--gold-text); }
.order-try { margin-top: var(--s4); font-size: var(--fs-small); }
.offer-stack__more { margin: var(--s5) 0 0; }
.offer-stack__more + .offer-stack__more { margin-top: var(--s4); }

/* Review fixes C (2026-10-04): the extra living photos on Home's order card and the gallery's (Hormozi r3 M6),
   the inline packs when picked photos don't fit (M3), and the "25 more added" return on the upload page. */
.home-bonus { margin: var(--s4) 0 0; padding: var(--s3) var(--s4); border-left: 4px solid var(--gold); background: var(--paper); border-radius: 0 10px 10px 0; }
.batch__packs { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.batch__packs .btn { flex: 1 1 10rem; }
.batch__fit p { margin: var(--s2) 0 0; }
.upload-added { margin-bottom: var(--s4); }

/* ---- Sales pass 2026-10-07: the free try must read FREE at a glance (index, order, try, buy bar, exit pop-up) ---- */
.btn-free {
    --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink);
    gap: 0.6rem; box-shadow: 0 6px 18px rgba(26, 24, 21, 0.22);
}
.btn-free:hover { --btn-bg: #34302b; --btn-bd: #34302b; }
.band-ink .btn-free { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bd: var(--cream); }
.free-tag {
    display: inline-block; flex: none; padding: 0.2rem 0.55rem; border-radius: 999px;
    background: var(--gold); color: var(--ink); font: 800 0.8125rem/1.1 var(--sans);
    letter-spacing: 0.08em; text-transform: uppercase;
}
.risk-line strong { font-size: 1.0625rem; }
.section-cta-head { margin: var(--s7) 0 0; font: 500 clamp(1.5rem, 1.3rem + 0.8vw, 2rem)/1.2 var(--serif); }
.section-cta-head + .section-cta { margin-top: var(--s4); }
@media (max-width: 55.99rem) {
    .buybar__try { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1rem; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
}
.order-try { font-size: 1.0625rem; }
.order-try .btn-free { margin-top: var(--s3); }

/* the exit pop-up, free-try form: a big FREE headline, one line, one loud button, a playing sample */
.offer-dialog--free { padding: var(--s5) var(--s5) var(--s4); text-align: center; border-top: 0; }
.offer-dialog--free .offer-sample {
    margin: 0 auto var(--s4); max-width: 22rem; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
    background: #111; border: 8px solid var(--ink); box-shadow: var(--shadow-frame);
}
.offer-dialog--free .offer-sample video, .offer-dialog--free .offer-sample img { display: block; width: 100%; height: 100%; object-fit: cover; }
.offer-dialog--free .offer-sample-cap { margin: calc(-1 * var(--s3)) 0 var(--s3); font-size: 0.8125rem; color: var(--grey); }
.offer-dialog--free h2 {
    margin: 0 0 var(--s2); font-size: clamp(2.25rem, 1.8rem + 2vw, 2.875rem); line-height: 1.05; letter-spacing: -0.01em;
}
.offer-dialog--free h2 .offer-free { color: var(--gold-text); text-transform: uppercase; letter-spacing: 0.02em; }
.offer-dialog--free .offer-line { margin: 0 auto; max-width: 22em; font-size: 1.125rem; }
.offer-dialog--free .offer-actions { margin-top: var(--s4); }
.offer-dialog--free .btn-free { min-height: 4.25rem; font-size: 1.375rem; }
.offer-dialog--free .offer-fine { margin: var(--s2) 0 0; font-size: 0.875rem; color: var(--grey); }
.offer-dialog--free .offer-dismiss { font-size: 0.9375rem; padding: var(--s2); }
/* a phone: the whole pop-up fits the visible screen, no scrolling (Patrick 10-16). dvh = the screen between Safari's bars;
   the sample shrinks first on a short screen (the 23rem is everything else in the pop-up). */
@media (max-width: 36rem) {
    .offer-overlay:has(.offer-dialog--free) { padding: var(--s3); }
    .offer-dialog--free { max-height: calc(100dvh - 2 * var(--s3)); padding: var(--s4) var(--s4) var(--s2); }
    .offer-dialog--free .offer-sample { max-width: min(17rem, calc((100dvh - 23rem) * 1.6)); margin-bottom: var(--s3); border-width: 6px; }
    .offer-dialog--free .offer-sample-cap { margin: calc(-1 * var(--s2)) 0 var(--s2); }
    .offer-dialog--free h2 { font-size: 1.875rem; }
    .offer-dialog--free .offer-line { font-size: 1.0625rem; line-height: 1.45; }
    .offer-dialog--free .offer-actions { margin-top: var(--s3); gap: var(--s1); }
    .offer-dialog--free .btn-free { min-height: 3.5rem; font-size: 1.25rem; }
    .offer-dialog--free .offer-fine { margin-top: var(--s1); }
    .offer-dialog--free .offer-dismiss { min-height: 2.75rem; padding: var(--s1); }
}

/* D1: "Who is each frame for?" on Home: a name is short, so its field stays narrow on a wide screen */
.name-card__form .field input { max-width: 28rem; }