/* Weh: built on the Nurani Labs look. Navy on paper cream, one touch of amber light per screen. */
@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(/static/fonts/poppins-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(/static/fonts/poppins-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(/static/fonts/poppins-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(/static/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(/static/fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(/static/fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-weight: 600; font-display: swap; src: url(/static/fonts/playfair-display-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-weight: 700; font-display: swap; src: url(/static/fonts/playfair-display-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Lora; font-weight: 400; font-display: swap; src: url(/static/fonts/lora-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 400; font-display: swap; src: url(/static/fonts/montserrat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 600; font-display: swap; src: url(/static/fonts/montserrat-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-weight: 700; font-display: swap; src: url(/static/fonts/montserrat-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 400; font-display: swap; src: url(/static/fonts/nunito-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 600; font-display: swap; src: url(/static/fonts/nunito-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 700; font-display: swap; src: url(/static/fonts/nunito-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-display: swap; src: url(/static/fonts/space-grotesk-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-display: swap; src: url(/static/fonts/space-grotesk-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url(/static/fonts/space-grotesk-latin-700-normal.woff2) format('woff2'); }

:root {
  --navy: #12263F; --navy-2: #2E4158; --muted: #4A5A6E; --paper: #F7F6F0; --white: #FFFFFF;
  --light: #FCC070; --halo: #FCE8D0; --bronze: #8A5220; --line: #E3E1D8; --line-2: #ECEAE2; --input: #8D96A3;
  --shadow: 0 2px 4px rgba(18,38,63,0.06), 0 10px 28px rgba(18,38,63,0.12);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--navy); font-family: Inter, system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
a { color: var(--navy); }
a:hover { color: var(--bronze); }
:focus-visible { outline: 3px solid var(--light); outline-offset: 2px; }
h1, h2, h3 { font-family: Poppins, sans-serif; margin: 0; }
.eyebrow { font-family: Poppins, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze); }
.muted { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Receiver pages: one phone-width column, centred on larger screens. */
.page { max-width: 440px; margin: 0 auto; padding: 20px 16px 32px; display: flex; flex-direction: column; gap: 24px; min-height: 100vh; }
.hint { padding: 12px 14px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); font-size: 14px; line-height: 21px; }
.pill { align-self: center; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--navy-2); text-align: center; }
.pill::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--light); }
.card-mirror { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow); }
.who { display: flex; gap: 14px; align-items: center; }
.photo { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--halo); object-fit: cover; display: flex; align-items: center; justify-content: center; font-family: Poppins, sans-serif; font-size: 20px; font-weight: 600; color: var(--bronze); }
.bio { margin: 0; font-size: 15px; line-height: 23px; color: var(--navy-2); }
.bio.message { white-space: pre-line; overflow-wrap: anywhere; }
.greeting { margin: 0; font: 700 24px/32px Poppins, sans-serif; overflow-wrap: anywhere; }

.actions { display: flex; flex-direction: column; gap: 10px; }
.btn { height: 52px; border-radius: 999px; font: 600 16px/1 Inter, sans-serif; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; padding: 0 20px; }
.btn svg { flex: none; }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: #1B3352; color: var(--white); }
.btn-weh { background: var(--light); color: var(--navy); }
.btn-weh:hover { background: #F5AE52; color: var(--navy); }
.btn-outline { height: 48px; font-size: 14px; background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline:hover { background: var(--halo); color: var(--navy); }
.btn-small { height: 44px; font-size: 14px; align-self: flex-start; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wallet-badge { align-self: center; display: block; padding: 8px; margin: -8px 0; line-height: 0; }
.wallet-badge img { height: 52px; width: auto; display: block; }
.hint p + p, .hint .btn + p { margin-top: 8px; }
.hint .btn { margin-top: 10px; }
.hint-small { font-size: 13px; color: var(--muted); }
.textlink { align-self: center; padding: 6px 8px; font-size: 13px; color: var(--navy-2); }

.panel { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; text-decoration: none; color: var(--navy); }
.panel strong { display: block; font-size: 16px; }
.panel span { font-size: 13px; line-height: 19px; color: var(--muted); }
.gift { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; background: var(--halo); border-radius: 20px; }
.gift h2 { font-size: 20px; line-height: 28px; font-weight: 600; }
.gift p { margin: 0; font-size: 14px; line-height: 22px; color: var(--navy-2); }

.section { display: flex; flex-direction: column; gap: 12px; }
.list { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 20px; }
.list-item { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-top: 1px solid var(--line-2); }
.list-item:first-child { border-top: 0; }
.logo { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; font: 600 14px Poppins, sans-serif; color: var(--bronze); }
.logo img { width: 100%; height: 100%; object-fit: contain; }
/* A wide logo gets room, and the text of every company starts in one line. views/owner.js has the same shape. */
.has-logos .logo { width: 72px; height: 48px; padding: 5px; background: var(--white); }
.has-logos .logo.is-dark { background: var(--navy); border-color: var(--navy); }
.list-item strong { display: block; font-size: 15px; }
.list-item span { font-size: 13px; line-height: 19px; color: var(--muted); }
.list-item .role { display: block; color: var(--bronze); font-weight: 500; }
.list-item a { display: block; width: fit-content; max-width: 100%; padding: 4px 0; font-size: 13px; line-height: 19px; overflow-wrap: anywhere; }
.more { background: var(--white); border: 1px solid var(--line); border-radius: 20px; }
.more summary { padding: 16px 18px; font-size: 15px; font-weight: 600; color: var(--navy); cursor: pointer; }
.more .bio { padding: 0 18px 16px; white-space: pre-line; }
.links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.links a { min-height: 48px; padding: 8px 10px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); font-size: 14px; font-weight: 600; text-decoration: none; display: flex; align-items: center; justify-content: center; text-align: center; }
.footer { margin-top: auto; display: flex; justify-content: center; gap: 6px; align-items: baseline; font-size: 12px; color: var(--muted); }
.footer b { font-family: Poppins, sans-serif; color: var(--navy); }

/* Forms */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.field input, .field textarea, .field select { min-height: 44px; border: 1px solid var(--input); border-radius: 8px; padding: 0 12px; font: 400 16px Inter, sans-serif; color: var(--navy); background: var(--white); width: 100%; }
.field input[type="file"] { min-height: 0; border: 0; padding: 0; }
.field textarea { padding: 10px 12px; line-height: 22px; resize: vertical; }
.field .err, .err { font-weight: 500; font-size: 13px; color: #9B2C1F; }
.field input[aria-invalid="true"] { border-color: #9B2C1F; border-width: 2px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tile { min-height: 72px; border-radius: 16px; border: 1px solid var(--line); background: var(--white); color: var(--navy); font: 600 14px Inter, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 8px; text-align: center; }
.consent { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 21px; font-weight: 400; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--navy); flex: none; }
.note { padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; gap: 6px; }
.note small { font-size: 12px; font-weight: 600; color: var(--muted); }
.done { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; position: relative; }
.done .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; }
.glow { position: relative; overflow: hidden; }
.glow::before { content: ''; position: absolute; left: 50%; top: -140px; width: 420px; height: 420px; margin-left: -210px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(252,192,112,0.45) 0%, rgba(252,232,208,0.25) 40%, rgba(247,246,240,0) 70%); }
.glow > * { position: relative; }
.welcome { padding-top: 48px; }
.welcome-video { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.welcome-video video { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--navy); }
.welcome-video figcaption { font-size: 13px; line-height: 19px; color: var(--muted); text-align: center; }
.welcome-mark { margin: 0 0 8px; font: 700 40px/1 Poppins, sans-serif; display: flex; align-items: baseline; gap: 4px; }
.welcome-mark span { width: 10px; height: 10px; border-radius: 50%; background: var(--light); }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .panel, .links a { transition: background-color 150ms ease-out, color 150ms ease-out; }
}