/* ==========================================================================
   SOUNDSMATCH SHARED PRIMITIVES
   Extracted from the approved homepage and used verbatim by the marketing
   site, the holding page, the consumer app and the operator console. The
   block between the BEGIN and END markers is identical in every surface:
   edit it in one place and copy it, or the surfaces drift and nobody
   notices until two pages sit side by side.

   What is here: tokens, type scale, status colours, buttons, form
   controls, cards, pills, tables, header and footer. What is not here:
   layout. A marketing page, a scan form and an operator console want
   different densities, and each applies its own on top.
   ========================================================================== */
/* SOUNDSMATCH-SHARED-BEGIN */
:root{
  /* Refined palette. Warm paper, near-black ink, deep green for dark
     surfaces, and an acid lime kept scarce. */
  --paper:#F7F6F1; --ink:#12160F; --soft:#626A61; --deep:#142820;
  --acid:#C6F24E; --rule:#DADDD4; --panel:#EEF0E9; --white:#FFFFFF;
  --bar:#E4EADD;

  /* One semantic issue system across marketing, consumer and operator
     surfaces. Lime is the brand and never a state: if healthy were lime,
     every good row would shout as loudly as the call to action. */
  --status-ok:#2F8A62;        /* collecting, on file, accepted */
  --status-warning:#D49B24;   /* partial, needs attention */
  --status-error:#D85B4A;     /* unclaimed, missing, refused */
  --status-info:#4678C8;      /* not linked: a relationship, not a fault */
  --status-review:#7A728C;    /* waiting for a person */
  --stamp:#D85B4A;

  /* 4/8 spacing scale. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px;

  /* Restrained corners. */
  --r-ui:9px; --r-card:17px; --r-pill:999px;
}

*{box-sizing:border-box}

/* ---------- type ---------- */
h1,h2,h3{margin:0 0 var(--s4);font-weight:600}
h1{font-size:clamp(56px,5.4vw,74px);line-height:1.0;letter-spacing:-.035em}
h2{font-size:clamp(38px,3.6vw,48px);line-height:1.05;letter-spacing:-.028em}
h3{font-size:19px;letter-spacing:-.012em}
.mono{font-family:"IBM Plex Mono",monospace}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin:0}
.lede{font-size:clamp(17px,1.35vw,19.5px);line-height:1.55;color:var(--soft);
  max-width:58ch}
.small{font-size:15px;line-height:1.55;color:var(--soft)}
.hint{font-size:14.5px;color:var(--soft);line-height:1.5}

/* ---------- buttons ---------- */
.btn,button{font-family:inherit;font-size:16px;line-height:1;font-weight:500;
  padding:15px 28px;min-height:48px;border-radius:var(--r-pill);
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease,
    background-color .15s ease, border-color .15s ease}
.btn.acid,button.acid{background:var(--acid);border-color:var(--acid);
  color:var(--ink)}
.btn.ghost,button.ghost{background:transparent;color:var(--ink);
  border-color:var(--rule)}
.btn.ghost:hover,button.ghost:hover{border-color:var(--ink)}
.btn.danger,button.danger{background:transparent;color:var(--status-error);
  border-color:var(--status-error)}
.btn.danger:hover,button.danger:hover{background:rgba(216,91,74,.07)}
.btn:hover,button:hover{transform:translateY(-1px)}
.btn:active,button:active{transform:translateY(0)}

/* ---------- form controls ---------- */
/* 16px or iOS zooms the page on focus. Mono is for identifiers only: a
   name typed into a monospace box reads as a terminal prompt. */
textarea,input[type=text],input[type=email],input[type=search],select{
  width:100%;border:1px solid var(--rule);border-radius:var(--r-ui);
  background:var(--paper);padding:14px 13px;color:var(--ink);min-height:50px;
  font:16px/1.4 "General Sans","Instrument Sans",-apple-system,sans-serif}
textarea,input.mono{font-family:"IBM Plex Mono",monospace}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--ink);
  background:var(--white)}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(198,242,78,.75);outline-offset:2px;
  border-color:var(--ink)}
label{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
  margin-bottom:8px}

/* ---------- cards ---------- */
.card{border:1px solid var(--rule);background:var(--white);
  border-radius:var(--r-card);padding:var(--s6)}

/* ---------- status pills: one system everywhere ---------- */
.pill{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);
  font-size:11.5px;letter-spacing:.03em;white-space:nowrap}
.pill.green{background:rgba(47,138,98,.10);color:var(--status-ok)}
.pill.amber{background:rgba(212,155,36,.12);color:#8A6D1F}
.pill.red{background:rgba(216,91,74,.10);color:var(--status-error)}
.pill.blue{background:rgba(70,120,200,.10);color:var(--status-info)}
.pill.review{background:rgba(122,114,140,.10);color:var(--status-review)}

/* Handling: machines reconcile data, people judge rights. */
.handling{display:inline-block;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap}
.handling.auto{color:var(--status-info);background:rgba(70,120,200,.10)}
.handling.human{color:var(--status-review);background:rgba(122,114,140,.12)}

/* ---------- notices ---------- */
/* A refusal is where somebody learns their scan did not run. It gets a
   surface rather than a hairline. */
.err{margin-top:var(--s5);padding:14px 18px;border-radius:var(--r-ui);
  color:var(--status-error);background:rgba(216,91,74,.07);
  border:1px solid rgba(216,91,74,.28);max-width:72ch;line-height:1.5}
.err.ok{color:var(--status-ok);background:rgba(47,138,98,.07);
  border-color:rgba(47,138,98,.3)}

/* ---------- the catalogue audit component ---------- */
/* The homepage hero shows a small one; the consumer results page is the
   same component with every row in it. One set of rules, so the thing a
   visitor was sold is the thing they are handed. */
.audit{background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-card);overflow:hidden}
.audit-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s4);padding:var(--s5);border-bottom:1px solid var(--rule);
  background:var(--panel)}
.audit-title{font-weight:600}
.audit-meta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  color:var(--soft);letter-spacing:.04em}
.audit-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);
  padding:var(--s5);border-bottom:1px solid var(--rule)}
.audit-stats b{display:block;font-family:"IBM Plex Mono",monospace;
  font-size:22px;letter-spacing:-.02em}
.audit-stats span{font-size:12px;color:var(--soft);line-height:1.35;
  display:block;margin-top:2px}
.audit-table{width:100%;border-collapse:collapse;font-size:14.5px}
.audit-table th{text-align:left;font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);font-weight:500;padding:var(--s4) var(--s5) var(--s2)}
.audit-table td{padding:var(--s3) var(--s5);border-top:1px solid var(--panel);
  vertical-align:middle}
.audit-table .song{display:block;font-size:14.5px}
.audit-table .id{display:block;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;color:var(--soft);margin-top:1px}
.audit-table tbody tr{transition:background-color .15s ease}
.audit-table tbody tr:hover{background:rgba(238,240,233,.55)}
.audit-foot{padding:var(--s4) var(--s5);border-top:1px solid var(--rule);
  font-size:14.5px;line-height:1.5;color:var(--soft);background:var(--panel)}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--rule);background:var(--paper)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--ink)}
.brand-text{display:flex;flex-direction:column}
.brand-text b{font-size:17px;font-weight:700;letter-spacing:.055em}
.brand .tag{font-size:11.5px;color:var(--soft);font-weight:400;
  letter-spacing:0;display:block;margin-top:2px}

/* ---------- footer ---------- */
footer{background:var(--deep);color:rgba(247,246,241,.66);
  padding:var(--s7) 0 var(--s5);font-size:13.5px}
footer a{color:rgba(247,246,241,.85);text-decoration:none}
footer a:hover{color:var(--acid)}
footer .heart{color:var(--acid)}
.foot-top{display:flex;justify-content:space-between;gap:var(--s7);
  flex-wrap:wrap}
.foot-mark{display:flex;flex-direction:column;gap:var(--s3);max-width:32ch}
.foot-mark b{font-size:17px;font-weight:700;letter-spacing:.055em;
  color:var(--paper)}
.foot-cols{display:flex;gap:var(--s8);flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:var(--s3);min-width:104px}
.foot-col b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,246,241,.42);font-weight:500;margin-bottom:var(--s1)}
.foot-end{display:flex;justify-content:space-between;gap:var(--s5);
  flex-wrap:wrap;align-items:baseline;margin-top:var(--s7);
  padding-top:var(--s5);border-top:1px solid rgba(247,246,241,.14)}

@media(max-width:620px){
  .audit-stats{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .audit-head{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  .foot-cols{gap:var(--s6)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;
    animation-duration:.01ms !important;scroll-behavior:auto !important}
  .btn:hover,button:hover{transform:none}
}
@media(max-width:620px){
  /* Four columns will not fit a phone. The secondary registry column goes
     and its pill travels with the row it belongs to, rather than the whole
     table being squeezed into something nobody can read. */
  .audit-table th:nth-child(3),.audit-table td:nth-child(3){display:none}
  .audit-table th,.audit-table td{padding-left:var(--s4);
    padding-right:var(--s4)}
  .audit-head,.audit-stats,.audit-foot{padding-left:var(--s4);
    padding-right:var(--s4)}
}
/* SOUNDSMATCH-SHARED-END */


/* ===== marketing site: layout on top of the shared layer ===== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap');

html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.55 "General Sans","Instrument Sans",-apple-system,
    BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.mono{font-family:"IBM Plex Mono",monospace}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-family:"Instrument Sans",sans-serif;font-weight:700;
  letter-spacing:-.02em;line-height:1.02}
h1{font-size:clamp(42px,6.6vw,86px);font-weight:700;letter-spacing:-.035em}
h2{font-size:clamp(30px,4.2vw,54px);font-weight:700;letter-spacing:-.03em}
h3{font-size:21px;letter-spacing:-.018em;line-height:1.2}
p{margin:0 0 18px}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--soft);max-width:56ch}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--soft)}
.small{font-size:14.5px;color:var(--soft);line-height:1.5}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:rgba(247,246,241,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
header .wrap{display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:26px;height:26px}
.brand b{font-size:17px;letter-spacing:.06em;font-weight:600;display:block;
  line-height:1.1}
.brand .tag{font-size:11.5px;color:var(--soft);font-weight:400;
  letter-spacing:0;display:block;margin-top:2px}
.brand-text{display:flex;flex-direction:column}
nav{display:flex;align-items:center;gap:26px;font-size:15px}
/* The nav label is one phrase split by a span for the short mobile form.
   A flex item is blockified whatever its display, so the button's gap was
   landing in the middle of the words: the spacing lives in the text. */
nav a.btn{gap:0}
nav a{text-decoration:none;color:var(--soft)}
nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--paper);padding:15px 28px;border:0;
  text-decoration:none;font-size:16px;font-weight:500;cursor:pointer;
  border-radius:100px;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.acid{background:var(--acid);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.sm{padding:10px 20px;font-size:14.5px}

/* ---------- hero ---------- */
/* The hero card is a preview, not the document: tighter cells than the
   results page so all four columns fit beside the headline. */
.hero .audit-head,.hero .audit-stats,.hero .audit-foot{padding:var(--s4)}
.hero .audit-table th,.hero .audit-table td{padding-left:var(--s4);
  padding-right:var(--s4)}
.hero .audit-stats{grid-template-columns:repeat(3,1fr)}
.hero .audit-table{font-size:14.5px}
.hero .audit-table .song{font-size:14.5px}
@media(max-width:1080px){
  /* below the two-column hero the card is full width again and all four
     columns fit; between them it is narrower than the page, so the
     secondary registry drops as it does on a phone */
  .hero .audit-table th:nth-child(3),.hero .audit-table td:nth-child(3){
    display:none}
}
.audit-table .act{color:var(--soft);white-space:nowrap}
.hero{padding:70px 0 0;position:relative;overflow:hidden}

.hero h1{margin-bottom:26px;line-height:1.16}
.hero h1 em{font-style:normal;display:inline-block;background:var(--acid);
  padding:.10em .18em .14em;border-radius:10px;line-height:1;
  margin-top:.14em;transform:rotate(-.5deg)}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:end}
.checkcard{background:#fff;border-radius:18px;padding:26px;
  box-shadow:0 20px 50px -24px rgba(18,22,15,.28)}
.checkcard label{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--soft);display:block;
  margin:0 0 7px}
.checkcard input{width:100%;border:1px solid var(--rule);border-radius:10px;
  padding:14px 15px;font:15px "Instrument Sans",sans-serif;margin-bottom:14px;
  background:var(--paper)}
.checkcard input:focus{outline:2px solid var(--acid);outline-offset:1px}
.checkcard .btn{width:100%}

.hero-photo{margin-top:64px;margin-bottom:16px;border-radius:22px;overflow:hidden;height:340px;
  background:linear-gradient(120deg,var(--deep),#2E5647 60%,var(--acid));
  background-size:cover;background-position:center 40%;position:relative}
.hero-photo .credit{position:absolute;right:14px;bottom:12px;color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:10px;opacity:.6}


/* ---------- sections ---------- */
section{padding:100px 0}
section.tint{background:linear-gradient(180deg,var(--panel),var(--paper))}
.section-head{max-width:62ch;margin-bottom:48px}
.section-head h2{margin-bottom:18px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border-radius:18px;padding:34px 30px;
  border:1px solid var(--rule)}
.card .n{font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.16em;color:var(--soft);margin-bottom:20px}
.card h3{margin-bottom:10px}
.card.hi{background:var(--deep);color:var(--paper);border-color:var(--deep)}
.card.hi .n{color:var(--acid)}
.card.hi .small{color:rgba(245,243,238,.72)}

/* ---------- dark band ---------- */
.dark{background:var(--deep);color:var(--paper)}
.dark .lede,.dark .small{color:rgba(245,243,238,.72)}
.dark .eyebrow{color:var(--acid)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.report{background:#fff;color:var(--ink);border-radius:16px;padding:24px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.5)}
.report table{width:100%;border-collapse:collapse;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px}
.report th{text-align:left;font-weight:400;color:var(--soft);padding:0 8px 10px 0;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.report td{padding:11px 8px 11px 0;border-top:1px solid var(--rule)}
/* The five states the product actually reports, in the semantic colours
   rather than in the brand accent. A page where everything shouts in lime
   tells the reader nothing about which row matters. */

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.step-img{height:170px;border-radius:14px;margin-bottom:22px;
  background:var(--bar);background-size:cover;background-position:center}
.step .n{font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.16em;color:var(--soft);margin-bottom:8px}

/* ---------- tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tiers.four{grid-template-columns:repeat(4,1fr);gap:16px}
.tiers.four .tier{padding:26px 22px}
.tiers.four .tier ul{font-size:13.5px}
@media(max-width:1080px){.tiers.four{grid-template-columns:repeat(2,1fr)}}
.tier{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:32px}
.tier.feature{border:2px solid var(--ink)}
.tier .price{font-family:"IBM Plex Mono",monospace;font-size:15px;
  color:var(--soft);margin-bottom:16px}
.tier ul{margin:18px 0 0;padding-left:18px;font-size:14.5px;color:var(--soft)}
.tier li{margin-bottom:7px}

/* ---------- faq ---------- */
.faq details{border-top:1px solid var(--rule);padding:22px 0}
.faq summary{cursor:pointer;font-size:20px;font-weight:500;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"IBM Plex Mono",monospace;
  color:var(--soft);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:14px 0 0;color:var(--soft);max-width:70ch}

/* ---------- final ---------- */
.final{background:var(--deep);color:var(--paper);text-align:center;padding:var(--s8) 0}
.final h2{margin-bottom:20px}
/* The deep green rather than near-black: the footer is the one place the
   brand gets a whole surface, and it should read as considered rather than
   as the page running out. Two bands, matching the app's own footer. */
footer{background:var(--deep);color:rgba(247,246,241,.66);padding:var(--s7) 0 var(--s5);
  font-size:13.5px}
footer .heart{color:var(--acid)}
footer a{color:rgba(247,246,241,.85);text-decoration:none}
footer a:hover{color:var(--acid)}
footer .wrap{display:block}
.foot-top{display:flex;justify-content:space-between;gap:var(--s7);flex-wrap:wrap}
.foot-mark{display:flex;flex-direction:column;gap:var(--s3);max-width:32ch}
.foot-mark b{font-family:"Instrument Sans",sans-serif;font-size:17px;
  font-weight:700;letter-spacing:.055em;color:var(--paper)}
.foot-cols{display:flex;gap:var(--s8);flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:var(--s3);min-width:104px}
.foot-col b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,246,241,.42);font-weight:500;margin-bottom:var(--s1)}
.foot-end{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  align-items:baseline;margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid rgba(247,246,241,.14)}
@media(max-width:640px){
  .foot-cols{gap:var(--s6)}
  .foot-top{gap:var(--s6)}
}

@media(max-width:940px){
  .hero-grid,.split{grid-template-columns:1fr;gap:36px}
  .cards,.steps,.tiers{grid-template-columns:1fr}
  section{padding:70px 0}
  nav a:not(.btn){display:none}
}

/* ---------- trust strip ---------- */
.trust{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:#fff}
.trust .wrap{display:flex;gap:38px;flex-wrap:wrap;padding-top:20px;
  padding-bottom:20px;justify-content:space-between}
.trust div{display:flex;align-items:center;gap:9px;font-size:15px}
.trust .tick{width:18px;height:18px;border-radius:50%;background:var(--acid);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.trust .tick svg{width:10px;height:10px}

/* ---------- flow diagram ---------- */
.flowbox{background:#fff;border-radius:20px;padding:38px 34px;
  border:1px solid var(--rule)}
.flowrow{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
.fnode{flex:1;min-width:132px;border-radius:14px;padding:20px 18px;
  background:var(--bar);position:relative}
.fnode .t{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
  margin-bottom:9px}
.fnode .v{font-size:16px;line-height:1.32;font-weight:500}
.fnode.stop{background:var(--deep);color:var(--paper)}
.fnode.stop .t{color:var(--acid)}
.fnode.warn{background:var(--stamp);color:#fff}
.fnode.warn .t{color:rgba(255,255,255,.8)}
.farrow{align-self:center;color:var(--rule);font-size:20px;flex:none}

/* ---------- comparison ---------- */
.cmp{width:100%;border-collapse:collapse;background:#fff;
  border-radius:16px;overflow:hidden;font-size:15px}
.cmp th,.cmp td{padding:16px 18px;text-align:left;
  border-bottom:1px solid var(--rule)}
.cmp thead th{background:var(--deep);color:var(--paper);font-weight:500;
  font-size:13.5px;letter-spacing:.02em}
.cmp thead th.us{background:var(--acid);color:var(--ink);font-weight:600}
.cmp td.us{background:rgba(198,242,78,.07);font-weight:500}
.cmp tbody th{font-weight:400;color:var(--soft);font-size:14.5px}
.cmp .yes{color:var(--status-ok);font-weight:500}
.cmp .no{color:var(--soft)}
.cmpwrap{overflow-x:auto;border-radius:16px;border:1px solid var(--rule)}

/* ---------- numbered faq ---------- */
.faq summary .qn{font-family:"IBM Plex Mono",monospace;font-size:13px;
  color:var(--soft);margin-right:14px}

/* ---------- institutions ---------- */
.orgs{padding:56px 0 8px}
.orgs .lbl{text-align:center;margin-bottom:30px}
.orglist{display:flex;flex-wrap:wrap;gap:56px;justify-content:center;
  align-items:center}
/* Sized by optical weight rather than pixel height: a wordmark and a roundel
   set to the same height do not read as the same size. */
.orglist img{height:23px;width:auto;opacity:.42;filter:grayscale(1) contrast(.9);
  transition:opacity .2s ease}
.orglist img.tall{height:26px}
.orglist img.sq{height:40px}
.orglist:hover img{opacity:.28}
.orglist img:hover{opacity:.72}
.orgnote{text-align:center;font-size:13px;color:var(--soft);margin:28px auto 0;
  max-width:52ch;line-height:1.5}

/* ---------- trust strip, quieter ---------- */
.trust{background:var(--ink)}
.trust .wrap{gap:26px;justify-content:space-between;padding-top:26px;
  padding-bottom:26px}
.trust div{font-size:15.5px;font-weight:500;color:var(--paper);gap:11px;
  letter-spacing:-.005em}
.trust .tick{width:21px;height:21px;background:var(--acid);border:0}
.trust .tick svg{width:11px;height:11px}
.trust .tick svg path{stroke:#12160F;stroke-width:2.4}

/* ---------- buttons keep their colour ---------- */
/* Written with enough specificity to beat page-level link rules such as
   .doc a{color:...}, which was turning black buttons black-on-black. */
a.btn,.doc a.btn,nav a.btn{color:var(--paper)}
a.btn.acid,.doc a.btn.acid,nav a.btn.acid{color:var(--ink)}
a.btn.ghost,.doc a.btn.ghost,nav a.btn.ghost{color:var(--ink)}

/* ---------- photography ---------- */
/* Monochrome on purpose. Colour photographs fight the acid accent and make
   the page look like stock; desaturating them lets one colour do the work.
   The MLC does the same thing with its own imagery. */
/* Photography in colour. The logo row stays desaturated on purpose, so it
   reads as plumbing rather than as sponsors. */
.hero-photo{filter:saturate(1.02) contrast(1.02)}
.photo{border-radius:18px;background-size:cover;background-position:center}

/* A tint of the brand green over the top, so the images belong to the page
   rather than sitting on it. */
.hero-photo::after,.photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,22,15,.06),rgba(18,22,15,.18));
  pointer-events:none}
.hero-photo,.photo{position:relative;overflow:hidden}

/* ---------- phones ---------- */
/* Nothing below 940px had been considered, and a quick check on a phone is
   exactly how somebody would first try this. */
@media(max-width:620px){
  .wrap{padding:0 20px}
  section{padding:56px 0}
  h1{font-size:clamp(34px,9vw,44px);letter-spacing:-.03em}
  h2{font-size:clamp(26px,7vw,32px)}
  .lede{font-size:17px}

  .hero{padding:40px 0 0}
  .hero-photo{height:200px;margin-top:36px}
  .checkcard{padding:20px}

  /* The trust strip reads as a list on a phone, not a row. Each line was
     centred on its own, which staggered the ticks down the page; the block
     is centred instead and the lines align to each other. */
  .trust .wrap{flex-direction:column;align-items:flex-start;gap:13px;
    padding-top:22px;padding-bottom:22px;width:fit-content;margin:0 auto}
  .trust div{font-size:15px;align-items:flex-start}
  .trust .tick{margin-top:1px}

  /* The header used to drop the tagline here, which cost the one line that
     says what the company does. It stays; the type shrinks and the call to
     action shortens instead, and the mark stays in line with the wordmark. */
  header .wrap{gap:var(--s3)}
  .brand svg{width:23px;height:23px}
  .brand-text b{font-size:15.5px;letter-spacing:.045em}
  .brand .tag{font-size:10.5px;line-height:1.25;margin-top:1px;
    white-space:nowrap}
  /* This button's label is one phrase split by a span, and a flex gap puts
   eight pixels in the middle of it. The spacing is in the text. */
nav a.btn{padding:11px 14px;font-size:14px;white-space:nowrap}
  nav a.btn .long{display:none}

  .orglist{gap:32px}
  .orglist img{height:19px}
  .orglist img.sq{height:32px}

  /* Four nodes side by side become four stacked cards. */
  .flowbox{padding:22px 18px}
  .flowrow{flex-direction:column;gap:10px}
  .farrow{transform:rotate(90deg);align-self:center;margin:-2px 0}

  .tiers,.tiers.four{grid-template-columns:1fr;gap:14px}
  .tiers.four .tier{padding:24px}

  /* A five-column table cannot fit. It scrolls, and says so. */
  .cmpwrap{position:relative}
  .cmp{min-width:660px;font-size:14px}
  .cmp th,.cmp td{padding:12px 14px}

  .faq summary{font-size:17px}
  .report{padding:18px}
  .report table{font-size:11.5px}

  .final{padding:70px 0}
  .btn{padding:14px 24px;font-size:15px}
  footer .wrap{flex-direction:column;gap:10px}
}

/* Scrolling tables need to announce themselves, or people assume the
   columns they cannot see do not exist. */
@media(max-width:760px){
  .cmpwrap::after{content:"Scroll sideways to see every column";
    display:block;font-size:12.5px;color:var(--soft);padding:10px 14px;
    border-top:1px solid var(--rule);background:var(--paper)}
}

/* ---------- 390px: the narrow iPhone band ---------- */
/* Named in the brief because it is where a design stops being a design and
   becomes a squeezed desktop. Nothing here hides content: type steps down,
   padding tightens, and rows that were side by side stack. */
@media(max-width:400px){
  .wrap{padding:0 18px}
  .lede{font-size:17px}
  .brand .tag{font-size:10px}
  .brand-text b{font-size:15px}
  nav a.btn{padding:10px 12px;font-size:13.5px}
  .checkcard{padding:20px 18px}
  .checkcard input{font-size:16px}   /* 16px or iOS zooms the page on focus */
  .btn{width:100%;justify-content:center;min-height:48px}
  nav a.btn{width:auto;min-height:0}
  .foot-cols{gap:var(--s5)}
  .report{font-size:11.5px}
}

/* ---------- released everywhere ---------- */
/* A restrained grid, not a wall. These say where the music went out, not
   who we work with, so they are small, grey-friendly and evenly spaced
   rather than presented as partner badges. */
.dspgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s7);
  align-items:center;justify-items:center;margin:var(--s5) 0}
.dspgrid img{max-height:26px;width:auto;opacity:.78}
@media(max-width:940px){.dspgrid{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
@media(max-width:400px){.dspgrid{grid-template-columns:repeat(2,1fr);gap:var(--s5)}
  .dspgrid img{max-height:22px}}

/* ---------- two sides of a song ---------- */
/* The alignment rule from the brief: a fixed media column and a flexible
   text column, so the text starts in the same place whatever width the
   logo happens to be. Letting the logo decide is what makes rows like
   these look accidental. */
:root{--service-media-width:132px}
.service-rows{display:grid;gap:var(--s5);margin-top:var(--s6)}
.service-row{display:grid;
  grid-template-columns:var(--service-media-width) minmax(0,1fr);
  align-items:start;gap:var(--s6);
  background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:var(--s6)}
.service-media{display:flex;align-items:center;justify-content:center;
  min-height:44px}
.service-media img{max-width:100%;max-height:44px;width:auto;height:auto}
.service-row h3{margin-bottom:var(--s3)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 0}
@media(max-width:620px){
  .service-row{grid-template-columns:1fr;gap:var(--s4);padding:var(--s5)}
  .service-media{justify-content:flex-start;min-height:0}
  .service-media img{max-height:34px}
}

/* ---------- five kinds of gap ---------- */
/* Five cards in a three-column grid leaves one stranded on its own row.
   A six-column track lets the first three take two each and the last two
   take three each, so both rows fill and the break looks chosen. */
/* Five across on a wide screen, which is the clearest reading of "five
   kinds of gap": one row, one glance. 224px a card holds six lines of the
   longest description, which I had assumed would be nine. Below that the
   row breaks in steps that keep both rows full. */
.findings{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4)}
.finding{background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:var(--s5)}
.finding .finding p{margin:0}
@media(max-width:1080px){
  /* six tracks: three of two, then two of three, so neither row is short */
  .findings{grid-template-columns:repeat(6,1fr)}
  .findings .finding:nth-child(-n+3){grid-column:span 2}
  .findings .finding:nth-child(n+4){grid-column:span 3}
}
@media(max-width:820px){
  .findings{grid-template-columns:repeat(2,1fr)}
  .findings .finding:nth-child(-n+3),
  .findings .finding:nth-child(n+4){grid-column:span 1}
  .findings .finding:nth-child(5){grid-column:span 2}
}
@media(max-width:620px){
  .findings{grid-template-columns:1fr}
  .findings .finding:nth-child(n){grid-column:span 1}
}

/* Optical sizing, one logo at a time. These lockups run from 2.98:1 to
   7.53:1, so a single height cap would leave TIDAL nearly three times the
   width of YouTube. Heights are tuned so each reads as the same weight,
   which is what "evenly spaced" actually means to the eye. */
.dspgrid img{max-height:none}
.dspgrid .d-spotify{height:23px}
.dspgrid .d-apple{height:22px}
.dspgrid .d-youtube{height:21px}
.dspgrid .d-amazon{height:20px}
.dspgrid .d-deezer{height:22px}
.dspgrid .d-tidal{height:15px}
@media(max-width:400px){
  .dspgrid .d-spotify{height:20px}.dspgrid .d-apple{height:19px}
  .dspgrid .d-youtube{height:18px}.dspgrid .d-amazon{height:17px}
  .dspgrid .d-deezer{height:19px}.dspgrid .d-tidal{height:13px}
}

/* ==========================================================================
   Launch homepage. Built to the corrected architecture rather than the old
   page restyled: hero with the product in it, rights map, findings, how it
   works, the matching differentiator, administration, pricing, scale, scope.
   ========================================================================== */

/* Desktop type was too timid at 1280 and up. These are the brief's ranges,
   and clamp() keeps them from shouting on a phone. */
h1{font-size:clamp(56px,5.4vw,74px);line-height:1.0;letter-spacing:-.035em}
h2{font-size:clamp(38px,3.6vw,48px);line-height:1.05;letter-spacing:-.028em}
h3{font-size:19px;letter-spacing:-.012em}
.lede{font-size:clamp(17px,1.35vw,19.5px);max-width:58ch}
section{padding:var(--s8) 0}
section.tint{padding:var(--s8) 0}
.wrap{max-width:1240px}
.section-head{max-width:64ch;margin-bottom:var(--s6)}
.section-head .eyebrow{margin-bottom:var(--s4)}
.section-head .lede{margin-top:var(--s5)}

/* ---------- hero ---------- */
.audit-table .act{color:var(--soft);white-space:nowrap}
.hero{padding:var(--s7) 0 var(--s8)}
/* 55/45 left the audit card too narrow for four columns and it clipped the
   action, which is the column that says what to do about any of it. */
.hero-grid{display:grid;grid-template-columns:50fr 50fr;gap:var(--s7);
  align-items:center}
.hero-copy .eyebrow{margin-bottom:var(--s5)}
/* the column width governs the wrap; a tighter measure stranded "stops"
   on a line of its own */
.hero h1{max-width:none}
.hero h1 em{font-style:normal;background:var(--acid);padding:0 .12em;
  border-radius:3px;display:inline-block}
.hero .lede{margin:var(--s5) 0 var(--s6)}
.scanbar{display:flex;gap:var(--s3);align-items:stretch}
.scanbar input{flex:1;min-width:0;border:1px solid var(--rule);
  border-radius:var(--r-pill);background:var(--white);padding:0 var(--s5);
  font:16px/1 "General Sans","Instrument Sans",sans-serif;color:var(--ink);
  min-height:54px}
.scanbar input:focus{outline:none;border-color:var(--ink)}
.scanbar .btn{min-height:54px;white-space:nowrap}
.scanbar + .small{margin-top:var(--s3)}

/* the product, standing in for the photograph that used to be here */

/* ---------- capability strip ---------- */
.strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--white)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);
  padding-top:var(--s5);padding-bottom:var(--s5)}
.strip b{display:block;font-size:15px;margin-bottom:var(--s1)}
.strip span{font-size:13.5px;color:var(--soft);line-height:1.45}

/* ---------- rights map ---------- */
.rightsmap{display:grid;gap:var(--s6)}
.released{background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:var(--s6) var(--s7)}
.released .lbl{margin-bottom:var(--s5)}
.released .orgnote{margin:var(--s5) 0 0;font-size:13px;color:var(--soft)}
.splitarrow{display:flex;align-items:center;gap:var(--s4);
  color:var(--soft);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace}
.sa-line{flex:1;height:1px;background:var(--rule)}
.rightscols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}

/* ---------- findings ---------- */
.finding p{margin:0;font-size:15.5px;color:var(--soft);line-height:1.6}
.finding.quiet{background:transparent;border-style:dashed}

/* ---------- how it works ---------- */
.steps4{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.steps4 li{background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:var(--s6)}
.steps4 .n{display:block;font-size:12px;letter-spacing:.16em;
  color:var(--soft);margin-bottom:var(--s5)}
.steps4 h3{margin-bottom:var(--s3)}
.steps4 p{margin:0}

/* ---------- matching, on the dark band ---------- */
section.dark{background:var(--deep);color:var(--paper);padding:var(--s8) 0}
section.dark h2{color:var(--paper)}
section.dark .lede{color:rgba(247,246,241,.76)}
section.dark .small{color:rgba(247,246,241,.6)}
section.dark .eyebrow{color:rgba(247,246,241,.5)}
section.dark h2 em{font-style:normal;color:var(--acid)}
.matchgrid .lede{margin-top:var(--s5)}
.matchgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);
  align-items:center}
.matchviz{display:grid;gap:var(--s3)}
.mv-node{border:1px solid rgba(247,246,241,.22);border-radius:var(--r-card);
  padding:var(--s5) var(--s6);display:grid;gap:var(--s1);
  background:rgba(247,246,241,.04)}
.mv-node b{font-size:11px;letter-spacing:.16em;color:rgba(247,246,241,.5);
  font-weight:500}
.mv-node .mono{font-size:15px}
.mv-node .dim{font-size:12.5px;color:rgba(247,246,241,.5)}
/* The break is the subject of the section, so it reads at a glance: a
   dashed rule running into a badge and out the other side, rather than a
   small tag floating between two boxes. */
.mv-gap{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0}
.mv-rule{flex:1;height:0;border-top:1px dashed rgba(216,91,74,.5)}
.mv-badge{font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--status-error);
  border:1px dashed rgba(216,91,74,.6);border-radius:var(--r-pill);
  padding:7px 18px;background:rgba(216,91,74,.08);white-space:nowrap}
.mv-node b{text-transform:uppercase}

/* ---------- active administration ---------- */
.admin{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);
  align-items:start}
/* The highlight belongs to the phrase, not to a section class: the last
   one moved and the emphasis silently became plain italic. Any h2 on a
   light section gets it; the dark section colours its own. */
