/* Photobox guest pages — shared base (phase 11, 11-SPEC §4). The /new landing's language: black and
   white, ONE accent per service (set --acc on <html>), Unbounded display, Plex Mono labels, Manrope
   body, seeded barcodes. Each service page adds its own stylesheet after this one. */
@font-face { font-family: 'Unbounded'; src: url('fonts/Unbounded-ExtraBold.woff?v=1') format('woff'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('fonts/IBMPlexMono-Regular.woff?v=1') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-SemiBold.woff?v=1') format('woff'); font-weight: 600; font-display: swap; }

:root {
  --black: #000; --ink: #0b0b0b; --ink-2: #141414; --white: #fff;
  --acc: #F5C451; --acc-ink: #000; --online: #3DDC84;
  --mute-on-black: rgba(255,255,255,.6); --mute-on-white: rgba(0,0,0,.58);
  --line-on-black: rgba(255,255,255,.16); --line-on-white: rgba(0,0,0,.14);
  --bg: var(--black); --fg: var(--white); --mute: var(--mute-on-black); --line: var(--line-on-black);
  --gut: 18px; --r: 22px;
  --ease: cubic-bezier(.2,.7,.1,1); --ease-io: cubic-bezier(.76,0,.24,1);
  --f-display: 'Unbounded', system-ui, sans-serif;
  --f-mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: dark;
}
.t-light { --bg: var(--white); --fg: var(--black); --mute: var(--mute-on-white); --line: var(--line-on-white); color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; font: 600 16px/1.45 var(--f-body); background: var(--bg); color: var(--fg); overflow-x: hidden; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 var(--gut); }

.eyebrow { font: 400 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); display: flex; gap: .8em; align-items: center; }
.eyebrow::before, .eyebrow::after { content: '• • •'; letter-spacing: .2em; opacity: .7; }
.label { font: 400 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.d { font-family: var(--f-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; margin: 0; }
.muted { color: var(--mute); }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--fg); background: transparent; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease); -webkit-tap-highlight-color: transparent; }
.pill:active { transform: scale(.97); }
.pill--solid { background: var(--fg); color: var(--bg); }
.pill--acc { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.pill[disabled] { opacity: .45; pointer-events: none; }

.card { border-radius: var(--r); border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, var(--bg)); }

/* Seeded barcode (see common.js barcode()): bars rise with --p 0..1, each with its own delay. */
.bc { display: flex; align-items: flex-end; height: 22px; overflow: hidden; }
.bc i { display: block; flex: none; height: 100%; background: currentColor; transform-origin: 50% 100%; transform: scaleY(calc(.15 + .85 * var(--p, 1))); transition: transform .6s var(--ease); transition-delay: calc(var(--d) * 240ms); }

.foot { padding: 40px 0 calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.foot__cta { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; }
.foot__mark { font: 800 15px/1 var(--f-display); letter-spacing: .02em; }
.foot__s { font-size: 13px; color: var(--mute); }

.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translate(-50%, 140%); background: var(--fg); color: var(--bg); padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 700; transition: transform .3s var(--ease); z-index: 10; max-width: calc(100% - 32px); text-align: center; }
.toast.is-on { transform: translate(-50%, 0); }

.skeleton { background: linear-gradient(90deg, var(--line) 0%, color-mix(in srgb, var(--fg) 10%, transparent) 50%, var(--line) 100%); background-size: 200% 100%; animation: sk 1.2s linear infinite; border-radius: 14px; }
@keyframes sk { to { background-position: -200% 0; } }

.missing { min-height: 70svh; display: grid; place-content: center; gap: 14px; text-align: center; padding: 0 var(--gut); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }