/* =====================================================================
   mcosec.ai: campus-poster / risograph identity

   Palette (inks)
     Riso Blue    #2F4FB5  main ink: big blocks, buttons, links
     Fluoro Pink  #FF4FA8  the misregistered "second ink", the strike-out
                           pen, the donate block
     Sunflower    #FFE34D  highlighter and the privacy block
     Blush        #FFD6EA  soft pink paper for the giving block
     Navy         #16245E  the depth: every extrusion and 3D edge
     Ink          #1C2347  body text
     Paper        #F6F5F1  cool newsprint

   Type
     Anybody (variable, wide)  headlines, numbers, stamps
     Atkinson Hyperlegible     everything people read

   Principles
     1. Every section is printed in one ink, and the ink means something:
        blue = students, yellow = privacy, blush = giving. Hot pink is
        only ever a pen mark: underlines, strike-outs, the stamp.
     2. One loud move: what you read first or press is a solid object,
        extruded in navy. Headlines stand off the page, buttons are keys
        that press down, the chat ticket tilts toward you.
     3. Words do one job each. Student voice, sentence case, no filler.
   ===================================================================== */

@font-face { font-family: "Anybody"; src: url("/assets/fonts/anybody-latin-variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --blue: #2F4FB5;
  --blue-deep: #22398A;
  --pink: #FF4FA8;
  --yellow: #FFE34D;
  --blush: #FFD6EA;
  --navy: #16245E;
  --ink: #1C2347;
  --paper: #F6F5F1;
  --sheet: #FFFFFF;
  --muted: #545C7A;
  --rule: #D9DBE6;
  --on-blue: #FFFFFF;
  /* names used by blog.css / privacy.css */
  --bg: var(--paper); --text: var(--ink); --line: var(--rule); --brand: var(--blue); --brand-ink: #FFFFFF;
  --brand-soft: #E4E9F8; --card: var(--sheet); --bg-alt: #ECEBE5;
  --shadow: 6px 6px 0 var(--ink); --shadow-sm: 3px 3px 0 var(--ink);
  --display: "Anybody", "Arial Black", Impact, sans-serif;
  --sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* solid extrusion: 1px steps so the edges join up, then a soft floor shadow */
  --block: 1px 1px 0 var(--navy), 2px 2px 0 var(--navy), 3px 3px 0 var(--navy), 4px 4px 0 var(--navy), 5px 5px 0 var(--navy), 6px 6px 0 var(--navy), 7px 7px 0 var(--navy), 8px 8px 0 var(--navy), 14px 18px 28px rgba(22, 36, 94, 0.28);
  --block-sm: 1px 1px 0 var(--navy), 2px 2px 0 var(--navy), 3px 3px 0 var(--navy), 4px 4px 0 var(--navy), 8px 10px 16px rgba(22, 36, 94, 0.22);
  --extrude: 0.012em 0.012em 0 var(--navy), 0.024em 0.024em 0 var(--navy), 0.036em 0.036em 0 var(--navy), 0.048em 0.048em 0 var(--navy), 0.06em 0.06em 0 var(--navy), 0.072em 0.072em 0 var(--navy), 0.1em 0.14em 0.16em rgba(22, 36, 94, 0.3);
  --dots: radial-gradient(circle at 1px 1px, currentColor 1.1px, transparent 1.6px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F1F0FA; --paper: #141A3B; --sheet: #1C2452; --muted: #B4BAD8; --rule: #2E386E;
    --blue: #5B7BE8; --blue-deep: #2F4FB5; --brand-soft: #22306B; --navy: #070B24; --blush: #F7C4DE; --bg-alt: #10153A; --shadow: 6px 6px 0 #000; --shadow-sm: 3px 3px 0 #000;
  }
}
:root[data-theme="dark"] {
  --ink: #F1F0FA; --paper: #141A3B; --sheet: #1C2452; --muted: #B4BAD8; --rule: #2E386E;
  --blue: #5B7BE8; --blue-deep: #2F4FB5; --brand-soft: #22306B; --navy: #070B24; --blush: #F7C4DE; --bg-alt: #10153A; --shadow: 6px 6px 0 #000; --shadow-sm: 3px 3px 0 #000;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-family: var(--display); line-height: 1; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 6.6vw, 5.4rem); font-weight: 850; font-stretch: 112%; }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; font-stretch: 110%; margin-bottom: 1.2rem; }
h3 { font-size: 1.3rem; font-weight: 750; font-stretch: 105%; margin-bottom: 0.45rem; line-height: 1.15; }
p { margin: 0 0 1rem; }
a { color: var(--blue); }
code { font: 0.9em ui-monospace, "Cascadia Code", Consolas, monospace; background: color-mix(in srgb, var(--ink) 8%, transparent); padding: 1px 6px; border-radius: 3px; }
strong { font-weight: 700; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 20; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 32px; } }
.narrow { max-width: 780px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.fine { font-size: 0.92rem; color: var(--muted); max-width: 64ch; }
.link { color: var(--blue); font-weight: 700; }
.text-link { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.text-link:hover { text-decoration-color: currentColor; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 40ch; }
.lead.center { margin-left: auto; margin-right: auto; }
/* Small label above a heading, used on guide and privacy pages: sentence case. */
.kicker { color: var(--blue); font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
.glow, .grad { all: unset; }

/* The one loud move: headlines extruded off the page. */
.print { color: var(--blue); text-shadow: var(--extrude); }

/* ---------------------------------------------------------------- nav */
.nav { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 2px solid var(--ink); }
.nav-inner { display: flex; align-items: center; gap: 26px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 1.15rem/1 var(--display); font-stretch: 115%; color: var(--ink); text-decoration: none; }
.nav .brand { margin-right: auto; }
.nav nav { display: none; gap: 28px; }
.nav nav a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1rem; }
.nav nav a:hover { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (min-width: 880px) { .nav nav { display: flex; } }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 2px solid var(--navy); border-radius: 6px; background: var(--blue); color: #FFFFFF; font: 700 1.02rem/1 var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 5px 0 var(--navy), 0 9px 14px rgba(22, 36, 94, 0.25); transition: transform 0.1s ease, box-shadow 0.1s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--navy), 0 12px 18px rgba(22, 36, 94, 0.28); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--navy), 0 2px 4px rgba(22, 36, 94, 0.2); }
.btn-lg { min-height: 58px; padding: 0 28px; font-size: 1.1rem; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.95rem; box-shadow: 0 4px 0 var(--navy), 0 7px 10px rgba(22, 36, 94, 0.22); }
.btn-ghost { background: var(--sheet); color: var(--ink); }
.btn-yellow { background: var(--yellow); color: #1C2347; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; transform: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin: 30px 0 18px; }

/* ---------------------------------------------------------------- hero */
.hero { padding: 48px 0 80px; overflow-x: clip; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
@media (min-width: 1000px) { .hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; } .hero { padding: 72px 0 112px; } }
.hero h1 { max-width: 13ch; margin-bottom: 26px; }
.sticker { display: inline-block; margin: 0 0 22px; padding: 6px 14px; background: var(--yellow); color: #1C2347; border: 2px solid var(--ink); font: 800 1rem/1.2 var(--display); font-stretch: 120%; transform: rotate(-2deg); border-color: var(--navy); box-shadow: var(--block-sm); }

/* The chat ticket: a printed slip showing what mcosec.ai does. */
.ticket { position: relative; margin: 0; background: var(--sheet); color: var(--ink); border: 2px solid var(--navy); box-shadow: var(--block); padding: 0 0 64px; transition: transform 0.4s ease; font-size: 1rem; line-height: 1.5; }
.ticket-tilt { perspective: 1400px; }
@media (min-width: 1000px) { .ticket { transform: rotateY(-9deg) rotateX(4deg); transform-origin: 60% 50%; } .ticket:hover { transform: rotateY(-3deg) rotateX(1deg); } }
.ticket::before { content: ""; position: absolute; right: -2px; top: -2px; width: 120px; height: 120px; color: var(--pink); background-image: var(--dots); background-size: 9px 9px; -webkit-mask-image: linear-gradient(225deg, #000 20%, transparent 70%); mask-image: linear-gradient(225deg, #000 20%, transparent 70%); pointer-events: none; }
.ticket-head { display: flex; justify-content: space-between; margin: 0 0 6px; padding: 12px 18px; background: var(--blue); color: #FFFFFF; font: 800 1rem/1 var(--display); font-stretch: 120%; border-bottom: 2px solid var(--ink); }
.lines { list-style: none; margin: 0; padding: 6px 22px 0; }
.lines li { padding: 9px 0; border-bottom: 1px dashed var(--rule); }
.lines li:last-child { border-bottom: 0; }
.lines b { display: inline-block; margin-right: 8px; padding: 0 6px; background: var(--ink); color: var(--paper); font: 800 0.75rem/1.5 var(--display); font-stretch: 120%; border-radius: 2px; vertical-align: 1px; }
.lines .cut span { color: var(--muted); background: linear-gradient(transparent calc(55% - 1.5px), var(--pink) calc(55% - 1.5px), var(--pink) calc(55% + 1.5px), transparent calc(55% + 1.5px)) no-repeat 0 0 / 100% 100%; }
.lines .keep span { background: linear-gradient(transparent 12%, var(--yellow) 12%, var(--yellow) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; padding: 0 3px; margin-left: -3px; color: #1C2347; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lines .code { font-size: 0.92rem; }
.lines .code code { background: transparent; padding: 0; border-left: 4px solid var(--blue); padding-left: 10px; }
.stamp { position: absolute; right: 18px; bottom: -26px; margin: 0; padding: 8px 14px; background: var(--paper); color: var(--pink); border: 3px solid var(--pink); box-shadow: 4px 5px 10px rgba(22, 36, 94, 0.2); font: 750 0.95rem/1.15 var(--display); font-stretch: 115%; text-align: center; transform: rotate(-5deg); }
.stamp b { display: block; font-size: 1.5rem; font-weight: 900; }
.stamp b + b { display: inline; }
@media (max-width: 640px) { .stamp { right: 34px; bottom: -22px; font-size: 0.85rem; } .chips { grid-template-columns: repeat(2, 1fr); } .donate { padding: 20px; box-shadow: var(--block-sm); } }

@media (prefers-reduced-motion: no-preference) {
  .lines .cut span, .lines .keep span { animation: sweep 0.55s ease-out both; }
  .lines li:nth-child(2) span { animation-delay: 0.45s; }
  .lines li:nth-child(5) span { animation-delay: 0.85s; }
  .lines li:nth-child(3) span { animation-delay: 1.25s; }
  .lines li:nth-child(7) span { animation-delay: 1.6s; }
  .stamp { animation: stamp 0.35s cubic-bezier(.3, 1.6, .6, 1) 2.05s both; }
}
@keyframes sweep { from { background-size: 0% 100%; } }
@keyframes stamp { from { opacity: 0; transform: rotate(-5deg) scale(1.5); } }

/* ---------------------------------------------------------------- sections */
.section { padding: 88px 0; }
.ink-blue { background: var(--blue-deep); color: #FFFFFF; }
.ink-blue a, .ink-blue .text-link { color: #FFFFFF; }
.ink-yellow { background: var(--yellow); color: #1C2347; }
.ink-pink { background: var(--blush); color: #1C2347; }
.ink-pink .fine, .ink-yellow .fine { color: #1C2347; }

/* Students: three flyers pinned to the board, one colour each. */
.students-head { display: grid; gap: 8px 56px; margin-bottom: 44px; }
@media (min-width: 900px) { .students-head { grid-template-columns: 1fr 1fr; align-items: end; } }
.students-head h2 { margin: 0; max-width: 13ch; }
.students-head p { margin: 0; font-size: 1.2rem; max-width: 44ch; }
.flyers { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
@media (min-width: 860px) { .flyers { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.flyer { position: relative; padding: 26px 24px 28px; color: #1C2347; border: 2px solid #0E1840; box-shadow: 1px 1px 0 #0E1840, 2px 2px 0 #0E1840, 3px 3px 0 #0E1840, 4px 4px 0 #0E1840, 5px 5px 0 #0E1840, 6px 6px 0 #0E1840, 7px 7px 0 #0E1840, 8px 8px 0 #0E1840, 16px 20px 30px rgba(0, 0, 0, 0.3); }
.flyer p { margin: 0; }
.flyer h3 { margin: 10px 0 8px; }
.flyer-when { font: 900 clamp(1.9rem, 3vw, 2.5rem)/1 var(--display); font-stretch: 125%; }
.f-blush { background: #FFD6EA; transform: rotate(-1.2deg); }
.f-yellow { background: var(--yellow); transform: rotate(0.8deg); }
.f-white { background: #FFFFFF; transform: rotate(-0.6deg); }
@media (max-width: 859px) { .f-blush, .f-yellow, .f-white { transform: none; } }
.pledge { display: grid; gap: 8px 56px; margin-top: 48px; padding-top: 26px; border-top: 2px solid rgba(255, 255, 255, 0.45); }
@media (min-width: 900px) { .pledge { grid-template-columns: 1fr 1fr; } }
.pledge p { margin: 0; }
.pledge strong { font: 800 1.35rem/1.25 var(--display); font-stretch: 112%; color: var(--yellow); }

/* Steps: a real sequence, so real numbers, big and extruded. */
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 34px; counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 44px; } }
.steps li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 18px; }
.steps li::before { content: counter(step); display: block; margin-bottom: 14px; font: 900 5.5rem/0.85 var(--display); font-stretch: 130%; color: var(--blue); text-shadow: var(--extrude); }
.steps p { margin: 0; }

/* Privacy: a yellow block with a plain checklist. */
.privacy-grid { display: grid; gap: 20px 64px; }
@media (min-width: 900px) { .privacy-grid { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.privacy-grid h2 { max-width: 12ch; }
.checks { list-style: none; margin: 0 0 22px; padding: 0; }
.checks li { position: relative; padding: 14px 0 14px 40px; border-bottom: 2px solid #1C2347; font-size: 1.1rem; }
.checks li:first-child { border-top: 2px solid #1C2347; }
.checks li::before { content: ""; position: absolute; left: 6px; top: 21px; width: 16px; height: 8px; border-left: 4px solid #1C2347; border-bottom: 4px solid #1C2347; transform: rotate(-45deg); }

/* Guides: a contents page. */
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 2px solid var(--ink); }
.toc li:first-child { border-top: 2px solid var(--ink); }
.toc a { color: var(--ink); font: 800 1.3rem/1.2 var(--display); font-stretch: 105%; text-decoration: none; }
.toc a:hover { color: var(--blue); text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.toc span { color: var(--muted); }

.quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 820px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quotes blockquote { margin: 0 0 10px; font-size: 1.15rem; }
.quotes cite { font-style: normal; font-weight: 700; }
.quotes .role { display: block; opacity: 0.8; font-size: 0.95rem; }

details { border-bottom: 2px solid var(--ink); padding: 18px 0; }
details:first-of-type { border-top: 2px solid var(--ink); }
summary { cursor: pointer; font: 750 1.2rem/1.25 var(--display); font-stretch: 105%; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--pink); font-weight: 900; font-size: 1.7rem; line-height: 0.8; }
details[open] summary::after { content: "\2212"; }
details p { color: var(--muted); margin: 12px 0 0; max-width: 64ch; }

.closing { padding: 96px 0; }
.closing h2 { color: var(--yellow); text-shadow: var(--extrude); font-size: clamp(2.4rem, 6vw, 4.6rem); }
.closing p { font-size: 1.25rem; }

/* ---------------------------------------------------------------- donate */
.support-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; margin-bottom: 30px; }
@media (min-width: 960px) { .support-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.support-copy h2 { max-width: 13ch; }
.support-copy p { font-size: 1.15rem; max-width: 46ch; }
.gift strong { background: var(--yellow); padding: 0 4px; }
.gift-steps { margin: 22px 0 0; padding-left: 1.4rem; }
.gift-steps li { margin: 8px 0; padding-left: 4px; }
.donate { background: var(--sheet); color: var(--ink); border: 2px solid var(--navy); border-radius: 6px; padding: 26px; box-shadow: var(--block); }
.donate-form label { display: block; font: 800 1.3rem/1.2 var(--display); font-stretch: 110%; margin-bottom: 16px; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.chip-amount { font: 800 1.1rem/1 var(--display); font-stretch: 110%; min-height: 50px; border-radius: 4px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.chip-amount { box-shadow: 0 4px 0 var(--ink); transition: transform 0.1s ease, box-shadow 0.1s ease; }
.chip-amount:hover { background: var(--brand-soft); }
.chip-amount[aria-pressed="true"] { background: var(--blue); color: #FFFFFF; transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.donate-row { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.donate-row .cur { display: inline-flex; align-items: center; padding: 0 14px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); font-weight: 700; }
.donate-row input { flex: 1 1 110px; min-width: 0; min-height: 58px; font: 800 1.35rem var(--display); font-stretch: 110%; padding: 0 14px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); color: var(--ink); }
.donate-row input:focus-visible { outline: 3px solid var(--pink); outline-offset: 1px; }
.donate-row .btn { flex: 1 1 180px; }
.donate-hint { margin: 12px 0 0; font-size: 0.95rem; color: var(--muted); }
.donate-hint.error { color: #C2185B; font-weight: 700; }
.donate-alt { margin: 12px 0 0; }
.link-button { font: 700 1rem var(--sans); color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.donate-secure { margin: 8px 0 0; font-size: 0.88rem; color: var(--muted); }
.gift-badge { display: inline-block; font: 800 0.95rem/1.3 var(--display); font-stretch: 110%; color: #1C2347; background: var(--yellow); border: 2px solid #1C2347; padding: 2px 10px; margin: 0 0 14px; transform: rotate(-1.5deg); }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--paper); border-top: 2px solid var(--ink); padding: 30px 0; font-size: 0.98rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 26px; }
.footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer nav a { color: var(--ink); font-weight: 700; text-decoration: none; }
.footer nav a:hover { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* ---------------------------------------------------------------- reminder card */
.nudge { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: min(330px, calc(100vw - 32px)); background: var(--sheet); color: var(--ink); border: 2px solid var(--ink); padding: 18px 18px 16px; box-shadow: var(--block-sm); opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; }
.nudge.in { opacity: 1; transform: none; }
.nudge-x { position: absolute; top: 6px; right: 8px; font: inherit; font-size: 1.4rem; line-height: 1; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.nudge-title { font: 800 1.1rem/1.2 var(--display); font-stretch: 108%; margin: 0 24px 6px 0; }
.nudge-text { color: var(--muted); font-size: 0.95rem; margin: 0 0 14px; }
.nudge-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- dialogs */
.pay { width: min(470px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; border: 2px solid var(--ink); border-radius: 6px; padding: 28px; background: var(--sheet); color: var(--ink); box-shadow: var(--block); }
.pay::backdrop { background: rgba(20, 26, 59, 0.6); }
.pay h3 { font-size: 1.5rem; margin-bottom: 14px; }
.pay-close { position: absolute; top: 10px; right: 12px; margin: 0; }
.pay-close button { font: inherit; font-size: 1.6rem; line-height: 1; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.pay-qr { text-align: center; margin: 4px 0 10px; }
.pay-qr img { width: 200px; margin: 0 auto 10px; border: 2px solid var(--ink); }
.pay-qr p { font-size: 0.95rem; color: var(--muted); margin: 0; }
.pay-steps { padding-left: 1.2rem; margin: 0 0 14px; }
.pay-steps li { margin: 10px 0; }
.thanks p { color: var(--muted); }
.copy { font: inherit; font-size: 0.85rem; background: var(--paper); border: 2px solid var(--ink); color: var(--ink); padding: 2px 10px; cursor: pointer; }

.reveal { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .nudge { transition: none; }
}