/* =========================================================================
   STRAY — landing page
   Plain hand-written CSS. Square corners everywhere, no border-radius.
   All fonts self-hosted (brief §0). All motion gated on prefers-reduced-motion.
   ========================================================================= */

/* ----------------------------- Fonts (self-hosted) ----------------------- */
@font-face {
  font-family: "Anton";
  src: url("assets/fonts/anton-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* --------------------------------- Tokens -------------------------------- */
:root {
  --ink:      #07060C;
  --ink-2:    #0A0A0C;
  --text:     #FFFFFF;
  --muted:    rgba(255,255,255,0.62);
  --faint:    rgba(255,255,255,0.28);
  --yellow:   #FFC400;
  --magenta:  #E9008F;
  --cyan:     #00C2FF;

  --ease: cubic-bezier(.16,.9,.24,1);
  --sh-cyan:    8px 0 0 rgba(0,194,255,0.5);
  --sh-magenta: 8px 0 0 rgba(233,0,143,0.6);

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 64px);
}

/* --------------------------------- Reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: clip;            /* skew/translate must never scroll the page */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ------------------------------ Focus / skip ----------------------------- */
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--yellow); color: var(--ink);
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  letter-spacing: .12em; padding: 12px 18px; transition: top .15s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ------------------------------- Utilities ------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

.c-yellow  { color: var(--yellow); }
.c-cyan    { color: var(--cyan); }
.c-magenta { color: var(--magenta); }
.sh-cyan    { text-shadow: var(--sh-cyan); }
.sh-magenta { text-shadow: var(--sh-magenta); }

/* Display word: Anton, forced 400, uppercase, skewed, tight leading */
.dw {
  display: block;
  font-family: "Anton"; font-weight: 400;
  text-transform: uppercase;
  line-height: 0.8;
  transform: skewX(-10deg);
  transform-origin: left bottom;
}

.eyebrow {
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  font-size: clamp(14px, 1.4vw, 17px); letter-spacing: 0.3em; line-height: 1;
}
.eyebrow-cyan { color: var(--cyan); }
.eyebrow-ink  { color: var(--ink); }

/* --------------------------------- Buttons ------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 52px; padding: 14px 26px;
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: clamp(16px, 1.6vw, 19px);
  transform: skewX(-10deg);
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.btn > * { transform: skewX(10deg); }   /* un-skew the label */
.btn-sm { min-height: 48px; padding: 10px 18px; font-size: 15px; }

.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: #ffd23f; }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--text); }
.btn:hover { transform: skewX(-10deg) translateY(-2px); }

/* Store buttons stack two lines: platform on top, where to join underneath. */
.btn-store { flex-direction: column; gap: 2px; min-height: 64px; line-height: 1; }
.soon {
  font-family: "Archivo"; font-weight: 800; font-size: 11px;
  letter-spacing: .18em; opacity: .8;
}

/* ================================ HEADER ================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,6,12,0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; }
.brand-icon { width: 34px; height: 34px; }
.brand-word {
  font-family: "Anton"; font-weight: 400; font-size: 26px;
  text-transform: uppercase; letter-spacing: .02em;
  transform: skewX(-10deg);
}

.primary-nav ul { display: flex; align-items: center; gap: 6px; }
.primary-nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 16px;
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  font-size: 15px; letter-spacing: 0.2em; color: var(--muted);
  transition: color .15s var(--ease);
}
.primary-nav a:not(.btn):hover { color: var(--yellow); }

.nav-toggle {
  display: none;
  min-height: 48px; padding: 10px 16px;
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  letter-spacing: .2em; font-size: 15px; color: var(--text);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
}

/* ================================= HERO ================================== */
.hero { position: relative; overflow: clip; }
.hero::before, .hero::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  width: 60vw; height: 60vw; max-width: 780px; max-height: 780px;
}
.hero::before {   /* magenta glow, top-right */
  top: -18%; right: -12%;
  background: radial-gradient(circle, rgba(233,0,143,0.34), transparent 62%);
}
.hero::after {    /* cyan glow, bottom-left */
  bottom: -22%; left: -16%;
  background: radial-gradient(circle, rgba(0,194,255,0.26), transparent 62%);
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 96px);
}
.hero-copy { min-width: 0; }
.hero-eyebrow { margin-bottom: 22px; }

