/* Remember My Gift: the two flow pages (start.html, record.html). v4, 2026-10-24.
   Loaded after styles.css on those two pages only; tokens, buttons, inputs and the header come from styles.css.
   DESIGN.md "Inner pages": forms in one centred card on mist, the start page opens as a split panel,
   the record page is the person's moment, phone first with 20px gutters. */

body.flow { --tint: color-mix(in srgb, var(--coral) 8%, var(--white)); --tint-2: color-mix(in srgb, var(--coral) 16%, var(--white)); --field: color-mix(in srgb, var(--ink) 20%, transparent); }
/* styles.css sets overflow-x:hidden on html AND body, which makes body a scroll container that never scrolls, so nothing
   inside it can be sticky. clip keeps the no-sideways-scroll guarantee without creating a scroll container. */
body.flow { overflow-x: clip; }
body.flow .site-header { border-bottom-color: transparent; }
body.flow .site-footer.slim { margin-top: 0; }
.flow .opt { font-weight: 400; color: var(--ink-2); font-size: .82rem; margin-left: 4px; }
.flow .btn { -webkit-tap-highlight-color: transparent; }
.flow .btn:active:not(:disabled) { transform: translateY(1px); }
.flow .input { border-color: var(--field); }
.flow .input:hover { border-color: color-mix(in srgb, var(--ink) 34%, transparent); }
.flow .input:focus { border-color: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 16%, transparent); }
.flow .check input, .flow .option input, .flow .qs li input[type="checkbox"] { accent-color: var(--coral); }

/* the doubled border on the occasion and language chips: styles.css has a second .chip rule (the photo "who is in it"
   tags, which are <button class="chip">) that also borders the <label class="chip"> wrapper. Labels get no box here;
   only their <span> draws the chip. */
.flow label.chip { border: 0; padding: 0; background: transparent; border-radius: 0; font-size: inherit; color: inherit; display: block; cursor: pointer; }

/* ======================================================================= start ======================================================================= */
.start-page { padding: 16px 0 48px; }
@media (min-width: 720px) { .start-page { padding: 40px 0 72px; } }
.start-shell { position: relative; max-width: 760px; margin: 0 auto; background: var(--white); border: 1px solid var(--rule); border-radius: 24px;
  box-shadow: 0 1px 2px rgba(23, 33, 38, .04), 0 24px 60px rgba(23, 33, 38, .08); overflow: clip; }
:root[data-theme="dark"] .start-shell { box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .start-shell { box-shadow: none; } }
.start-main { padding: 24px 20px 0; min-width: 0; }
@media (min-width: 720px) { .start-main { padding: 44px 48px 0; } }

