:root {
  --bg: #f4f0e8;
  --paper: #fffdf8;
  --ink: #151515;
  --muted: #6c685f;
  --line: #d7d0c3;
  --accent: #d5a73c;
  --radius: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

a { color: inherit; }

.site-header, footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 28px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.brand {
  font-weight: 900;
  letter-spacing: -0.04em;
  text-decoration: none;
  font-size: 1.35rem;
}

.tagline, footer { color: var(--muted); }

main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 60px;
}

.hero {
  min-height: 560px;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  align-items: center;
  gap: 40px;
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: clamp(32px, 7vw, 84px);
  background: var(--paper);
}

.eyebrow {
  font-size: .77rem;
  font-weight: 900;
  letter-spacing: .16em;
  margin-bottom: 18px;
}

h1, h2 {
  letter-spacing: -0.055em;
  line-height: .96;
  margin: 0 0 24px;
}

h1 { font-size: clamp(3rem, 8vw, 6.8rem); }
h2 { font-size: clamp(2rem, 5vw, 4rem); }

.lead {
  font-size: clamp(1.12rem, 2vw, 1.4rem);
  line-height: 1.5;
  max-width: 720px;
  color: #36332e;
  margin-bottom: 30px;
}


.button {
  appearance: none;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 15px 22px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.button-dark { background: var(--ink); color: white; }
.button-light { background: transparent; color: var(--ink); }
.button:disabled { opacity: .45; cursor: default; }
.full { width: 100%; }

.how {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0 60px;
}

.step {
  background: var(--ink);
  color: white;
  padding: 22px;
  border-radius: 16px;
  min-height: 125px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.step strong { color: var(--accent); font-size: 1.7rem; }

.order-card, .center-card, .narrow {
  max-width: 820px;
  margin: 0 auto;
}

.order-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(28px, 6vw, 60px);
}

form { display: grid; gap: 22px; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

label, legend {
  font-weight: 800;
  font-size: .95rem;
}

input, textarea {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  padding: 14px;
  font: inherit;
  color: var(--ink);
}

input:focus, textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.optional, small, .privacy, .dev-note, .muted {
  color: var(--muted);
  font-weight: 500;
}

fieldset {
  border: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

legend { margin-bottom: 8px; }

.radio-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: white;
}

.radio-card input { width: auto; margin: 0; }
.radio-card span { display: grid; gap: 4px; }
.radio-card small { font-size: .85rem; }

.dev-note { font-size: .86rem; text-align: center; margin: 0; }

.flash {
  max-width: 820px;
  margin: 0 auto 18px;
  padding: 14px 18px;
  background: #fff2c4;
  border: 1px solid #e7ce72;
  border-radius: 12px;
}

.narrow { padding-top: 70px; }

.fulfillment-sheet {
  margin-top: 34px;
  padding: 46px;
  background: white;
  border: 4px solid #111;
  text-align: center;
}

.fulfillment-sheet h2 { font-size: 3rem; }
.warning {
  display: inline-block;
  background: #111;
  color: white;
  padding: 10px 15px;
  font-weight: 900;
  letter-spacing: .08em;
}

.qr { width: min(320px, 75%); margin: 25px auto 10px; display: block; }
.scan-copy { font-weight: 950; letter-spacing: .14em; }

.fulfillment-sheet hr {
  border: 0;
  border-top: 1px solid #aaa;
  margin: 36px 0;
}

.fulfillment-meta {
  text-align: left;
  display: grid;
  gap: 18px;
}

.fulfillment-meta div { display: grid; gap: 5px; }
.fulfillment-meta span, .order-summary span {
  font-size: .72rem;
  letter-spacing: .12em;
  font-weight: 900;
  color: #666;
}

pre {
  white-space: pre-wrap;
  font: inherit;
  font-weight: 700;
  margin: 0;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

details { margin-top: 28px; }
code { word-break: break-all; }

.reaction-shell {
  min-height: 75vh;
  display: grid;
  place-items: center;
}

.center-card {
  width: min(680px, 100%);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(28px, 6vw, 56px);
}

.center-card h1 { font-size: clamp(3rem, 10vw, 5.8rem); }
.center-card h2 { font-size: clamp(2rem, 7vw, 3.8rem); }

.consent {
  display: flex;
  text-align: left;
  gap: 12px;
  align-items: flex-start;
  margin: 26px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.consent input { width: 20px; height: 20px; margin: 2px 0 0; }

video {
  width: 100%;
  background: #111;
  border-radius: 18px;
  max-height: 55vh;
}

.recording-dot {
  margin: 16px 0;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.countdown {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: white;
  display: grid;
  place-items: center;
  z-index: 10;
}

.countdown span {
  font-size: min(40vw, 15rem);
  font-weight: 950;
  letter-spacing: -.08em;
}

.hidden { display: none !important; }

.sender-video { margin: 25px 0; }
.waiting { font-size: 9rem; text-align: center; margin: 40px 0; }
.order-summary {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 24px;
}

footer {
  border-top: 1px solid var(--line);
  margin-top: 80px;
}

@media (max-width: 760px) {
  .site-header { padding-inline: 10px; }
  .tagline { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .how { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .fulfillment-sheet { padding: 24px; }
  .fulfillment-sheet h2 { font-size: 2.2rem; }
}

@media print {
  body { background: white; }
  .site-header, footer, .no-print, .eyebrow, .narrow > h1, .narrow > .lead { display: none !important; }
  main { width: 100%; margin: 0; }
  .narrow { padding: 0; max-width: none; }
  .fulfillment-sheet { margin: 0; page-break-inside: avoid; }
}

select {
  width: 100%; margin-top: 8px; border: 1px solid var(--line); border-radius: 12px;
  background: white; padding: 14px; font: inherit; color: var(--ink);
}
.secondary-gap { margin-top: 10px; }
.camera-meta { display:flex; justify-content:center; margin-bottom:12px; }
.status-pill { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:7px 11px; font-size:.76rem; font-weight:800; }
.source-video { position:fixed; width:1px; height:1px; opacity:.001; pointer-events:none; }
#compositePreview, #labCanvas { width:100%; max-height:58vh; object-fit:contain; background:#111; border-radius:18px; }
.lab-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.report { white-space:pre-wrap; overflow-wrap:anywhere; background:#111; color:#fff; padding:18px; border-radius:12px; min-height:260px; }
.ops-wide { width:min(1400px,100%); margin:40px auto; }
.ops-wide h1 { font-size:clamp(3rem,7vw,6rem); }
.hub-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:24px 0; }
.hub-card { display:grid; gap:5px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.hub-card strong { font-size:1.05rem; }
.hub-card small { color:var(--muted); }
.ops-toolbar { display:flex; gap:12px; justify-content:space-between; align-items:end; flex-wrap:wrap; margin:20px 0; }
.ops-toolbar form { display:flex; gap:8px; align-items:end; }
.ops-toolbar input, .ops-toolbar select { margin:0; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.ops-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.ops-table th,.ops-table td { text-align:left; padding:12px; border-bottom:1px solid var(--line); vertical-align:top; }
.ops-table th { font-size:.73rem; letter-spacing:.08em; text-transform:uppercase; }
.ops-detail dl { display:grid; grid-template-columns:140px 1fr; gap:10px 18px; }
.ops-detail dt { color:var(--muted); font-weight:800; }
.ops-detail dd { margin:0; }
.section-title { margin-top:36px; font-size:2rem; }
.event-log { display:grid; gap:7px; font-size:.88rem; }
.event-log div { padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
@media (max-width:760px){.lab-grid{grid-template-columns:1fr}.ops-toolbar form{width:100%;flex-wrap:wrap}.ops-detail dl{grid-template-columns:1fr}.ops-detail dt{margin-top:8px}}

/* Front-camera assisted framing */
.framing-preview {
  position: relative;
  width: min(100%, 430px);
  margin: 0 auto 20px;
  overflow: hidden;
  border-radius: 18px;
  background: #111;
  aspect-ratio: 9 / 16;
}

.framing-preview video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
  transform: scaleX(-1);
}

.framing-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.frame-zone {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 2px dashed rgba(255,255,255,.9);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}

.frame-zone span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  color: white;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.frame-face {
  top: 6%;
  width: 30%;
  height: 38%;
}
.frame-face span { top: -13px; }

.frame-package {
  bottom: 8%;
  width: 72%;
  height: 34%;
  border-radius: 22px;
}
.frame-package span { bottom: -13px; }

.framing-guide-recording .frame-zone {
  opacity: .22;
}

.framing-checks {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 20px;
}

.framing-checks span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .75rem;
  font-weight: 800;
}

.framing-lab-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: .9rem;
}


/* Recipient language selector */
.language-switcher {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.language-switcher a {
  color: inherit;
  text-decoration: none;
  opacity: .45;
}

.language-switcher a.active {
  opacity: 1;
}

.language-switcher a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


/* Streamlined recipient framing workflow */
.capture-card {
  width: min(560px, 100%);
  padding: 18px;
}

.framing-title {
  margin: 0 0 10px;
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .01em;
  color: var(--muted);
}

.capture-card .framing-preview {
  margin-bottom: 12px;
}

.capture-action {
  margin: 0;
  min-height: 52px;
  font-size: 1rem;
}

.recording-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  color: #fff;
  z-index: 3;
}

.review-actions-single {
  display: block;
}

@media (max-width: 760px) {
  main {
    width: min(100%, calc(100% - 16px));
    margin-bottom: 16px;
  }

  .reaction-shell.capture-active {
    min-height: calc(100svh - 16px);
    place-items: start center;
  }

  .capture-card {
    border-radius: 18px;
    padding: 12px;
    margin-top: 8px;
  }

  .capture-card .framing-preview {
    width: auto;
    height: min(72svh, 680px);
    max-width: 100%;
    max-height: none;
    margin: 0 auto 10px;
  }

  .framing-title {
    margin-bottom: 8px;
    font-size: .78rem;
  }

  .capture-action {
    min-height: 50px;
  }
}


.post-reveal-note {
  margin: 18px 0;
  text-align: left;
  line-height: 1.5;
}

.post-reveal-note p {
  margin: 0 0 10px;
}


/* v3 chain MVP */
:root{--ink:#111;--paper:#fff;--cream:#f5f1e8;--line:#d9d4c9;--muted:#716e67}
body.public-body{background:#f5f1e8;color:var(--ink)}
.public-header{width:min(1180px,calc(100% - 32px));margin:18px auto;display:flex;justify-content:space-between;align-items:center}.public-header nav{display:flex;gap:18px;align-items:center}.public-header a{text-decoration:none;color:inherit}.brand{font-weight:950;letter-spacing:-.05em;font-size:1.35rem}.button-small{padding:10px 14px!important}
.public-footer{width:min(1180px,calc(100% - 32px));margin:70px auto 20px;padding-top:20px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.public-hero,.public-section,.form-page,.ops-page{width:min(1120px,calc(100% - 32px));margin:0 auto}.public-hero{min-height:72vh;display:grid;grid-template-columns:1.5fr .7fr;gap:60px;align-items:center}.public-hero h1,.form-page h1,.public-section>h1{font-size:clamp(3.7rem,9vw,8rem);line-height:.84;letter-spacing:-.075em;margin:.15em 0}.hero-copy{max-width:650px;font-size:clamp(1.2rem,2.5vw,1.75rem)}.hero-stat{display:grid;place-items:center;text-align:center;border:1px solid var(--line);background:white;border-radius:50%;aspect-ratio:1}.hero-stat strong{font-size:clamp(3.2rem,7vw,6.5rem);line-height:1}.hero-stat span{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:900}.section-kicker{font-size:.72rem;font-weight:950;letter-spacing:.16em;text-transform:uppercase}.public-section{padding:90px 0;border-top:1px solid var(--line)}.public-section h2{font-size:clamp(2.4rem,5vw,5rem);letter-spacing:-.055em;margin:.2em 0}.section-heading{display:flex;justify-content:space-between;gap:20px;align-items:end}.split-section{display:grid;grid-template-columns:1.4fr .6fr;gap:70px;align-items:center}.big-number{font-size:5rem;font-weight:950}.fineprint{font-size:.78rem;color:var(--muted)}.muted{color:var(--muted)}
.placeholder-deck{display:flex;gap:14px;overflow:hidden;margin:25px 0}.placeholder-deck div{min-width:260px;aspect-ratio:9/16;background:#111;color:white;border-radius:20px;display:grid;place-items:center;font-weight:900;letter-spacing:.12em}
.reaction-carousel-wrap{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px}.reaction-carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 2px 18px;scrollbar-width:none}.reaction-card{scroll-snap-align:start;flex:0 0 min(78vw,300px);background:white;border:1px solid var(--line);padding:10px;border-radius:20px;display:grid;gap:8px}.reaction-card video{aspect-ratio:9/16;object-fit:cover;max-height:460px}.reaction-card small{color:var(--muted)}.carousel-arrow{border:0;background:#111;color:white;border-radius:50%;width:42px;height:42px;font-size:1.3rem}.empty-chain{padding:28px;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}
.reveal-page{width:min(880px,100%);margin:0 auto;padding-bottom:50px}.reveal-hero,.reveal-section{background:white;border:1px solid var(--line);border-radius:26px;padding:clamp(22px,5vw,48px);margin:14px 0}.reveal-hero{text-align:center}.reveal-hero h1{font-size:clamp(3rem,10vw,6rem);letter-spacing:-.07em;margin:.15em 0}.reveal-hero video{max-width:520px}.reveal-section h2{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.05em}.chain-count{font-size:1.1rem}.chain-count strong{font-size:2.2rem}.mini-counter{text-align:center;margin-top:20px;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}.centered{justify-content:center}.choice-grid{display:grid;gap:14px}.choice-grid.two{grid-template-columns:1fr 1fr}.choice-card{text-align:left;border:1px solid var(--line);background:#faf9f6;border-radius:18px;padding:20px;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;cursor:pointer;font:inherit}.choice-card strong{font-size:2rem;grid-row:1/3}.choice-card span{font-size:1.05rem;font-weight:900}.choice-card small{color:var(--muted);line-height:1.35}.choice-card.selected{outline:3px solid #111}.action-status{min-height:24px;margin:12px 0;font-weight:800}.text-link{color:inherit;text-decoration:underline;font-weight:800}.impact-section,.grow-section{text-align:center}
.form-page{max-width:760px;padding:60px 0}.send-form,.stack-form{display:grid;gap:14px}.send-form label{display:grid;gap:6px;font-weight:800}.send-form input,.send-form select,.stack-form input,.ops-form input,.inline-form input,.inline-form select{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:14px;background:white;font:inherit}.send-form fieldset{border:0;padding:0;margin:8px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.radio-card{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center!important;background:white;border:1px solid var(--line);padding:15px;border-radius:14px}.radio-card input{width:auto}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.copy-box{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:white;border-radius:14px;padding:14px}.copy-box code{flex:1;word-break:break-all}.sender-message-box{margin:35px 0;padding:20px;background:white;border:1px solid var(--line);border-radius:18px}.sender-message-box input{display:block;margin:12px 0}.inline-form{display:flex;gap:10px;max-width:650px}.article-page{max-width:800px}.grow-steps{font-size:1.15rem;display:grid;gap:18px}.chain-list{display:grid;gap:10px;margin-top:30px}.chain-node{margin-left:calc(var(--depth) * 22px);background:white;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;justify-content:space-between}.chain-node span{color:var(--muted)}
.ops-page{padding:40px 0}.ops-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.ops-head h1{font-size:clamp(3rem,7vw,6rem);margin:.1em 0}.health-pill{display:inline-block;border-radius:999px;padding:7px 10px;font-size:.72rem;font-weight:900;margin-left:5px}.health-pill.ok{background:#dff5e3}.health-pill.warn{background:#ffe2cc}.status-strip{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.status-strip span{background:white;border:1px solid var(--line);border-radius:12px;padding:10px;display:grid}.status-strip strong{font-size:1.5rem}.ops-create{background:white;border:1px solid var(--line);border-radius:16px;padding:16px}.ops-form{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:15px}.ops-form button{grid-column:span 2}.ops-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.event-list{display:grid;gap:7px}.event-list div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:8px 0}
.flash{width:min(900px,calc(100% - 32px));margin:20px auto;background:#fff3c4;border:1px solid #e9d786;padding:12px;border-radius:12px}
@media(max-width:760px){.public-header nav>a:first-child{display:none}.public-hero,.split-section{grid-template-columns:1fr}.public-hero{padding:60px 0;min-height:auto}.hero-stat{max-width:300px}.public-section{padding:55px 0}.choice-grid.two{grid-template-columns:1fr}.reaction-carousel-wrap{grid-template-columns:1fr}.carousel-arrow{display:none}.form-row,.send-form fieldset,.ops-detail-grid{grid-template-columns:1fr}.inline-form,.copy-box{flex-direction:column;align-items:stretch}.ops-form{grid-template-columns:1fr}.ops-form button{grid-column:auto}.ops-head{align-items:start;flex-direction:column}.reveal-section,.reveal-hero{border-radius:18px}.neutral-main{width:min(100%,calc(100% - 12px))}}

/* Root-chain sender video recorder */
.sender-video-recorder { overflow: hidden; }
.sender-video-recorder h2 { margin-bottom: 8px; }
.sender-video-saved {
  margin: 14px 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-weight: 800;
  background: #f7f7f4;
}
.sender-recorder-stage {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 9 / 16;
  margin: 20px auto 14px;
  overflow: hidden;
  border-radius: 20px;
  background: #111;
}
.sender-camera-preview {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
  background: #111;
}
#senderCameraPreview { transform: scaleX(-1); }
.sender-recording-badge {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.68);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
}
.sender-recorder-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.chain-origin { margin-left: 0; border-style: dashed; }

/* Ops destructive actions */
.ops-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ops-actions form{display:inline;margin:0}.link-danger{appearance:none;border:0;background:none;padding:0;color:#a61b1b;font:inherit;text-decoration:underline;cursor:pointer}.button-danger{background:#a61b1b;color:#fff;border-color:#a61b1b}.danger-zone{margin:32px 0;padding:18px;border:1px solid #e1aaaa;background:#fff6f6;border-radius:16px}.danger-zone h2{margin-top:0}.danger-zone p{color:#6d3a3a}

.address-hint { margin:0 0 4px; line-height:1.45; }

/* Address request: message-first flow */
.unknown-address {
  display: grid;
  gap: 18px;
  margin: 2px 0 6px;
}
.unknown-address-head h2 {
  margin: 0 0 7px;
  font-size: clamp(1.65rem, 4vw, 2.4rem);
  letter-spacing: -.035em;
}
.unknown-address-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.address-message-list {
  display: grid;
  gap: 10px;
}
.address-message-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.address-message-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.address-message-card p {
  margin: 0;
  line-height: 1.45;
}
.address-copy-button {
  min-width: 92px;
}
.address-copy-button.copy-success {
  font-weight: 900;
}

@media (max-width:760px) {
  .address-message-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .address-copy-button {
    width: 100%;
  }
}

/* Address-path no-JS/cache fallback: keeps the message-first flow visible even if an older JS asset is cached. */
#sendForm:has(input[name="address_path"][value="unknown"]:checked) #unknownAddress {
  display: grid !important;
}
#sendForm:has(input[name="address_path"][value="unknown"]:checked) #knownAddress,
#sendForm:has(input[name="address_path"][value="unknown"]:checked) #createSendButton {
  display: none !important;
}
#sendForm:has(input[name="address_path"][value="known"]:checked) #knownAddress {
  display: grid !important;
}
#sendForm:has(input[name="address_path"][value="known"]:checked) #unknownAddress {
  display: none !important;
}

/* Public header CTA: keep the label readable on the dark pill. */
.public-header a.button-dark,
.public-header a.button-dark:visited {
  color: #fff;
}

.public-header a.button-dark:hover,
.public-header a.button-dark:focus-visible {
  color: #fff;
}

/* Sender private reaction access */
.sender-access-panel {
  margin: 28px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.sender-access-panel h2 {
  margin: 6px 0 8px;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  letter-spacing: -.04em;
}
.private-link-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}
.sender-order-memory { display:none; }
.sender-view-page {
  width: min(960px, calc(100% - 32px));
  margin: 0 auto;
  padding: 60px 0 90px;
}
.sender-view-page > h1 {
  font-size: clamp(3.2rem, 8vw, 7rem);
  line-height: .88;
  letter-spacing: -.065em;
  margin: .15em 0 .4em;
}
.sender-reaction-status {
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
}
.sender-reaction-status h2 {
  margin: 8px 0;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -.05em;
}
.status-pill {
  display: inline-flex;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .12em;
}
.sender-primary-reaction {
  display: block;
  width: min(100%, 460px);
  max-height: 72vh;
  margin: 22px 0;
  border-radius: 18px;
  background: #111;
}
.sender-chain-media,
.sender-chain-structure {
  margin-top: 48px;
  padding-top: 38px;
  border-top: 1px solid var(--line);
}
.sender-chain-structure h2 {
  margin: 5px 0 15px;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -.05em;
}
.chain-node-current {
  border-width: 2px;
  border-color: #111;
}
.my-sends-list {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
.my-send-card {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.my-send-meta {
  display: grid;
  gap: 5px;
}
.my-send-meta strong { font-size: 1.12rem; }
.my-send-meta span { color: var(--muted); font-size: .86rem; }
.my-send-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.my-send-remove {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.my-sends-empty {
  margin-top: 28px;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 16px;
}

@media (max-width:760px) {
  .public-header nav { gap: 10px; }
  .public-header nav > a:first-child { display:none; }
  .public-header nav > a:nth-child(2) { font-size: .86rem; }
  .my-send-card { align-items: stretch; flex-direction: column; }
  .my-send-actions { justify-content: flex-start; }
  .sender-view-page { padding-top: 42px; }
}

/* Private sender page: add this chain to the phone home screen. */
.sender-install-button[hidden] { display: none !important; }
.sender-install-help {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f7f7f4;
  max-width: 620px;
}
.sender-install-help strong { display: block; margin-bottom: 5px; }
.sender-install-help p { margin: 0 0 8px; line-height: 1.45; }
.sender-install-help .text-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

/* Recipient reaction flow v2 */
.consent a { color: inherit; font-weight: 850; text-decoration: underline; text-underline-offset: 2px; }
.countdown .saving-message { font-size: clamp(1.6rem, 6vw, 3rem); line-height: 1.05; text-align: center; max-width: 90vw; }
.recipient-revisit-shell { width: 100%; }
.potato-reveal-hero { display: grid; justify-items: center; gap: 12px; }
.potato-reveal-hero h1 { margin-bottom: 0; }
.potato-visual {
  width: min(64vw, 300px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f4efe4;
  font-size: clamp(7rem, 28vw, 13rem);
  line-height: 1;
  overflow: hidden;
}
.reveal-feature { text-align: center; }
.feature-icon { font-size: 3rem; margin-bottom: 10px; }
.reveal-feature h2 { max-width: 760px; margin-left: auto; margin-right: auto; }
.reaction-card video {
  display: block;
  width: 100%;
  margin: 0 auto;
  border-radius: 14px;
  background: #111;
}
.reaction-card-current { border-width: 2px; border-color: #111; }
.sender-primary-reaction { margin-left: auto; margin-right: auto; }
.reaction-actions-section { display: grid; gap: 18px; }
.social-share-button {
  appearance: none;
  border: 0;
  border-radius: 20px;
  background: #111;
  color: #fff;
  width: 100%;
  padding: 20px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  display: grid;
  gap: 14px;
  justify-items: center;
}
.social-share-button:hover { transform: translateY(-1px); }
.social-brand-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}
.social-brand {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #111;
  font-size: 1.05rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.25), 0 5px 14px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.social-brand i { line-height: 1; }
.social-share-button:hover .social-brand {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.3), 0 7px 18px rgba(0,0,0,.22);
}
.reaction-management-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.reaction-management-actions .button { min-width: min(100%, 280px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.terms-page { width: min(760px, 100%); margin: 50px auto; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 5vw, 48px); }
.terms-page h1 { font-size: clamp(2.4rem, 7vw, 4.8rem); letter-spacing: -.055em; line-height: .95; }
.terms-page h2 { margin-top: 32px; font-size: 1.45rem; }
.terms-page p { line-height: 1.65; }

@media (max-width: 760px) {
  .reaction-management-actions { display: grid; }
  .reaction-management-actions .button { width: 100%; }
}


.impact-section > p,
.grow-section > p {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}


.chain-cta-copy{margin:18px auto 8px;text-align:center;font-size:1.05rem;font-weight:800;max-width:32ch}
.public-reaction-carousel-wrap{margin:24px 0}.public-reaction-carousel{touch-action:pan-x;-webkit-overflow-scrolling:touch;cursor:grab}.public-reaction-carousel.is-dragging{cursor:grabbing}.hero-stat{padding:18px}.hero-stat-icon{font-size:3.4rem;line-height:1;margin-top:8px}.hero-stat-logo{display:block;max-width:180px;width:72%;height:auto;margin:14px auto 0}.reaction-card video{display:block;margin:0 auto}.reaction-card strong{text-align:center}.public-section .hero-stat span{text-align:center}.public-section .hero-stat strong{display:block}.public-section .hero-stat{min-height:320px}.public-section .hero-stat img{object-fit:contain}
@media(max-width:760px){.public-reaction-carousel-wrap{grid-template-columns:1fr}.public-reaction-carousel-wrap .carousel-arrow{display:none}.hero-stat-logo{width:68%;max-width:160px}.hero-stat-icon{font-size:3rem}}

.checkout-summary,.payment-order-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:#fff;margin:8px 0}.checkout-summary strong,.payment-order-summary strong{font-size:1.45rem}.payment-order-summary{display:grid;grid-template-columns:1fr auto}.payment-order-summary small{grid-column:1/-1;color:var(--muted)}.payment-warning{padding:16px;border:1px solid #b00020;border-radius:14px;background:#fff5f5;font-weight:800}.payment-result-page{max-width:720px}.button[disabled]{opacity:.45;cursor:not-allowed}


/* Reveal-page scroll cue */
.reveal-scroll-cue {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 80;
  width: 54px;
  height: 54px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17,17,17,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transform: translateX(-50%);
  cursor: pointer;
  opacity: 1;
  transition: opacity .22s ease, visibility .22s ease, box-shadow .18s ease;
  animation: reveal-scroll-float 1.35s ease-in-out infinite;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.reveal-scroll-cue svg { width: 30px; height: 30px; }
.reveal-scroll-cue:hover { box-shadow: 0 12px 34px rgba(0,0,0,.24); }
.reveal-scroll-cue:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
.reveal-scroll-cue.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; animation: none; }
@keyframes reveal-scroll-float {
  0%,100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 9px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-scroll-cue { animation: none; }
}


/* Automatic director cue. Operational instructions stay UI-only; the emotional reveal is also composed into the saved video. */
.director-overlay {
  position: absolute;
  left: 50%;
  bottom: 9%;
  z-index: 4;
  width: min(88%, 360px);
  transform: translateX(-50%);
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.72);
  color: #fff;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  pointer-events: none;
}
.director-overlay strong {
  font-size: clamp(1.1rem, 4.7vw, 1.55rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.director-overlay span {
  font-size: .82rem;
  line-height: 1.2;
  opacity: .86;
}
.director-overlay.director-overlay-emotional {
  gap: 12px;
  padding: 18px 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,0) 48%),
    linear-gradient(135deg, #7c4dff 0%, #4f8dff 55%, #28c6ff 100%);
  box-shadow: 0 16px 40px rgba(61, 81, 181, .34);
}
.director-overlay.director-overlay-emotional strong {
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: .42rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
  font-size: clamp(.82rem, 3.4vw, 1rem);
  line-height: 1.15;
  letter-spacing: .01em;
  opacity: .98;
  font-weight: 700;
  color: rgba(255,255,255,.97);
}
.director-overlay.director-overlay-emotional span {
  font-size: clamp(1.18rem, 5.1vw, 1.72rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  opacity: 1;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(27, 34, 87, .18);
}
.director-overlay.director-overlay-enter {
  animation: director-pop-in .42s cubic-bezier(.18,.85,.26,1) both;
}
.director-footer {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease;
}
.director-footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.director-note {
  align-self: center;
  margin: 0 auto;
  max-width: 100%;
  padding: .42rem .78rem;
  border-radius: 999px;
  background: rgba(13, 18, 31, .32);
  color: rgba(255,255,255,.97);
  font-size: clamp(.76rem, 2.8vw, .92rem);
  line-height: 1.18;
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
}
.director-footer.is-visible .note-one,
.director-note.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.director-note.note-two {
  background: rgba(255,255,255,.18);
}
@keyframes director-pop-in {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(.95); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@media (max-width: 760px) {
  .capture-card .framing-preview {
    height: min(78svh, 760px);
  }
  .director-overlay { bottom: 7%; }
}

/* Send: emotional message / intent selector */
.send-message-block {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.send-message-block h2 { margin: 0 0 6px; }
.send-message-block .fineprint { margin: 0; }
.message-intent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.message-intent-card {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--paper);
  cursor: pointer;
  font-weight: inherit !important;
}
.message-intent-card:has(input:checked) {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}
.message-intent-card input { width: auto !important; margin-top: 3px; }
.message-intent-card span { display: grid; gap: 5px; }
.message-intent-card strong { font-size: 1rem; }
.message-intent-card small { color: var(--muted); line-height: 1.35; font-weight: 500; }
.emotional-message-editor { display: grid; gap: 10px; }
.emotional-message-editor textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: white;
  font: inherit;
  line-height: 1.45;
}
.message-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.message-suggestion {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  padding: 8px 11px;
  font: inherit;
  font-size: .85rem;
  line-height: 1.25;
  cursor: pointer;
}
.message-suggestion:hover { border-color: #111; }
.message-editor-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}
@media (max-width:760px) {
  .message-intent-grid { grid-template-columns: 1fr; }
  .message-editor-meta { flex-direction: column; }
}

/* ===== Recipient experience UX v5: camera-first recording ===== */
.capture-preflight {
  text-align: left;
  margin: 0 auto 16px;
  max-width: 520px;
}
.capture-preflight-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 850;
  line-height: 1.3;
}
.capture-preflight-steps {
  margin: 0;
  padding-left: 1.55rem;
  display: grid;
  gap: 10px;
  font-size: 1rem;
  line-height: 1.35;
}
.capture-preflight-steps li::marker { font-weight: 900; }
.capture-card { width: min(620px, 100%); }
.capture-card .framing-preview {
  width: min(100%, 520px);
  height: min(68svh, 760px);
  max-height: none;
  margin: 0 auto;
}
.capture-overlay-action {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 8;
  width: min(78%, 330px);
  min-height: 52px;
  border-color: rgba(255,255,255,.82);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.capture-stop-action {
  background: rgba(255,255,255,.92);
  color: #17171a;
  border-color: rgba(255,255,255,.92);
}
.capture-card.is-recording {
  width: min(760px, 100%);
  padding: 0;
  overflow: hidden;
  border-color: rgba(0,0,0,.08);
  background: #111;
}
.capture-card.is-recording .framing-preview {
  width: 100%;
  height: min(92svh, 920px);
  max-width: none;
  margin: 0;
  border-radius: 26px;
}
.capture-card.is-recording .framing-guide { display: none; }
.capture-card.is-recording .capture-stop-action { bottom: 18px; }
.capture-card.is-recording .recording-overlay { z-index: 9; }

/* Operational prompt: large, central and immediately readable. */
.capture-card.is-recording .director-overlay:not(.director-overlay-emotional) {
  left: 50%;
  top: 50%;
  bottom: auto;
  width: min(88%, 520px);
  transform: translate(-50%, -50%);
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(0,0,0,.64);
  text-align: center;
}
.capture-card.is-recording .director-overlay:not(.director-overlay-emotional) strong {
  font-size: clamp(1.45rem, 6vw, 2.15rem);
  line-height: 1.08;
}

/* Emotional reveal as a chat conversation over the image. */
.director-overlay.director-overlay-emotional {
  inset: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: none;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-align: left;
  overflow: hidden;
}
.director-overlay.director-overlay-emotional .director-sender {
  position: absolute;
  left: 6%;
  top: 36%;
  max-width: 82%;
  padding: .5rem .78rem;
  border-radius: 12px;
  background: rgba(19,19,23,.78);
  color: #fff;
  font-size: clamp(.78rem, 3.1vw, .98rem);
  line-height: 1.15;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.director-overlay.director-overlay-emotional strong {
  position: absolute;
  left: 6%;
  top: calc(36% + 48px);
  width: min(82%, 520px);
  max-width: 82%;
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: 20px 20px 20px 6px;
  background: rgba(255,255,255,.94);
  color: #17171a;
  font-size: clamp(1.2rem, 5.2vw, 1.78rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  text-shadow: none;
  box-shadow: 0 14px 36px rgba(0,0,0,.23);
  font-weight: 850;
}
.director-overlay.director-overlay-emotional > #directorHint { display: none; }
.director-overlay.director-overlay-enter { animation: none; }
.director-overlay.director-overlay-emotional .director-sender,
.director-overlay.director-overlay-emotional strong {
  animation: chat-message-in .34s cubic-bezier(.18,.85,.26,1) both;
}
.director-overlay.director-overlay-emotional strong { animation-delay: .08s; }
.director-overlay.director-overlay-emotional .director-footer {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  opacity: 1;
  transform: none;
  pointer-events: none;
}
.director-overlay.director-overlay-emotional .director-note {
  position: absolute;
  left: 6%;
  max-width: 82%;
  margin: 0;
  color: #fff;
  background: rgba(19,19,23,.72);
  border-radius: 14px;
  padding: .55rem .76rem;
  font-size: clamp(.73rem, 2.8vw, .92rem);
  line-height: 1.25;
  font-weight: 750;
  opacity: 0;
  transform: translateY(8px);
}
.director-overlay.director-overlay-emotional .director-note.note-one {
  top: 67%;
}
.director-overlay.director-overlay-emotional .director-note.note-two {
  left: 50%;
  top: auto;
  bottom: 84px;
  max-width: 90%;
  transform: translate(-50%, 8px);
  border-radius: 999px;
  background: rgba(0,0,0,.66);
  white-space: nowrap;
  text-align: center;
  font-weight: 850;
}
.director-overlay.director-overlay-emotional .director-note.is-visible,
.director-overlay.director-overlay-emotional .director-footer.is-visible .note-one {
  opacity: 1;
  transform: translateY(0);
}
.director-overlay.director-overlay-emotional .director-note.note-two.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes chat-message-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Short celebratory burst originating from the lower/box area. */
.celebration-particles {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}
.celebration-particle {
  position: absolute;
  left: 50%;
  top: 69%;
  font-size: clamp(1.1rem, 5vw, 1.85rem);
  opacity: 0;
  animation: celebration-fly var(--particle-duration) cubic-bezier(.17,.72,.25,1) var(--particle-delay) forwards;
}
@keyframes celebration-fly {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.5) rotate(0); }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), var(--particle-y)) scale(1.05) rotate(var(--particle-rotate)); }
}

@media (max-width: 760px) {
  .reaction-shell.capture-active { min-height: calc(100svh - 8px); }
  .capture-card { padding: 10px; }
  .capture-card.is-recording {
    width: 100%;
    border-radius: 18px;
  }
  .capture-card.is-recording .framing-preview {
    height: calc(100svh - 20px);
    min-height: 560px;
    border-radius: 18px;
  }
  .capture-overlay-action { bottom: 14px; }
  .director-overlay.director-overlay-emotional .director-note.note-two { bottom: 78px; }
}

/* ===== Reveal UX v5 ===== */
.chain-summary-copy {
  max-width: 680px;
  margin: 14px auto 16px;
  text-align: center;
  font-size: clamp(1.05rem, 2.5vw, 1.22rem);
  line-height: 1.5;
}
.chain-reasons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px auto 22px;
}
.chain-reasons span,
.chain-reasons a {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #faf9f6;
  font-size: .86rem;
  font-weight: 800;
  color: var(--ink, #161823);
  text-decoration: none;
}
.chain-reasons a:hover,
.chain-reasons a:focus-visible {
  border-color: #b8b8bf;
  background: #f3f3f5;
}
.chain-download-wrap {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.chain-download-wrap .button { min-width: min(100%, 220px); }
.chain-primary-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.chain-primary-actions .button { min-width: min(100%, 220px); }
.chain-share-wrap { margin-top: 14px; display: flex; justify-content: center; }
.privacy-section { text-align: center; }
.privacy-section p { max-width: 620px; margin-inline: auto; color: var(--muted); }
.privacy-remove-button {
  background: transparent !important;
  border-color: var(--line) !important;
  color: #d82f78 !important;
}
.privacy-remove-button:hover,
.privacy-remove-button:focus-visible {
  border-color: #d82f78 !important;
}
.grow-return-action { margin-bottom: 26px; }

/* ===== Recipient experience UX v6: full-frame preflight + staged chat reveal ===== */
.capture-card:not(.is-recording) .capture-preflight {
  margin-bottom: 22px;
  padding-bottom: 2px;
}
.capture-card:not(.is-recording) .framing-preview {
  width: min(100%, 520px);
  height: auto !important;
  max-height: 70svh;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
  background: #111;
}
.capture-card:not(.is-recording) .framing-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center;
}
.capture-card:not(.is-recording) .frame-face span { top: 6px; }
.capture-card:not(.is-recording) .frame-package span { bottom: 6px; }

/* Emotional reveal: a left-aligned chat stack in the lower part of the video. */
.director-overlay.director-overlay-emotional {
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 0 16% 4%;
  overflow: hidden;
  pointer-events: none;
}
.director-overlay.director-overlay-emotional .director-sender {
  position: static;
  width: fit-content;
  max-width: 84%;
  padding: .48rem .78rem;
  border: 0;
  border-radius: 13px 13px 13px 5px;
  background: linear-gradient(135deg, #7c4dff 0%, #4f8dff 55%, #20c8d8 100%);
  color: #fff;
  font-size: clamp(.78rem, 3.1vw, .98rem);
  line-height: 1.15;
  font-weight: 850;
  box-shadow: 0 9px 24px rgba(0,0,0,.24);
  animation: chat-message-in .62s cubic-bezier(.18,.85,.26,1) both;
}
.director-overlay.director-overlay-emotional strong {
  position: static;
  width: min(84%, 560px);
  max-width: 84%;
  margin: 0;
  padding: 1rem 1.08rem;
  border: 0;
  border-radius: 21px 21px 21px 6px;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 48%, #ff7a59 100%);
  color: #fff;
  font-size: clamp(1.28rem, 5.4vw, 1.9rem);
  line-height: 1.17;
  letter-spacing: -.02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.12);
  box-shadow: 0 14px 36px rgba(0,0,0,.26);
  font-weight: 850;
  animation: chat-message-in .68s cubic-bezier(.18,.85,.26,1) .10s both;
}
.director-overlay.director-overlay-emotional > #directorHint { display: none; }
.director-overlay.director-overlay-emotional .director-footer {
  position: static;
  width: min(84%, 560px);
  display: block;
  margin: 0;
  opacity: 1;
  transform: none;
  pointer-events: none;
}
.director-overlay.director-overlay-emotional .director-note {
  position: static;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: .62rem .82rem;
  border: 0;
  border-radius: 15px 15px 15px 5px;
  background: linear-gradient(135deg, #ff6b8a 0%, #ff9f43 54%, #ffd166 100%);
  color: #fff;
  font-size: clamp(.76rem, 2.9vw, .95rem);
  line-height: 1.25;
  font-weight: 800;
  box-shadow: 0 9px 24px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(14px);
}
.director-overlay.director-overlay-emotional .director-note.is-visible,
.director-overlay.director-overlay-emotional .director-footer.is-visible .note-one {
  opacity: 1;
  animation: chat-message-in .66s cubic-bezier(.18,.85,.26,1) both;
}
/* Branding intentionally does NOT appear on the live recording UI.
   It is burned into the final video from frame one by experience.js. */
.director-overlay.director-overlay-emotional .director-note.note-two { display: none !important; }

@media (max-width: 760px) {
  .capture-card:not(.is-recording) .capture-preflight {
    margin-bottom: 18px;
  }
  .capture-card:not(.is-recording) .framing-preview {
    width: 100%;
    max-height: 66svh;
  }
  .director-overlay.director-overlay-emotional {
    padding-left: 4%;
    padding-bottom: 17%;
  }
}


/* ===== Recipient experience UX v7: framing + chat alignment refinements ===== */
/* Human head guide: vertically elongated rather than horizontally oval. */
.frame-face {
  top: 6%;
  width: 30%;
  height: 38%;
}

/* Start is part of the preflight layout, below the camera image. Finish remains over the recording. */
.capture-start-action {
  position: static;
  display: block;
  width: min(100%, 330px);
  min-height: 52px;
  margin: 14px auto 0;
  transform: none;
  box-shadow: none;
}
.capture-card.is-recording .capture-start-action { display: none !important; }

/* Keep donation bubble on the exact same left edge/width as the emotional-message bubble. */
.director-overlay.director-overlay-emotional .director-footer {
  align-self: flex-start;
  width: min(84%, 560px);
  max-width: 84%;
}
.director-overlay.director-overlay-emotional .director-note.note-one {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}

/* Slower, more legible upward arrival for chat bubbles. */
.director-overlay.director-overlay-emotional .director-sender {
  animation-duration: .62s;
}
.director-overlay.director-overlay-emotional strong {
  animation-duration: .68s;
  animation-delay: .10s;
}
.director-overlay.director-overlay-emotional .director-note.is-visible,
.director-overlay.director-overlay-emotional .director-footer.is-visible .note-one {
  animation-duration: .66s;
}

/* ===== Recipient experience UX v8: live donation alignment ===== */
/* Match the donation bubble exactly to the emotional-message bubble on the live feed. */
.director-overlay.director-overlay-emotional > strong,
.director-overlay.director-overlay-emotional .director-footer {
  box-sizing: border-box;
  width: min(84%, 560px) !important;
  max-width: 84% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: flex-start !important;
}
.director-overlay.director-overlay-emotional .director-footer {
  position: static !important;
  inset: auto !important;
  padding: 0 !important;
}
.director-overlay.director-overlay-emotional .director-note.note-one {
  box-sizing: border-box;
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* ===== Recipient experience UX v9: raise live chat stack ===== */
/* Give the sender/message/donation stack more breathing room above the Finish button. */
.director-overlay.director-overlay-emotional {
  padding-bottom: 21%;
}
@media (max-width: 760px) {
  .director-overlay.director-overlay-emotional {
    padding-bottom: 23%;
  }
}


/* ===== Recipient experience UX v10: restore approved chat colours ===== */
/* Keep the approved v6 colour palette regardless of later positioning refinements. */
.director-overlay.director-overlay-emotional .director-sender {
  background: linear-gradient(135deg, #7c4dff 0%, #4f8dff 55%, #20c8d8 100%) !important;
}
.director-overlay.director-overlay-emotional > strong {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 48%, #ff7a59 100%) !important;
}
.director-overlay.director-overlay-emotional .director-note.note-one {
  background: linear-gradient(135deg, #ff6b8a 0%, #ff9f43 54%, #ffd166 100%) !important;
}


/* ===== Recipient experience UX v11: camera/microphone denial modal ===== */
.permission-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 22px;
}
.permission-modal.hidden { display: none !important; }
.permission-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 18, .68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.permission-modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  border-radius: 22px;
  background: #fff;
  color: #17171b;
  padding: 24px 22px 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  text-align: left;
}
.permission-modal-card h2 {
  margin: 0 0 12px;
  font-size: clamp(1.28rem, 5vw, 1.65rem);
  line-height: 1.15;
}
.permission-modal-card p {
  margin: 0 0 12px;
  line-height: 1.5;
}
.permission-modal-help {
  font-size: .94rem;
  opacity: .76;
}
.permission-modal-card .button { margin-top: 8px; }
.permission-modal-open { overflow: hidden; }

/* Potato lot traceability / product data */
.ops-batch-panel{margin:24px 0;padding:18px;background:#fff;border:1px solid var(--line);border-radius:18px}.ops-batch-head{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:14px}.ops-batch-head h2{margin:.15em 0 0;font-size:clamp(1.9rem,4vw,3.2rem);letter-spacing:-.045em}.active-batch-card{min-width:260px;display:grid;gap:3px;padding:13px 15px;border:1px solid #b8ddb9;background:#effbef;border-radius:14px}.active-batch-card.warn{border-color:#efcaa5;background:#fff6ea}.active-batch-card span{font-size:.65rem;font-weight:950;letter-spacing:.11em;text-transform:uppercase}.active-batch-card strong{font-size:1.35rem}.active-batch-card small{color:var(--muted)}.batch-form label{display:grid;gap:5px;font-size:.72rem;font-weight:850}.batch-form select,.ops-form select{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:14px;background:white;font:inherit}.batch-checkbox{display:flex!important;align-items:center;gap:8px;padding:10px 4px}.batch-checkbox input{width:auto!important}.batch-list{display:grid;gap:8px;margin-top:14px}.batch-row{display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid var(--line);border-radius:12px;padding:11px 13px}.batch-row.is-active{background:#f1fbf1;border-color:#b8ddb9}.batch-row>div:first-child{display:grid;gap:3px}.batch-row span{font-size:.82rem;color:var(--muted)}.batch-row-actions form{margin:0;display:inline}.batch-assign-form{margin:10px 0 20px}.batch-assign-form select{min-width:220px}
@media(max-width:760px){.ops-batch-head,.batch-row{align-items:stretch;flex-direction:column}.active-batch-card{min-width:0}.batch-row-actions{align-self:flex-start}.batch-assign-form select{min-width:0}}

/* ===== Public visual system v14: short-video-first / TikTok-inspired =====
   Uses the open-source TikTok Sans font, but no TikTok logos or proprietary UI assets. */
:root {
  --sap-black: #000000;
  --sap-surface: #121212;
  --sap-surface-2: #1f1f1f;
  --sap-border: #303030;
  --sap-white: #ffffff;
  --sap-soft: #f1f1f2;
  --sap-muted: #a8a8a8;
  --sap-pink: #fe2c55;
  --sap-cyan: #25f4ee;
}

.button-primary {
  background: var(--sap-pink);
  border-color: var(--sap-pink);
  color: #fff;
}
.button-primary:hover,
.button-primary:focus-visible { filter: brightness(1.08); }
.button-secondary {
  background: var(--sap-surface-2);
  border-color: #3b3b3b;
  color: #fff;
}

body.public-body:not(.ops-theme) {
  background: var(--sap-black);
  color: var(--sap-white);
  font-family: "TikTok Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.public-body:not(.ops-theme) main { width: 100%; margin: 0; }
body.public-body:not(.ops-theme) .public-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  margin: 0;
  padding: 12px clamp(16px, 4vw, 40px);
  background: rgba(0,0,0,.92);
  border-bottom: 1px solid #242424;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.public-body:not(.ops-theme) .public-header nav { gap: 14px; }
body.public-body:not(.ops-theme) .public-header nav a,
body.public-body:not(.ops-theme) .header-text-button {
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
}
.header-inline-form { display: inline; margin: 0; }
.header-text-button { appearance: none; border: 0; background: none; cursor: pointer; padding: 0; }
body.public-body:not(.ops-theme) .brand {
  color: #fff;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -.055em;
  text-shadow: none;
}
body.public-body:not(.ops-theme) .signin-link { padding: 9px 2px; }
body.public-body:not(.ops-theme) .button {
  border-radius: 6px;
  border-width: 1px;
  font-weight: 800;
  min-height: 44px;
  padding: 12px 20px;
  transition: transform .16s ease, filter .16s ease, background .16s ease;
}
body.public-body:not(.ops-theme) .button:active { transform: scale(.98); }
body.public-body:not(.ops-theme) .button-dark { background: var(--sap-pink); border-color: var(--sap-pink); color: #fff; }
body.public-body:not(.ops-theme) .button-light { background: var(--sap-surface-2); border-color: #3a3a3a; color: #fff; }

body.public-body:not(.ops-theme) .public-hero,
body.public-body:not(.ops-theme) .public-section,
body.public-body:not(.ops-theme) .form-page,
body.public-body:not(.ops-theme) .auth-page,
body.public-body:not(.ops-theme) .account-page,
body.public-body:not(.ops-theme) .partner-page {
  width: min(1080px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}
body.public-body:not(.ops-theme) .public-hero {
  min-height: calc(100vh - 70px);
  grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr);
  gap: clamp(34px,7vw,90px);
}
body.public-body:not(.ops-theme) .public-hero h1,
body.public-body:not(.ops-theme) .form-page h1,
body.public-body:not(.ops-theme) .auth-page h1,
body.public-body:not(.ops-theme) .account-page h1,
body.public-body:not(.ops-theme) .partner-page h1 {
  color: #fff;
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  line-height: .88;
  letter-spacing: -.065em;
  font-weight: 900;
}
body.public-body:not(.ops-theme) .accent-glitch {
  text-shadow: none;
}
body.public-body:not(.ops-theme) .hero-copy { color: var(--sap-soft); font-size: clamp(1.08rem,2.1vw,1.45rem); line-height: 1.45; }
body.public-body:not(.ops-theme) .section-kicker { color: var(--sap-cyan); font-weight: 850; letter-spacing: .14em; }
body.public-body:not(.ops-theme) .public-section { border-color: #242424; }
body.public-body:not(.ops-theme) .public-section h2 { color: #fff; font-weight: 900; line-height: .95; }
body.public-body:not(.ops-theme) .public-section p { color: var(--sap-soft); line-height: 1.55; }
body.public-body:not(.ops-theme) .muted,
body.public-body:not(.ops-theme) .fineprint { color: var(--sap-muted); }
body.public-body:not(.ops-theme) .hero-stat {
  background: radial-gradient(circle at 35% 25%, #252525, #090909 70%);
  border: 1px solid #333;
  box-shadow: 0 12px 34px rgba(22,24,35,.075);
  color: #fff;
}
body.public-body:not(.ops-theme) .hero-stat span { color: var(--sap-muted); }
body.public-body:not(.ops-theme) .reaction-card {
  background: var(--sap-surface);
  border-color: #303030;
  border-radius: 14px;
  overflow: hidden;
  color: #fff;
}
body.public-body:not(.ops-theme) .reaction-card video { background: #080808; aspect-ratio: 9/16; object-fit: cover; }
body.public-body:not(.ops-theme) .carousel-arrow { background: #202020; color: #fff; border-color: #3b3b3b; }
body.public-body:not(.ops-theme) .placeholder-deck > div { background: #151515; border-color: #303030; color: #aaa; }
body.public-body:not(.ops-theme) .public-footer {
  width: min(1080px, calc(100% - 32px));
  color: #777;
  border-top: 1px solid #242424;
  padding: 28px 0 42px;
}

/* Forms */
body.public-body:not(.ops-theme) .form-page { max-width: 760px; padding: 58px 0 90px; }
body.public-body:not(.ops-theme) .send-form,
body.public-body:not(.ops-theme) .stack-form,
body.public-body:not(.ops-theme) .auth-card {
  color: #fff;
}
body.public-body:not(.ops-theme) .sender-address-block,
body.public-body:not(.ops-theme) #knownAddress,
body.public-body:not(.ops-theme) .unknown-address,
body.public-body:not(.ops-theme) .promo-box,
body.public-body:not(.ops-theme) .checkout-summary,
body.public-body:not(.ops-theme) .auth-card,
body.public-body:not(.ops-theme) .account-send-card,
body.public-body:not(.ops-theme) .empty-account-state,
body.public-body:not(.ops-theme) .partner-facts article {
  background: var(--sap-surface);
  border: 1px solid var(--sap-border);
  border-radius: 12px;
}
body.public-body:not(.ops-theme) .sender-address-block,
body.public-body:not(.ops-theme) #knownAddress,
body.public-body:not(.ops-theme) .unknown-address { padding: 20px; }
body.public-body:not(.ops-theme) .send-form input,
body.public-body:not(.ops-theme) .send-form select,
body.public-body:not(.ops-theme) .stack-form input,
body.public-body:not(.ops-theme) .inline-form input,
body.public-body:not(.ops-theme) .inline-form select,
body.public-body:not(.ops-theme) .auth-form input {
  background: #1f1f1f;
  border: 1px solid #3b3b3b;
  color: #fff;
  border-radius: 8px;
  min-height: 48px;
}
body.public-body:not(.ops-theme) input::placeholder { color: #818181; }
body.public-body:not(.ops-theme) input:focus,
body.public-body:not(.ops-theme) select:focus {
  outline: 2px solid var(--sap-cyan);
  outline-offset: 1px;
}
body.public-body:not(.ops-theme) .radio-card,
body.public-body:not(.ops-theme) .address-message-card {
  background: #171717;
  border-color: #353535;
  color: #fff;
}
body.public-body:not(.ops-theme) .checkout-summary { color: #fff; }
body.public-body:not(.ops-theme) .checkout-summary strong { color: var(--sap-cyan); }
body.public-body:not(.ops-theme) .payment-warning { background: #2b1117; border-color: #743041; color: #fff; }

.promo-box { display: grid; gap: 12px; padding: 18px; }
.promo-box > div:first-child { display: grid; gap: 4px; }
.promo-box > div:first-child strong { font-size: 1.08rem; }
.promo-box > div:first-child span { color: var(--sap-muted); font-size: .9rem; }
.promo-entry { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.promo-status { min-height: 21px; font-size: .88rem; font-weight: 750; }
.promo-status.is-valid { color: var(--sap-cyan); }
.promo-status.is-invalid { color: #ff7891; }

/* Sign in / account */
.auth-page { min-height: calc(100vh - 160px); display: grid; place-items: center; padding: 50px 0; }
.auth-card { width: min(100%, 480px); padding: clamp(24px,5vw,42px); }
body.public-body:not(.ops-theme) .auth-card h1 { font-size: clamp(3rem,8vw,5.5rem); margin: .12em 0 .25em; }
.auth-form { display: grid; gap: 12px; margin-top: 24px; }
.auth-actions { display: grid; gap: 9px; margin-top: 5px; }
.account-page { padding: 58px 0 90px; }
.account-send-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; margin-top: 28px; }
.account-send-card { padding: 20px; }
.account-send-card h2 { font-size: 1.65rem; margin: 18px 0 5px; }
.account-send-card p { color: var(--sap-muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; }
.account-send-card > div:first-child { display:flex; align-items:center; gap:8px; color:var(--sap-muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sap-cyan); box-shadow: 0 0 10px rgba(37,244,238,.65); }
.empty-account-state { padding: 28px; margin-top: 26px; }

/* Partner detail page */
.partner-page { max-width: 820px; padding: 54px 0 90px; }
body.public-body:not(.ops-theme) .partner-page h1 { font-size: clamp(3.4rem,9vw,7rem); margin: .18em 0; }
.partner-lead { font-size: clamp(1.2rem,2.5vw,1.6rem); line-height: 1.45; }
.partner-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 34px 0; }
.partner-facts article { padding: 18px; display: grid; gap: 7px; }
.partner-facts strong { font-size: 1.35rem; }
.partner-facts span { color: var(--sap-muted); line-height: 1.35; }
.back-link { display: inline-block; margin-bottom: 28px; color: var(--sap-soft); text-decoration: none; font-weight: 750; }

/* Recipient reveal: same visual language, without touching camera/preflight screens. */
.neutral-body .reveal-page {
  font-family: "TikTok Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  color: #fff;
}
.neutral-body:has(.reveal-page) { background: #000; }
.neutral-body:has(.reveal-page) .neutral-main { width: min(920px, calc(100% - 20px)); }
.neutral-body .reveal-page .reveal-hero,
.neutral-body .reveal-page .reveal-section {
  background: #111;
  border-color: #303030;
  color: #fff;
  border-radius: 14px;
}
.neutral-body .reveal-page .reveal-hero h1,
.neutral-body .reveal-page .reveal-section h2 { color: #fff; font-weight: 900; }
.neutral-body .reveal-page .reveal-section p { color: #d5d5d5; }
.neutral-body .reveal-page .button { border-radius: 6px; }
.neutral-body .reveal-page .button-primary,
.neutral-body .reveal-page .button-dark { background: var(--sap-pink); color:#fff; border-color:var(--sap-pink); }
.neutral-body .reveal-page .button-secondary,
.neutral-body .reveal-page .button-light { background:#242424; color:#fff; border-color:#444; }
.neutral-body .reveal-page .reaction-card { background:#181818; border-color:#303030; color:#fff; }
.neutral-body .reveal-page .chain-reasons span { background:#202020; border-color:#373737; color:#fff; }
.neutral-body .reveal-page .privacy-section { background:#111; }
.neutral-body .reveal-page .section-kicker { color:var(--sap-cyan); }
.impact-mark { width: 76px; height: 76px; border-radius: 50%; display:grid; place-items:center; margin:0 auto 18px; background:var(--sap-pink); color:#fff; font-size:1.7rem; font-weight:900; box-shadow:0 10px 28px rgba(22,24,35,.10); }
.signin-section { text-align:center; }

/* Ops promo administration keeps the existing light operations UI. */
.ops-promo-panel { margin:24px 0; padding:18px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.promo-admin-list { display:grid; gap:8px; margin-top:14px; }
.promo-admin-row { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; }
.promo-admin-row > div { display:grid; gap:3px; }
.promo-admin-row span { color:var(--muted); font-size:.82rem; }
.promo-admin-row form { margin:0; }

@media (max-width: 760px) {
  body.public-body:not(.ops-theme) .public-header { padding: 10px 14px; }
  body.public-body:not(.ops-theme) .public-header nav { gap: 9px; }
  body.public-body:not(.ops-theme) .public-header nav > a:first-child { display:none; }
  body.public-body:not(.ops-theme) .brand { font-size: 1.18rem; }
  body.public-body:not(.ops-theme) .public-hero { grid-template-columns:1fr; min-height:auto; padding:70px 0 50px; }
  body.public-body:not(.ops-theme) .hero-stat { max-width: 270px; }
  body.public-body:not(.ops-theme) .public-section { padding: 54px 0; }
  .promo-entry { grid-template-columns:1fr; }
  .partner-facts { grid-template-columns:1fr; }
  .promo-admin-row { align-items:stretch; flex-direction:column; }
}

/* ===== v16 unified operations UI =====
   The previous v14 deliberately exempted .ops-theme from the public visual system.
   v16 intentionally brings /ops into the same dark, high-contrast product language. */
body.public-body.ops-theme {
  background: var(--sap-black);
  color: var(--sap-white);
  font-family: "TikTok Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.public-body.ops-theme main { width: 100%; margin: 0; }
body.public-body.ops-theme .public-header {
  position: sticky; top: 0; z-index: 50; width: 100%; margin: 0;
  padding: 12px clamp(16px,4vw,40px); background: rgba(0,0,0,.94);
  border-bottom: 1px solid #242424; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
body.public-body.ops-theme .brand {
  color:#fff; font-size:1.45rem; font-weight:900; letter-spacing:-.055em;
  text-shadow:none;
}
body.public-body.ops-theme .public-header nav a,
body.public-body.ops-theme .header-text-button { color:#fff; font-weight:700; }
body.public-body.ops-theme .ops-page { width:min(1240px,calc(100% - 32px)); padding:42px 0 90px; }
body.public-body.ops-theme .ops-head h1 {
  color:#fff; font-size:clamp(3.2rem,7vw,6.4rem); line-height:.88; letter-spacing:-.065em; font-weight:900;
}
body.public-body.ops-theme .section-kicker { color:var(--sap-cyan); }
body.public-body.ops-theme .status-strip span,
body.public-body.ops-theme .ops-create,
body.public-body.ops-theme .ops-batch-panel,
body.public-body.ops-theme .ops-promo-panel,
body.public-body.ops-theme .promo-admin-row,
body.public-body.ops-theme .batch-row,
body.public-body.ops-theme .table-wrap {
  background:var(--sap-surface); border-color:var(--sap-border); color:#fff;
}
body.public-body.ops-theme .ops-batch-panel,
body.public-body.ops-theme .ops-promo-panel { border-radius:14px; padding:20px; }
body.public-body.ops-theme .ops-create { border-radius:10px; }
body.public-body.ops-theme .ops-create summary { font-weight:850; cursor:pointer; color:#fff; }
body.public-body.ops-theme .status-strip span { border-radius:10px; min-width:86px; }
body.public-body.ops-theme .status-strip strong { color:#fff; }
body.public-body.ops-theme .status-strip span,
body.public-body.ops-theme .promo-admin-row span,
body.public-body.ops-theme .batch-row span,
body.public-body.ops-theme .muted { color:var(--sap-muted); }
body.public-body.ops-theme .active-batch-card {
  background:#101d1c; border-color:#245d59; color:#fff; border-radius:10px;
}
body.public-body.ops-theme .active-batch-card.warn { background:#251817; border-color:#70402f; }
body.public-body.ops-theme .active-batch-card small { color:var(--sap-muted); }
body.public-body.ops-theme .batch-row.is-active { background:#10201f; border-color:#246b66; }
body.public-body.ops-theme .ops-form input,
body.public-body.ops-theme .ops-form select,
body.public-body.ops-theme .batch-assign-form select {
  background:#1c1c1c; color:#fff; border:1px solid #3a3a3a; border-radius:8px; min-height:46px;
}
body.public-body.ops-theme .ops-form input::placeholder { color:#7f7f7f; }
body.public-body.ops-theme .ops-form input:focus,
body.public-body.ops-theme .ops-form select:focus,
body.public-body.ops-theme .batch-assign-form select:focus {
  outline:2px solid var(--sap-cyan); outline-offset:1px; border-color:transparent;
}
body.public-body.ops-theme .button { border-radius:6px; font-weight:850; }
body.public-body.ops-theme .button-dark,
body.public-body.ops-theme .button-primary { background:var(--sap-pink); border-color:var(--sap-pink); color:#fff; }
body.public-body.ops-theme .button-light { background:#242424; border-color:#444; color:#fff; }
body.public-body.ops-theme .health-pill.ok { background:#11332f; color:#78fff6; }
body.public-body.ops-theme .health-pill.warn { background:#3a211a; color:#ffc6a9; }
body.public-body.ops-theme .ops-toolbar { gap:9px; }
body.public-body.ops-theme .text-link { color:var(--sap-cyan); }
body.public-body.ops-theme .link-danger { color:#ff667f; }
body.public-body.ops-theme .table-wrap { overflow-x:auto; border:1px solid var(--sap-border); border-radius:12px; }
body.public-body.ops-theme .ops-table { background:transparent; color:#fff; }
body.public-body.ops-theme .ops-table th {
  background:#181818; color:#a8a8a8; border-color:#303030; text-transform:uppercase; letter-spacing:.08em; font-size:.68rem;
}
body.public-body.ops-theme .ops-table td { border-color:#292929; color:#f1f1f2; }
body.public-body.ops-theme .ops-table tbody tr:hover { background:#171717; }
body.public-body.ops-theme .public-footer { background:#0b0b0b; color:#8e8e8e; border-color:#222; }
@media(max-width:760px){
  body.public-body.ops-theme .ops-page{width:min(100% - 20px,1240px);padding-top:26px}
  body.public-body.ops-theme .ops-head h1{font-size:3.3rem}
}


/* ===== v17 light visual system =====
   TikTok-inspired typography/rhythm, conventional light website palette. */
:root {
  --sap-page: #ffffff;
  --sap-page-soft: #f7f7f8;
  --sap-card: #ffffff;
  --sap-card-muted: #fafafa;
  --sap-ink: #161823;
  --sap-ink-soft: #3f3f46;
  --sap-muted-light: #767680;
  --sap-border-light: #e6e6e9;
  --sap-border-strong: #d8d8dd;
  --sap-pink: #fe2c55;
  --sap-cyan: #00b8bd;
  --sap-focus: #00aeb5;
}

/* Apply the product typeface explicitly rather than relying on body inheritance. */
body.public-body,
body.neutral-body,
body.public-body h1,
body.public-body h2,
body.public-body h3,
body.public-body h4,
body.public-body p,
body.public-body a,
body.public-body button,
body.public-body input,
body.public-body textarea,
body.public-body select,
body.public-body label,
body.public-body summary,
body.public-body table,
body.public-body th,
body.public-body td,
body.neutral-body h1,
body.neutral-body h2,
body.neutral-body h3,
body.neutral-body p,
body.neutral-body a,
body.neutral-body button,
body.neutral-body input,
body.neutral-body textarea,
body.neutral-body select,
body.neutral-body label {
  font-family: "TikTok Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-optical-sizing: auto;
}

/* Public application: light, clean, social-first. */
body.public-body:not(.ops-theme) {
  background: var(--sap-page);
  color: var(--sap-ink);
}
body.public-body:not(.ops-theme) .public-header {
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--sap-border-light);
  box-shadow: 0 1px 0 rgba(22,24,35,.02);
}
body.public-body:not(.ops-theme) .public-header nav a,
body.public-body:not(.ops-theme) .header-text-button { color: var(--sap-ink); }
body.public-body:not(.ops-theme) .brand {
  color: var(--sap-ink);
  text-shadow: none;
}
body.public-body:not(.ops-theme) .button-light,
body.public-body:not(.ops-theme) .button-secondary {
  background: #fff;
  border-color: var(--sap-border-strong);
  color: var(--sap-ink);
}
body.public-body:not(.ops-theme) .public-hero h1,
body.public-body:not(.ops-theme) .form-page h1,
body.public-body:not(.ops-theme) .auth-page h1,
body.public-body:not(.ops-theme) .account-page h1,
body.public-body:not(.ops-theme) .partner-page h1,
body.public-body:not(.ops-theme) .public-section h2 { color: var(--sap-ink); }
body.public-body:not(.ops-theme) .accent-glitch {
  text-shadow: none;
}
body.public-body:not(.ops-theme) .hero-copy,
body.public-body:not(.ops-theme) .public-section p { color: var(--sap-ink-soft); }
body.public-body:not(.ops-theme) .section-kicker { color: var(--sap-cyan); }
body.public-body:not(.ops-theme) .public-section { border-color: var(--sap-border-light); }
body.public-body:not(.ops-theme) .muted,
body.public-body:not(.ops-theme) .fineprint { color: var(--sap-muted-light); }
body.public-body:not(.ops-theme) .hero-stat {
  background: linear-gradient(145deg,#fff,#f5f5f7);
  border-color: var(--sap-border-light);
  box-shadow: 0 16px 40px rgba(22,24,35,.08);
  color: var(--sap-ink);
}
body.public-body:not(.ops-theme) .hero-stat span { color: var(--sap-muted-light); }
body.public-body:not(.ops-theme) .reaction-card,
body.public-body:not(.ops-theme) .sender-address-block,
body.public-body:not(.ops-theme) #knownAddress,
body.public-body:not(.ops-theme) .unknown-address,
body.public-body:not(.ops-theme) .promo-box,
body.public-body:not(.ops-theme) .checkout-summary,
body.public-body:not(.ops-theme) .auth-card,
body.public-body:not(.ops-theme) .account-send-card,
body.public-body:not(.ops-theme) .empty-account-state,
body.public-body:not(.ops-theme) .partner-facts article {
  background: var(--sap-card);
  border-color: var(--sap-border-light);
  color: var(--sap-ink);
  box-shadow: 0 8px 30px rgba(22,24,35,.055);
}
body.public-body:not(.ops-theme) .reaction-card video { background:#101114; }
body.public-body:not(.ops-theme) .carousel-arrow {
  background:#fff; color:var(--sap-ink); border:1px solid var(--sap-border-light);
  box-shadow:0 4px 14px rgba(22,24,35,.08);
}
body.public-body:not(.ops-theme) .placeholder-deck > div { background:#f3f3f5; border-color:var(--sap-border-light); color:#6f6f77; }
body.public-body:not(.ops-theme) .public-footer { color:var(--sap-muted-light); border-color:var(--sap-border-light); }
body.public-body:not(.ops-theme) .send-form,
body.public-body:not(.ops-theme) .stack-form,
body.public-body:not(.ops-theme) .auth-card { color:var(--sap-ink); }
body.public-body:not(.ops-theme) .send-form input,
body.public-body:not(.ops-theme) .send-form select,
body.public-body:not(.ops-theme) .stack-form input,
body.public-body:not(.ops-theme) .inline-form input,
body.public-body:not(.ops-theme) .inline-form select,
body.public-body:not(.ops-theme) .auth-form input {
  background:#fff; border-color:var(--sap-border-strong); color:var(--sap-ink);
}
body.public-body:not(.ops-theme) input::placeholder { color:#9999a1; }
body.public-body:not(.ops-theme) input:focus,
body.public-body:not(.ops-theme) select:focus { outline-color:var(--sap-focus); }
body.public-body:not(.ops-theme) .radio-card,
body.public-body:not(.ops-theme) .address-message-card { background:#fafafa; border-color:var(--sap-border-light); color:var(--sap-ink); }
body.public-body:not(.ops-theme) .checkout-summary { color:var(--sap-ink); }
body.public-body:not(.ops-theme) .checkout-summary strong { color:#008f95; }
body.public-body:not(.ops-theme) .payment-warning { background:#fff4f6; border-color:#ffcbd5; color:#7b1730; }
body.public-body:not(.ops-theme) .promo-status.is-valid { color:#007f84; }
body.public-body:not(.ops-theme) .promo-status.is-invalid { color:#c51f45; }
body.public-body:not(.ops-theme) .account-send-card p,
body.public-body:not(.ops-theme) .account-send-card > div:first-child,
body.public-body:not(.ops-theme) .partner-facts span { color:var(--sap-muted-light); }
body.public-body:not(.ops-theme) .back-link { color:var(--sap-ink-soft); }

/* Operations: same typography and interaction language, light dashboard palette. */
body.public-body.ops-theme {
  background: var(--sap-page-soft);
  color: var(--sap-ink);
}
body.public-body.ops-theme .public-header {
  background: rgba(255,255,255,.95);
  border-bottom-color: var(--sap-border-light);
  box-shadow: 0 1px 0 rgba(22,24,35,.02);
}
body.public-body.ops-theme .brand {
  color:var(--sap-ink);
  text-shadow:none;
}
body.public-body.ops-theme .public-header nav a,
body.public-body.ops-theme .header-text-button { color:var(--sap-ink); }
body.public-body.ops-theme .ops-head h1 {
  color:var(--sap-ink);
  font-family:"TikTok Sans",ui-sans-serif,system-ui,sans-serif !important;
  font-weight:800;
  font-optical-sizing:auto;
  letter-spacing:-.055em;
}
body.public-body.ops-theme .section-kicker { color:var(--sap-cyan); }
body.public-body.ops-theme .status-strip span,
body.public-body.ops-theme .ops-create,
body.public-body.ops-theme .ops-batch-panel,
body.public-body.ops-theme .ops-promo-panel,
body.public-body.ops-theme .promo-admin-row,
body.public-body.ops-theme .batch-row,
body.public-body.ops-theme .table-wrap {
  background:#fff; border-color:var(--sap-border-light); color:var(--sap-ink);
  box-shadow:0 7px 24px rgba(22,24,35,.045);
}
body.public-body.ops-theme .ops-create summary,
body.public-body.ops-theme .status-strip strong { color:var(--sap-ink); }
body.public-body.ops-theme .status-strip span,
body.public-body.ops-theme .promo-admin-row span,
body.public-body.ops-theme .batch-row span,
body.public-body.ops-theme .muted { color:var(--sap-muted-light); }
body.public-body.ops-theme .active-batch-card { background:#effaf8; border-color:#a8dfda; color:var(--sap-ink); }
body.public-body.ops-theme .active-batch-card.warn { background:#fff7ee; border-color:#f2cfaa; color:#6f4517; }
body.public-body.ops-theme .active-batch-card small { color:var(--sap-muted-light); }
body.public-body.ops-theme .batch-row.is-active { background:#f0fbfa; border-color:#a8dfda; }
body.public-body.ops-theme .ops-form input,
body.public-body.ops-theme .ops-form select,
body.public-body.ops-theme .batch-assign-form select {
  background:#fff; color:var(--sap-ink); border-color:var(--sap-border-strong);
}
body.public-body.ops-theme .ops-form input::placeholder { color:#9999a1; }
body.public-body.ops-theme .ops-form input:focus,
body.public-body.ops-theme .ops-form select:focus,
body.public-body.ops-theme .batch-assign-form select:focus { outline-color:var(--sap-focus); }
body.public-body.ops-theme .button-light { background:#fff; border-color:var(--sap-border-strong); color:var(--sap-ink); }
body.public-body.ops-theme .health-pill.ok { background:#eaf8f3; color:#176b52; }
body.public-body.ops-theme .health-pill.warn { background:#fff3e8; color:#945326; }
body.public-body.ops-theme .text-link { color:#007f84; }
body.public-body.ops-theme .link-danger { color:#cc2347; }
body.public-body.ops-theme .ops-table { background:#fff; color:var(--sap-ink); }
body.public-body.ops-theme .ops-table th {
  background:#f7f7f8; color:#74747d; border-color:var(--sap-border-light);
}
body.public-body.ops-theme .ops-table td { border-color:#eeeeef; color:var(--sap-ink); }
body.public-body.ops-theme .ops-table tbody tr:hover { background:#fafafa; }
body.public-body.ops-theme .public-footer { background:transparent; color:var(--sap-muted-light); border-color:var(--sap-border-light); }

/* Recipient reveal uses the same light product system. */
.neutral-body:has(.reveal-page) { background:var(--sap-page-soft); color:var(--sap-ink); }
.neutral-body .reveal-page { color:var(--sap-ink); }
.neutral-body .reveal-page .reveal-hero,
.neutral-body .reveal-page .reveal-section {
  background:#fff; border-color:var(--sap-border-light); color:var(--sap-ink);
  box-shadow:0 8px 30px rgba(22,24,35,.05);
}
.neutral-body .reveal-page .reveal-section p,
.neutral-body .reveal-page .muted,
.neutral-body .reveal-page .fineprint { color:var(--sap-muted-light); }
.neutral-body .reveal-page .button-light { background:#fff; border-color:var(--sap-border-strong); color:var(--sap-ink); }
.neutral-body .reveal-page .choice-card { background:#fafafa; border-color:var(--sap-border-light); color:var(--sap-ink); }
.neutral-body .reveal-page .choice-card.selected { outline-color:var(--sap-ink); }

/* ===== v18 visual cleanup + mobile centering ===== */
/* Keep the modern high-contrast accents, but remove the cyan/magenta offset
   effect associated with the TikTok wordmark/logo. */
body.public-body .brand,
body.public-body .accent-glitch,
body.neutral-body .brand,
.accent-glitch {
  text-shadow: none !important;
}

body.public-body .hero-stat,
body.public-body.ops-theme .hero-stat,
.neutral-body .hero-stat {
  box-shadow: 0 12px 34px rgba(22,24,35,.075) !important;
}

.impact-mark {
  box-shadow: 0 10px 28px rgba(22,24,35,.10) !important;
}

/* The two accent colours stay available for ordinary UI states, but never as
   duplicated/offset copies of text or cards. */

@media (max-width: 760px) {
  /* Center the page sections themselves on mobile. */
  body.public-body main,
  body.public-body .public-hero,
  body.public-body .public-section,
  body.public-body .form-page,
  body.public-body .auth-page,
  body.public-body .account-page,
  body.public-body .partner-page,
  body.public-body .ops-page,
  body.neutral-body .neutral-main,
  body.neutral-body .reaction-shell,
  body.neutral-body .center-card,
  body.neutral-body .reveal-page {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.public-body .public-hero,
  body.public-body .public-section,
  body.public-body .section-heading,
  body.public-body .split-section,
  body.public-body .impact-home-section,
  body.public-body .ops-head,
  body.public-body .ops-batch-head,
  body.public-body .compact-section,
  body.neutral-body .reveal-hero,
  body.neutral-body .reveal-section {
    text-align: center !important;
    justify-items: center;
  }

  body.public-body .hero-copy-column,
  body.public-body .public-section > *,
  body.public-body .split-section > *,
  body.public-body .ops-head > *,
  body.public-body .ops-batch-head > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.public-body .actions,
  body.public-body .section-heading,
  body.public-body .ops-head,
  body.public-body .ops-batch-head,
  body.neutral-body .actions {
    justify-content: center !important;
  }

  body.public-body .hero-copy,
  body.public-body .public-section > p,
  body.public-body .partner-page > p,
  body.public-body .account-page > p,
  body.public-body .muted,
  body.neutral-body .reveal-section > p {
    margin-left: auto;
    margin-right: auto;
  }

  /* Cards/forms remain readable but the blocks are centered in the viewport. */
  body.public-body .send-form,
  body.public-body .stack-form,
  body.public-body .auth-card,
  body.public-body .ops-create,
  body.public-body .ops-batch-panel,
  body.public-body .ops-promo-panel,
  body.public-body .table-wrap,
  body.public-body .account-send-card,
  body.public-body .partner-facts,
  body.neutral-body .experience-intro-card,
  body.neutral-body .capture-card {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Keep actual form fields and operational tables left-aligned for scanning. */
  body.public-body form,
  body.public-body .ops-table,
  body.public-body .promo-admin-row,
  body.public-body .batch-row,
  body.neutral-body .experience-intro-copy,
  body.neutral-body .capture-preflight-steps {
    text-align: left;
  }

  body.public-body .hero-stat {
    justify-self: center;
  }
}

/* ===== v20 reveal fixes: visible headings, local logos/icons, terminal scroll cue ===== */
/* v17 made the reveal cards light, but an older dark-theme selector still had
   enough specificity to leave these headings white on white. */
body.neutral-body .reveal-page .reveal-hero h1,
body.neutral-body .reveal-page .reveal-section h2 {
  color: var(--sap-ink) !important;
}

/* CASA mark is kept local and vector-based so the reveal does not depend on a
   third-party image/CDN being available. */
.casa-logo-wrap {
  width: min(230px, 64vw);
  margin: 0 auto 16px;
}
.casa-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.casa-logo-roof {
  fill: none;
  stroke: #1b7896;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.casa-logo-word {
  fill: #167f9b;
  font-family: "TikTok Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 65px;
  font-weight: 650;
  letter-spacing: 5px;
}
.casa-logo-sub {
  fill: #246b87;
  font-family: "TikTok Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 1.8px;
}

/* Social marks are SVG assets shipped with the application rather than icon
   font classes, so they remain visible even when no icon-font CSS is loaded. */
.social-brand img {
  display: block;
  width: 17px;
  height: 17px;
  object-fit: contain;
}

@media (max-width: 760px) {
  .casa-logo-wrap { width: min(205px, 68vw); }
}

/* ===== v21 reveal section system: consistent hierarchy and spacing ===== */
body.neutral-body .reveal-page .reveal-section {
  text-align: center;
}

body.neutral-body .reveal-page .reveal-section .section-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin: 0 auto 16px;
  padding: 7px 13px;
  border: 1px solid #e8e8eb;
  border-radius: 999px;
  background: #f6f6f7;
  color: #60606a !important;
  font-size: .79rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: normal;
}

body.neutral-body .reveal-page .reveal-section h2 {
  max-width: 760px;
  margin: 0 auto 22px;
  line-height: 1.02;
}

body.neutral-body .reveal-page .reveal-section-visual {
  margin: 2px auto 20px;
}

body.neutral-body .reveal-page .casa-logo-wrap.reveal-section-visual {
  margin-bottom: 20px;
}

.reveal-eco-visual {
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: #f3f8ee;
  font-size: 4.5rem;
  line-height: 1;
}

.reveal-stat-card {
  width: min(100%, 360px);
  margin: 0 auto 20px;
  padding: 17px 22px 16px;
  display: grid;
  justify-items: center;
  gap: 3px;
  border: 1px solid var(--sap-border-light, #e8e8eb);
  border-radius: 20px;
  background: #fafafa;
  box-shadow: 0 8px 24px rgba(22,24,35,.045);
}

.reveal-stat-value {
  color: var(--sap-ink, #161823);
  font-size: clamp(2.1rem, 7vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.045em;
}

.reveal-stat-label {
  color: var(--sap-muted-light, #73737d);
  font-size: .9rem;
  font-weight: 750;
}

body.neutral-body .reveal-page .reveal-section-description {
  max-width: 680px;
  margin: 0 auto 22px;
  color: var(--sap-muted-light, #73737d);
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.58;
}

body.neutral-body .reveal-page .reveal-section-actions {
  margin-top: 2px;
}

/* The chain is explicitly the third content section in the reveal flow. */
body.neutral-body .reveal-page .chain-section .reaction-carousel-wrap {
  margin-top: 0;
  margin-bottom: 20px;
}

body.neutral-body .reveal-page .chain-section .empty-chain {
  width: min(100%, 680px);
  margin-inline: auto;
}

body.neutral-body .reveal-page .chain-summary-copy {
  margin-top: 0;
  margin-bottom: 16px;
}

@media (max-width: 760px) {
  body.neutral-body .reveal-page .reveal-section .section-kicker {
    margin-bottom: 14px;
    padding: 7px 12px;
    font-size: .76rem;
    letter-spacing: .055em;
  }

  body.neutral-body .reveal-page .reveal-section h2 {
    margin-bottom: 18px;
  }

  .reveal-stat-card {
    width: min(100%, 310px);
    margin-bottom: 18px;
  }

  .reveal-eco-visual {
    width: 104px;
    height: 104px;
    border-radius: 24px;
    font-size: 4rem;
  }
}


/* ===== v24 reveal: deterministic share/download spacing + section order support ===== */
body.neutral-body .reveal-page .chain-share-download-stack {
  display: grid;
  justify-items: center;
  row-gap: 34px;
  width: 100%;
  margin-top: 18px;
}
body.neutral-body .reveal-page .chain-share-download-stack .chain-share-wrap,
body.neutral-body .reveal-page .chain-share-download-stack .chain-download-wrap {
  margin: 0 !important;
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (max-width: 760px) {
  body.neutral-body .reveal-page .chain-share-download-stack {
    row-gap: 38px;
  }
}


/* ===== v25 reveal: equal spacing for the three chain action buttons ===== */
body.neutral-body .reveal-page .chain-action-stack {
  display: grid;
  justify-items: center;
  row-gap: 10px;
  width: 100%;
  margin-top: 20px;
}
body.neutral-body .reveal-page .chain-action-stack .chain-primary-actions,
body.neutral-body .reveal-page .chain-action-stack .chain-share-wrap,
body.neutral-body .reveal-page .chain-action-stack .chain-download-wrap {
  width: 100%;
  margin: 0 !important;
  display: flex;
  justify-content: center;
}
/* Neutralise the previous two-button spacing container if cached selectors remain. */
body.neutral-body .reveal-page .chain-action-stack .chain-share-download-stack {
  margin: 0 !important;
  row-gap: 0 !important;
}
@media (max-width: 760px) {
  body.neutral-body .reveal-page .chain-action-stack {
    row-gap: 10px;
  }
}


/* ===== v27 reveal: give Download a little more breathing room only ===== */
body.neutral-body .reveal-page .chain-action-stack .chain-download-wrap {
  padding-top: 8px;
}
\n\n/* ===== v28 reveal: target the ACTUAL chain CTA container ===== */
body.neutral-body .reveal-page .chain-cta-stack {
  display: grid;
  justify-items: center;
  row-gap: 10px;
  width: 100%;
  margin-top: 20px;
}
body.neutral-body .reveal-page .chain-cta-stack .chain-primary-actions,
body.neutral-body .reveal-page .chain-cta-stack .chain-share-wrap,
body.neutral-body .reveal-page .chain-cta-stack .chain-download-wrap {
  width: 100%;
  margin: 0 !important;
  display: flex;
  justify-content: center;
}
/* First CTA gap stays at 10px; Download gets a deliberate extra 10px = 20px total. */
body.neutral-body .reveal-page .chain-cta-stack > .chain-download-wrap {
  margin-top: 10px !important;
  padding-top: 0 !important;
}

/* ===== v29 reveal: move only the primary Send CTA closer to the reason chips ===== */
body.neutral-body .reveal-page .chain-cta-stack > .chain-primary-actions {
  position: relative;
  top: -10px;
}