/* Funnel screens: /start/, /plans/, /order/, /g/, /login/. Mobile-first, 390 px design width, one centred column. */

/* Funnel pages sit on white with a blush glow rising from the bottom edge (docs/design-theme.md). */
body:has(.bar-top) { background: var(--surface); }
body:has(.bar-top)::before {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 34vh; z-index: -1; pointer-events: none; background: var(--glow);
}
/* A sticky white action bar would cut the glow with a hard edge (/plans/, the order questions, login); the quiz keeps it. */
body:has(.foot):not(.quiz)::before { display: none; }

/* ---------- top bar ---------- */
.bar-top {
  position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar-top-in { max-width: var(--col); margin: 0 auto; height: 60px; padding: 0 8px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.bar-top-in.is-wide { max-width: 1120px; grid-template-columns: auto 1fr auto; padding: 0 var(--gutter); }
/* Quiz bar: logo left, progress in the middle, close right. */
.bar-top-in.is-funnel { max-width: 1200px; grid-template-columns: minmax(34px, 1fr) minmax(0, 560px) minmax(44px, 1fr); gap: 16px; padding: 0 var(--gutter); }
.bar-top-in.is-funnel .logo { justify-self: start; }
.bar-top-in.is-funnel .logo .logo-word { height: 25px; }
.bar-top-in.is-funnel .icon-btn { justify-self: end; margin-right: -8px; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--radius-s); background: none;
  color: var(--ink); cursor: pointer; text-decoration: none;
}
@media (hover: hover) { .icon-btn:hover { background: var(--paper-2); } }
.progress { height: 8px; border-radius: 99px; background: #EEE6E6; overflow: hidden; }
.progress > b { display: block; height: 100%; width: 0; min-width: 8px; border-radius: inherit; background: linear-gradient(90deg, var(--peach-hot), var(--coral) 45%, var(--rose)); transition: width .35s var(--ease-out); }
.bar-mid { display: flex; justify-content: center; }
.bar-link { justify-self: end; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--radius-s); color: var(--ink-2); font-size: 15px; font-weight: 600; text-decoration: none; }
.bar-link:hover { background: var(--paper-2); color: var(--ink); }
.bar-mid .logo .logo-word { height: 23px; }

/* Back: a small outlined button above the question, not in the bar. */
.back-row { max-width: 720px; margin: 0 auto; padding: 16px var(--gutter) 0; }
.back-row:has(.back-pill[hidden]) { padding-top: 0; }
.back-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 11px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer;
}
@media (hover: hover) { .back-pill:hover { background: var(--paper); border-color: var(--line-2); } }

/* ---------- screens ---------- */
.app { max-width: var(--col); margin: 0 auto; }
#app.app { max-width: 720px; }
.screen {
  min-height: calc(100svh - 61px); display: flex; flex-direction: column;
  padding: 24px var(--gutter) 0;
}
.back-row:not(:has(.back-pill[hidden])) + #app .screen { min-height: calc(100svh - 61px - 54px); padding-top: 18px; }
.screen h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.03em; outline: none; text-wrap: balance; text-align: center; }
.screen .sub { margin: 10px auto 0; max-width: 34em; color: var(--ink-2); font-size: 16.5px; line-height: 1.5; text-wrap: pretty; text-align: center; }
.screen .content { margin-top: 26px; flex: 1; }
#app .screen .content { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
#app .screen[data-step="attire"] .content, #app .screen[data-step="backgrounds"] .content, #app .screen[data-step="upload"] .content { max-width: none; }
.kicker { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
@media (min-width: 700px) {
  .screen h1 { font-size: 36px; }
  .screen .sub { font-size: 17.5px; }
}

/* Sticky action bar: full-bleed white strip with a hairline on top, button centred. */
.foot {
  position: sticky; bottom: var(--cookie-h, 0px); z-index: 20; margin: 22px calc(-1 * var(--gutter)) 0;
  padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  /* Full bleed without widening the page: two spread shadows (white, and the hairline 1px above), clipped to the bar. */
  background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface), 0 -1px 0 100vmax var(--line-2); clip-path: inset(-1px -100vmax 0);
}
@media (min-width: 700px) { .foot .btn { max-width: 320px; margin-left: auto; margin-right: auto; } }
.foot .note { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); }
.foot .note .link { font-size: 13px; }