/* the film panel: only on step 1. A banner on phones, the left half of the card on desktop. */
.start-media { display: none; position: relative; margin: 8px 8px 0; height: 220px; border-radius: 18px; overflow: hidden; background: #0b1317; isolation: isolate; }
.start-shell:has(.panel[data-panel="1"].active) .start-media { display: block; }
.start-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 44% 40%; z-index: -2; }
.start-media::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 19, 23, .05) 30%, rgba(11, 19, 23, .78) 100%); }
.start-media-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 20px; color: #fff; }
.start-media-line { margin: 0; font-family: var(--display); font-weight: 350; font-size: 1.55rem; line-height: 1.1; letter-spacing: -.015em; font-variation-settings: "opsz" 72; text-wrap: balance; max-width: 16ch; }
.start-media-line > span { display: block; }
.start-media-points { display: none; list-style: none; margin: 18px 0 0; padding: 0; gap: 6px 18px; flex-wrap: wrap; font-size: .92rem; color: rgba(255, 255, 255, .82); }
.start-media-points li { display: inline-flex; align-items: center; gap: 8px; }
.start-media-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f6a48f; }
@media (min-width: 600px) { .start-media { height: 260px; } .start-media-line { font-size: 1.9rem; } }
@media (min-width: 1000px) {
  .start-shell:has(.panel[data-panel="1"].active) { max-width: 1180px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .start-shell:has(.panel[data-panel="1"].active) .start-media { position: sticky; top: 84px; align-self: start; height: calc(100vh - 132px); min-height: 540px; max-height: 860px; margin: 12px 0 12px 12px; border-radius: 18px; }
  .start-shell:has(.panel[data-panel="1"].active) .start-main { padding: 52px 56px 0 52px; }
  .start-media-copy { padding: 36px 36px 38px; }
  .start-media-line { font-size: clamp(2.2rem, 3vw, 3rem); max-width: none; }
  .start-media-points { display: flex; }
}

.start-main .page-head { margin-bottom: 26px; }
.start-main .page-head h1 { font-size: clamp(2.1rem, 4.4vw, 2.9rem); font-weight: 350; margin-bottom: 10px; }
.start-main .page-head p { font-size: 1.02rem; margin: 0; }

/* progress: five bars, the done and current ones in coral */
.stepper { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 32px; padding: 0; list-style: none; }
.stepper li { position: relative; flex: none; border-top: 0; padding-top: 16px; font-size: .86rem; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
.stepper li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px; background: var(--rule); transition: background .25s; }
.stepper li.done::before, .stepper li.active::before { background: var(--coral); }
.stepper li.done::before { opacity: .55; }
.stepper li.active, .stepper li.done { color: var(--ink); border-top-color: transparent; }
.stepper li.done { color: var(--ink-2); }
.stepper li button { display: block; width: 100%; padding: 0; cursor: pointer; }
.stepper li button:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 4px; }
.stepper li .n { display: block; font-size: .74rem; font-weight: 500; opacity: 1; color: var(--ink-2); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 719px) {
  .stepper { gap: 5px; padding-bottom: 28px; margin-bottom: 24px; }
  .stepper li { position: static; padding-top: 0; height: 4px; }
  .stepper li::before { position: static; display: block; }
  .stepper li button { display: none; }
  .stepper li.active button { display: block; position: absolute; left: 0; top: 14px; width: auto; white-space: nowrap; font-size: .92rem; color: var(--ink); pointer-events: none; }
  .stepper li.active .n { display: inline; font-size: inherit; font-weight: 500; color: var(--ink-2); }
  .stepper li.active .n::after { content: "\00a0of 5\00a0\00a0\00b7\00a0\00a0"; }
}

/* panels */
.start-main .subhead { font-size: 1.5rem; margin: 40px 0 6px; }
.start-main .panel .subhead:first-child { margin-top: 0; }
.step-lede { color: var(--ink-2); font-size: .98rem; margin: 0 0 18px; max-width: 58ch; }
.subhead + .form-grid, .subhead + .field, .subhead + .options, .subhead + .review { margin-top: 16px; }
.start-main .form-grid { gap: 20px; }
.start-main .field > label, .start-main .field .lbl { font-size: .94rem; }
.start-main .field .hint { font-size: .86rem; line-height: 1.45; }
.tip-line { margin: 14px 0 0; font-size: .88rem; color: var(--ink-2); }