section:not(.dark) h2 em{font-style:normal;background:var(--acid);
  padding:0 .1em;border-radius:3px}
.adminlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
.adminlist li{border-top:1px solid var(--rule);padding-top:var(--s4)}
.adminlist b{display:block;margin-bottom:var(--s2);font-size:15.5px}
.adminlist span{color:var(--soft);font-size:14.5px;line-height:1.5}

/* ---------- pricing ---------- */
.tiers3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);
  align-items:stretch}
.tiers3 .tier{background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:var(--s6);
  display:flex;flex-direction:column}
.tiers3 .tier.feature{border-color:var(--ink);box-shadow:0 26px 54px -44px
  rgba(20,40,32,.45)}
/* The report card is the conversion target and keeps the accent. The
   managed card is where the economics are, so it gets a role rather than
   a louder button: a badge, and the deep green border that marks the
   sections we treat as serious. */
.tiers3 .tier.managed{border-color:var(--deep)}
/* An empty badge row in the other two cards, so the prices, the names and
   the copy all start on the same line. Reserving the space is cheaper than
   three cards that nearly line up. */
.tiers3 .badge.empty{visibility:hidden}
.tiers3 .badge{display:inline-block;align-self:flex-start;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--deep);background:var(--panel);
  border-radius:var(--r-pill);padding:5px 11px;margin:0 0 var(--s4)}
