/* Shared screen identity. Canonical A4 and PDF renderers retain their own layout. */
@media screen {
:root {
  --app-bg: #f7f7f2;
  --app-surface: #ffffff;
  --app-ink: #263831;
  --app-muted: #617068;
  --app-border: #dce2db;
  --app-accent: #28564b;
  --app-accent-hover: #1d443a;
  --app-tint: #edf3ee;
  --app-success: #326147;
  --app-danger: #a13d35;
  --app-warm: #efd2b8;
  --app-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --paper: var(--app-bg);
  --ink: var(--app-ink);
  --soft: var(--app-muted);
  --accent: var(--app-accent);
  --line: var(--app-border);
  --serif: var(--app-font);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body { background: var(--app-bg); color: var(--app-ink); font-family: var(--app-font); font-size: 15px; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
:is(a, button, summary, input, textarea, select):focus-visible { outline: 3px solid var(--app-accent); outline-offset: 3px; }
input:focus, textarea:focus { outline-color: var(--app-accent); }
dialog { border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface); color: var(--app-ink); max-height: calc(100dvh - 32px); box-shadow: 0 18px 70px #26383126; }
dialog::backdrop { background: #19232e70; backdrop-filter: none; }
dialog h2 { font: 650 21px/1.3 var(--app-font); letter-spacing: -.025em; }
dialog p { color: var(--app-muted); line-height: 1.6; }
dialog :is(input, textarea, select) { background: white; color: var(--app-ink); border-color: var(--app-border); border-radius: 8px; }
dialog .primary, dialog .danger { min-height: 44px; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; }
dialog .primary { background: var(--app-accent); color: white; }
dialog .danger { background: var(--app-danger); color: white; }
dialog .save-button { border-radius: 8px; border-color: var(--app-border); color: var(--app-ink); min-height: 44px; background: white; font-size: 13px; }
dialog .text-button { color: var(--app-muted); min-height: 44px; }
dialog .package-summary, dialog .access-package-info { background: var(--app-tint); border-color: var(--app-border); color: var(--app-ink); }
.um-consent-banner, .um-consent-dialog, .um-consent-status { --um-paper: #fff; --um-ink: var(--app-ink); --um-accent: var(--app-accent); --um-border: var(--app-border); }
.um-consent-banner { max-width: 1040px; gap: 22px; padding: 20px 24px; border-radius: 12px; box-shadow: 0 8px 35px #26383120; }
.um-consent-banner h2, .um-consent-dialog h2 { font: 650 20px/1.3 var(--app-font); letter-spacing: -.025em; }
.um-consent-banner .um-consent-choice, .um-consent-dialog .um-consent-choice { border-color: var(--app-border); border-radius: 7px; }
.um-consent-choice:hover { background: var(--app-tint); }
.um-consent-current { background: var(--app-bg); }
.um-consent-banner button:focus-visible, .um-consent-dialog button:focus-visible, .um-consent-settings-link:focus-visible { outline-color: var(--app-accent); }
.payment-shell { width: min(620px, 100%); }
.payment-shell .brand, .shared-page .brand, .legal-shell .brand { font: 650 21px/1.3 var(--app-font); letter-spacing: -.5px; text-decoration: none; }
.payment-shell h1 { font: 650 clamp(26px, 4vw, 32px)/1.2 var(--app-font); letter-spacing: -.6px; }
.payment-shell .panel { background: white; border-color: var(--app-border); border-radius: 12px; padding: 26px; margin-top: 24px; }
.payment-shell .primary { background: var(--app-accent); color: white; border-radius: 8px; font-size: 14px; }
.payment-shell .eyebrow { color: var(--app-accent); font-size: 12px; text-transform: none; letter-spacing: 0; }
.payment-shell small { color: var(--app-muted); }
.shared-page .shell { max-width: 980px; }
.shared-page header { padding: 18px 0; }
.shared-page .review-heading { padding: 28px 0; }
.shared-page .review-heading h2, .shared-page h1 { font: 650 30px/1.25 var(--app-font); letter-spacing: -.7px; }
.shared-page #review-list { display: block; max-width: 720px; padding: 0 0 24px; margin: auto; }
.shared-page #review-list::before { display: none; }
.shared-page .review-card, .shared-page .review-card:nth-child(even) { background: white; padding: 20px; border: 1px solid var(--app-border); border-radius: 12px; margin: 0 0 18px; }
.shared-page .review-card h3 { font: 650 22px/1.3 var(--app-font); }
.shared-page .review-card time { font-size: 12px; letter-spacing: 0; color: var(--app-muted); margin-top: 16px; }
.shared-page .timeline-dot { display: none; }
.shared-page .review-card .moment-collage { max-height: 430px; }
.shared-page .review-card p { line-height: 1.7; }
.legal-shell h1 { font: 650 clamp(28px, 5vw, 34px)/1.2 var(--app-font); letter-spacing: -.6px; }
.legal-shell h2 { font: 650 21px/1.3 var(--app-font); }
.legal-shell main { padding-top: 32px; }
.legal-shell .legal-notice { background: var(--app-tint); border-color: var(--app-border); border-radius: 9px; }
.legal-shell .legal-actions a { border-color: var(--app-border); border-radius: 8px; }
@media (max-width: 600px) {
  input, textarea, select { font-size: 16px; }
  .um-consent-banner { gap: 14px; padding: 18px; }
  .payment-shell { padding: 20px 16px; margin-block: 20px; }
  .payment-shell .panel { padding: 22px 18px; }
  .shared-page .shell { padding-inline: 16px; }
  .shared-page .review-card { padding: 14px; }
  .shared-page .review-heading h2, .shared-page h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Common brand, controls and compact supporting screens. */
.brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.brand>svg{flex:none;color:var(--app-accent)}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
button,summary{touch-action:manipulation}
button:disabled{opacity:.5}
:is(a,button,summary){text-underline-offset:3px}
dialog{scrollbar-width:thin;overscroll-behavior:contain}
dialog h3{font:600 18px/1.35 var(--app-font)}
dialog .editor-icon{width:20px;height:20px;flex:none}
.um-consent-banner p,.um-consent-dialog p{font-size:13px;line-height:1.6}
.um-consent-banner .um-consent-choice{min-height:44px;font-size:13px}
.legal-shell{max-width:840px}
.legal-shell :is(p,li){font-size:15px;line-height:1.75}
.legal-shell header .back{font-size:13px;min-height:44px;display:inline-flex;align-items:center}
@media screen{.shared-page .review-card p{font-size:15px}.shared-page footer{font-size:12px}}

}