/* occasions: big tiles with a drawn icon */
.occ { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.occ .chip span { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px;
  border-radius: 14px; border: 1px solid var(--rule); background: var(--white); font-size: .97rem; font-weight: 600; text-align: left; line-height: 1.2;
  transition: border-color .15s, background .15s, box-shadow .15s; }
.occ .chip span::before { content: ""; flex: none; width: 24px; height: 24px; background-color: var(--ink-2);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; transition: background-color .15s; }
.occ .chip:hover span { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.occ .chip input:checked + span { background: var(--tint); color: var(--ink); border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); }
.occ .chip input:checked + span::before { background-color: var(--coral); }
.occ .chip input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }
.field.invalid .occ .chip span { border-color: color-mix(in srgb, var(--err) 55%, var(--rule)); }
@media (min-width: 560px) {
  .occ { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .occ .chip span { flex-direction: column; justify-content: center; text-align: center; gap: 10px; min-height: 98px; padding: 14px 6px; font-size: .9rem; }
  .occ .chip span::before { width: 28px; height: 28px; }
}
.occ input[value="birthday"] + span { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5h16M5.5 20.5v-6.5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v6.5M5.5 16.2c1.6 1.1 3.2 1.1 4.3 0s3.2-1.1 4.4 0 3.2 1.1 4.3 0M12 12V8.5M12 6.3c-.9 0-1.3-.8-1-1.6L12 3l1 1.7c.3.8-.1 1.6-1 1.6z'/%3E%3C/svg%3E"); }
.occ input[value="anniversary"] + span { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7a4.3 4.3 0 0 1 7.5 2.8C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E"); }
.occ input[value="wedding"] + span { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='14.5' r='5'/%3E%3Ccircle cx='15' cy='14.5' r='5'/%3E%3Cpath d='M10.5 5.5 12 3.5l1.5 2L12 7.6z'/%3E%3C/svg%3E"); }
.occ input[value="retirement"] + span { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.5h18M6.5 17.5a5.5 5.5 0 0 1 11 0M12 6.5V4.5M5.4 10.4 4 9M18.6 10.4 20 9M7 20.5h10'/%3E%3C/svg%3E"); }
.occ input[value="graduation"] + span { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5 12 5l9.5 4.5L12 14z'/%3E%3Cpath d='M6.5 11.6v4.4c3 2.2 8 2.2 11 0v-4.4M21.5 9.5v5'/%3E%3C/svg%3E"); }
.occ input[value="baby"] + span { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14.5A7.5 7.5 0 1 1 9.5 5a6 6 0 0 0 9.5 9.5z'/%3E%3Cpath d='M17 3.5v3M15.5 5h3'/%3E%3C/svg%3E"); }
.occ input[value="holidays"] + span { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9M9.5 4.5 12 7l2.5-2.5M9.5 19.5 12 17l2.5 2.5'/%3E%3C/svg%3E"); }
.occ input[value="memorial"] + span { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 21h7M10 21v-9.5h4V21M12 8.5c-1.3 0-1.9-1.2-1.3-2.4L12 3.5l1.3 2.6c.6 1.2 0 2.4-1.3 2.4z'/%3E%3C/svg%3E"); }
.occ input[value="farewell"] + span { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10.5 13.5M21 3l-6.5 18-4-7.5L3 9.5z'/%3E%3C/svg%3E"); }
.occ input[value="other"] + span { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c.6 4.2 2.3 5.9 6.5 6.5-4.2.6-5.9 2.3-6.5 6.5-.6-4.2-2.3-5.9-6.5-6.5 4.2-.6 5.9-2.3 6.5-6.5zM18.5 15.5c.3 1.6.9 2.2 2.5 2.5-1.6.3-2.2.9-2.5 2.5-.3-1.6-.9-2.2-2.5-2.5 1.6-.3 2.2-.9 2.5-2.5z'/%3E%3C/svg%3E"); }

/* languages: pills */
#langChips { gap: 8px; margin-top: 2px; }
#langChips .chip span { min-height: 42px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--white); font-size: .92rem; font-weight: 500; transition: border-color .15s, background .15s; }
#langChips .chip:hover span { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
#langChips .chip input:checked + span { background: var(--tint); color: var(--ink); border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); }
#langChips .chip input:checked + span::before { content: ""; width: 14px; height: 14px; margin-right: 7px; background-color: var(--coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
#langChips .chip input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }

/* questions */
.qs { gap: 10px; }
.qs li { gap: 12px; padding: 6px 4px 6px 14px; border-radius: 14px; border-color: var(--rule); min-height: 60px; transition: border-color .15s, background .15s; }
.qs li:focus-within { border-color: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 12%, transparent); }
.qs li input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--ink) 32%, transparent); background: var(--white); cursor: pointer; display: grid; place-content: center; transition: background .15s, border-color .15s; }
.qs li input[type="checkbox"]:checked { background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; border-color: var(--coral); }
.qs li input[type="checkbox"]:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.qs li input[type="text"] { font-size: 16px; font-weight: 500; padding: 8px 4px; }
.qs li input[type="text"]:focus { box-shadow: none; }
.qs li:has(input[type="checkbox"]:not(:checked)) { background: var(--mist); }
.qs li:has(input[type="checkbox"]:not(:checked)) input[type="text"] { color: var(--ink-2); font-weight: 400; }
.qs li .x { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 10px; font-size: 1.35rem; }
.qs li .x:hover { background: var(--mist); color: var(--ink); }
.qs li.custom { border-style: dashed; border-color: color-mix(in srgb, var(--ink) 26%, transparent); }
.field.invalid .qs li { border-color: color-mix(in srgb, var(--err) 50%, var(--rule)); }

/* people */
.prow-head { display: none; }
.people-rows { gap: 10px; }
.prow { position: relative; gap: 8px; padding: 10px; border-radius: 14px; border-color: var(--rule); background: var(--mist); }
.prow .input { min-height: 46px; background: var(--white); border-radius: 10px; }
.prow select.input { padding-right: 32px; background-position: right 10px center; }
.prow .btn-icon { width: 36px; height: 36px; background: var(--white); }
@media (max-width: 719px) {
  .prow { grid-template-columns: 1fr 1fr; padding: 12px; }
  .prow .input:nth-child(1), .prow .input:nth-child(2) { grid-column: 1 / -1; }
  .prow .input:nth-child(1) { padding-right: 44px; }
  .prow .btn-icon { position: absolute; top: 17px; right: 17px; width: 36px; height: 36px; grid-column: auto; border: 0; background: transparent; }
}
@media (min-width: 720px) {
  .prow-head { display: grid; grid-template-columns: 1fr 1.6fr .85fr .75fr 36px; gap: 8px; padding: 0 11px 6px; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
  .prow { grid-template-columns: 1fr 1.6fr .85fr .75fr 36px; }
}
.row-actions { margin-top: 14px; }
.remind-note { align-self: end; }
.remind-note .hint { display: block; padding: 12px 14px; border-radius: 12px; background: var(--mist); }
@media (min-width: 620px) { .remind-note { padding-bottom: 0; } }
.own-clips { margin-top: 22px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; }

/* music */
.options { gap: 12px; }
.option { padding: 18px; border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
.option.on { border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); }
.option strong { font-size: 1.02rem; margin-bottom: 2px; }
.option-body { margin-top: 14px; }
.moods { gap: 10px; }
.mood .box { border-radius: 14px; padding: 14px 16px; min-height: 86px; transition: border-color .15s, background .15s; }
.mood input:checked + .box { border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); background: var(--tint); }
.mood input:focus-visible + .box { outline-color: var(--coral); }
@media (max-width: 479px) {
  .moods { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mood .box { min-height: 0; padding: 12px 14px; }
  .mood .box span { font-size: .8rem; line-height: 1.35; display: block; }
  .option { padding: 16px; gap: 12px; }
  .option-body { margin-left: -34px; }
}
.option .drop { padding: 20px 16px; border-radius: 14px; }
.option .drop .big { font-size: 1.05rem; }

/* review */
.review { padding: 4px 20px; gap: 0; border-radius: 16px; background: var(--mist); border-color: transparent; }
.review .r { grid-template-columns: 104px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: .98rem; overflow-wrap: anywhere; }
.review .r:last-child { border-bottom: 0; }
.review .r span:first-child { font-weight: 600; font-size: .86rem; color: var(--ink-2); }
@media (max-width: 479px) { .review { padding: 2px 16px; } .review .r { grid-template-columns: 1fr; gap: 2px; } }
.pay-note { margin-top: 18px; padding: 16px 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--coral) 30%, var(--rule)); background: var(--tint); font-size: .95rem; }
.pay-note p { margin: 0; color: var(--ink); }
.pay-note p + p { margin-top: 8px; color: var(--ink-2); }

/* the footer of every step stays in reach while the step scrolls */
.start-main .panel-foot { position: sticky; bottom: 0; z-index: 6; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
  margin: 36px -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--white) 90%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--rule); }
.start-main .panel-foot .btn { width: auto; }
.start-main .panel-foot .btn-primary { flex: 1; }
.start-main .panel-foot .btn-secondary { min-width: 92px; }
.foot-note { display: none; font-size: .86rem; color: var(--ink-2); }
@media (min-width: 720px) {
  .start-main .panel-foot { margin: 44px -48px 0; padding: 18px 48px; }
  .start-main .panel-foot .btn-primary { flex: none; min-width: 200px; }
  .foot-note { display: inline; }
}
@media (min-width: 1000px) { .start-shell:has(.panel[data-panel="1"].active) .panel-foot { margin: 44px -56px 0 -52px; padding: 18px 56px 18px 52px; } }
.start-main .panel-foot .btn-primary::after { content: ""; width: 16px; height: 16px; margin-left: 2px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.start-main .panel-foot .btn-primary:disabled::after { display: none; }
.start-main #notice { margin-bottom: 20px; }

/* after Start: the invites are out */
.start-main #done { padding: 8px 0 36px; }
@media (min-width: 720px) { .start-main #done { padding: 12px 0 48px; } }
.start-main .done-head { text-align: center; padding: 8px 0 4px; }
.flow .done-head .tick { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; background: var(--tint-2); color: var(--coral); display: grid; place-items: center;
  box-shadow: 0 0 0 10px var(--tint); }
.flow .done-head .tick svg { width: 32px; height: 32px; }
.start-main .done-head h1 { font-size: clamp(2.1rem, 5vw, 3rem); font-weight: 350; margin-bottom: 12px; }
.start-main .done-head p { max-width: 50ch; margin: 0 auto; font-size: 1.04rem; }
.done-cta { justify-content: center; margin: 26px 0 30px; }
.start-main .copybox { border-radius: 16px; padding: 18px; background: var(--mist); }
.start-main .copybox textarea { border-radius: 12px; min-height: 130px; }
.start-main .keyhint { text-align: center; border-top: 0; margin-top: 22px; }
.start-help { text-align: center; margin: 22px 0 0; font-size: .88rem; color: var(--ink-2); }

/* the chat button: on phones it would sit on the sticky Continue button, so it hides there and the "Ask us" link under
   the card opens the same chat (data-ask). On desktop it rides above the step footer. */
@media (max-width: 719px) { .start-flow .chat-launcher { display: none; } }
@media (min-width: 720px) { .start-flow .chat-launcher { bottom: calc(max(20px, env(safe-area-inset-bottom)) + 92px); } }

/* header: styles.css hides every nav link under 860px; the record page keeps Help (a person on a phone may need it) */
@media (max-width: 859px) { .flow .site-header .nav a.nav-help { display: inline; font-size: .94rem; } }

/* ======================================================================= record ====================================================================== */
/* the record page had zero side margin on phones: .cp's padding shorthand overrode .wrap's gutter */
.cp { max-width: 600px; margin: 0 auto; padding: 24px max(20px, var(--gutter)) 56px; }
@media (min-width: 720px) { .cp { max-width: 640px; padding-top: 48px; padding-bottom: 80px; } }

.rec-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 96px 0; color: var(--ink-2); font-size: 1rem; }
.spin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--coral); animation: rmg-spin .8s linear infinite; }
@keyframes rmg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.cp > .notice.err { margin-top: 24px; }

.rec-card { background: var(--white); border: 1px solid var(--rule); border-radius: 22px; box-shadow: var(--shadow); padding: 24px 20px; }
@media (min-width: 720px) { .rec-card { padding: 36px; } }

/* who it is for */
.rec-for { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.mono { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--glow); color: #3b2420;
  font-family: var(--display); font-size: 1.65rem; font-weight: 400; line-height: 1; font-variation-settings: "opsz" 48;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px color-mix(in srgb, var(--coral) 30%, var(--rule)); }
.mono:empty { display: none; }
.rec-for-text { display: grid; gap: 2px; min-width: 0; }
.rec-for-text strong { font-size: 1.06rem; font-weight: 600; line-height: 1.25; }
.rec-for-text strong:empty { display: none; }
.rec-for-text .eyebrow { margin: 0; font-size: .92rem; font-weight: 400; color: var(--ink-2); }
.cp .page-head { margin-bottom: 18px; }
.cp h1 { font-size: clamp(2.15rem, 8.6vw, 3.1rem); font-weight: 350; line-height: 1.07; margin-bottom: 14px; }
.cp .page-head p { font-size: 1.06rem; line-height: 1.5; margin: 0; }

.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trust li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--white); font-size: .86rem; font-weight: 500; color: var(--ink); }
.trust svg, .cp-foot svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--coral); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rec-card .trust { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }
.rec-card .trust li { background: var(--mist); border-color: transparent; }

