:root {
  color-scheme: light;
  --background: #faf9f6;
  --surface: #fff;
  --ink: #242722;
  --muted: #6c7166;
  --quiet: #6c7166;
  --accent: #e96332;
  --border: #e8e7e1;
  --success: #567045;
  --warning: #99572c;
  --danger: #a64c35;
  --radius-control: 6px;
  --radius-card: 9px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--background);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.button, .plan-button, .secondary-button, .reset-button, .cta-secondary { line-height: 1.5; }
.container { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--border); }
.navbar { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-size: 23px; font-weight: 750; letter-spacing: -1px; white-space: nowrap; }
.brand-icon, .brand-dot { color: var(--accent); }
.wordmark-light { font-weight: 450; }
.nav-actions { display: flex; align-items: center; gap: 32px; }
.nav-item { font-size: 14px; font-weight: 500; color: #62655e; cursor: default; }
.nav-login { margin-left: 20px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 19px; padding: 12px 18px; min-height: 44px; border-radius: var(--radius-control); background: var(--ink); color: white; font-size: 12px; font-weight: 600; }
.button:hover { background: #41453c; }
.button span { font-size: 17px; }
.hero { padding-top: 62px; padding-bottom: 80px; text-align: center; }
.trust-label { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #e3e5dc; background: #f0f2eb; border-radius: 5px; color: #5d6654; font-size: 11px; font-weight: 600; letter-spacing: .3px; }
h1 { margin: 25px 0 20px; font-size: clamp(38px, 5.1vw, 62px); line-height: 1.1; letter-spacing: -.055em; font-weight: 650; }
h1 span { color: #454b40; }
.hero-description { margin: 0; font-size: 16px; line-height: 1.7; color: var(--muted); }
.mobile-break { display: none; }
.upload-card { max-width: 644px; margin: 32px auto 0; padding: 18px 18px 0; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: 0 8px 28px #262b2110, 0 1px 3px #262b2105; scroll-margin-top: 24px; }
.drop-zone { width: 100%; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 16px; background: #fdfcf9; border: 1.5px dashed #d9d9cf; border-radius: 8px; color: var(--ink); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.drop-zone:hover { border-color: #cfa98d; background: #fffaf5; }
.drop-zone.is-dragging { border-color: var(--accent); background: #fff5ed; box-shadow: inset 0 0 0 1px var(--accent); }
.upload-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border: 1px solid #e9dfd2; border-radius: 14px; color: #bd6b39; background: #f7f0e6; transition: transform 150ms ease, background-color 150ms ease; }
.drop-zone:hover .upload-icon, .drop-zone.is-dragging .upload-icon { transform: translateY(-2px); background: #f9eadb; }
.drop-title { font-size: 19px; font-weight: 600; letter-spacing: -.4px; }
.drop-description { margin-top: 7px; color: var(--muted); font-size: 13px; }
.browse-text { color: #b6532c; font-weight: 500; }
.upload-security { margin: 0; padding: 18px 8px; display: flex; justify-content: center; align-items: center; gap: 7px; color: var(--quiet); font-size: 11px; line-height: 1.5; }
a:focus-visible, button:focus-visible, .drop-zone:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
@media (max-width: 700px) {
  .container { width: calc(100% - 40px); }
  .navbar { min-height: 80px; gap: 16px; flex-wrap: wrap; padding-block: 18px; }
  .wordmark { font-size: 21px; }
  .brand-icon { width: 25px; height: 29px; }
  .nav-actions { gap: 18px; }
  .nav-login { margin-left: 0; }
  .nav-item { font-size: 12px; }
  .button { padding: 11px 14px; gap: 12px; font-size: 12px; }
  .hero { padding-top: 46px; padding-bottom: 48px; }
  h1 { margin-top: 24px; font-size: clamp(34px, 7.8vw, 50px); }
  .hero-description { font-size: 14px; }
  .mobile-break { display: initial; }
  .upload-card { margin-top: 26px; padding: 12px 12px 0; }
  .drop-zone { min-height: 240px; }
}
@media (max-width: 480px) {
  .navbar { justify-content: center; }
  .nav-actions { width: 100%; justify-content: space-between; gap: 12px; }
  .hero { padding-top: 34px; }
  .upload-security { font-size: 10px; padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .burn-card, .burn-icon, .guest-reset-row .reset-button { transition: none; }
  .drop-zone, .upload-icon { transition: none; }
  .drop-zone:hover .upload-icon, .drop-zone.is-dragging .upload-icon { transform: none; }
}

/* The upload prototype stays inside the existing product card. */
[hidden] { display: none !important; }
.upload-status { min-height: 250px; padding: 24px 14px 18px; text-align: left; background: #fdfcf9; border: 1px solid var(--border); border-radius: 8px; }
.file-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.file-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 46px; border: 1px solid #e9dfd2; border-radius: var(--radius-card); background: #f7f0e6; color: #bd6b39; }
.file-details { min-width: 0; flex: 1; }
.file-name { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.progress-heading h2 { margin: 0; font-size: 15px; font-weight: 600; }
#upload-percent { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#upload-progress { display: block; width: 100%; height: 6px; border: 0; border-radius: 4px; overflow: hidden; appearance: none; background: #ebeae4; accent-color: var(--accent); }
#upload-progress::-webkit-progress-bar { background: #ebeae4; border-radius: 4px; }
#upload-progress::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
#upload-progress::-moz-progress-bar { background: var(--accent); border-radius: 4px; }
.progress-detail { margin: 13px 0 0; color: #62655e; font-size: 12px; line-height: 1.6; }
.share-state { padding: 6px 14px 18px; }
.success-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px; background: #edf2e8; border: 1px solid #dfe7d8; border-radius: 50%; color: var(--success); }
.share-state h2 { margin: 0 0 18px; font-size: 23px; font-weight: 600; letter-spacing: -.6px; }
.completed-file { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 10px 12px; text-align: left; background: #fdfcf9; border: 1px solid var(--border); border-radius: 7px; }
.completed-file-icon { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 38px; color: #8a826f; }
.completed-file .file-name { font-size: 13px; }
.completed-file .file-size { margin-top: 2px; font-size: 11px; }
.field-label { display: block; text-align: left; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.share-link-row { display: flex; gap: 8px; }
#share-link, #share-expiry { min-width: 0; padding: 11px 12px; border: 1px solid #dedfd6; border-radius: var(--radius-control); background: #fdfcf9; color: var(--ink); font: inherit; font-size: 12px; }
#share-link { flex: 1; width: 100%; }
.copy-button { flex-shrink: 0; min-width: 100px; padding: 12px 16px; border: 1px solid #b74520; background: #bd4b25; color: #fff; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 4px #a73c1814; }
.copy-button:hover { background: #a63d1c; }
.copy-feedback { margin: 0; text-align: left; font-size: 11px; line-height: 1.5; color: var(--success); }
.copy-feedback:not(:empty) { margin-top: 6px; }
.share-key-note { margin: 7px 0 0; text-align: left; color: var(--muted); font-size: 11px; line-height: 1.55; }
.share-options { display: block; min-width: 0; margin: 22px 0 0; padding: 0; border: 0; text-align: left; }
.share-options legend { padding: 0; margin-bottom: 7px; font-size: 11px; font-weight: 600; color: var(--muted); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; font-size: 12px; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border-bottom: 0; }
#share-expiry { width: 120px; padding: 8px 10px; cursor: pointer; }
/* ===========================================================================
   THE SEGMENTED EXPIRY.

   ONE TRACK, four segments inside it. The first version gave every segment
   its own border and a 6px gap, which read as four separate little cards and
   wrapped onto two lines on a phone. The container owns the border and the
   radius now; the segments own only their fill.

   Labels never wrap: `nowrap` plus a font that steps down on narrow screens,
   because "3 days" broken over two lines is worse than slightly smaller type.
   =========================================================================== */
.setting-row-stack { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding: 4px 0 2px; min-height: 0; }
.setting-label { font-size: 11px; font-weight: 500; color: var(--muted); }
.segmented { display: flex; gap: 2px; padding: 2px; border: 1px solid #dedfd6; border-radius: 9px; background: #f1f0ea; }
.segment { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: 1 1 0; min-width: 0; min-height: 30px; padding: 6px 3px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 11.5px; line-height: 1.2; white-space: nowrap; cursor: pointer; text-align: center; }
/* The radio itself is the state, not the paint: hidden, never removed, so the
   group stays keyboard-navigable and screen-reader-addressable. */
.segment input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.segment:hover:not(.segment-locked) { color: var(--ink); }
/* The selected one is a raised pill, which is legible at a glance without
   shouting the way a filled accent block would on a settings row. */
.segment:has(input:checked) { background: #fff; color: #8f3a1c; font-weight: 600; box-shadow: 0 1px 2px #2427221f; }
.segment:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
/* LOCKED, not disabled-looking. A dashed, greyed-out form control reads as
   broken; this reads as a thing that exists and is not yours yet. */
.segment-locked { cursor: not-allowed; color: #8d8a7c; }
.segment-badge { padding: 1px 3px; border-radius: 3px; background: #e4e1d5; color: #7c7568; font-size: 8.5px; font-weight: 700; letter-spacing: .03em; line-height: 1.4; }
.guest-controls[data-locked] .segment { opacity: .55; cursor: not-allowed; }
.burn-option { cursor: pointer; }
.burn-label { display: inline-flex; align-items: center; gap: 7px; line-height: 1.5; }
.burn-label svg { color: #bd6b39; flex-shrink: 0; }
.burn-toggle { appearance: none; position: relative; flex-shrink: 0; width: 34px; height: 20px; margin: 0; border: 1px solid #c7cbbf; border-radius: 12px; background: #e2e5dc; cursor: pointer; }
.burn-toggle::after { content: ''; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; border-radius: 50%; background: white; box-shadow: 0 1px 2px #24272220; }
.burn-toggle:checked { background: #bd4b25; border-color: #bd4b25; }
.burn-toggle:checked::after { left: 16px; }
.share-security { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; color: var(--quiet); font-size: 10px; line-height: 1.6; }
.share-security svg { flex-shrink: 0; }

/* ===========================================================================
   THE GUEST CONTROLS  (Phase 5E)

   On screen from the moment a file is picked until the link is created: the
   verification box until it is solved, then expiry and burn while the bytes
   move. `[data-locked]` is set by the snapshot at finalization — the controls
   are disabled, not removed, so what was chosen stays readable.
   =========================================================================== */
.guest-controls { margin-top: 14px; text-align: left; }
.guest-controls .share-options { margin-top: 0; }

/* ===========================================================================
   THE GUEST SUCCESS STATE, as one block.  (Phase 5G polish)

   The settings are a SIBLING of the success panel, not a child of it, so the
   two used to read as unrelated things stacked on a page: a tall gap above
   "Link settings", and the way out of the card sitting between the link and
   the settings that belong to it. Everything here is about closing that gap
   and keeping the vertical rhythm even.

   Scoped to the guest profile: .share-state, .share-options, .setting-row and
   .reset-button are shared with the account upload view in dashboard.html.
   =========================================================================== */
[data-upload-profile="guest"] .share-state { padding-bottom: 2px; }
[data-upload-profile="guest"] .share-state h2 { margin-bottom: 13px; }
[data-upload-profile="guest"] .completed-file { margin-bottom: 13px; padding: 7px 11px; }
/* ATTACHED: a hairline and a small gap, rather than 20px of nothing. */
[data-upload-profile="guest"][data-state="complete"] .guest-controls { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border); }
[data-upload-profile="guest"] .share-options legend { margin-bottom: 5px; color: var(--ink); }
/* NO DIVIDERS BETWEEN THE TWO SETTINGS. The segmented track is already a
   bounded object and the toggle sits alone on its line; a rule between them
   only added a third horizontal line to a card that has two already, and it
   was what made the burn row read as a separate section. */
[data-upload-profile="guest"] .setting-row { min-height: 0; border-bottom: 0; }
/* ===========================================================================
   THE BURN ROW, as a small card.

   It was a bare settings line under a bounded, painted expiry track, so it
   read as leftover rather than as the second half of one section. It is a
   card of its own now: an icon tile, the title, the helper under it, the
   switch on the right.

   .burn-copy carries 12px of its own padding for the account card, which
   doubled with the row's and opened a gap under the toggle; it is zeroed
   here and the card's own padding does the work.
   =========================================================================== */
[data-upload-profile="guest"] .burn-card { align-items: center; gap: 10px; margin-top: 8px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: #faf9f5; transition: background 140ms ease, border-color 140ms ease; }
[data-upload-profile="guest"] .burn-icon { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border: 1px solid #e7e5db; border-radius: 7px; background: #f2f1ea; color: #9a9686; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
[data-upload-profile="guest"] .burn-copy { flex: 1; min-width: 0; padding-block: 0; }
[data-upload-profile="guest"] .burn-label { font-size: 12px; }
[data-upload-profile="guest"] .burn-description { margin: 2px 0 0; font-size: 10.5px; line-height: 1.5; }
[data-upload-profile="guest"] .burn-toggle { margin-top: 0; }
/* ON: WARM, NOT ALARMING. Burn is a deliberate choice, not an error — the
   same peach the file icon already uses, never a red. The card, the tile and
   the title all shift together so the setting reads as active at a glance
   without the row shouting. */
[data-upload-profile="guest"] .burn-card:has(input:checked) { background: #fdf6f1; border-color: #ecd2bf; }
[data-upload-profile="guest"] .burn-card:has(input:checked) .burn-icon { background: #f7e7da; border-color: #e5c3a9; color: #bd6b39; }
[data-upload-profile="guest"] .burn-card:has(input:checked) .burn-label { color: #8f3a1c; font-weight: 600; }
/* Locked: the whole card recedes, not just the switch. */
[data-upload-profile="guest"] .guest-controls[data-locked] .burn-card { opacity: .7; }
[data-upload-profile="guest"] .guest-settings-note { margin-top: 10px; }
[data-upload-profile="guest"] .guest-note-secondary { margin-top: 9px; font-size: 10.5px; }

/* ===========================================================================
   PHASE 5H MICRO-POLISH, GUEST CARD ONLY.

   Scoped to the guest profile throughout: .cancel-button is also the control
   on the account upload card and on the recipient download page, where it
   sits in a flex row of its own; .success-icon and .copy-feedback are shared
   with the dashboard. None of those pages carry this attribute.
   =========================================================================== */

/* 1. CANCEL IS A CONTROL, AND IT STANDS WITH THE PROGRESS IT CANCELS.

   It was a borderless string of text pushed to the far right of the panel by
   `margin-left: auto`, below content that is left-aligned — so it read as a
   caption that had drifted, and nothing about it said it could be pressed
   before a cursor was already on it. Same quiet fill, border and radius as
   "Upload another file": the two ways out of this card now look like the same
   kind of thing. The height comes from the shared rule, so the 44px touch
   target on coarse pointers is untouched. */
[data-upload-profile="guest"] .cancel-button { display: inline-flex; align-items: center; justify-content: center; margin: 14px 0 0; padding: 8px 14px; background: #f7f6f1; border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--muted); font-size: 11.5px; font-weight: 600; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
[data-upload-profile="guest"] .cancel-button:hover { background: #efeee7; border-color: #d8d6cb; color: var(--ink); }

/* 4. THE CHECK IS THE SECOND THING READ, NOT THE FIRST.
   "Ready to share" is 23px; a 44px disc above it competed with it. Smaller
   disc, smaller tick, same colours — still plainly positive. */
[data-upload-profile="guest"] .success-icon { width: 38px; height: 38px; margin-bottom: 9px; }

/* 8. THE COPY RESULT HAS ITS OWN LINE, ALWAYS.
   "Link copied" appearing used to push the whole settings block down by its
   line plus a margin, at the exact moment the user had just pressed Copy and
   might be reading the expiry. The line is reserved instead, so the feedback
   appears in place. */
[data-upload-profile="guest"] .copy-feedback { min-height: 17px; }
[data-upload-profile="guest"] .copy-feedback:not(:empty) { margin-top: 0; }

/* 7. THE CARD HAS A FLOOR AGAIN.
   `.upload-card` carries no bottom padding because the empty state ends in
   `.upload-security`, which brings its own 18px. The three states the guest
   controls own end in a button or a line of helper text sitting flush on the
   card's bottom edge. */
[data-upload-profile="guest"][data-state="encrypting"],
[data-upload-profile="guest"][data-state="uploading"],
[data-upload-profile="guest"][data-state="complete"] { padding-bottom: 14px; }

/* THE WAY OUT, below the settings and quieter than everything above it. */
.guest-reset-row { display: flex; justify-content: center; }
/* A BUTTON THAT LOOKS LIKE ONE, before anybody hovers it. Quieter than Copy
   link — bordered and neutral against that one's filled accent — but not
   disguised as text: a control nobody can see is a control nobody uses. */
.guest-reset-row .reset-button { min-height: 36px; margin-top: 14px; padding: 9px 14px; background: #f7f6f1; border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--muted); font-size: 11.5px; font-weight: 600; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
.guest-reset-row .reset-button:hover { background: #efeee7; border-color: #d8d6cb; color: var(--ink); }
.guest-reset-row .reset-button svg { opacity: .75; }
/* ===========================================================================
   THE VERIFICATION BOX.  (Phase 5H micro-polish)

   THE SLOT IS A CONSTANT HEIGHT WHILE THE BOX IS ON SCREEN. A normal
   Turnstile widget is 300x65 and arrives late — the script is fetched only
   when a challenge is actually required — so the box used to grow from 18px
   to 108px and back to 91px while the user watched, shoving the link
   settings down and then pulling them up again. The 65px is reserved before
   the widget exists, and the note under it keeps its line whether it is
   saying "Checking your browser…", an error, or nothing. Nothing inside the
   widget is touched; only the space it lands in.

   What is left over from the tightening: the box is removed once the token is
   spent, which is one deliberate shift at a moment the user caused.
   =========================================================================== */
.guest-challenge { margin-bottom: 12px; }
/* THE GAP UNDER THE WIDGET IS RESERVED TOO. It was `:not(:empty)`, so it
   arrived with the widget — which is 6px of movement on the one event this
   whole rule exists to absorb. Measured at 1280/768/320: 6px before, 0 after. */
#guest-turnstile { min-height: 65px; margin-bottom: 6px; }
.guest-challenge-note { margin: 0; min-height: 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }
/* #guest-expiry was a <select> until the segmented control replaced it. The
   rules that gave it a dropdown's width and chrome are gone with it: a fixed
   120px on what is now a four-segment track is what collapsed the labels on
   top of each other. The segments carry their own focus ring — see .segment
   :has(input:focus-visible). */
#guest-burn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.guest-settings-note { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
/* Locked: the settings are final and the note would be describing a freedom
   the user no longer has. */
.guest-controls[data-locked] .guest-settings-note { display: none; }
.guest-controls[data-locked] .burn-toggle { opacity: .55; cursor: not-allowed; }
#guest-burn:disabled { opacity: .55; cursor: progress; }
/* The whole track, while a save is in flight. The radios are disabled one by
   one by the adapter; this is what says so. */
.segmented:has(input:disabled) { opacity: .55; cursor: progress; }
.guest-controls[data-locked] .burn-option { cursor: default; }
/* Autosave feedback. Neutral while saving, green on success, warning on a
   failure the user has to know about, muted once the link is final. */
.guest-settings-status { margin: 6px 0 0; min-height: 15px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.guest-settings-status[data-tone="ok"] { color: var(--success); }
.guest-settings-status[data-tone="error"] { color: var(--warning); }
.guest-settings-status[data-tone="final"] { color: var(--muted); }
.guest-settings-status:empty { display: none; }
.guest-note { margin: 16px 0 0; color: #62655e; font-size: 12px; line-height: 1.65; }
/* A FOOTER LINK, NOT A LINE OF COPY.  (Phase 5H micro-polish)
   The colour stays on the token that passes contrast at this size — "muted"
   here is the underline, which is a hairline rather than a solid rule, and
   the extra air above it. The anchor is a flex box with a height so the hit
   area is bigger than the 10.5px text, not smaller. */
.guest-note-secondary { margin: 9px 0 0; color: var(--quiet); font-size: 11px; line-height: 1.6; }
.guest-note-secondary a { display: inline-flex; align-items: center; min-height: 26px; color: inherit; text-decoration: underline; text-decoration-color: #c7c6bc; text-underline-offset: 2px; }
.guest-note-secondary a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* The read-back on the complete panel. Shares .completed-settings with the
   signed-in card, which lives in upload.css — index.html does not load that,
   so the rules it needs are here. */
.completed-settings { margin: 20px 0 0; text-align: left; font-size: 12px; }
.completed-settings > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.completed-settings > div:last-child { border-bottom: 0; }
.completed-settings dt { color: var(--muted); }
.completed-settings dd { margin: 0; text-align: right; font-weight: 600; }

/* The long disclosure, down in the privacy section where it can be read. */
.guest-link-facts { margin: 36px 0 0; padding: 22px 24px; background: #fdfcf9; border: 1px solid var(--border); border-radius: 8px; text-align: left; }
.guest-link-facts h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.guest-link-facts ul { margin: 0; padding-left: 20px; color: #62655e; font-size: 13px; line-height: 1.75; }
.guest-link-facts li + li { margin-top: 7px; }
.guest-link-facts code { padding: 1px 5px; background: #f1efe8; border-radius: 3px; font-size: 12px; }
.guest-link-facts a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.reset-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; margin-top: 14px; padding: 10px 14px; background: #f5f4ef; border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.reset-button:hover { background: #eeede6; }
#share-link:focus-visible, #share-expiry:focus-visible, .burn-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 480px) {
  .upload-status { padding-inline: 4px; }
  .share-state { padding-inline: 4px; }
  .copy-button { min-width: 84px; padding-inline: 10px; font-size: 12px; }
  #share-link { padding-inline: 8px; font-size: 11px; }
}

/* The real input is activated through its associated dropzone label. */
.file-picker-input { display: none !important; }

/* Shared upload flow refinements; homepage layout stays unchanged. */
.drop-limit { margin-top: 16px; color: var(--muted); font-size: 11px; }
.upload-status { min-height: 270px; }
.progress-detail { min-height: 18px; }
.progress-security { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--quiet); font-size: 10px; line-height: 1.6; }
.progress-security svg { flex-shrink: 0; }
.cancel-button { display: block; margin: 4px 0 0 auto; min-height: 40px; padding: 8px 0 8px 10px; background: transparent; border: 0; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.cancel-button:hover { color: var(--ink); }
.burn-copy { min-width: 0; padding-block: 12px; }
.burn-description { display: block; margin: 4px 0 0 21px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.burn-toggle { outline-offset: 8px; }
.burn-toggle::before { content: ''; position: absolute; inset: -12px -5px; }
#share-expiry, .copy-button { min-height: 44px; }
.upload-error { min-height: 270px; padding: 28px 18px; }
.error-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 10px; background: #f7f0e6; color: #a16b42; }
.upload-error h2 { margin: 0 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -.4px; }
.upload-error p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.secondary-button { min-height: 44px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-control); background: #f5f4ef; color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.secondary-button:hover { background: #eeede6; }
.upload-card .state-enter { animation: upload-state-enter 160ms ease-out; }
@keyframes upload-state-enter { from { opacity: .6; } to { opacity: 1; } }
@media (max-width: 480px) {
  /* Touch-sized, and the type steps down so "3 days" and "Never PAID" stay
     on ONE line at 320px rather than wrapping into a two-line mess. */
  .segment { min-height: 40px; padding-inline: 1px; font-size: 10.5px; gap: 3px; }
  .segment-badge { padding: 1px 2px; font-size: 8px; }
  [data-upload-profile="guest"] .burn-card { gap: 9px; padding: 9px 10px; }
  [data-upload-profile="guest"] .burn-icon { width: 26px; height: 26px; }
  .guest-reset-row .reset-button { min-height: 40px; }
  .share-link-row { flex-wrap: wrap; }
  #share-link { flex-basis: 100%; min-height: 44px; }
  .copy-button { flex: 1; }
  .share-security { text-align: left; align-items: flex-start; }
  .completed-settings > div { flex-direction: column; gap: 6px; }
  .completed-settings dd { text-align: left; }
  .guest-link-facts { padding: 18px 16px; }
  .share-security svg { margin-top: 2px; }
  .burn-description { margin-left: 0; }
}
/* A NORMAL TURNSTILE WIDGET IS A FIXED 300px WIDE. Below ~364px the card's
   content box is narrower than that — 256px at 320px — so the widget hung out
   of the card and gave the page a horizontal scroll for the length of the
   verification. Scaled from its top-left corner, which leaves the widget's own
   markup and options untouched. */
@media (max-width: 380px) {
  /* The reserved 65px stays: a transform paints smaller but the layout box
     is still the widget's own height, so shrinking the reservation here would
     reintroduce the jump it exists to stop. The negative margin takes back
     the 11.7px the scaling leaves under the widget, which puts the note back
     at the same 6px below it that every other width has. */
  #guest-turnstile { transform: scale(.82); transform-origin: top left; margin-bottom: -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .upload-card .state-enter { animation: none; }
}

/* Informational features section, separate from the finished upload UI. */
html { scroll-behavior: smooth; }
a.nav-item { cursor: pointer; }
.features-section { padding: 80px 0; background: #f4f3ee; border-top: 1px solid var(--border); scroll-margin-top: 24px; }
.features-header { max-width: 520px; margin: 0 auto; text-align: center; }
.features-eyebrow { margin: 0 0 16px; color: #a6532e; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .5px; }
.features-header h2 { margin: 0 0 20px; font-size: clamp(32px, 3.2vw, 40px); line-height: 1.2; letter-spacing: -.045em; font-weight: 650; }
.features-intro { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin: 48px auto 0; }
.feature { padding: 0 36px; text-align: left; }
.feature:first-child { padding-left: 0; }
.feature:last-child { padding-right: 0; }
.feature + .feature { border-left: 1px solid var(--border); }
.feature-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border: 1px solid #e9dfd2; border-radius: var(--radius-card); background: #f8efe3; color: #bd6b39; }
.feature h3 { margin: 0 0 11px; font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -.35px; }
.feature p { max-width: 250px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
@media (max-width: 900px) {
  .feature { padding-inline: 22px; }
}
@media (max-width: 640px) {
  .features-section { padding: 56px 0 60px; }
  .features-header { max-width: 420px; }
  .features-intro { font-size: 14px; }
  .features-grid { grid-template-columns: 1fr; gap: 28px; max-width: 420px; margin: 34px auto 0; }
  .feature, .feature:first-child, .feature:last-child { padding: 0; }
  .feature + .feature { border-left: 0; border-top: 1px solid var(--border); padding-top: 28px; }
  .feature-icon { margin-bottom: 16px; }
  .feature p { max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Three-step process, with restrained desktop connectors. */
.how-section { padding: 80px 0; border-top: 1px solid var(--border); background: var(--background); }
.how-header { max-width: 600px; margin-inline: auto; text-align: center; }
.how-eyebrow { margin: 0 0 16px; color: #a6532e; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .5px; }
.how-header h2 { margin: 0 0 16px; font-size: clamp(32px, 3.2vw, 40px); font-weight: 650; line-height: 1.2; letter-spacing: -.045em; }
.how-intro { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 54px; max-width: 1000px; margin: 48px auto 0; padding: 0; list-style: none; }
.how-step { position: relative; min-width: 0; }
.how-step-marker { display: flex; align-items: center; gap: 14px; height: 40px; margin-bottom: 22px; }
.how-step-number { color: #bd6b39; font-size: 28px; line-height: 1; font-weight: 500; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.how-step-marker svg { color: var(--quiet); flex-shrink: 0; }
.how-step:not(:last-child)::after { content: ''; position: absolute; top: 20px; left: 94px; right: -30px; height: 1px; background: var(--border); }
.how-step h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -.35px; }
.how-step p { max-width: 255px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.how-trust { margin: 38px 0 0; text-align: center; color: var(--quiet); font-size: 12px; line-height: 1.7; }
@media (max-width: 900px) {
  .how-steps { gap: 30px; }
  .how-step:not(:last-child)::after { right: -14px; }
}
@media (max-width: 640px) {
  .how-section { padding: 56px 0 60px; }
  .how-header { max-width: 420px; }
  .how-intro { font-size: 14px; }
  .how-steps { grid-template-columns: 1fr; gap: 30px; max-width: 420px; margin-top: 36px; }
  .how-step:not(:last-child)::after { display: none; }
  .how-step-marker { margin-bottom: 12px; }
  .how-step p { max-width: 340px; }
  .how-trust { margin-top: 32px; font-size: 11px; }
}

/* Public pricing presentation only; accounts and checkout are not active. */
.pricing-section { padding: 80px 0; border-top: 1px solid var(--border); background: #f4f3ee; scroll-margin-top: 24px; }
.pricing-header { max-width: 680px; margin-inline: auto; text-align: center; }
.pricing-eyebrow { margin: 0 0 16px; color: #a6532e; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .5px; }
.pricing-header h2 { max-width: 620px; margin: 0 auto 18px; text-wrap: balance; font-size: clamp(32px, 3.2vw, 40px); font-weight: 650; line-height: 1.2; letter-spacing: -.045em; }
.pricing-intro { max-width: 550px; margin: 0 auto; color: var(--muted); font-size: 15px; line-height: 1.8; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1000px; margin: 48px auto 0; }
.pricing-plan { display: flex; flex-direction: column; min-width: 0; padding: 28px 24px 24px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.pricing-plan-pro { border-color: #ce9d80; }
.plan-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; min-height: 26px; }
.plan-heading h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.25px; }
.plan-label { color: var(--muted); font-size: 10px; line-height: 1.5; white-space: nowrap; }
.plan-badge { padding: 5px 8px; border: 1px solid #f0dfd1; border-radius: 4px; background: #fcf3ea; color: #a6532e; font-size: 10px; font-weight: 600; white-space: nowrap; }
.plan-price { margin: 22px 0 14px; font-size: 34px; line-height: 1.2; font-weight: 650; letter-spacing: -1.3px; }
.plan-price span { color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.plan-description { min-height: 66px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.plan-features { display: grid; align-content: start; gap: 10px; margin: 22px 0 28px; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--border); }
.plan-features li { position: relative; padding-left: 21px; font-size: 12px; color: #62655e; line-height: 1.6; }
.plan-features li::before { content: '✓'; position: absolute; left: 0; color: #848a7a; font-size: 12px; }
.plan-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: auto; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-control); font: inherit; font-size: 12px; font-weight: 600; text-align: center; }
.plan-button-secondary { background: #f5f4ef; color: var(--ink); }
a.plan-button-secondary:hover { background: #eeede6; }
.plan-button-primary { background: var(--ink); border-color: var(--ink); color: white; }
.plan-button:disabled { cursor: default; opacity: 1; }
.plan-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (min-width: 641px) and (max-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 700px; }
  .pricing-plan-pro { grid-column: 1 / -1; width: calc((100% - 20px) / 2); justify-self: center; }
}
@media (max-width: 640px) {
  .pricing-section { padding: 56px 0 60px; }
  .pricing-intro { font-size: 14px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-top: 34px; gap: 18px; }
  .pricing-plan { padding: 24px; }
  .plan-description { min-height: 0; }
}

/* Quiet charcoal trust section, using the existing warm brand palette. */
.privacy-section { padding: 80px 0 40px; background: #242722; color: #f1f0e9; }
.privacy-container { max-width: 1000px; }
.privacy-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 100px; }
.privacy-header { max-width: 390px; }
.privacy-eyebrow { margin: 0 0 16px; color: #d89c77; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .5px; }
.privacy-header h2 { margin: 0 0 20px; font-size: clamp(32px, 3.2vw, 40px); font-weight: 650; line-height: 1.2; letter-spacing: -.045em; text-wrap: balance; }
.privacy-intro { margin: 0; color: #b2b6aa; font-size: 15px; line-height: 1.8; }
.privacy-principle { display: flex; align-items: flex-start; gap: 18px; padding: 24px 0; }
.privacy-principle:first-child { padding-top: 0; }
.privacy-principle:last-child { padding-bottom: 0; }
.privacy-principle + .privacy-principle { border-top: 1px solid #3a3e35; }
.privacy-icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 40px; color: #d89c77; }
.privacy-principle h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.2px; }
.privacy-principle p { max-width: 370px; margin: 0; color: #b2b6aa; font-size: 13px; line-height: 1.8; }
.privacy-trust { margin: 54px 0 0; padding-top: 24px; border-top: 1px solid #3a3e35; color: #a0a596; font-size: 11px; line-height: 1.7; }
@media (max-width: 900px) {
  .privacy-layout { gap: 48px; }
}
@media (max-width: 640px) {
  .privacy-section { padding: 56px 0 32px; }
  .privacy-layout { grid-template-columns: 1fr; gap: 36px; }
  .privacy-container { max-width: 420px; }
  .privacy-header { max-width: none; }
  .privacy-intro { font-size: 14px; }
  .privacy-principle { gap: 13px; padding-block: 22px; }
  .privacy-trust { margin-top: 36px; font-size: 10px; }
}

/* Final invitation and compact site footer. */
.upload-anchor { display: flow-root; scroll-margin-top: 24px; }
#security { scroll-margin-top: 24px; }
.final-cta { padding: 80px 0; background: var(--background); text-align: center; }
.cta-eyebrow { margin: 0 0 16px; color: #a6532e; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .5px; }
.final-cta h2 { max-width: 700px; margin: 0 auto 18px; font-size: clamp(32px, 3.2vw, 40px); line-height: 1.2; letter-spacing: -.045em; font-weight: 650; text-wrap: balance; }
.cta-description { max-width: 520px; margin: 0 auto; color: var(--muted); font-size: 15px; line-height: 1.8; }
.cta-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
.cta-primary, .cta-secondary { min-height: 44px; padding: 12px 18px; border-radius: var(--radius-control); font-size: 12px; font-weight: 600; }
.cta-secondary { border: 1px solid #dedfd6; background: transparent; color: var(--ink); font-family: inherit; }
.cta-secondary:disabled { opacity: 1; cursor: default; }
.site-footer { padding: 40px 0 28px; border-top: 1px solid var(--border); background: #f4f3ee; }
.footer-layout { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; }
.footer-brand .wordmark { font-size: 21px; }
.footer-brand .brand-icon { width: 25px; height: 29px; }
.footer-description { margin: 14px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.footer-copyright { margin: 18px 0 0; font-size: 11px; line-height: 1.7; color: var(--quiet); }
.footer-group h2 { margin: 0 0 12px; font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.footer-group ul { list-style: none; padding: 0; margin: 0; }
.footer-group a { display: inline-block; padding: 6px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.footer-group a:hover { color: var(--ink); }
@media (max-width: 900px) {
  .footer-layout { gap: 24px; grid-template-columns: 1.6fr repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .final-cta { padding: 56px 0 60px; }
  .cta-description { max-width: 420px; font-size: 14px; }
  .site-footer { padding-top: 34px; }
  .footer-layout { grid-template-columns: 1fr; gap: 24px; }
  .footer-group h2 { margin-bottom: 6px; }
  .footer-group a { min-height: 40px; padding-block: 10px; }
}
@media (max-width: 400px) {
  .cta-actions { flex-direction: column; align-items: stretch; max-width: 280px; margin-inline: auto; }
}

/* Final QA: shared focus and motion rules, without changing the desktop design. */
html.has-modal { overflow: hidden; padding-right: var(--modal-scrollbar, 0px); }
:where(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 30; min-height: 44px; padding: 12px; background: var(--surface); color: var(--ink); font-size: 12px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
@media (max-width: 900px), (pointer: coarse) {
  .wordmark, .nav-item, .auth-home, .auth-checkbox, .file-footer a, .cancel-button { min-height: 44px; }
  .guest-note-secondary a { min-height: 44px; }
  .nav-item { display: inline-flex; align-items: center; cursor: pointer; }
  .footer-group a { min-height: 44px; }
  .auth-switch a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.auth-status, .settings-feedback, .files-feedback, .copy-feedback { overflow-wrap: anywhere; }
@media (max-width: 900px), (pointer: coarse) {
  .files-toolbar input, .files-toolbar select, .filter-select select,
  #dialog-expiry, #share-expiry, #share-link { font-size: 16px; }
}