/* ---------- options ---------- */
.opts { display: grid; gap: 10px; }
.opts--2 { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .opts:not(.opts--2):has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } #app .screen .content:has(> .opts > :nth-child(3):last-child) { max-width: none; } }
.opt {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 14px 16px 14px 18px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); text-align: left; cursor: pointer;
  font-size: 17px; font-weight: 500; box-shadow: var(--shadow-1); transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
}
@media (hover: hover) { .opt:hover { border-color: var(--accent-dim); } }
.opt:active { transform: scale(.99); }
.opt.is-sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.opt .tick {
  margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #B9AAAE;
  display: grid; place-items: center; color: transparent; background: var(--surface);
}
.opt .tick svg { width: 16px; height: 16px; }
.opt.is-sel .tick { background: var(--accent); border-color: var(--accent); color: #fff; }
.swatch { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

/* Photo cards (attire, backgrounds): image on top, label under. */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.card-opt {
  position: relative; display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--line-2); border-radius: var(--radius-l);
  background: var(--surface); text-align: left; cursor: pointer; box-shadow: var(--shadow-1); transition: border-color .15s, background .15s, box-shadow .15s;
}
.card-opt img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; background: var(--paper-2); }
.card-opt .lbl { padding: 12px 6px 4px; font-size: 17px; font-weight: 600; line-height: 1.25; }
.card-opt .desc { padding: 0 6px 6px; font-size: 13.5px; color: var(--ink-3); line-height: 1.35; }
.card-opt .tick {
  position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--ink-3); box-shadow: var(--shadow-1);
}
.card-opt .tick svg { width: 17px; height: 17px; }
.card-opt.is-sel { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 1px var(--accent); }
.card-opt.is-sel .tick { background: var(--accent); color: #fff; }

/* Checkbox rows (consent, opt-in). */
.checks { display: grid; gap: 4px; }
.chk { display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px; cursor: pointer; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chk .box {
  flex: none; width: 24px; height: 24px; margin-top: 1px; border: 1.5px solid var(--line-2); border-radius: 7px; background: var(--surface);
  display: grid; place-items: center; color: transparent; transition: background .12s, border-color .12s;
}
.chk .box svg { width: 16px; height: 16px; }
.chk input:checked + .box { background: var(--accent); border-color: var(--accent); color: #fff; }
.chk input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px; }
.chk a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.chk.is-bad .box { border-color: var(--warn); }

.notice { padding: 16px 16px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.notice h2 { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.notice h2 svg { width: 20px; height: 20px; color: var(--ok); }
.notice ul { margin: 0; padding-left: 18px; }
.notice li + li { margin-top: 6px; }
.notice a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; }

/* Text input */
.field { display: grid; gap: 8px; }
.field label { font-weight: 700; font-size: 14px; }
.input {
  width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface);
  font-size: 18px; font-weight: 500; box-shadow: var(--shadow-1); outline: none; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #A8979F; font-weight: 400; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.input.is-bad { border-color: var(--warn); }
.err { margin: 8px 0 0; color: var(--warn); font-size: 14px; font-weight: 600; }
textarea.input { height: auto; min-height: 96px; padding: 14px 16px; font-size: 16px; resize: vertical; line-height: 1.4; }

/* ---------- upload ---------- */
.up-count { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.up-count strong { font-size: 20px; font-weight: 800; }
.up-count span { font-size: 12.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); }
.up-meter { position: relative; margin-top: 10px; height: 8px; border-radius: 99px; background: #EEE6E6; }
.up-meter > b { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--accent); transition: width .3s var(--ease-out); }
.up-meter > i { position: absolute; top: -4px; bottom: -4px; left: 60%; width: 2px; background: var(--ink-3); border-radius: 1px; }
.up-meter.is-ok > b { background: var(--ok); }
.dropzone {
  margin-top: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 150px;
  padding: 20px; border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s;
}
/* Hover only where a pointer hovers: iOS keeps :hover after a tap, which left the box pink. */
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
@media (hover: hover) { .dropzone:hover:not([aria-disabled="true"]) { border-color: var(--accent); background: var(--accent-soft); } }
.dropzone svg { width: 28px; height: 28px; color: var(--accent); }
.dropzone b { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: var(--radius-s); background: var(--cta); color: #fff; font-size: 15.5px; font-weight: 600; box-shadow: var(--shadow-cta); }
.dropzone small { color: var(--ink-3); font-size: 13.5px; }
.dropzone[aria-disabled="true"] { cursor: default; }
.thumbs { margin-top: 14px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); }
.thumb .ph svg { width: 22px; height: 22px; }
.thumb .rm {
  position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(42, 15, 31, .72); color: #fff; cursor: pointer; padding: 0;
}
.thumb .rm::before { content: ''; position: absolute; inset: -8px; }
.thumb .rm svg { width: 15px; height: 15px; }
.thumb .bar { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.6); overflow: hidden; }
.thumb .bar b { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.thumb .ok { position: absolute; left: 5px; bottom: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.thumb .ok svg { width: 13px; height: 13px; }
.thumb.is-err { border-color: var(--warn); }
.thumb.is-err img { opacity: .35; }
.thumb .retry {
  position: absolute; left: 4px; right: 4px; bottom: 4px; border: 0; border-radius: 7px; background: var(--warn); color: #fff;
  font-size: 11.5px; font-weight: 700; padding: 5px 0; cursor: pointer;
}
.up-msg { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 14px; font-weight: 600; }

.reqs { margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--paper); }
.reqs > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px; font-weight: 800; font-size: 16px; }
.reqs > summary::-webkit-details-marker { display: none; }
.reqs > summary svg { width: 22px; height: 22px; color: var(--ok); }
.reqs > summary::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s; }
.reqs[open] > summary::after { transform: rotate(-135deg); }
.reqs-in { padding: 0 16px 16px; }
.reqs h3 { margin: 6px 0 10px; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); }
.reqs h3.bad { margin-top: 20px; }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rule { margin: 0; }
.rule .pic { position: relative; }
.rule img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }
.rule .mk { position: absolute; top: 7px; left: 7px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ok); }
.rule .mk svg { width: 15px; height: 15px; }
.rule.no .mk { background: var(--warn); }
.rule figcaption { margin-top: 7px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.rule figcaption b { display: block; color: var(--ink); font-size: 14px; }

.qr-card { margin-top: 18px; display: none; gap: 16px; align-items: center; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1.5px dashed var(--line-2); }
.qr-card canvas, .qr-card img, .qr-card svg { width: 148px; height: 148px; flex: none; shape-rendering: crispEdges; }
.qr-card b { display: block; font-size: 16px; }
.qr-card p { margin: 4px 0 0; color: var(--ink-3); font-size: 14px; }
@media (min-width: 900px) and (hover: hover) {
  .qr-card { display: flex; }
  /* Desktop upload: drop zone and phone QR side by side under the counter, photos and tips full width. */
  #app .screen[data-step="upload"] .content { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-content: start; }
  #app .screen[data-step="upload"] .content > * { grid-column: 1 / -1; }
  #app .screen[data-step="upload"] .dropzone { grid-column: 1; grid-row: 3; }
  #app .screen[data-step="upload"] .qr-card { grid-column: 2; grid-row: 3; }
  #app .screen[data-step="upload"] .rules { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- bottom sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(42, 15, 31, .45); opacity: 0; transition: opacity .25s; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-radius: 22px 22px 0 0; padding: 10px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .32s var(--ease-out); outline: none;
}
.sheet-wrap.is-open .sheet-scrim { opacity: 1; }
.sheet-wrap.is-open .sheet { transform: none; }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 0 auto 10px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-head h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
body.sheet-open { overflow: hidden; }
@media (min-width: 700px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 460px; max-height: 88vh; border-radius: 22px; padding: 18px 22px 22px;
    transform: translate(-50%, -46%); opacity: 0; transition: transform .25s var(--ease-out), opacity .2s; }
  .sheet-wrap.is-open .sheet { transform: translate(-50%, -50%); opacity: 1; }
  .sheet .grab { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-scrim { transition: none; } }

/* ---------- misc ---------- */
.toast {
  position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); z-index: 80; width: max-content; max-width: calc(100% - 32px);
  transform: translate(-50%, -12px); opacity: 0; pointer-events: none; padding: 12px 16px; border-radius: 12px;
  background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow-2); transition: opacity .2s, transform .2s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-2);
  font-size: 14px; color: var(--ink-2);
}
.cookie p { margin: 0; flex: 1 1 220px; }
.cookie div { display: flex; gap: 8px; }
.cookie .btn { min-height: 40px; width: auto; padding: 0 16px; font-size: 14.5px; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.center { text-align: center; }
.stars { display: inline-flex; gap: 1px; color: var(--star); vertical-align: -2px; }
.trust { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ok); font-weight: 700; font-size: 15px; }
.trust svg { width: 22px; height: 22px; }
.mini-foot { margin: 28px 0 0; padding: 18px 0 8px; border-top: 1px solid var(--line); text-align: center; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.mini-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-bottom: 8px; }
.mini-foot a { color: var(--ink-2); text-underline-offset: 3px; }
/* A footer that is also the quiz column (.app, German funnel pages): keep the column centred under the quiz. */
.mini-foot.app { margin-left: auto; margin-right: auto; }
.state { padding: 40px 4px; text-align: center; }
.state .spinner { margin: 0 auto 18px; }
.state h1 { font-size: 26px; }
.state p { color: var(--ink-2); margin: 10px auto 0; max-width: 360px; }
.state .btn { max-width: 320px; margin-left: auto; margin-right: auto; }
.state-ic { display: block; margin: 0 auto 16px; padding: 14px; width: 76px; height: 76px; border-radius: 22px; background: var(--accent-soft); color: var(--accent-ink); }
.paid-note { margin: 0 auto 18px; max-width: 520px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--ok-soft); color: var(--ok); font-size: 15px; font-weight: 600; line-height: 1.45; }
.paid-note svg { flex: none; margin-top: 1px; }
.paid-note:not([hidden]) + h1 { margin-top: 4px; }

/* ---------- checkout (js/checkout.js) ----------
   Compact sheet for edit packs (gallery); .co--full is the plan checkout, the reference site's full-screen takeover. */
.co .sheet-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.co-x { position: absolute; top: 12px; right: 10px; z-index: 2; }
.co-x:disabled { opacity: .35; cursor: default; }
.co-side { display: none; }
.co-sum { margin-top: 14px; padding: 16px; border-radius: var(--radius-l); background: var(--paper); border: 1px solid var(--line); }
.co-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; }
.co-row s { color: var(--ink-3); font-weight: 600; font-size: 14px; }
.co-amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-lines { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.co-lines li { display: flex; align-items: center; gap: 8px; }
.co-lines svg { flex: none; color: var(--ok); }
.co-total { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 18px; }
.co-total b { font-size: 20px; font-variant-numeric: tabular-nums; }
.co-once { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.co-express { margin-top: 18px; min-height: 52px; }
.co-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 2px; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.co-divider::before, .co-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.co-payment { margin-top: 14px; min-height: 150px; }
/* Mock payments: the same fields Stripe's card form shows, read-only, with a test-mode note. */
.co-mock { margin-top: 18px; }
.co-test { margin: 0 0 14px; padding: 9px 12px; border-radius: var(--radius); background: var(--accent-soft); color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.co-test b { margin-right: 6px; padding: 2px 7px; border-radius: 6px; background: var(--accent-ink); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.co-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 12px; }
.co-f { display: grid; gap: 6px; min-width: 0; }
.co-f--wide { grid-column: 1 / -1; }
.co-f span { font-size: 14px; font-weight: 700; color: var(--ink); }
.co-in { width: 100%; min-width: 0; height: 50px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(42, 15, 31, .05); pointer-events: none; }
.co-err { scroll-margin-bottom: 100px; margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); font-size: 14px; font-weight: 600; }
.co .btn { margin-top: 18px; }
.co .co-pay { min-height: 54px; font-size: 17.5px; font-variant-numeric: tabular-nums; }
.co-secure { margin: 12px 0 0; display: block; font-size: 13px; color: var(--ink-3); text-align: center; text-wrap: balance; }
.co-secure svg { display: inline; vertical-align: -2px; margin-right: 2px; }
.co-guar { margin: 4px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); }
.co-guar a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; }

/* Full-screen plan checkout. Phone: stat + 4 photos, then the form. */
.co--full .sheet { top: 0; bottom: 0; left: 0; right: 0; width: auto; max-height: none; border-radius: 0; padding: 0; background: var(--surface); transform: translateY(100%); }
.co--full.is-open .sheet { transform: none; }
.co--full .grab { display: none; }
.co--full .co-x { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 8px; }
.co--full .co-side { display: block; padding: calc(56px + env(safe-area-inset-top)) var(--gutter) 0; text-align: center; }
.co-stat { margin: 0; display: grid; gap: 4px; }
.co-stat b { font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: var(--text-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.co-stat span { font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.co-pics { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.co-pics img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 12px; background: var(--paper-2); }
.co-pics img:nth-child(n + 5) { display: none; }
.co--full .co-stat:not([hidden]) + .co-pics { margin-top: 18px; }
.co--full .co-stat[hidden] + .co-pics, .co--full .co-pics:first-child { margin-top: 0; }
.co--full .co-main { padding: 6px var(--gutter) calc(24px + env(safe-area-inset-bottom)); }
.co--full .sheet-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.co--full .co-sum { margin-top: 16px; padding: 14px 16px; }
.co--full:not(.has-bumps) .co-lines, .co--full:not(.has-bumps) .co-total { display: none; }
.co--full .co-row { font-size: 16px; }
.co--full .co-row b { font-size: 18px; }
/* Phone: the Pay button stays in reach on short screens (a white band behind it keeps the fields from showing through). */
@media (max-width: 899px) {
  .co--full .co-pay { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 3; box-shadow: var(--shadow-cta), 0 0 0 12px var(--surface), 0 calc(12px + env(safe-area-inset-bottom)) 0 12px var(--surface); }
  /* The Stripe line paints over the band's lower edge so it stays readable once the button rests in place (no
     background of its own, so the button's soft shadow isn't cut into a hard line). */
  .co--full .co-secure { position: relative; z-index: 4; }
}
@media (min-width: 900px) {
  /* Desktop: form left, proof column right, the X top right of the screen (the reference site 19-checkout-paddle-desktop). */
  .co--full .sheet {
    left: 0; right: 0; top: 0; bottom: 0; width: auto; max-height: none; transform: none; opacity: 0; border-radius: 0; padding: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 37%); overflow: hidden; transition: opacity .2s;
  }
  .co--full.is-open .sheet { transform: none; opacity: 1; }
  .co--full .co-x { position: fixed; top: 18px; right: 18px; }
  .co--full .co-main { grid-column: 1; grid-row: 1; overflow-y: auto; padding: 96px 48px 48px; }
  .co--full .co-main > * { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
  .co--full .co-main > .co-sum { margin-top: 0; }
  .co--full .co-side { grid-column: 2; grid-row: 1; overflow-y: auto; padding: 56px 40px 40px; border-left: 1px solid var(--line); background: var(--surface); }
  .co-stat b { font-size: 40px; }
  .co-stat span { font-size: 21px; }
  .co-pics { margin-top: 26px; gap: 12px; }
  .co-pics img:nth-child(n + 5) { display: block; }
}
@media (prefers-reduced-motion: reduce) { .co--full .sheet { transition: none; } }
/* 404 (public/404.html) */
.nf { padding-top: 56px; }
.nf-code { margin: 0 0 6px; font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -.04em; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf h1 { font-size: 28px; letter-spacing: -.03em; text-wrap: balance; }

/* Consent step: withdrawal note under the boxes (shown once consent is saved). */
.consent-note { margin: 6px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }

/* The reference site's claims, kept verbatim for review: shown only while the server stamps data-social-proof="placeholder" or
   "example"; [data-claim-off] is the true line shown otherwise. Decide each one before any ad or real payment. */
html:not([data-social-proof="placeholder"], [data-social-proof="example"]) [data-claim] { display: none !important; }
html:is([data-social-proof="placeholder"], [data-social-proof="example"]) [data-claim-off] { display: none !important; }

.ex-tag { display: none; }
/* Tablets (700–899px): keep the full-screen checkout's columns at a readable width. */
@media (min-width: 700px) and (max-width: 899px) { .co--full .co-side > *, .co--full .co-main > * { max-width: 560px; margin-left: auto; margin-right: auto; } }
/* "Continue with Google" (js/google.js), in Google's branding: white, #747775 outline, #1F1F1F label, the four-colour G.
   Shown only while Google sign-in is set up. .g-or is the "or" rule between it and the email field. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 18px;
  border: 1px solid #747775; border-radius: var(--radius-s); background: #fff; color: #1F1F1F; font: 500 16px/1.2 var(--font, inherit);
  letter-spacing: .01em; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, box-shadow .15s;
}
.btn-google svg { flex: none; width: 20px; height: 20px; }
@media (hover: hover) { .btn-google:hover { background: #F8F8F8; box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); } }
.btn-google:active { background: #F1F1F1; }
.btn-google:focus-visible { outline: 2px solid var(--accent, #E8296A); outline-offset: 2px; }
.btn-google.is-busy { pointer-events: none; opacity: .65; }
.g-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ink-3); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.g-or::before, .g-or::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.g-err { margin: 10px 0 0; color: var(--warn); font-size: 14px; font-weight: 600; }
.g-err[hidden], .g-box[hidden] { display: none; }
/* German pages: the legal links are tap targets of their own (44 px), the row stays one line where it fits. */
.mini-foot--de nav { gap: 0 14px; }
.mini-foot--de nav a { display: inline-flex; align-items: center; min-height: 44px; }