/* Slides landing hero. Colors and type come from the Webflow design (funraise.webflow.io). */
:root {
  --bg: #1a1a1a;
  --callout: #ace04c;
  --callout-dark: #93b420;
  --ink: #1a1a1a;
  --field-border: #e4e4e4;
  --muted: rgba(26, 26, 26, 0.55);
  --error: #c0392b;
  --font-body: Figtree, Arial, sans-serif;
  --font-semi: 'Zalando Sans SemiExpanded', Figtree, sans-serif;
  --font-expanded: 'Zalando Sans Expanded', Figtree, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: #fff; font-family: var(--font-body); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--callout); outline-offset: 3px; }
::selection { background: var(--callout); color: var(--ink); }
.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Hero art is drawn on the 1440x900 stage. fitStage() scales it to the full window
   and centers it. The nav is fixed over the top and does not shorten the stage. */
#viewport { position: relative; width: 100%; overflow: hidden; background: var(--bg); }
#stage {
  position: absolute; left: 0; top: 0; z-index: 1; width: 1440px; height: 900px;
  transform-origin: 0 0; overflow: hidden; user-select: none; -webkit-user-select: none;
}
#band-layer {
  position: absolute; left: 0; top: 0; z-index: 4; width: 1440px; height: 900px;
  transform-origin: 0 0; pointer-events: none;
}
#band-layer .band { pointer-events: auto; }

