/* Surface Noise homepage v3: page sections. Tokens, header, forms, FAQ,
   footer and the mobile bar live in assets/site/site.css (loaded first). */
/* ---------------------------------------------------------------- 01 Hero */
.snh-hero{overflow:hidden;background:var(--sn-paper)}
.snh-hero__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(40px,6vw,96px);align-items:end;min-height:calc(100vh - 190px)}
.snh-hero__copy{display:flex;flex-direction:column;gap:20px;align-self:center;padding:48px 0}
.snh-lead{font-size:18px;color:var(--sn-muted);max-width:540px}
.snh-reassure{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--sn-muted)}
.snh-reassure li{display:flex;align-items:center;gap:6px}
.snh-reassure .snh-i{color:var(--sn-accent)}
.snh-hero__phone{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:24px}
.snh-phone-caption{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;max-width:360px}
.snh-phone-label{display:flex;align-items:center;gap:8px;color:var(--sn-accent)}
.snh-phone-note{font-size:13px;line-height:1.45;color:var(--sn-muted)}
.snh-live{width:8px;height:8px;border-radius:50%;background:var(--sn-accent);box-shadow:0 0 0 0 rgba(31,106,77,.5);animation:snh-pulse 2s infinite}
@keyframes snh-pulse{0%{box-shadow:0 0 0 0 rgba(31,106,77,.45)}70%{box-shadow:0 0 0 8px rgba(31,106,77,0)}100%{box-shadow:0 0 0 0 rgba(31,106,77,0)}}
@media (prefers-reduced-motion:reduce){.snh-live{animation:none}}