.tiers3 .price{font-family:"IBM Plex Mono",monospace;font-size:30px;
  margin:0 0 var(--s3);letter-spacing:-.02em}
.tiers3 h3{margin-bottom:var(--s4)}
.tiers3 .small{flex:1;margin-bottom:var(--s6);font-size:15px;
  line-height:1.55}
/* the buttons sit on one baseline whatever the copy above them does */
.tiers3 .btn{width:100%}

/* ---------- large catalogues ---------- */
.bigcat{margin-top:calc(var(--s5) * -1);display:grid;
  grid-template-columns:1.1fr .9fr;gap:var(--s7);
  align-items:end;background:var(--panel);border-radius:var(--r-card);
  padding:var(--s7) var(--s6)}
.bigcat h2{margin-top:var(--s4)}
.bigcat .lede{margin-top:var(--s5)}
.bigcat-cta .btn{margin-top:var(--s5)}

/* ---------- scope ---------- */
.scope{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.scope-col{background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:var(--s5) var(--s6)}
.scope-col h3{margin-bottom:var(--s4)}
.scope-col ul{margin:0;padding-left:1.05em;color:var(--soft);font-size:15px;
  line-height:1.55}
.scope-col li{margin-bottom:var(--s3)}

/* ---------- final ---------- */
section.final{text-align:center;padding:var(--s8) 0}
section.final h2{color:var(--paper)}
section.final .lede{color:rgba(247,246,241,.75)}
section.final .scanbar input{background:rgba(247,246,241,.08);
  border-color:rgba(247,246,241,.28);color:var(--paper)}
section.final .scanbar input::placeholder{color:rgba(247,246,241,.5)}
section.final .lede{margin:var(--s5) auto var(--s6)}
.scanbar.wide{max-width:620px;margin:0 auto}

/* ---------- responsive: a composition per width, not a squeeze ---------- */
@media(max-width:1080px){
  h1{font-size:58px}
  h2{font-size:38px}
  .hero-grid{grid-template-columns:1fr;gap:var(--s7)}
  .steps4{grid-template-columns:repeat(2,1fr)}
  .strip .wrap{grid-template-columns:repeat(2,1fr);gap:var(--s5)}
  .matchgrid,.admin,.bigcat{grid-template-columns:1fr;gap:var(--s6)}
  .scope{grid-template-columns:1fr}
  .tiers3{grid-template-columns:1fr}
  section,section.tint,section.dark{padding:var(--s8) 0}
}
@media(max-width:760px){
  .rightscols{grid-template-columns:1fr}
  .findings{grid-template-columns:1fr}
}
@media(max-width:620px){
  h1{font-size:46px;letter-spacing:-.03em}
  h2{font-size:33px}
  .steps4{grid-template-columns:1fr}
  .released{padding:var(--s5)}
  .bigcat{padding:var(--s6) var(--s5)}
}
@media(max-width:400px){
  /* three columns in 354px: the identifier moves under the title and the
     cells lose their side padding rather than the table being cut off */
  .audit-table th,.audit-table td{padding-left:var(--s3);
    padding-right:var(--s3)}
  .audit-table .act{white-space:normal}
  .scanbar{flex-direction:column}
  .scanbar .btn{width:100%}
  .strip .wrap{grid-template-columns:1fr;gap:var(--s4)}
    section,section.tint,section.dark{padding:var(--s7) 0}
}


/* ---------- rights flow: two tracks, not one row feeding both ---------- */
/* The old layout put a single DSP row above both registries, which reads as
   Spotify paying SoundExchange. They are different plays on different
   services, so they get separate columns and separate arrows. */
/* Subgrid so the source block, the arrow and the registry block sit on the
   same three lines in both columns. Without it each card packs its own
   content and the two registries end up sixty pixels apart, which is the
   alignment axis the brief asks for. */
.flow{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);
  grid-template-rows:auto auto auto}
.track{background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:var(--s6) var(--s6) var(--s5);
  display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:0}
@supports not (grid-template-rows:subgrid){
  .track{display:flex;flex-direction:column}
  .track-src{min-height:118px}
}
.track-src .lbl{margin-bottom:var(--s4)}
.track-note{font-size:15px;color:var(--soft);line-height:1.55;margin:0;
  max-width:44ch}
.track .dspgrid{grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s4);
  margin:0}
.track-arrow{display:flex;align-items:center;gap:var(--s3);
  margin:var(--s5) 0;color:var(--soft)}