/* Headline */
.headline { position: absolute; inset: 0; pointer-events: none; }
#headline-canvas { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; }
.headline-fallback .hw { position: absolute; color: #fff; line-height: 150px; font-size: 150px; }
.headline.canvas-ok .headline-fallback { visibility: hidden; }
.hw-the { right: 896px; top: 225px; font-family: 'Zalando Sans', sans-serif; font-weight: 600; }
.hw-big { right: 896px; top: 375px; font-family: 'Zalando Sans Expanded', sans-serif; font-weight: 800; }
.hw-is { right: 907px; top: 525px; font-family: Bitter, serif; font-weight: 600; }
.hw-next { left: 904px; top: 225px; font-family: Exo, sans-serif; font-style: italic; letter-spacing: 10px; }
.hw-thing { left: 904px; top: 375px; font-family: 'Zalando Sans', sans-serif; font-weight: 600; }
.hw-you { left: 913px; top: 536px; font-family: Cookie, cursive; font-size: 270px !important; line-height: 108px !important; }

/* Physics bodies */
#bodies { position: absolute; inset: 0; }
.body { position: absolute; left: 0; top: 0; cursor: grab; touch-action: none; will-change: transform; }
.body:active { cursor: grabbing; }
.body.tile { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.35)); }
.body.page { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45)); }
.tile-frame { width: 100%; height: 100%; padding: 5px; border: 1.5px dotted rgba(255, 255, 255, 0.12); border-radius: 10px; display: flex; }
.tile-inner { position: relative; flex: 1; border-radius: 7px; overflow: hidden; background: #262626; }
.tile-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tile-fallback { position: absolute; inset: 0; padding: 16px; display: flex; align-items: flex-end; background: var(--callout); color: var(--ink); font-family: var(--font-expanded); font-size: 18px; font-weight: 800; line-height: 1.05; }
.tile-chip { position: absolute; left: 10px; top: 10px; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--bg); color: var(--callout); font-family: var(--font-expanded); font-size: 9px; letter-spacing: 1.5px; }
.tile-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--callout); }
.page-inner { width: 100%; height: 100%; background: #fff; border-radius: 7px; overflow: hidden; }
.page-inner img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.page-faux { width: 100%; height: 100%; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.page-faux .pf-top { display: flex; justify-content: space-between; align-items: center; }
.page-faux .pf-mark { width: 18px; height: 6px; border-radius: 3px; background: var(--callout); }
.page-faux .pf-num { font-size: 10px; font-weight: 600; letter-spacing: 1px; color: #8a8a8a; }
.page-faux .pf-title { font-family: var(--font-semi); font-size: 14px; font-weight: 500; line-height: 1.1; }
.page-faux .pf-lines { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.page-faux .pf-lines span { display: block; height: 5px; border-radius: 3px; background: #ececea; }

/* Nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 70px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; background: var(--bg); transition: transform 0.55s cubic-bezier(.6, 0, .9, .5), opacity 0.4s ease; }
html.uploading .nav { visibility: hidden; opacity: 0; pointer-events: none; height: 0; min-height: 0; padding: 0; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 10px; height: 36px; }
.brand img { width: 40px; height: auto; display: block; }
.brand span { font-family: var(--font-expanded); font-size: 24px; letter-spacing: 1px; line-height: 1.2; }
.nav-links { display: flex; align-items: center; gap: 5px; }
.nav-link { display: flex; align-items: center; gap: 7px; padding: 10px; border: 0; border-radius: 5px; background: transparent; color: #fff; font-size: 13.5px; line-height: 1; opacity: 0.5; transition: opacity 0.2s ease; }
.nav-link:hover { opacity: 1; }
.nav-link img { width: 16px; height: 16px; object-fit: contain; display: block; }

/* About modal */
.about-modal { position: fixed; inset: 0; z-index: 40; padding: 40px 0; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background: rgba(26, 26, 26, 0.25); user-select: text; -webkit-user-select: text; animation: fade-in 0.3s ease-out both; }
.about-backdrop { position: absolute; inset: 0; }
.about-card { position: relative; z-index: 1; width: 640px; padding: 5px; display: flex; background: var(--bg); border: 1.5px solid rgba(255, 255, 255, 0.05); border-radius: 10px; color: #fff; animation: rise-in 0.4s 0.05s cubic-bezier(.2, .8, .2, 1) both; }
.about-side { position: relative; width: 89px; flex-shrink: 0; border-radius: 7px 0 0 7px; overflow: hidden; }
.about-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-content { position: relative; flex: 1; padding: 50px 50px 40px; }
.about-close { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; }
.about-logo { display: flex; align-items: center; gap: 10px; height: 36px; margin-bottom: 50px; }
.about-logo img { width: 40px; height: auto; display: block; }
.about-logo span { font-family: var(--font-expanded); font-size: 24px; letter-spacing: 1px; line-height: 1.2; }
.about-title { margin: 0 0 10px; font-family: var(--font-expanded); font-size: 26px; font-weight: 500; line-height: 1.4; }
.about-sub { margin-bottom: 20px; opacity: 0.89; font-family: var(--font-semi); font-size: 18px; line-height: 1.5; }
.about-rich p { margin: 0 0 10px; opacity: 0.8; font-size: 16px; font-weight: 300; line-height: 1.8; }
.about-rich p:last-child { margin-bottom: 0; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Feature band */
.band-bleed { position: absolute; left: 0; right: 0; bottom: 0; height: calc(70px * var(--s, 1)); background: var(--callout); pointer-events: none; transition: transform 0.8s 0.35s cubic-bezier(.2, .8, .2, 1); }
.features-label { transition: transform 0.8s 0.45s cubic-bezier(.2, .8, .2, 1); position: absolute; left: 0; top: 801px; width: 1440px; height: 22px; text-align: center; color: var(--callout); font-family: var(--font-expanded); font-size: 11px; letter-spacing: 4px; line-height: 22px; text-transform: uppercase; pointer-events: none; }
.band { transition: transform 0.8s 0.35s cubic-bezier(.2, .8, .2, 1); position: absolute; left: 0; top: 830px; width: 1440px; height: 70px; padding: 10px 0; background: var(--callout); color: var(--ink); overflow: hidden; }
.tick { display: flex; align-items: center; width: max-content; height: 100%; animation: marquee 60s linear infinite; }
.tick.paused { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.feat-item { display: flex; align-items: center; height: 50px; }
.feat-item img { width: 20px; height: auto; display: block; margin: 0 13px; }
.feat { height: 50px; padding: 0 20px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-family: var(--font-semi); font-size: 14.6px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: default; transition: background-color 0.23s ease, color 0.23s ease; }
.feat:hover, .feat.active { background: var(--bg); color: var(--callout); }
.feature-card { position: absolute; bottom: 75px; width: 360px; padding: 20px; display: flex; flex-direction: column; gap: 10px; border: 1.5px solid var(--callout); border-radius: 10px; background: var(--bg); color: #fff; pointer-events: none; z-index: 6; animation: pop-in 0.18s ease-out both; }
.feature-card-label { margin-bottom: 10px; color: var(--callout); font-family: var(--font-semi); font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.feature-card-title { font-family: var(--font-semi); font-size: 19px; font-weight: 500; line-height: 1.3; }
.feature-card-body { margin: 0; opacity: 0.8; font-size: 15px; font-weight: 300; line-height: 1.6; }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Upload card */
.card { position: absolute; left: 510px; top: 86px; width: 420px; height: 659px; padding: 30px 30px 20px; background: #fff; color: var(--ink); transition: height 0.5s cubic-bezier(.2, .8, .2, 1); border-radius: 10px; box-shadow: 0 0 40px 20px rgba(0, 0, 0, 0.5); transform-origin: 50% 50%; user-select: text; -webkit-user-select: text; z-index: 5; }
.card-view { height: 100%; display: flex; flex-direction: column; gap: 18px; }
.card-heading { text-align: center; }
.card-title { display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-semi); font-size: 24px; font-weight: 500; line-height: 1.4; }
.card-title .arrow { color: var(--callout-dark); }
.card-sub { margin-top: 5px; color: rgba(26, 26, 26, 0.8); font-size: 16.4px; line-height: 1.6; }
.free { color: rgba(26, 26, 26, 0.9); font-weight: 500; }
/* Feature terms in the subline. Bubbles live inside the card so they scale with the stage.
   They are placed against .card-sub: .tip-l1 sits above line 1, .tip-l2 above line 2 (50% = one line of two). */
.card-sub { position: relative; }
.tip { position: relative; border-radius: 3px; outline: none; cursor: help; text-decoration: underline dotted rgba(26, 26, 26, 0.4); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color 0.15s ease; }
.tip:hover, .tip:focus { text-decoration-color: rgba(26, 26, 26, 0.85); }
.tip:focus-visible { outline: 2px solid var(--callout); outline-offset: 2px; }
.tip-pt { position: relative; }
.tip-bubble { position: absolute; left: -10px; right: -10px; z-index: 2; padding: 9px 12px 10px; border-radius: 7px; background: var(--bg); color: rgba(255, 255, 255, 0.88); font-size: 13px; font-weight: 400; line-height: 1.45; text-align: left; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); opacity: 0; visibility: hidden; transform: translateY(3px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0.15s; }
.tip-l1 { bottom: calc(100% + 4px); }
.tip-l2 { bottom: calc(50% + 4px); }
.tip:is(:hover, :focus) + .tip-bubble { opacity: 1; visibility: visible; transform: none; transition: opacity 0.15s ease, transform 0.15s ease; }
.tip:not(.tip-split)::after, .tip-split .tip-pt::after { content: ""; position: absolute; left: 50%; bottom: calc(100% - 5px); z-index: 3; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.tip:not(.tip-split):is(:hover, :focus)::after, .tip-split:is(:hover, :focus) .tip-pt::after { opacity: 1; }
/* Three-line bubble over line 1: tighter type and a lower bottom edge (into the half-leading) keep it inside the card. */
.tip-bubble.tip-tall { left: -15px; right: -15px; bottom: calc(100% - 2px); padding: 7px 11px 8px; font-size: 12px; line-height: 1.4; }
.tip.tip-tall::after { bottom: calc(100% - 10px); }
@media (prefers-reduced-motion: reduce) { .tip-bubble, .tip::after, .tip-pt::after { transition: none; transform: none; } }
.divider { height: 1.5px; margin: 0 -30px; background: rgba(0, 0, 0, 0.1); flex-shrink: 0; }
.card-form { display: flex; flex-direction: column; gap: 7px; }
.row { display: flex; gap: 5px; }
.fld { display: block; width: 100%; height: 50px; padding: 8px 12px 7px; border: 1.5px solid var(--field-border); border-radius: 7px; background: #fff; font-family: var(--font-semi); font-size: 13.7px; color: var(--ink); outline: none; position: relative; z-index: 1; }
.fld:focus { border-color: var(--callout); }
.fld::placeholder { color: #8a8a8a; }
.fld.bad { border-color: #d9534f; }
.field-note { margin-top: -5px; padding: 11px 8px 8px; border-radius: 0 0 5px 5px; background: var(--field-border); color: rgba(26, 26, 26, 0.6); font-size: 12px; font-weight: 600; line-height: 1; }
.zone { position: relative; height: 180px; margin: 5px 0; border: 1.5px dashed rgba(0, 0, 0, 0.1); border-radius: 10px; background: rgba(0, 0, 0, 0.03); display: flex; align-items: center; justify-content: center; text-align: center; transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; }
.zone:hover, .zone.drag { border-color: var(--callout); background: rgba(161, 207, 0, 0.06); }
.zone.drag { transform: scale(1.02); }
.zone:focus-within { outline: 2px solid var(--callout); outline-offset: 2px; }
#file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.zone-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.zone-title { margin-bottom: 3px; font-family: var(--font-semi); font-size: 15px; font-weight: 500; line-height: 1.5; }
.zone-sub { opacity: 0.4; font-size: 14px; font-weight: 500; line-height: 1.3; }
.zone-reading { width: 100%; padding: 0 24px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.zr-top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-semi); font-size: 15px; font-weight: 500; }
.zr-count { font-family: var(--font-expanded); font-size: 22px; font-weight: 800; }
.bar { height: 6px; border-radius: 8px; background: #ececea; overflow: hidden; }
.bar-fill { height: 100%; width: 3%; border-radius: 8px; background: var(--callout); transition: width 0.2s ease; }
.zr-name { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-ready { width: 100%; padding: 0 16px; display: flex; align-items: center; gap: 12px; text-align: left; }
.thumb { width: 128px; height: 72px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--callout) url("assets/slides-mark-dark.svg") center / 22px no-repeat; border: 1px solid rgba(0, 0, 0, 0.1); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ready-text { flex: 1; min-width: 0; }
.ready-name { font-family: var(--font-semi); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ready-meta { margin-top: 4px; font-size: 12px; color: var(--muted); }
.remove-btn { position: relative; z-index: 3; width: 36px; height: 36px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.05); display: flex; align-items: center; justify-content: center; }
.main-btn { height: 50px; padding: 7px 10px 5px; border: 1.5px solid rgba(255, 255, 255, 0.05); border-radius: 7px; background: var(--callout); color: var(--ink); font-family: var(--font-expanded); font-size: 13.33px; font-weight: 500; transition: filter 0.2s ease; }
.main-btn:hover { filter: brightness(1.1); }
.form-error { margin: -5px 0 0; text-align: center; color: var(--error); font-size: 13px; font-weight: 500; line-height: 1.3; }
.terms { margin-top: -5px; opacity: 0.4; text-align: center; font-size: 13px; line-height: 1.3; }
.terms a { border-bottom: 1px dotted #000; }

/* Focus mode: while a deck is in the card, the band drops out of view (tiles + headline are in main.js). */
.focus .band, .focus .features-label { transform: translateY(130px); transition: transform 0.55s cubic-bezier(.6, 0, .9, .5); }
.focus .band-bleed { transform: translateY(calc(130px * var(--s, 1))); transition: transform 0.55s cubic-bezier(.6, 0, .9, .5); }
.focus .features-label { transition-delay: 0.05s; }

/* "Get a link": a dark wipe sweeps across the card, then the card turns into the Success card. */
.wipe { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: var(--bg); clip-path: inset(0 100% 0 0); pointer-events: none; z-index: 4; display: flex; align-items: center; justify-content: center; color: #fff; }
.wipe-label { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wipe-logo { width: 52px; height: 52px; margin-bottom: 46px; background: var(--callout); -webkit-mask: url("assets/slides-logo.svg") center / contain no-repeat; mask: url("assets/slides-logo.svg") center / contain no-repeat; }
/* Pixel scanner trailing the green edge. main.js keeps its right side on the edge; the eased mask fades the whole trail, not each pixel. */
.wipe-scan { position: absolute; top: 0; bottom: 0; right: 100%; width: 240px; background: url("assets/scan-pixels-a.svg?v=2"), url("assets/scan-pixels-b.svg?v=2"); background-size: 48px 48px; -webkit-mask: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.03) 12%, rgba(0, 0, 0, 0.09) 25%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.38) 55%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.83) 84%, #000 94%); mask: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.03) 12%, rgba(0, 0, 0, 0.09) 25%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.38) 55%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.83) 84%, #000 94%); animation: wipe-pixels 0.8s steps(16) infinite; }
.wipe-scan::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--callout) 0 2px, transparent 2px 3px) 0 0 / 100% 2px no-repeat; animation: wipe-scanline 1.8s steps(60) infinite; }
@keyframes wipe-pixels { to { background-position: 0 48px, 0 -48px; } }
@keyframes wipe-scanline { to { background-position: 0 100%; } }
.wipe-pct { font-family: var(--font-expanded); font-size: 56px; font-weight: 800; line-height: 1; color: var(--callout); }
.wipe-text { font-family: var(--font-semi); font-size: 15px; opacity: 0.7; }
.wipe-edge { position: absolute; top: 0; left: 0; width: 2px; height: 100%; margin-left: -1px; background: var(--callout); box-shadow: 0 0 18px 3px rgba(172, 224, 76, 0.55); pointer-events: none; z-index: 4; opacity: 0; }
.card.is-done { height: 590px; background: var(--bg); color: #fff; }
.card.no-shadow { box-shadow: none; border: 1.5px solid rgba(255, 255, 255, 0.1); }

/* Success card (matches the first card of the Webflow onboarding page) */
@keyframes done-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.done-in { animation: done-rise 0.45s cubic-bezier(.2, .8, .2, 1) both; }
.done-in:nth-child(1) { animation-delay: 0.05s; } .done-in:nth-child(2) { animation-delay: 0.12s; } .done-in:nth-child(3) { animation-delay: 0.19s; }
.done-in:nth-child(4) { animation-delay: 0.26s; } .done-in:nth-child(5) { animation-delay: 0.33s; }
.done-head { font-family: var(--font-semi); font-size: 24px; font-weight: 500; line-height: 1.4; }
.done-head .dim { opacity: 0.69; }
.done-deck { margin-top: 10px; display: flex; align-items: center; gap: 15px; }
.done-thumb { width: 150px; height: 84px; flex-shrink: 0; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 5px; }
.done-thumb-in { position: relative; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; background: var(--callout) url("assets/slides-mark-dark.svg") center / 22px no-repeat; }
.done-thumb-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.done-deck-text { min-width: 0; }
.done-title { margin: 2px 0; font-family: var(--font-semi); font-size: 14.4px; font-weight: 400; line-height: 21.77px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.done-subtitle { color: rgba(255, 255, 255, 0.6); font-family: var(--font-semi); font-size: 13px; line-height: 21.77px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.done-subtitle .dim { opacity: 0.69; }
.share-link { position: relative; height: 60px; flex-shrink: 0; padding: 0 0 0 12px; display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 5px; background: transparent; color: #fff; font-family: var(--font-semi); font-size: 13.33px; line-height: 21.77px; text-align: left; overflow: hidden; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.share-link:hover { border-color: var(--callout); box-shadow: 0 0 14px rgba(172, 224, 76, 0.45); }
.share-link-text { white-space: nowrap; }
.copy-hint { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 15px 0 90px; background-image: linear-gradient(90deg, rgba(17, 17, 17, 0), #111 40%); transition: color 0.2s ease; }
.share-link:hover .copy-hint { color: var(--callout); }
.share-box { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 6px; width: 100%; min-height: 120px; margin: 0 0 4px; padding: 10px 10px 25px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 5px; background: rgba(255, 255, 255, 0.03); color: #fff; font-family: var(--font-semi); font-size: 13.33px; font-weight: 300; line-height: 19px; cursor: text; }
.share-box:focus-within { border-color: rgba(172, 224, 76, 0.6); }
.share-pills { display: contents; }
.share-pill { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 24px; padding: 0 4px 0 8px; border: 1px solid rgba(172, 224, 76, 0.55); border-radius: 999px; background: rgba(172, 224, 76, 0.14); color: #fff; font-size: 12px; line-height: 1; }
.share-pill.bad { border-color: rgba(192, 57, 43, 0.8); background: rgba(192, 57, 43, 0.16); }
.share-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-pill button { width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 14px; line-height: 1; opacity: 0.7; }
.share-pill button:hover { opacity: 1; }
.share-pill-input { flex: 1 1 140px; min-width: 120px; height: 24px; padding: 0; border: 0; background: transparent; color: #fff; font: inherit; outline: none; }
.share-pill-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.share-note { position: relative; margin: -23px 0 15px; padding-left: 10px; color: rgba(255, 255, 255, 0.36); font-family: var(--font-semi); font-size: 12px; line-height: 12px; pointer-events: none; }
.share-btn { display: flex; height: 40px; align-items: center; justify-content: center; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 7px; background: rgba(255, 255, 255, 0.03); color: #fff; font-family: var(--font-semi); font-size: 13px; text-decoration: none; transition: background-color 0.2s ease; }
.share-btn:hover { background: rgba(255, 255, 255, 0.07); }
.done-divider { height: 2px; margin: 0 -20px; flex-shrink: 0; background: rgba(255, 255, 255, 0.1); }
.continue-btn { display: flex; flex-shrink: 0; align-items: center; justify-content: center; font-size: 13px; text-decoration: none; }
/* Onboarding step dots and arrows, the same as the ones onboarding.js draws on onboarding.html:
   dots 8px under the primary button, arrows 14px outside the card, level with its middle. */
.step-dots { display: flex; flex-shrink: 0; justify-content: center; gap: 2px; margin-top: -10px; animation: done-rise 0.45s 0.33s cubic-bezier(.2, .8, .2, 1) both; }
.step-dot { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; opacity: 0.3; transition: opacity 0.15s ease; }
.step-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.step-dot.active { opacity: 1; }
a.step-dot:hover { opacity: 0.6; }
a.step-dot:focus-visible { outline: 1.5px solid rgba(255, 255, 255, 0.5); outline-offset: -2px; }
.step-arrow { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-top: -25px; border: 1.5px solid rgba(255, 255, 255, 0.1); border-radius: 7px; background: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)) var(--bg); color: rgba(255, 255, 255, 0.7); animation: done-rise 0.45s 0.12s cubic-bezier(.2, .8, .2, 1) both; transition: border-color 0.15s ease, color 0.15s ease; }
.step-arrow.is-back { right: calc(100% + 15.5px); opacity: 0.3; animation-name: done-rise-dim; }
@keyframes done-rise-dim { from { opacity: 0; transform: translateY(10px); } to { opacity: 0.3; transform: translateY(0); } }
.step-arrow.is-next { left: calc(100% + 15.5px); }
.step-arrow svg { width: 18px; height: 18px; transition: transform 0.15s ease; }
a.step-arrow:hover, a.step-arrow:focus-visible { outline: none; border-color: var(--callout); color: var(--callout); }
a.step-arrow:hover svg, a.step-arrow:focus-visible svg { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .tick, .about-modal, .about-card, .done-in, .step-dots, .step-arrow, .nav { animation: none; transition: none; }
  .wipe-scan { animation: none; }
  .wipe-scan::after { display: none; }
}

/* Phones, and narrow portrait or short windows: the page runs in normal document flow instead of the scaled
   1440x900 stage. Same query as PHONE_MQ in main.js, which clears the stage transforms to match.
   Headline strip, then the card (full width with 16px page padding), then the feature band. */
@media (max-width: 699px), (max-width: 1099px) and (orientation: portrait), (max-width: 1099px) and (max-height: 500px) {
  body { font-size: 16px; }
  .nav { height: 56px; padding: 0 12px; }
  .brand { min-height: 44px; }
  .brand img { width: 32px; }
  .brand span { font-size: 20px; }
  .nav-link { min-height: 44px; padding: 0 12px; font-size: 15px; opacity: 0.7; }

  #viewport { overflow: hidden; }
  #stage { position: relative; z-index: auto; width: auto; height: auto; padding: 64px 16px 24px; overflow: visible; }
  html[data-bare] #stage { padding-top: 16px; }

  /* The canvas keeps its 1440x900 art space. main.js pulls the two columns 150px together on phones, so the
     strip crops it to x 210 to 1270 (the words sit a little right of center) and y 225 to 725, at most 560px wide. */
  .headline { --hw: min(100vw, 560px); position: relative; inset: auto; height: calc(var(--hw) * 500 / 1060); margin: 0 -16px 12px; overflow: hidden; transition: height 0.5s 0.6s cubic-bezier(.2, .8, .2, 1), margin 0.5s 0.6s ease; }
  #headline-canvas { left: calc(50% - var(--hw) * 740 / 1060); top: calc(var(--hw) * -225 / 1060); width: calc(var(--hw) * 1440 / 1060); height: calc(var(--hw) * 900 / 1060); }
  .headline-fallback { display: none; }
  html.uploading .headline { height: 0; margin-bottom: 0; }

  /* Deck pages burst from behind the card on a fixed layer (main.js mapBodies); the tiles need the wide stage. */
  #bodies { position: fixed; left: 0; top: 0; right: auto; bottom: auto; width: 0; height: 0; z-index: 4; transform-origin: 0 0; pointer-events: none; }
  .body { pointer-events: none; }
  .body.tile { display: none; }

  .card { position: relative; left: auto; top: auto; width: auto; max-width: 440px; height: auto; margin: 0 auto; padding: 24px 20px 20px; box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.45); transition: none; }
  .card.is-done { height: auto; }
  .card-view { height: auto; }
  .divider { margin: 0 -20px; }
  .card-title { flex-wrap: wrap; font-size: 21px; }
  .card-sub { font-size: 16px; }
  .row { flex-direction: column; gap: 7px; }
  .fld { font-size: 16px; }
  .field-note { line-height: 1.3; }
  .zone { height: 150px; }
  .zone-ready { padding: 0 12px; }
  .thumb { width: 96px; height: 54px; }
  .remove-btn { width: 44px; height: 44px; }
  .main-btn { height: 52px; font-size: 14px; }
  .terms, .form-error { font-size: 14px; }
  .terms a { display: inline-block; padding: 6px 0; }
  .wipe-pct { font-size: 48px; }
  .wipe-logo { margin-bottom: 28px; }

  /* Success card: arrows move from outside the card to either end of the dots row. */
  .done-head { font-size: 21px; }
  .done-thumb { width: 112px; height: 63px; }
  .share-link { height: 56px; }
  .share-pill-input { height: 28px; font-size: 16px; }
  .share-pill { height: 28px; }
  .share-pill button { width: 28px; height: 28px; font-size: 16px; }
  .share-btn { height: 48px; font-size: 14px; }
  .step-dots { gap: 0; margin-top: -8px; }
  .step-dot { width: 44px; height: 44px; }
  .step-arrow { top: auto; bottom: 20px; width: 44px; height: 44px; margin-top: 0; }
  .step-arrow.is-back { right: auto; left: 20px; }
  .step-arrow.is-next { left: auto; right: 20px; }

  /* Feature band sits under the card instead of pinned to the bottom of the window. */
  .band-bleed { display: none; }
  #band-layer { position: relative; width: auto; height: auto; padding-top: 4px; pointer-events: auto; }
  .features-label { position: static; width: auto; margin-bottom: 8px; }
  .band { position: relative; top: auto; width: auto; }
  .feature-card { left: 16px; right: 16px; width: auto; bottom: 80px; }
  html.uploading #band-layer { display: none; }

  .about-modal { padding: 16px; }
  .about-card { width: 100%; }
  .about-side { display: none; }
  .about-content { padding: 44px 20px 28px; }
  .about-close { right: 8px; top: 8px; width: 44px; height: 44px; }
  .about-logo { margin-bottom: 28px; }
  .about-title { font-size: 22px; }
  .about-sub { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .headline { transition: none !important; } }