/* Phone preview */
.snh-phone{width:340px;max-width:100%;height:560px;background:var(--sn-surface);border:1.5px solid var(--sn-ink);border-bottom:0;border-radius:46px 46px 0 0;padding:14px 12px 0;overflow:hidden;font-size:12.5px;line-height:1.5}
.snh-phone__status{display:flex;justify-content:space-between;align-items:center;padding:4px 14px 10px;font:600 14px var(--sans)}
.snh-phone__island{width:84px;height:22px;border-radius:12px;background:#111}
.snh-phone__battery{width:22px;height:11px;border:1.5px solid var(--sn-ink);border-radius:3px}
.snh-phone__bar{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 10px;color:var(--sn-muted);font-size:14px}
.snh-phone__bar span{display:flex;align-items:center;gap:10px}
.snh .snh-phone__subject{font:600 17px/1.25 var(--serif);padding:0 6px;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.5em}
.snh-phone__from{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:0 6px 12px;margin:0 0 12px;border-bottom:1px solid var(--sn-rule)}
.snh-phone__from strong{display:block;font:600 14px/1.2 var(--sans)}
.snh-phone__from small{font-size:12px;color:var(--sn-faint)}
.snh-phone__avatar{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--sn-rule);overflow:hidden;display:flex;align-items:center;justify-content:center;font:italic 400 14px var(--serif)}
.snh .snh-phone__avatar img{width:100%;height:100%;object-fit:contain}
.snh-phone__time{font-size:12px;color:var(--sn-faint)}
.snh-phone__record{display:flex;gap:12px;padding:0 6px 12px}
.snh-phone__cover{flex:none;width:128px;height:128px;background:var(--sn-paper)}
.snh-phone__cover img,.snh-cover{width:100%;height:100%;object-fit:cover}
.snh-phone__meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.snh-phone__meta strong{font:600 17px/1.2 var(--sans)}
.snh-phone__meta em{font:italic 600 17px/1.2 var(--serif)}
.snh-phone__meta small{font-size:12px;line-height:1.4;color:var(--sn-muted)}
.snh-phone__why{font-size:9.5px;color:var(--sn-faint);padding:0 6px 4px}
.snh-phone__note{padding:0 6px 12px;color:var(--sn-ink)}
.snh-phone__buy{display:inline-block;margin:0 6px;background:#E4E2DB;color:#6F716C;font:600 13px var(--sans);padding:9px 14px;border-radius:3px}
/* The preview is a picture, not a second call to action: muted cover and tag */
.snh .snh-phone__cover img{filter:saturate(.45) contrast(.92);opacity:.75}
.snh-phone .snh-tag{background:#EDEBE5;color:#6F716C}
.snh-phone__more{font-size:9.5px;color:var(--sn-faint);padding:16px 6px 8px;border-top:1px solid var(--sn-rule);margin:16px 0 0}
.snh-phone__ghost{display:flex;gap:12px;padding:6px 6px 10px}
.snh-phone__ghost > span:first-child{flex:none;width:64px;height:64px;background:#ECEAE3;border-radius:2px}
.snh-phone__ghost > span:last-child{flex:1;display:flex;flex-direction:column;gap:7px;padding-top:4px}
.snh-phone__ghost i{display:block;height:9px;border-radius:2px;background:#ECEAE3}
.snh-phone__ghost i:nth-child(1){width:38%;background:#E1E7E2}
.snh-phone__ghost i:nth-child(2){width:70%}
.snh-phone__ghost i:nth-child(3){width:52%}

/* ---------------------------------------------------------------- 02 How it works */
.snh-how{padding-top:44px}
.snh-how__head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;margin-bottom:56px}
.snh-toggle{display:inline-flex;border:1px solid var(--sn-ink);border-radius:3px;overflow:hidden;margin-top:10px}
.snh-toggle button{font:500 15px var(--sans);padding:10px 22px;border:0;background:var(--sn-surface);color:var(--sn-ink);cursor:pointer}
.snh-toggle button[aria-selected="true"]{background:var(--sn-ink);color:#fff}
.snh .snh-how__intro{text-align:center;font-size:18px;color:var(--sn-muted);margin:-24px 0 48px}
.snh-panel[hidden]{display:none}
.snh-behind{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:48px}
.snh-behind__col{display:flex;flex-direction:column;gap:20px}
.snh-behind__head{display:flex;gap:10px;align-items:baseline;border-bottom:2px solid var(--sn-ink);padding-bottom:10px;font:600 24px var(--sans)}
.snh-behind__head .snh-mono{font-size:15px;color:var(--sn-accent)}
.snh-behind__nodes{display:flex;align-items:flex-start;gap:8px}
.snh-node{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font:600 13px/1.25 var(--sans)}
.snh-behind__chev{align-self:flex-start;margin-top:19px;color:var(--sn-faint)}
.snh-behind__col > p{color:var(--sn-muted)}
.snh-how__more{text-align:center;margin-top:40px}
.snh-how__more a{font-weight:500;text-underline-offset:4px}
.snh-how .snh-center{margin-top:56px}

/* ---------------------------------------------------------------- 03 Listing */
.snh-card{display:flex;flex-wrap:wrap;gap:24px;background:var(--sn-surface);border:1px solid var(--sn-rule);border-radius:3px;padding:clamp(20px,3vw,32px)}
.snh-card__cover{flex:none;width:220px;height:220px;background:var(--sn-paper)}
.snh-card__body{flex:1 1 220px;display:flex;flex-direction:column;gap:10px;min-width:0}
.snh-card__row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:15px;line-height:1.45}
.snh-card__title a{text-decoration:none;font:italic 600 26px/1.15 var(--serif)}
.snh-card__title a:hover{text-decoration:underline}
.snh-card__artist{font:600 18px var(--sans)}
.snh-card__note{border-top:1px solid var(--sn-rule);padding-top:12px}
.snh-card__note .snh-mono{display:flex;justify-content:space-between;font-size:10px;color:var(--sn-faint);margin:0 0 6px}
.snh-card__note p:last-child{font-size:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.snh-btn.snh-btn--muted{font-size:15px;padding:11px 16px;background:#EDEBE5;color:var(--sn-ink)!important;border:1px solid var(--sn-field-border)}
.snh-btn.snh-btn--muted:hover{background:#E4E2DB}
.snh-marker{flex:none;display:inline-block;font:500 11px/1.4 var(--mono);color:#fff;background:var(--sn-ink);border-radius:2px;padding:1px 6px;text-transform:none;letter-spacing:0}
.snh-listing h2{margin:12px 0 28px}
.snh-parts{border-top:1px solid var(--sn-rule);margin:0 0 28px}
.snh-parts li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--sn-rule)}
.snh .snh-parts-more{margin:-8px 0 24px;color:var(--sn-muted)}

/* ---------------------------------------------------------------- 04 Simple on purpose */
.snh-yesno{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:24px;margin-top:48px}
.snh-box{padding:32px;border-radius:3px;display:flex;flex-direction:column;gap:16px}
.snh-box h3{display:flex;align-items:center;gap:14px;font:600 24px var(--sans);padding-bottom:16px;border-bottom:1px solid}
.snh-box .snh-circle--fill{width:44px;height:44px;border:0;color:#fff}
.snh-box ul{display:flex;flex-direction:column;gap:12px}
.snh-box li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.snh-box li .snh-i{margin-top:2px}
.snh-box--yes{background:#E5F0E9;border:1.5px solid #1F6A4D}
.snh-box--yes h3{color:#155039;border-color:#C9DDD0}
.snh-box--yes .snh-circle--fill{background:#1F6A4D}
.snh-box--yes li .snh-i{color:#1F6A4D}
.snh-box--no{background:#F8EAE5;border:1.5px solid #A33A2C}
.snh-box--no h3{color:#8A3D2D;border-color:#E9C9C0}
.snh-box--no .snh-circle--fill{background:#A33A2C}
.snh-box--no li .snh-i{color:#A33A2C}

/* ---------------------------------------------------------------- 05 / 11 Signup bands */
.snh-band{background:var(--sn-accent-soft);border-top:1px solid var(--sn-accent-soft-rule);border-bottom:1px solid var(--sn-accent-soft-rule);padding:clamp(64px,8vw,96px) 0}
.snh-band__inner{max-width:640px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.snh-band__inner--wide{max-width:680px}
.snh-band .snh-form{max-width:none}
.snh-band h2{font-size:clamp(28px,3vw,36px)}
.snh-final{padding:var(--pad-y) 0;border-bottom:0}
.snh-final h2{font-size:clamp(32px,4vw,48px)}

/* ---------------------------------------------------------------- 06 Just announced */
.snh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:28px 22px}
.snh-rel{display:flex;flex-direction:column;gap:8px;min-width:0}
.snh-rel__cover{display:block;aspect-ratio:1;border:1px solid var(--sn-rule);background:var(--sn-surface);overflow:hidden}
.snh-rel__artist{font:600 16px/1.3 var(--sans);text-decoration:none}
.snh-rel__artist:hover{text-decoration:underline}
.snh-rel__title{font:italic 400 15px/1.3 var(--serif);color:var(--sn-muted)}
.snh-rel__meta{font-size:13px;line-height:1.45;color:var(--sn-muted)}
.snh-rel__buy{display:inline-flex;align-items:center;gap:5px;font:600 13px var(--sans);color:var(--sn-accent)!important;text-decoration:none}
.snh-rel__buy:hover{text-decoration:underline}

/* ---------------------------------------------------------------- 07 Artists / Genres */
.snh-artists{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 12px}
.snh-artists a{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;text-decoration:none;font:500 14px/1.3 var(--sans)}
.snh-artists img{width:76px;height:76px;border-radius:50%;object-fit:cover;background:var(--sn-paper)}
.snh-artists a:hover span{text-decoration:underline}
.snh-chips-intro{margin:0 0 20px}
.snh-chips{display:flex;flex-wrap:wrap;gap:10px}
.snh-chips a,.snh-chips span{display:inline-block;font:500 15px var(--sans);padding:8px 14px;border:1px solid var(--sn-rule);border-radius:2px;background:var(--sn-paper);text-decoration:none}
.snh-chips a:hover{border-color:var(--sn-ink)}

/* ---------------------------------------------------------------- 08 Vinyl Report */
.snh-report{position:relative;overflow:hidden;background:var(--sn-ink);color:var(--sn-paper);border-top:0}
.snh-report h2{color:var(--sn-paper)}
.snh-report__ring{position:absolute;width:520px;height:520px;border-radius:50%;border:60px solid rgba(247,245,240,.05);right:-140px;top:50%;transform:translateY(-50%);pointer-events:none}
.snh-report .snh-wrap{position:relative}
.snh-report__eyebrow{font-size:12px;color:var(--sn-accent-pale);margin:0 0 14px}
.snh-report h2{margin:0 0 20px}
.snh-report__text{font-size:18px;color:var(--sn-dark-text);margin:0 0 28px}
.snh-report__stat{border-top:1px solid var(--sn-dark-rule-2);padding-top:28px}
.snh-report__num{font:600 clamp(80px,10vw,128px)/.9 var(--serif);margin:0 0 18px}
.snh-report__method{font-size:12px;color:var(--sn-accent-pale)!important}
.snh-report__label{font-size:12px;color:var(--sn-faint);margin:64px 0 20px}
.snh-rcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.snh-rcard{display:flex;flex-direction:column;gap:6px;background:var(--sn-dark-card);border:1px solid var(--sn-dark-rule);border-radius:3px;padding:16px}
.snh-rcard__cover{display:block;aspect-ratio:1;background:#2a2926;margin:0 0 8px;overflow:hidden}
.snh-rcard__cover img{width:100%;height:100%;object-fit:cover}
.snh-rcard__artist{font:600 13px var(--sans);color:var(--sn-accent-pale)}
.snh-rcard__title{font:italic 600 18px/1.25 var(--serif);text-decoration:none}
.snh-rcard__title:hover{text-decoration:underline}
.snh-rcard__pct{align-self:flex-start;font-size:12px;color:#fff;background:var(--sn-no);border-radius:2px;padding:2px 7px;margin:4px 0}
.snh-rcard__price{font:600 24px var(--sans)}
.snh-rcard__price span[aria-hidden]{color:var(--sn-faint)}
.snh-rcard__note{font-size:14px;line-height:1.5;color:var(--sn-dark-text)}
.snh-rcard__prices{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:15px;color:var(--sn-dark-text)}
.snh-rcard__prices strong{font:600 20px var(--sans);color:var(--sn-paper);margin-left:4px}
.snh-rcard__now strong{color:#E8A596}
.snh .snh-why__buttons{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.snh-report .snh-rcards{margin-top:clamp(48px,6vw,64px)}
.snh-why{margin:clamp(64px,8vw,96px) 0 0;padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--sn-dark-rule-2);max-width:900px}
.snh-why__big{font:600 clamp(34px,4.6vw,60px)/1.08 var(--serif);letter-spacing:-.02em;color:var(--sn-paper);text-wrap:balance;margin:0 0 24px}
.snh-why__text{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--sn-dark-text);max-width:720px;margin:0 0 32px}

/* ---------------------------------------------------------------- 09 Labels / Guides */
.snh-two--top h2{margin:0 0 16px}
.snh-two--top .snh-sec__head{margin:0 0 16px}
.snh-two--top .snh-sec__head h2{margin:0}
.snh-labels{font:500 17px/1.9 var(--sans);margin:20px 0}
.snh-labels a{text-decoration:none}
.snh-labels a:hover{color:var(--sn-accent);text-decoration:underline}
.snh-labels__sep{color:var(--sn-rule);margin:0 4px}
.snh-guides{border-top:1px solid var(--sn-rule)}
.snh-guides li{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--sn-rule)}
.snh-guides .snh-mono{font-size:11px}
.snh-guides a{font:600 19px/1.35 var(--sans);text-decoration:none}
.snh-guides a:hover{text-decoration:underline;color:var(--sn-accent)}
.snh-guides p{font-size:15px}

@media (max-width:930px){
  .snh-step__chev,.snh-behind__chev{display:none}
  .snh-hero__copy{padding:32px 0 8px}
}
@media (max-width:720px){
  .snh-lead{font-size:16px}
  .snh-hero__grid{min-height:0;gap:32px}
  .snh-hero__copy{gap:16px;padding-top:16px}
  .snh-phone{height:520px}
  .snh-how__head{margin-bottom:40px}
  .snh .snh-how__intro{margin:-16px 0 36px}
  .snh-behind__nodes{gap:4px}
  .snh-card__cover{width:100%;height:auto;aspect-ratio:1}
  .snh .snh-artists img{width:56px;height:56px}
  .snh-artists a{font-size:12px}
}

/* Hero fits the viewport so "How it works" and its arrow show at the bottom (two-column layout) */
@media (min-width:931px){
  .snh-hero__grid{min-height:0;height:clamp(540px,calc(100svh - 232px),780px)}
  .snh-hero__copy{padding:0}
  .snh h1{font-size:clamp(40px,4.6vw,62px)}
  .snh-hero__phone{align-self:stretch;overflow:hidden;padding-top:20px}
  .snh-phone{flex:none}
  .snh-how{padding-top:24px}
}
.snh-hero__cue{display:none}
@media (max-width:930px){
  .snh-hero__cue{display:inline-flex;align-items:center;gap:6px;font:600 15px var(--sans);color:var(--sn-accent);text-decoration:none}
}

/* Label logo grid under "The labels and shops we follow" (sn_labels_logo_grid) */
.snh-logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:28px 0 16px}
.snh-logos__a{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:10px;background:#fff;border:1px solid var(--sn-rule);border-radius:3px;transition:border-color .15s}
.snh-logos__a:hover,.snh-logos__a:focus-visible{border-color:var(--sn-ink)}
.snh-logos__a.is-dark{background:var(--sn-ink);border-color:var(--sn-ink)}
.snh-logos__a img{width:100%;height:100%;object-fit:contain}
@media (max-width:480px){.snh-logos{grid-template-columns:repeat(4,minmax(0,1fr))}}