.track-arrow span{flex:1;height:1px;background:var(--rule)}
.track-arrow b{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.track-dest{display:grid;grid-template-columns:var(--service-media-width)
  minmax(0,1fr);gap:var(--s5);align-items:start}
.track-dest h3{margin-bottom:var(--s3);line-height:1.25}
.track-dest .side{display:block;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft);font-weight:500;
  font-family:"IBM Plex Mono",monospace;margin-top:var(--s1)}
.asks{margin:0;padding-left:1.05em;color:var(--soft);font-size:14.5px;
  line-height:1.55}
.asks li{margin-bottom:var(--s1)}
.track-dest .small{margin-top:var(--s4)}
#rights .orgnote{margin-top:var(--s5);font-size:14.5px;color:var(--soft)}

/* ---------- diagnosis to action ---------- */
/* A table rather than another card grid: the point is the pairing of a
   fault with one action, and rows carry that better than boxes. */
.actions{width:100%;border-collapse:collapse;margin-top:var(--s6)}
.actions th{text-align:left;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--soft);font-weight:500;padding:0 var(--s5) var(--s4) 0;
  border-bottom:1px solid var(--rule)}
.actions td{padding:var(--s4) var(--s5) var(--s4) 0;
  border-bottom:1px solid var(--rule);font-size:15px;vertical-align:middle}
.actions td:first-child{width:250px}
/* Two words repeated down a column is a paragraph pretending to be data.
   As badges the distinction reads in one pass: machines reconcile, people
   judge. */
.proof{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s6)}
.proof li{position:relative;padding-left:var(--s5);color:var(--soft);
  font-size:14.5px;line-height:1.5}
.proof li::before{content:"";position:absolute;left:0;top:.55em;width:7px;
  height:7px;border-radius:50%;background:var(--status-ok)}

/* ---------- pricing as a progression ---------- */
.tiers3 .price .once{font-family:"General Sans","Instrument Sans",sans-serif;
  font-size:13px;color:var(--soft);letter-spacing:0}
.tiers3 .purpose{margin:0 0 var(--s4);font-size:15px;color:var(--ink)}
.tiers3 .fineprint{font-size:14.5px;color:var(--soft);margin:0 0 var(--s5);
  line-height:1.5}

@media(max-width:940px){
  .flow{grid-template-columns:1fr;grid-template-rows:none}
  .track{grid-row:auto;display:flex;flex-direction:column}
  .track-src{min-height:0}
  .proof{grid-template-columns:1fr}
}
@media(max-width:620px){
  .track{padding:var(--s5)}
  .track-dest{grid-template-columns:1fr;gap:var(--s4)}
  .track-dest .service-media{justify-content:flex-start}
  .track .dspgrid{grid-template-columns:repeat(2,1fr)}
  /* the table becomes fault-then-action pairs rather than three squeezed
     columns */
  .actions thead{position:absolute;left:-9999px}
  .actions,.actions tbody,.actions tr,.actions td{display:block;width:100%}
  .actions tr{padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
  .actions td{border:0;padding:0 0 var(--s2)}
  .actions td:first-child{width:auto}
  .actions .by{white-space:normal;font-size:13px}
}

/* ---------- the radio side of the flow ---------- */
/* Three services on their own row, sized optically like the DSP grid: these
   run from 4.86:1 to 8.49:1, so one height cap would leave iHeartRadio
   nearly twice the width of Pandora. */
.radiogrid{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap;
  margin-bottom:var(--s4)}
.radiogrid .r-siriusxm{height:17px}
.radiogrid .r-pandora{height:19px}
.radiogrid .r-iheart{height:16px}
@media(max-width:400px){
  .radiogrid{gap:var(--s5)}
  .radiogrid .r-siriusxm{height:15px}
  .radiogrid .r-pandora{height:17px}
  .radiogrid .r-iheart{height:14px}
}

/* ==========================================================================
   Interaction. Precise rather than theatrical: nothing moves more than a
   pixel, nothing takes longer than a quarter second, and everything here
   stops entirely for anyone who asks for less motion.
   ========================================================================== */
.btn,button{transition:transform .15s ease, box-shadow .15s ease,
  background-color .15s ease, border-color .15s ease}
.btn:hover,button:hover{transform:translateY(-1px)}
.btn:active,button:active{transform:translateY(0)}

/* The browser's blue focus ring is the one piece of another brand's design
   that ships on every site. Replaced, not removed: keyboard users need it
   more than mouse users do. */
.btn:focus-visible,button:focus-visible,a:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(198,242,78,.75);outline-offset:2px;
  border-color:var(--ink)}
.scanbar input:focus{outline:2px solid rgba(198,242,78,.65);outline-offset:2px;
  border-color:var(--ink)}

/* Links carry one underline treatment everywhere rather than three. */
section a:not(.btn),.wrap > a:not(.btn),.faq a:not(.btn){
  text-decoration-thickness:1px;text-underline-offset:4px;
  transition:color .15s ease}
section a:not(.btn):hover,.faq a:not(.btn):hover{color:var(--ink)}

/* A card lifts by a pixel and its border darkens. No shadow: these sit on
   a warm paper background where a shadow reads as grubbiness. */
.finding,.tier,.scope-col,.track{transition:transform .15s ease,
  border-color .15s ease}
.finding:hover,.scope-col:hover{transform:translateY(-1px);
  border-color:#C3C8BE}
.tiers3 .tier:hover{transform:translateY(-1px)}

/* The example audit responds to the cursor without pretending to be
   clickable: it is an illustration, and a fake tooltip would be a lie. */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;
    animation-duration:.01ms !important;scroll-behavior:auto !important}
  .btn:hover,button:hover,.finding:hover,.scope-col:hover,
  .tiers3 .tier:hover{transform:none}
}