/* ShieldTX v2 · homepage additions on top of the design (theme.css + site.css).
   Everything uses theme tokens. */

/* ---------- Product section = demo videos ----------
   Desktop: the video fills the laptop SVG's display (rect x 177, y 114, 1182 × 742,
   rx 16 in viewBox 32 84 1474 870). The display is 1.593:1, the same shape as the
   1910 × 1200 recording, so it fills edge to edge. The camera notch (path x 693–843,
   y 114–146) is redrawn on top as .product-notch, because the video sits above the SVG.
   Both float with the laptop (same keyframes); product-showcase.js scales the figure.
   Mobile (≤700px): the laptop is hidden and the portrait app recording plays inside
   the .product-phone mockup (its own status bar and home indicator are in the video). */
.shieldtx-photo > .product-video { position: absolute; left: 9.837%; top: 3.448%; width: 80.19%; height: 85.287%; object-fit: cover; border-radius: 1.354% / 2.156%; background: #0c1018; pointer-events: none; }
.shieldtx-photo > .product-notch { position: absolute; left: 44.844%; top: 3.448%; width: 10.176%; height: 3.678%; border-radius: 0 0 6% 6% / 0 0 28% 28%; background: #050608; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .shieldtx-photo > .product-video, .shieldtx-photo > .product-notch { animation: product-laptop-float 6s ease-in-out infinite; animation-play-state: paused; }
  .shieldtx-stage.is-in-view .shieldtx-photo > .product-video, .shieldtx-stage.is-in-view .shieldtx-photo > .product-notch { animation-play-state: running; }
}
.product-phone-video { display: block; width: 100%; height: auto; aspect-ratio: 738 / 1600; object-fit: cover; border-radius: 20px; background: #0c1018; }
@media (max-width: 700px) {
  #shieldtx .shieldtx-photo { width: calc(100% - 58px); } /* = .shieldtx-heading width on mobile */
  .shieldtx-photo > .product-video, .shieldtx-photo > .product-notch { display: none; }
}

/* Form error line (wallet scan form). */
.form-error { font-size: 13px; color: #eeabab; margin: 12px 0 0; }
}

/* ---------- FAQ fee table (carried over from the v1 FAQ) ---------- */
.fee-table { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 750px; margin: 0 0 24px; }
.fee-group { display: flex; flex-direction: column; }
.fee-head { font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); padding-bottom: 10px; border-bottom: 1px solid #fff1; }
.fee-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #ffffff0a; font-size: 13px; color: var(--text-3); }
.fee-row > span:last-child { color: var(--text-2); text-align: right; }
@media (max-width: 700px) {
  .fee-table { grid-template-columns: 1fr; }
}

/* ---------- Hero + closing CTA pair: equal widths ----------
   Start trading (light) and Get API access (bevel) share one column width = the
   wider label. Stacked full-width on narrow phones so both still fit. */
.hero-copy .actions, .closing-copy .actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; grid-auto-rows: 1fr; width: max-content; max-width: 100%; }
.closing-copy .actions { margin-inline: auto; }
@media (max-width: 420px) {
  .hero-copy .actions, .closing-copy .actions { grid-auto-flow: row; width: 100%; }
}

/* ---------- Credibility (after the FAQ): option A ----------
   Section heading like every other section ("BUILT BY [Avail]" eyebrow + "Backed by
   the best."), then investor logos in equal hairline cells inside one design card.
   Logos white, greyscale at 75% like the design's own logo strip, full on hover. */
.backers-section { padding-bottom: 96px; }
/* Heading: the right-hand line starts level with the h2 (not centred on eyebrow + h2).
   The left wrapper steps aside (display: contents) so eyebrow / h2 / p share one grid. */
#backers .section-heading { align-items: start; row-gap: 0; }
#backers .section-heading > div { display: contents; }
#backers .section-heading .section-eyebrow { grid-column: 1; grid-row: 1; }
#backers .section-heading h2 { grid-column: 1; grid-row: 2; }
#backers .section-heading > p { grid-column: 2; grid-row: 2; }
@media (max-width: 700px) {
  #backers .section-heading > p { grid-column: 1; grid-row: 3; margin-top: 20px; }
}
/* Same title / description sizes as the design's other sections (theme.css lists only its own ids). */
#backers .section-heading h2 { font-size: var(--section-title-size); line-height: 1.12; }
#backers .section-heading > p { font-size: var(--section-description-size); line-height: 1.6; }

.backers-built { display: inline-flex; align-items: center; gap: .55em; width: max-content; }
/* "BUILT BY AVAIL" eyebrow — above the hero H1 and in the backers heading.
   The Avail wordmark is masked so it takes the eyebrow's brand colour (no inlined SVG). */
.built-by { display: inline-flex; align-items: center; gap: .6em; width: max-content; margin-bottom: 18px;
  font: 500 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-light); }