.hero-title {
  font-size: clamp(3.4rem, 13.2vw, 150px);
  margin-bottom: 30px;
}
.hero-title .dw { letter-spacing: .005em; }
.dw-2 { transform: translateX(min(30px, 5vw)) skewX(-10deg); }
.dw-3 { transform: translateX(min(8px, 1.5vw))  skewX(-10deg); }
.dw-4 { transform: translateX(min(38px, 6vw))  skewX(-10deg); }

.hero-body {
  font-family: "Archivo"; font-weight: 600; font-size: clamp(17px, 1.7vw, 19px);
  color: var(--text); max-width: 520px; margin-bottom: 30px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-figure { position: relative; align-self: stretch; min-height: 100%; }
.hero-figure picture { display: block; height: 100%; }
.hero-photo {
  width: 100%; height: 100%; min-height: 420px;
  object-fit: cover; object-position: center 30%; background: var(--ink-2);
}
.hero-overlay {
  position: absolute; left: -10px; bottom: 18px;
  display: flex; flex-direction: column; line-height: 0.78;
}
.hero-overlay span {
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  font-size: clamp(40px, 6vw, 74px); color: var(--yellow);
  transform: skewX(-10deg);
}

/* ================================ MARQUEE =============================== */
.marquee {
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: var(--ink-2);
  overflow: hidden;
}
.marquee-track { display: flex; width: max-content; }
.marquee-group {
  display: flex; align-items: center; flex: none;
  padding: 18px 0;
}
.mq, .dot {
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  font-size: 30px; line-height: 1; white-space: nowrap;
  padding-inline: 22px;
}
/* Brief token is 28% white; raised to 42% so this decorative (aria-hidden) band
   still clears WCAG large-text 3:1 and Lighthouse Accessibility 100 (brief §5/§7).
   Still reads as a faint background texture. */
.mq  { color: rgba(255,255,255,0.42); letter-spacing: .04em; }
.dot { font-size: 16px; padding-inline: 4px; }
.dot-m { color: var(--magenta); }
.dot-c { color: var(--cyan); }
.dot-y { color: var(--yellow); }

/* ============================= HOW IT WORKS ============================= */
.how { padding-block: clamp(64px, 9vw, 128px); }
.how-title {
  font-size: clamp(2.4rem, 9vw, 96px); line-height: 0.82;
  margin: 14px 0 clamp(40px, 6vw, 72px);
}
.how-title .dw:nth-child(2) { transform: translateX(min(18px,3vw)) skewX(-8deg); }

/* list-style: none — the steps render their own big 01/02/03 via .step-num,
   so the browser's own "1." marker would show the number twice. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px);
  list-style: none; padding-left: 0; }
.step { position: relative; padding-top: 22px; }
.step::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px; }
.step-y::before { background: var(--yellow); }
.step-c::before { background: var(--cyan); }
.step-m::before { background: var(--magenta); }
.step-num {
  display: block; font-family: "Anton"; font-weight: 400; font-size: clamp(48px, 6vw, 72px);
  color: rgba(255,255,255,0.42);   /* faded, but clears large-text 3:1 (see .mq note) */
  line-height: 1; transform: skewX(-8deg); transform-origin: left;
}
.step-title {
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 3vw, 34px); letter-spacing: .01em;
  margin: 10px 0 12px; transform: skewX(-8deg); transform-origin: left;
}
.step-body { color: var(--muted); font-size: 16px; max-width: 34ch; }

