/* vonga.io v4 (Oct 2026). Navy for the fan side, paper for the sponsor side and for reading.
   Loads after v3.css on Home, How it works, Data and privacy and Contact. Decision record: kb 633. */

/* Paper sections on the dark site */
.sec.paper { background: var(--paper); color: #2A3442; }
.paper .d2, .paper .d3, .paper h3 { color: var(--ink); }
.paper .lede { color: rgba(14, 20, 31, 0.74); }
.paper a { color: var(--teal-ink); font-weight: 600; }
.paper .art .line path, .paper .art .line rect { stroke: var(--ink); }
.paper .art .line .faint { stroke: rgba(14, 20, 31, 0.38); }
.paper .art .ripple { stroke: var(--teal-ink); }

/* Home: problem rows, stat inline with its source */
.problem { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.problem .d2 { max-width: 12ch; }
.rows4 { display: flex; flex-direction: column; border-top: 1px solid rgba(14, 20, 31, 0.14); }
.rows4 .r { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid rgba(14, 20, 31, 0.14); }
.rows4 h3 { margin: 0; font-size: 16px; font-weight: 600; font-family: inherit; text-transform: none; letter-spacing: 0; color: rgba(14, 20, 31, 0.62); }
.rows4 .r.on h3 { color: var(--teal-ink); }
.rows4 p { margin: 0; font-size: 1.1rem; line-height: 1.6; color: rgba(14, 20, 31, 0.76); max-width: 54ch; }
.rows4 .r.on p { color: var(--ink); }
.rows4 .src { display: block; margin-top: 8px; font-size: 13px; color: rgba(14, 20, 31, 0.62); }

/* Home: the tour of the four public screens */
.tour { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.tour-steps { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.tour-steps li { border-bottom: 1px solid var(--rule); }
.tour-steps button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 16px; width: 100%; padding: 18px 0; cursor: pointer; color: var(--low); border-radius: 8px; }
.tour-steps button:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.tour-steps i { font-style: normal; font-family: var(--display); font-size: 20px; color: var(--low); grid-row: span 2; }
.tour-steps b { font-family: var(--display); text-transform: uppercase; font-weight: 600; font-size: 20px; letter-spacing: 0.01em; color: var(--mid); }
.tour-steps span { font-size: 15px; line-height: 1.5; }
.tour-steps button[aria-selected="true"] i { color: var(--teal); }
.tour-steps button[aria-selected="true"] b { color: var(--hi); }
.tour-steps button[aria-selected="true"] span { color: var(--mid); }
.tour-steps button:hover b { color: var(--hi); }
.tour-stage { position: relative; height: 600px; border-radius: 24px; background: var(--ink-3); }
.tour-panel { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px; border-radius: 24px; }
.tour-panel[hidden] { display: none; }
.tour-panel.paper { background: var(--paper); }
.tour-panel img { flex: 1 1 auto; min-height: 0; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 20px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); }
.tour-panel figcaption { flex: none; font-size: 14px; color: var(--low); text-align: center; }
.tour-panel.paper figcaption { color: rgba(14, 20, 31, 0.66); }
.tour-panel.is-on { animation: tour-in 0.45s var(--ease-out); }
@keyframes tour-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tour .small4 { margin-top: 24px; font-size: 14px; color: var(--low); }

/* Home: activations, giveaway first */
.act4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: start; margin-top: 56px; }
.act4 .lead4 { display: flex; flex-direction: column; gap: 18px; padding: 40px; border-radius: 18px; background: white; border: 1px solid rgba(13, 120, 140, 0.35); }
.act4 .lead4 .art { width: 132px; height: 132px; }
.act4 .lead4 h3 { font-family: var(--display); text-transform: uppercase; font-weight: 600; font-size: 1.9rem; letter-spacing: 0.01em; line-height: 1; margin: 0; }
.act4 .lead4 p { margin: 0; font-size: 1.125rem; line-height: 1.6; color: rgba(14, 20, 31, 0.76); max-width: 46ch; }
.act4 .list4 { display: flex; flex-direction: column; border-top: 1px solid rgba(14, 20, 31, 0.14); }
.act4 .li4 { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(14, 20, 31, 0.14); }
.act4 .li4 .art { width: 72px; height: 72px; }
.act4 .li4 h3 { font-family: var(--display); text-transform: uppercase; font-weight: 600; font-size: 1.35rem; letter-spacing: 0.02em; margin: 0 0 4px; }
.act4 .li4 p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(14, 20, 31, 0.76); }