.built-by-logo { display: block; flex: none; height: 1.75em; aspect-ratio: 1016 / 341; background: currentColor;
  -webkit-mask: url(/assets/v2/avail-logo-v2.svg) center / contain no-repeat; mask: url(/assets/v2/avail-logo-v2.svg) center / contain no-repeat; }
.built-by:hover { color: var(--text-1); }
@media (max-width: 700px) { .built-by { font-size: 10px; margin-bottom: 14px; } }
/* Inline SVG with fill=currentColor so it takes the eyebrow blue; sized to the label's cap height. */
.backers-avail-logo { display: block; flex: none; width: auto; height: 1.3em; aspect-ratio: 1016 / 341; }
.backers-cells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.backers-cells li { display: flex; align-items: center; justify-content: center; min-height: 132px; padding: 24px; border-left: 1px solid #fff1; }
.backers-cells li:first-child { border-left: 0; }
.backers-cells li > img, .backer-dragonfly > * { filter: grayscale(1); opacity: .75; transition: opacity .2s, filter .2s; }
.backers-cells li:hover > img, .backer-dragonfly:hover > * { filter: none; opacity: 1; }
.backers-cells img { display: block; width: auto; }
.backer-ff { height: 19px; }
.backer-dragonfly { gap: 10px; }
.backer-dragonfly img { height: 20px; }
.backer-dragonfly span { font: 500 22px/1 var(--sans); letter-spacing: -.02em; color: #fff; }
.backer-cyber { height: 46px; }
.backers-cells .backers-more { font: 500 12px var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 900px) {
  .backers-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backers-cells li:nth-child(3) { border-left: 0; }
  .backers-cells li:nth-child(n+3) { border-top: 1px solid #fff1; }
}
@media (max-width: 700px) {
  .backers-section { padding-bottom: 64px; }
  .backers-cells li { min-height: 104px; padding: 18px 12px; }
  .backer-ff { height: 13px; }
  .backer-dragonfly img { height: 16px; }
  .backer-dragonfly span { font-size: 17px; }
  .backer-cyber { height: 38px; }
}

/* ---------- "Without ShieldTX": pinned scroll story (user, 2026-10-13) ----------
   Left: eyebrow, heading and the three public-footprint rows (label | line, hairline
   dividers, as the user's reference). Right: the design's radar. The section is a tall
   scroll track; the stage pins and each row lights up in turn (exposure-dashboard.js).
   Phones and reduced motion: no pin, rows highlight on tap. */
#problem.exposure-story { height: 220svh; padding-top: 0; padding-bottom: 0; } /* 3 steps, ~40vh of scroll each */
#problem .exposure-stage { position: sticky; top: 0; height: 100svh; min-height: 640px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 4vw, 80px); padding: 104px 0 64px; } /* top clears the fixed nav; bottom keeps the last row off the edge */
#problem .exposure-eyebrow { margin: 0 0 18px; }
#problem .exposure-copy h2 { font-size: var(--section-title-size); line-height: 1.12; letter-spacing: -.045em; margin: 0 0 clamp(20px, 2.2vw, 36px); }
#problem .exposure-copy h2 span { color: var(--text-3); }
.exposure-rows { list-style: none; margin: 0; padding: 0; --exposure-bleed: clamp(14px, 1.3vw, 20px); }
/* The active row paints a full-width band, not just lighter text: the li bleeds into
   the section gutter by --exposure-bleed (mirrored as padding so the label/title keep
   their alignment with the heading) and carries a 2px mint edge. Scroll-driven by
   js/exposure-dashboard.js via .is-active. */
.exposure-rows li { border-top: 1px solid #ffffff1f; margin-inline: calc(var(--exposure-bleed) * -1); padding-inline: var(--exposure-bleed); background-color: transparent; box-shadow: inset 2px 0 0 transparent; transition: background-color .4s ease, box-shadow .4s ease; }
.exposure-row { display: grid; grid-template-columns: minmax(140px, .34fr) minmax(0, 1fr); align-items: baseline; gap: 24px; width: 100%; padding: clamp(14px, 1.25vw, 22px) 0; border: 0; background: none; text-align: left; cursor: pointer; }
/* Hierarchy: category = small tracked label; title = largest; subtext = smaller, muted. */
.exposure-row-label { font: 500 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); transition: color .35s; }
.exposure-row-copy { display: flex; flex-direction: column; gap: 6px; }
.exposure-row-title { font: 400 clamp(19px, 1.45vw, 26px)/1.25 var(--display); letter-spacing: -.02em; color: var(--text-3); transition: color .35s; }
.exposure-row-line { font: 400 clamp(14px, .95vw, 16px)/1.55 var(--sans); color: var(--text-4); transition: color .35s; }
.exposure-row:hover .exposure-row-title { color: var(--text-2); }
.exposure-rows li:hover { background-color: #ffffff08; }
.exposure-rows li.is-active { background-color: rgba(151, 252, 228, .08); box-shadow: inset 2px 0 0 var(--brand); }
.exposure-rows li.is-active .exposure-row-label { color: var(--text-2); }
.exposure-rows li.is-active .exposure-row-title { color: var(--text-1); }
.exposure-rows li.is-active .exposure-row-line { color: var(--text-3); }
#problem .exposure-visual { position: relative; min-width: 0; }
#problem .exposure-visual .scan-visual { height: clamp(380px, 34vw, 640px); }
/* The design tuned the radar for a lit card; on the open page it read too faint.
   Same drawing and motion, stronger lines/labels/dots. */
#problem .radar, #problem .radar > i { border-color: rgba(147,177,224,.22); }
#problem .radar-sweep { background: conic-gradient(transparent 0deg, transparent 332deg, rgba(151,252,228,.05) 344deg, rgba(151,252,228,.14) 360deg); }
#problem .radar-dot { opacity: .7; }
#problem .radar-label { color: var(--text-3); }
#problem .radar-label::before { width: 3px; height: 3px; }
#problem .exposure-threat-rays path { stroke-opacity: .6; }
#problem .exposure-threat-rays circle { fill-opacity: .8; }
#problem .exposure-threat-rays text { fill: #a3aab5; }
@media (max-width: 1000px) and (min-width: 701px) {
  #problem .exposure-stage { grid-template-columns: 1fr 1fr; gap: 28px; }
  .exposure-row { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  #problem.exposure-story { height: auto; padding-top: 72px; padding-bottom: 54px; }
  #problem .exposure-stage { position: static; height: auto; min-height: 0; grid-template-columns: 1fr; padding: 0; gap: 28px; }
}
@media (max-width: 700px) {
  /* Radar right after the heading (rows below) so the travelling shared coin docks
     before the text instead of crossing the rows. */
  #problem .exposure-stage { gap: 0; }
  #problem .exposure-copy { display: contents; }
  #problem .exposure-eyebrow { order: 1; }
  #problem .exposure-copy h2 { order: 2; margin-bottom: 8px; }
  #problem .exposure-visual { order: 3; }
  #problem .exposure-rows { order: 4; margin-top: 8px; }
  #problem .exposure-visual .scan-visual { height: 340px; }
  .exposure-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .exposure-row-title { font-size: 19px; }
  .exposure-rows { --exposure-bleed: 12px; } /* stays inside the 18px section gutter */
}

/* ---------- Wallet scan (after "Without ShieldTX") ----------
   One card: a band (heading + "Check my wallet") that expands into the scan panel below it.
   Expand/collapse animates grid rows 0fr → 1fr; js/wallet-scan.js toggles .is-open + inert. */
.scan-section { padding-top: clamp(40px, 5vw, 96px); }
/* The shared coin (z-index 44) travels behind this card and re-emerges below it. */
.scan-card { position: relative; z-index: 45; }
.scan-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding: clamp(28px, 3vw, 56px); }
.scan-band-copy .section-eyebrow { display: block; }
.scan-band-copy h2 { font-size: var(--section-title-size); line-height: 1.12; letter-spacing: -.045em; margin: 0 0 14px; }
.scan-band-copy h2 span { color: var(--text-3); }
.scan-band-copy p { font-size: var(--section-description-size); line-height: 1.6; color: var(--text-3); margin: 0; }
.scan-band-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.scan-band-cta .button { min-width: 240px; justify-content: center; }
/* Once expanded, the panel has its own button + "no wallet connection" line, so the band CTA goes. */
.scan-section.is-open .scan-band-cta { display: none; }
.scan-band-cta p { font-size: 13px; color: var(--text-4); margin: 0; }

.scan-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1); }
.scan-section.is-open .scan-panel { grid-template-rows: 1fr; }
.scan-panel-inner { min-height: 0; overflow: hidden; }
/* One column on every screen size: js/wallet-scan.js un-hides #scan-result on success,
   and the result then replaces the form (below) instead of sitting beside it. */
.scan-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 80px); margin: 0 clamp(28px, 3vw, 56px); padding: clamp(28px, 3vw, 48px) 0 clamp(28px, 3vw, 56px); border-top: 1px solid #fff1; opacity: 0; transition: opacity .3s; }
.scan-panel-grid:has(#scan-result:not([hidden])) .scan-form { display: none; }
.scan-section.is-open .scan-panel-grid { opacity: 1; transition-delay: .12s; }

.scan-form label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.scan-form input { width: 100%; background: var(--canvas); border: 1px solid #fff3; border-radius: var(--r); padding: 16px; color: var(--text-1); font: 16px var(--mono); transition: border-color .2s; }
.scan-form input::placeholder { color: var(--text-4); }
.scan-form input:hover { border-color: #ffffff52; }
.scan-form input:focus-visible { outline: none; border-color: #ffffff80; box-shadow: 0 0 0 3px #ffffff14; }
.scan-form input[aria-invalid="true"] { border-color: #eeabab88; }
.scan-help { font-size: 13px; color: var(--text-4); margin: 10px 0 0; }
/* Helper text left, "No address handy? / Try a sample" right-aligned on the same row,
   directly beneath the address field. */
.scan-help-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 10px; }
.scan-help-row .scan-help { margin: 0; }
.scan-form .button { width: 100%; justify-content: center; margin-top: 20px; }
.scan-form.is-loading .button { opacity: .7; }
.scan-fallback { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; }
.scan-sample { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 10px; font-size: 13px; color: var(--text-4); margin: 0; }
.scan-meta { display: flex; justify-content: flex-end; margin: 16px 0 0; }
.scan-sample a, .scan-full-link { color: var(--text-2); text-decoration: underline; text-decoration-color: #ffffff4d; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.scan-sample a:hover, .scan-full-link:hover { color: var(--text-1); text-decoration-color: var(--text-1); }

.scan-side { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
.scan-full-link { font-size: 14px; width: max-content; }
/* After a preview: "See more" opens the full scanner deep-linked to the scanned wallet;
   "Scan another wallet" hides the result and brings the form back (js/wallet-scan.js). */
.scan-see-more { width: 100%; margin-top: 16px; }
.scan-again { display: block; margin: 14px auto 0; padding: 4px; border: 0; background: none; font-size: 13px; color: var(--text-3); text-decoration: underline; text-decoration-color: #ffffff4d; text-underline-offset: 4px; }
.scan-again:hover { color: var(--text-1); }
.scan-result-summary { font-size: 13px; color: var(--text-3); margin: 0 0 14px; }
.scan-result-summary b { font: 500 13px var(--mono); color: var(--text-1); }
.scan-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; border: 1px solid #fff2; border-radius: var(--r); overflow: hidden; background: #fff1; }
.scan-result-grid > div { background: var(--canvas); padding: 16px; min-width: 0; }
.scan-result-grid .scan-result-primary { grid-column: 1 / -1; }
.scan-result-grid dt { font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); margin-bottom: 8px; }
.scan-result-grid dd { margin: 0; font-size: 24px; letter-spacing: -.03em; color: var(--text-1); }
.scan-result-primary dd { font-size: 40px; line-height: 1; }
.scan-result-primary dd small { font-size: 14px; color: var(--text-4); margin-left: 4px; }
.scan-result-primary .scan-result-meta { font-size: 13px; line-height: 1.5; letter-spacing: 0; color: var(--text-3); margin: 10px 0 0; }

/* Desktop: the submit button sits on the input's row instead of a full-width bar, and
   the result spreads into one row of stats with its actions underneath. */
@media (min-width: 901px) {
  .scan-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .scan-form > * { grid-column: 1 / -1; }
  .scan-form input { grid-row: 2; grid-column: 1; }
  .scan-form .button { grid-row: 2; grid-column: 2; width: auto; margin-top: 0; padding-inline: 28px; }
  .scan-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
  .scan-result > * { grid-column: 1 / -1; }
  .scan-result-grid { grid-template-columns: 2fr repeat(3, 1fr); }
  .scan-result-grid .scan-result-primary { grid-column: auto; }
  .scan-see-more { grid-row: 3; grid-column: 2; width: auto; padding-inline: 28px; }
  .scan-again { grid-row: 3; grid-column: 1; justify-self: start; margin: 16px 0 0; padding: 4px 0; }
}
@media (max-width: 900px) {
  .scan-band { grid-template-columns: 1fr; gap: 28px; }
  .scan-band-cta { align-items: flex-start; }
  /* minmax(0, …) so a child's min-content (the nowrap submit label) cannot
     stretch the single column past the card's content box. */
  .scan-panel-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .scan-band { padding: 24px; }
  .scan-panel-grid { margin: 0 24px; padding: 24px 0; }
  .scan-band-cta, .scan-band-cta .button { width: 100%; min-width: 0; }
  /* Phone: drop the helper sentence, the "No address handy?" prompt and the
     full-scanner link — they only cost vertical space and blow the column out.
     "Try a sample" stays, right-aligned under the field. */
  .scan-help, .scan-sample span, .scan-meta { display: none; }
  .scan-help-row { justify-content: flex-end; }
  /* The submit label is an <span>, so theme.css's ` .button span `
     {font-size:17px;line-height:.6} outranks a bare class here (class+type) and
     held the button on one ~290px line. Match its specificity and undo both. */
  .scan-form .button { white-space: normal; }
  .scan-form .button span { font-size: 11px; line-height: 1.2; }
  .scan-result-grid dd { font-size: 20px; }
  .scan-result-grid > div { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-panel, .scan-panel-grid { transition: none; }
}

.faq-grid details { scroll-margin-top: 85px; }