/* ============================= PHONE MOCKUPS =========================== */
.mocks {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(48px, 7vw, 96px);
}
.mock-frame {
  position: relative; container-type: inline-size;
  width: 100%; aspect-ratio: 393 / 852;      /* reserve box → no layout shift */
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
  overflow: hidden;
}
/* Real screenshot filling a mock frame, in place of a drawn .mock */
.mock-shot {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
/* ================================ PRIVACY =============================== */
.privacy { background: var(--yellow); color: var(--ink); padding-block: clamp(64px, 9vw, 128px); }
.privacy-title {
  font-size: clamp(3rem, 11vw, 112px); line-height: 0.82; margin: 14px 0 28px;
  /* Skew the block, not each line: the shear is measured from the last
     baseline, so every line above it steps further right and the stack leans
     as one slab. Skewing .dw individually (the default) pivots each line on
     its own corner, which leaves all four flush left and kills the cascade. */
  transform: skewX(-10deg);
  transform-origin: left bottom;
}
/* Slightly looser than the global .dw 0.8: the shear moves each line sideways
   as well as down, so lines that merely sit tight when upright collide once
   skewed. 0.87 keeps the stack dense without letting glyphs touch. */
.privacy-title .dw { transform: none; line-height: 0.87; }
.privacy-lead {
  font-family: "Archivo"; font-weight: 800; font-size: clamp(19px, 2.1vw, 22px);
  max-width: 620px; margin-bottom: clamp(36px, 5vw, 56px);
}
.deal-table { max-width: 900px; }
.deal-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 20px 0; border-bottom: 2px solid var(--ink);
}
.deal-row:first-child { border-top: 2px solid var(--ink); }
.deal-row dt {
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  font-size: clamp(18px, 2.6vw, 30px); letter-spacing: .02em;
  transform: skewX(-8deg); transform-origin: left;
}
/* Value: brand emphasis via a magenta underline rule, but the TEXT stays ink.
   Rationale: magenta #E9008F on yellow #FFC400 is only 2.7:1 — fails WCAG for
   meaningful text (brief §5 overrides §3.6's "magenta value"). Ink passes; the
   magenta rule keeps the accent. */
.deal-row dd {
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  font-size: clamp(18px, 2.6vw, 30px); letter-spacing: .02em;
  text-align: right; color: var(--ink);
  box-shadow: inset 0 -6px 0 var(--magenta);
  transform: skewX(-8deg); transform-origin: right;
}

/* ================================ GET STRAY ============================= */
.get { position: relative; overflow: clip; padding-block: clamp(72px, 10vw, 140px); text-align: center; }
.get::before {
  content: ""; position: absolute; z-index: 0; left: 50%; bottom: -30%;
  width: 90vw; height: 60vw; max-width: 900px; max-height: 620px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,194,255,0.28), transparent 62%);
  pointer-events: none;
}
.get-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.get-icon { width: 96px; height: 96px; margin-bottom: 22px; }
.get-title { font-size: clamp(3.2rem, 12vw, 120px); line-height: 0.8; }
.get-title .dw { text-align: center; transform-origin: center; }
.get-sub {
  font-family: "Archivo"; font-weight: 600; font-size: clamp(17px, 1.9vw, 20px);
  color: var(--muted); margin: 26px 0 34px; max-width: 560px;
}
.get-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ================================= FOOTER ============================== */
.site-footer { border-top: 1px solid rgba(255,255,255,0.08); padding-block: 34px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer-brand {
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); transform: skewX(-8deg);
}
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
.footer-nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 16px;
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  font-size: 14px; letter-spacing: .2em; color: var(--muted);
}
.footer-nav a:hover { color: var(--yellow); }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
  .hero-photo { min-height: 46vh; max-height: 62vh; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .mocks { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .primary-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(7,6,12,0.96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .site-header { position: sticky; }
  .header-inner { position: relative; }
  .nav-toggle[aria-expanded="true"] ~ .primary-nav { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 10px var(--pad) 18px; }
  .primary-nav li { border-top: 1px solid rgba(255,255,255,0.08); }
  .primary-nav .btn { margin-top: 14px; width: 100%; }
}

/* The legal pages carry no JS by design, so their nav has no toggle to hide
   behind — it has to fit by wrapping instead. `.header-inner` is a no-wrap
   flex row, so brand + nav had to share one line, and at 360px that leaves
   roughly 174px for a nav needing far more: the last item ran off the edge.
   That was true with three items and only became obvious with four.

   Safe to apply to both navs: below 820px `.primary-nav` is `display: none`
   until the toggle opens it, so it is out of flow here and wrapping the row
   changes nothing on the landing page. */
@media (max-width: 700px) {
  .header-inner { flex-wrap: wrap; row-gap: 2px; }
  .legal-nav { width: 100%; }
  .legal-nav a { padding: 8px 10px; letter-spacing: .1em; }
}

@media (max-width: 560px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .hero-overlay { left: 0; }
}

/* ============================= FORCED COLORS ============================ */
@media (forced-colors: active) {
  .btn-ghost { border: 2px solid currentColor; }
  .step::before, .deal-row dd { forced-color-adjust: none; }
}

/* =============================== MOTION ================================= */
/* Everything animated lives here → reduced-motion users get none of it. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes wIn    { from { translate: -80px 0; opacity: 0 } to { translate: 0 0; opacity: 1 } }
  @keyframes wUp    { from { translate: 0 40px;  opacity: 0 } to { translate: 0 0; opacity: 1 } }
  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
  @keyframes marq   { from { transform: translateX(0) } to { transform: translateX(-50%) } }

  .hero-eyebrow { animation: wUp .5s var(--ease) both; }
  .hero-title .dw { animation: wIn .5s var(--ease) both; }
  .hero-title .dw-1 { animation-delay: .10s; }
  .hero-title .dw-2 { animation-delay: .20s; }
  .hero-title .dw-3 { animation-delay: .30s; }
  .hero-title .dw-4 { animation-delay: .40s; }
  .hero-body    { animation: wUp .5s var(--ease) .45s both; }
  .hero-actions { animation: wUp .5s var(--ease) .55s both; }
  .hero-figure  { animation: fadeIn .7s var(--ease) .2s both; }

  .marquee-track { animation: marq 32s linear infinite; }
}

/* Reduced motion: a quiet 150ms fade instead of movement; marquee is dead still. */
@media (prefers-reduced-motion: reduce) {
  @keyframes fadeInRM { from { opacity: 0 } to { opacity: 1 } }
  .hero-eyebrow, .hero-title .dw, .hero-body, .hero-actions, .hero-figure {
    animation: fadeInRM .15s ease both;
  }
}

/* ============================ LEGAL PAGES ==============================
   Long-form text (privacy.html). Same tokens and type as the marketing page,
   but measured for reading: ~68ch line length and a calmer heading scale.
   No JS on these pages, so the nav here is always visible rather than
   toggled. */
.legal-nav ul { display: flex; flex-wrap: wrap; gap: 2px; }
.legal-nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 8px 12px;
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  font-size: 13px; letter-spacing: .16em; color: var(--muted);
}
.legal-nav a:hover { color: var(--yellow); }

.legal-head { padding-block: clamp(48px, 7vw, 96px) clamp(24px, 3vw, 40px); }
.legal-title {
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  font-size: clamp(3rem, 9vw, 92px); line-height: .84; margin: 12px 0 20px;
}
.legal-title .dw:nth-child(even) { transform: translateX(min(14px,2.2vw)) skewX(-8deg); }
.legal-updated {
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  letter-spacing: .16em; font-size: 15px; color: var(--muted);
}

.legal { padding-bottom: clamp(64px, 9vw, 120px); }
.legal-wrap { max-width: 76ch; }
.legal h2 {
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  font-size: clamp(24px, 3.4vw, 38px); line-height: 1.05; letter-spacing: .01em;
  transform: skewX(-8deg); transform-origin: left;
  margin: clamp(40px, 5vw, 64px) 0 16px;
  padding-top: 18px; border-top: 2px solid rgba(255,255,255,0.12);
}
/* Question headings inside a section — quieter than h2, no rule above. */
.legal h3 {
  font-family: "Archivo"; font-weight: 800; color: var(--text);
  font-size: clamp(17px, 1.9vw, 20px); line-height: 1.3;
  margin: clamp(28px, 3.2vw, 38px) 0 10px;
}
.legal p, .legal li {
  font-size: clamp(16px, 1.7vw, 18px); line-height: 1.65; color: var(--muted);
  margin-bottom: 14px;
}
.legal strong { color: var(--text); font-weight: 600; }
.legal ul { padding-left: 1.15em; margin-bottom: 18px; }
.legal li { margin-bottom: 10px; }
.legal li::marker { color: var(--cyan); }
.legal a { color: var(--cyan); text-underline-offset: 3px; text-decoration: underline; }
.legal a:hover { color: var(--yellow); }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; color: var(--text);
  background: rgba(255,255,255,0.07); padding: .1em .38em; border-radius: 2px;
}