/* Home: closing statement now carries the only closing CTA */
.statement .fine4 { margin-top: 20px; font-size: 15px; color: var(--mid); max-width: 52ch; }

/* How it works: tap record card and paper stage for the sponsor side */
.tapcard { width: min(100%, 360px); background: var(--ink); border: 1px solid rgba(51, 190, 204, 0.45); border-radius: 18px; padding: 24px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); }
.tapcard h4 { margin: 0 0 10px; font-family: var(--display); text-transform: uppercase; font-size: 18px; letter-spacing: 0.02em; color: var(--teal); font-weight: 600; }
.tapcard dl { margin: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); }
.tapcard dt, .tapcard dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.tapcard dt { color: var(--low); }
.tapcard dd { color: var(--hi); font-variant-numeric: tabular-nums; }
.tapcard dd.no { color: var(--low); }
.tapcard .tag4 { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--hi); border-radius: 999px; padding: 3px 10px; }
.tj-panel.paper { background: var(--paper); }
.tj-panel.paper figcaption { color: rgba(14, 20, 31, 0.7); }
.facts4 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.facts4 .rows4 .r { grid-template-columns: 200px minmax(0, 1fr); }
.facts4 .rows4 h3 { color: var(--ink); font-size: 17px; }

/* Data and privacy: a section index beside the prose */
.layers:first-child { margin-top: 0; }
.doc4 { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); margin-top: 56px; padding-top: 8px; border-top: 1px solid rgba(14, 20, 31, 0.14); }
.toc4 { position: sticky; top: 110px; align-self: start; padding-top: 56px; }
.toc4 p { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: rgba(14, 20, 31, 0.62); }
.toc4 ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.toc4 a { color: rgba(14, 20, 31, 0.76) !important; text-decoration: none; font-size: 15px; font-weight: 500 !important; }
.toc4 a:hover { color: var(--teal-ink) !important; }
body.v3 .toc4 li::before { display: none !important; }
.prose3 h2[id] { scroll-margin-top: 100px; }
.ask4 { margin-top: 48px; padding: 24px 28px; border-radius: 14px; background: white; border: 1px solid rgba(14, 20, 31, 0.14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.ask4 p { margin: 0 !important; color: var(--ink) !important; max-width: 46ch; flex: 1 1 300px; }
.ask4 .btn-v3 { color: var(--ink) !important; }

/* Contact: the form sits on a paper card */
.form3 { background: var(--paper); border-color: transparent; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); }
.form3 label { color: var(--ink); }
.form3 input, .form3 select, .form3 textarea { background: white; border-color: rgba(14, 20, 31, 0.18); color: var(--ink); caret-color: var(--teal-ink); }
.form3 input::placeholder, .form3 textarea::placeholder { color: rgba(14, 20, 31, 0.5); }
.form3 input:focus, .form3 select:focus, .form3 textarea:focus { border-color: var(--teal-ink); box-shadow: 0 0 0 3px rgba(13, 120, 140, 0.25); }
.form3 button.btn-v3.solid { background: var(--ink); color: var(--hi); box-shadow: none; }
.form3 .fine { color: rgba(14, 20, 31, 0.66); }
.form3 .fine a { color: var(--teal-ink); }
.form3 .err { color: #A3341A; }
.form3 .done h2 { color: var(--ink) !important; }
.form3 .done p { color: rgba(14, 20, 31, 0.76); }
.form3 .done a { color: var(--teal-ink) !important; }

@media (max-width: 1000px) {
  .problem, .tour, .act4, .facts4 { grid-template-columns: 1fr; }
  .tour-stage { order: -1; }
}
@media (max-width: 720px) {
  .rows4 .r, .facts4 .rows4 .r { grid-template-columns: 1fr; gap: 6px; }
  .tour-stage { height: 440px; }
  .tour-panel { padding: 18px; }
  .act4 .lead4 { padding: 28px; }
  .act4 .lead4 .art { width: 104px; height: 104px; }
  .doc4 { grid-template-columns: 1fr; margin-top: 32px; }
  .toc4 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-panel.is-on { animation: none; }
}