/* the questions */
.cp .qcard { margin-top: 28px; padding: 22px 20px 20px; border-radius: 22px; }
@media (min-width: 720px) { .cp .qcard { padding: 30px 32px 26px; } }
.cp .qcard .meta { font-size: .88rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.cp .qcard ol { list-style: none; padding: 0; margin: 0; gap: 0; counter-reset: q; }
.cp .qcard ol li { counter-increment: q; display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--display); font-size: 1.24rem; font-weight: 400; line-height: 1.3; letter-spacing: -.005em; font-variation-settings: "opsz" 32; overflow-wrap: anywhere; }
.cp .qcard ol li:last-child { border-bottom: 0; }
.cp .qcard ol li::before { content: counter(q); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-2); color: var(--coral-2);
  font-family: var(--font); font-size: .9rem; font-weight: 600; font-variation-settings: "opsz" 14; margin-top: -1px; }
:root[data-theme="dark"] .cp .qcard ol li::before { color: #f6a48f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cp .qcard ol li::before { color: #f6a48f; } }
.tips-wrap { margin-top: 10px; padding: 16px 16px 14px; border-radius: 14px; background: var(--mist); }
.tips-title { margin: 0 0 6px; font-size: .86rem; font-weight: 600; }
.cp .tips { margin: 0; gap: 4px; font-size: .9rem; }
.cp .tips li::before { height: 2px; border-radius: 2px; top: .66em; background: color-mix(in srgb, var(--ink-2) 70%, transparent); }

/* the two buttons */
.cp .bigbtns { margin-top: 24px; gap: 12px; }
.cp .bigbtns .btn { min-height: 58px; border-radius: 16px; font-size: 1.06rem; gap: 10px; }
.cp .bigbtns svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp .bigbtns .btn-rec { min-height: 66px; font-size: 1.14rem; }
.cp .bigbtns .btn-up { background: var(--white); }
.cp .bigbtns label.btn { cursor: pointer; }
.cp .bigbtns label.btn:focus-within { outline: 2px solid var(--coral); outline-offset: 3px; }
.cp .check.perf { margin-top: 18px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--rule); background: var(--white); font-size: .96rem; }
#stillNote { margin: 10px 2px 0; font-size: .82rem; }

/* uploads in progress */
.cp .cp-progress { margin-top: 18px; gap: 10px; }
.cp .cp-progress:empty { display: none; }
.cp .cp-item { background: var(--white); border-radius: 14px; padding: 14px 16px; gap: 10px; box-shadow: var(--shadow); }
.cp .cp-item .t { align-items: baseline; font-size: .95rem; }
.cp .cp-item .t span { font-variant-numeric: tabular-nums; font-weight: 500; }
.cp .cp-item .bar { height: 10px; background: var(--mist); }
.cp .cp-item .bar i { background: var(--coral); border-radius: 999px; }
.cp .cp-item .bar.done i { background: var(--ok); }
.already { margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: var(--ok-soft); color: var(--ok); font-size: .94rem; font-weight: 500; }

/* photos of the two of them */
.cp .extras { margin-top: 32px; padding: 22px 20px; border: 1px solid var(--rule); border-radius: 22px; background: var(--white); }
@media (min-width: 720px) { .cp .extras { padding: 28px 32px; } }
.extras-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); margin-bottom: 14px; }
.extras-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--coral); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp .extras h2 { font-size: 1.4rem; font-weight: 400; margin: 0 0 6px; font-variation-settings: "opsz" 48; }
.cp .extras p { font-size: .96rem; margin: 0 0 18px; }
.cp .extras .btn { width: 100%; border-radius: 14px; }
@media (min-width: 480px) { .cp .extras .btn { width: auto; } }