/* The headline claim, set louder than the body around it. */
.legal-lead {
  font-family: "Archivo"; font-weight: 800;
  font-size: clamp(19px, 2.2vw, 24px) !important;
  line-height: 1.4 !important; color: var(--text) !important;
}
/* An aside the reader should not skim past. */
.legal-note {
  border-left: 3px solid var(--magenta); padding: 4px 0 4px 16px;
  color: var(--text) !important;
}

.legal-tablewrap { overflow-x: auto; margin-bottom: 20px; }
.legal-table { width: 100%; border-collapse: collapse; text-align: left; }
.legal-table th, .legal-table td {
  padding: 14px 16px 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: clamp(15px, 1.6vw, 17px); line-height: 1.5; vertical-align: top;
}
.legal-table thead th {
  font-family: "Anton"; font-weight: 400; text-transform: uppercase;
  /* --muted, not --faint: at 13px these are meaningful column labels and
     --faint (28% white) is only 2.36:1 against the ink background. */
  letter-spacing: .12em; font-size: 13px; color: var(--muted);
  border-bottom: 2px solid rgba(255,255,255,0.2);
}
.legal-table tbody th { color: var(--text); font-weight: 600; padding-right: 28px; }
.legal-table tbody td { color: var(--muted); }

/* ============================ ALSO FROM GRUNT ============================ */
/* The sibling-product strip above the footer. Deliberately quiet: one band,
   one line of type and a ghost button, so it reads as a footnote to the page
   rather than a second call to action competing with "Go Get Lost". */
.sibling {
  border-top: 1px solid rgba(255,255,255,0.12);
  background: var(--ink-2);
  padding-block: clamp(36px, 5vw, 60px);
}
/* Framed, for the same reason the root page's app cards are: every screen
   above this point sits in a hairline phone frame, and Loud then arrived as
   loose copy on a band with no edge — so the block that presents the OTHER app
   was the only thing on the page not visibly delimited. A hairline box, not a
   panel: this is still a footnote, and the comment above still governs. */
.sibling-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 24px 40px;
  border: 1px solid rgba(255,255,255,0.12);
  padding: clamp(24px, 3.2vw, 38px);
}
.sibling-copy { flex: 1 1 420px; }
.sibling-title {
  margin-top: 12px;
  font-size: clamp(38px, 5.4vw, 66px); font-weight: 400;
}
.sibling-tag {
  margin-top: 12px;
  font-family: "Archivo"; font-weight: 800;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text);
}
.sibling-body { margin-top: 10px; max-width: 54ch; color: var(--muted); }
.sibling-btn { flex: 0 0 auto; }