.cp .cp-foot { display: flex; gap: 10px; align-items: flex-start; margin-top: 28px; font-size: .84rem; line-height: 1.5; }
.cp .cp-foot svg { margin-top: 2px; stroke: var(--ink-2); }

/* done: thank you */
.done-card { text-align: center; padding-top: 36px; padding-bottom: 28px; }
.cp .done-head { text-align: center; padding: 0; }
.cp .done-head h1 { margin-bottom: 12px; }
.cp .done-head p { font-size: 1.04rem; max-width: 42ch; margin: 0 auto; }
.done-card .bigbtns { margin-top: 26px; }

/* closed */
#closed .page-head { margin-bottom: 0; }
#closed .eyebrow { margin-bottom: 12px; font-weight: 600; color: var(--coral); }
#closed .bigbtns { margin-top: 24px; }

/* layout: one column on phones (questions before the buttons), two on desktop (the person and the buttons on the left,
   the questions and photos on the right) so Record is above the fold. The wrappers vanish on phones. */
#rec { display: flex; flex-direction: column; }
.rec-main, .rec-side { display: contents; }
#rec .rec-hero { order: 1; }
#rec .qcard { order: 2; }
#rec .bigbtns { order: 3; }
#rec .check.perf { order: 4; }
#rec #stillNote { order: 5; }
#rec #progress { order: 6; }
#rec #already { order: 7; }
#rec #extras { order: 8; }
#rec .cp-foot { order: 9; }
/* phones: Record + Upload ride the bottom of the screen while the person reads the questions, and settle into place
   once the page reaches them (sticky, so it releases by itself). The progress rows and the thank-you come after it,
   so it never sits on them. The chat launcher is not shown on /r/ and /j/ (app.js chatHidden). */
@media (max-width: 719px) {
  #rec .bigbtns { position: sticky; bottom: 0; z-index: 20; gap: 2px; margin: 18px calc(-1 * max(20px, var(--gutter))) 0;
    padding: 12px max(20px, var(--gutter)) calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--mist) 90%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--rule); }
  #rec .bigbtns .btn-rec { min-height: 60px; }
  #rec .bigbtns .btn-up { min-height: 44px; background: transparent; border-color: transparent; box-shadow: none; font-size: .96rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  #rec .bigbtns .btn-up svg { width: 18px; height: 18px; }
  #rec .check.perf { margin-top: 14px; }
}
@media (min-width: 1000px) {
  .cp:has(#rec:not(.hidden)) { max-width: 1120px; }
  #rec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 0 64px; align-items: start; }
  .rec-main, .rec-side { display: block; min-width: 0; }
  .rec-main { position: sticky; top: 96px; padding-top: 8px; }
  #rec .qcard { margin-top: 0; }
  #rec .cp-foot { grid-column: 1 / -1; justify-content: center; margin-top: 40px; }
}

/* join: the open link asks the name first */
#join .form-grid { margin-top: 6px; }
#join .bigbtns { margin-top: 20px; }
#join .bigbtns .btn { min-height: 58px; }

/* an order paid on Etsy (/start?order=<token>): one calm line that it is paid, and nothing about prices */
.order-banner { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 22px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--rule); background: var(--paper); }
.order-banner .ob-tick { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.order-banner .ob-tick svg { width: 17px; height: 17px; }
.order-banner strong { display: block; font-size: 1.02rem; color: var(--ink); }
.order-banner span { display: block; margin-top: 2px; color: var(--ink-2); font-size: .95rem; }