/* Angerfish Audio — "ink on paper". Claude Design handoff 3a (design_handoff_echohost_product_page/README.md).
   All text full black; #B0B0B0 only for hairlines/hatching; colour only as dither dots in canvases. */
:root { --rf:'Inter',system-ui,sans-serif; --g:64px; --sec:104px; --ink:#000; --paper:#fff; --hair:#B0B0B0 }
body.af { margin:0; background:#fff; color:#000; font:18px/1.6 var(--rf) }
.af a { color:#000 } .af a:hover { text-decoration-thickness:2px }
.af :focus-visible { outline:2px solid #000; outline-offset:2px }
.af .kick { font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; margin:0; color:#000 }
.af .pix { display:block; image-rendering:pixelated }
/* top bar */
.af .top { height:36px; display:flex; align-items:center; gap:6px; padding:0 24px; border-bottom:1px solid #000;
  background:repeating-linear-gradient(to bottom,#000 0 1px,#fff 1px 3px) }
.af .chip { background:#fff; border:1px solid #000; padding:2px 9px; font-size:13px; line-height:20px; text-decoration:none }
.af .chip.mark { padding:5px 8px; display:flex } .af .top .sp { flex:1 }
/* buttons */
.af .b { display:inline-flex; align-items:center; height:40px; padding:0 18px; background:#fff; color:#000; border:1px solid #000;
  box-shadow:1px 1px 0 #000; font-size:15px; text-decoration:none; white-space:nowrap; cursor:pointer; font-family:inherit }
.af .b.p { background:#000; color:#fff; font-weight:600 } .af .b:active { box-shadow:none; transform:translate(1px,1px) }
/* hero */
.af .hero { padding:64px var(--g) 48px; display:flex; flex-direction:column; gap:32px }
.af .hero-row { display:grid; grid-template-columns:7fr 5fr; gap:64px; align-items:end }
.af h1 { font-size:44px; line-height:1.1; font-weight:700; letter-spacing:-.02em; margin:0; text-wrap:pretty }
.af .cta { display:flex; flex-direction:column; gap:14px } .af .cta > div { display:flex; gap:12px; flex-wrap:wrap } .af .note { font-size:13px }
/* dune strip */
.af .strip { position:relative; height:220px }
.af .strip canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated }
.af .modechip { position:absolute; left:var(--g); bottom:20px; background:#fff; border-radius:10px; padding:8px 14px; display:flex; align-items:center;
  gap:10px; font-size:12px; letter-spacing:.15em; flex-wrap:wrap }
.af .modechip b { font-weight:500 } .af .modechip .sep { color:var(--hair) }
.af .modechip button { border:0; background:none; font:inherit; letter-spacing:inherit; cursor:pointer; padding:4px 2px; color:#000 }
/* sticky price bar */
.af .bar { position:sticky; top:0; z-index:5; background:#fff; border-top:1px solid #000; border-bottom:1px solid #000; height:60px;
  padding:0 var(--g); display:flex; align-items:center; gap:32px }
.af .bar nav { display:flex; gap:24px; font-size:14px } .af .bar nav a { text-decoration:none; text-underline-offset:6px }
.af .bar nav a[aria-current] { text-decoration:underline; text-decoration-thickness:2px }
.af .bar .sp { flex:1 } .af .price { display:flex; flex-direction:column; align-items:flex-end; line-height:1.2 }
.af .price strong { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums } .af .price span { font-size:11px; letter-spacing:.08em }
.af .bar .b { height:38px; font-size:14px; padding:0 16px }
/* sections */
.af section { scroll-margin-top:72px }
.af .sec { padding:var(--sec) var(--g) 0; display:flex; flex-direction:column; gap:20px }
.af .head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; border-bottom:1px solid #000; padding-bottom:10px }
.af .head .t { font-size:13px }
.af .video { position:relative; aspect-ratio:16/9; border:1px solid #000; box-shadow:2px 2px 0 #000;
  background:repeating-linear-gradient(45deg,#fff 0 7px,var(--hair) 7px 8px); display:flex; align-items:center; justify-content:center }
.af .video iframe { position:absolute; inset:0; width:100%; height:100%; border:0 }
.af .video .play { width:88px; height:64px; background:#fff; border:1px solid #000; box-shadow:2px 2px 0 #000; font-size:22px; cursor:pointer; color:#000 }
.af .video .tag { position:absolute; left:12px; bottom:10px; background:#fff; padding:2px 8px; font:12px ui-monospace,Menlo,monospace }
.af .cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.af .card3 { border:1px solid #000; box-shadow:2px 2px 0 #000; display:flex; flex-direction:column; margin:0 }
.af .card3 .fig { position:relative; height:200px; border-bottom:1px solid #000 }
.af .card3 canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated }
.af .card3 p { margin:0; padding:18px 20px; font-size:17px }
.af .live-sec { align-items:stretch; gap:28px } .af .live-sec .head { border:0; padding:0 } .af .live-sec h2 { text-transform:none; letter-spacing:0; font-size:22px; font-weight:600; margin:0; line-height:1.3 }
.af .foot { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid #000; padding-top:14px; font-size:13px }
.af .phone-note { display:none; margin:-16px 0 0; font-size:13px }
.af .foot > div { display:flex; align-items:center; gap:12px } .af .foot .b { height:36px; font-size:14px; padding:0 16px }
.af .how { padding:var(--sec) var(--g) 0; display:grid; grid-template-columns:5fr 7fr; gap:64px; align-items:start }
.af .how p:not(.kick) { margin:14px 0 0; max-width:62ch; text-wrap:pretty }
.af .how img, .af .how video { width:100%; display:block }
.af .lic { margin:var(--sec) var(--g) 0; border:1px solid #000; box-shadow:2px 2px 0 #000; padding:28px 32px; display:grid;
  grid-template-columns:1fr auto; gap:12px 48px; align-items:end }
.af .lic .kick { grid-column:1/-1 } .af .lic p:not(.kick) { margin:0; font-weight:600; max-width:62ch } .af .lic a { font-size:15px; white-space:nowrap }
.af .specs { padding:80px var(--g) var(--sec); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px }
.af .specs > div { border-top:1px solid #000; padding-top:14px; display:flex; flex-direction:column; gap:8px }
.af .tip { height:34px; border-top:1px solid #000; display:flex; align-items:center; justify-content:space-between; padding:0 24px; font-size:13px }
.af .tip div { display:flex; gap:16px }
/* the plugin window's own captions were grey (--disabled); this page's rule is full-black text */
.af #demo .player, .af #demo .live .transport .state { color:#000 }
/* phone — ref 1e @390: 20px gutters, 56px sections, price bar docks to the bottom */
@media (max-width:900px) {
  :root { --g:20px; --sec:56px }
  .af .hero { padding:40px var(--g) 32px; gap:24px }
  .af .hero-row, .af .how, .af .cards, .af .specs { grid-template-columns:minmax(0,1fr); gap:24px }
  .af h1 { font-size:28px }
  .af .b { min-height:44px }
  .af .bar { position:fixed; top:auto; bottom:0; left:0; right:0; height:64px; gap:12px; border-bottom:0 }
  .af .bar nav, .af .bar .b:not(.p) { display:none }
  .af .price { align-items:flex-end } .af .bar .b { height:44px }
  .af .tip { margin-bottom:64px }
  .af .lic { grid-template-columns:1fr; padding:22px 20px }
  .af .modechip { left:var(--g); right:var(--g); bottom:12px; gap:6px; letter-spacing:.1em }
  .af .strip { height:180px }
  .af .top .ctx { display:none }
  .af .live-sec .head { flex-direction:column; gap:6px }
  .af .phone-note { display:block }
}
@media (prefers-reduced-motion: reduce) { .af * { transition:none !important; animation:none !important } }
/* home + licensing */
.af .top .chip.on { background:#000; color:#fff }
.af .feats { padding:96px var(--g) 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px }
.af .feats > div { border-top:1px solid #000; padding-top:14px; display:flex; flex-direction:column; gap:12px }
.af .feats p:not(.kick) { margin:0; text-wrap:pretty }
.af .cat { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px; align-items:stretch }
.af .pcard { border:1px solid #000; box-shadow:2px 2px 0 #000; padding:16px; display:flex; flex-direction:column; gap:14px; text-decoration:none; min-width:0 }
.af .pcard:active { box-shadow:none; transform:translate(1px,1px) }
.af .pcard img { width:100%; height:auto; display:block }
.af .pcard .ph { aspect-ratio:4/3; border:1px solid #000; background:repeating-linear-gradient(45deg,#fff 0 5px,var(--hair) 5px 6px);
  display:flex; align-items:flex-end; padding:6px; font:10px ui-monospace,Menlo,monospace }
.af .pcard .ph::first-line { background:#fff }
.af .pcard .row { display:flex; justify-content:space-between; gap:12px; font-size:15px; margin-top:auto; flex-wrap:wrap }
.af .pcard .row b { font-weight:600 }
.af .pcard.more { justify-content:space-between }
.af .pcard.more .big { font-size:22px; font-weight:600; line-height:1.25 }
.af.home .lic { margin-bottom:var(--sec) }
/* licensing FAQ (1f desktop, 1g phone) */
.af .lhero { padding:80px var(--g) 56px; display:grid; grid-template-columns:7fr 5fr; gap:64px; align-items:end; border-bottom:1px solid #000 }
.af .lhero > div { display:flex; flex-direction:column; gap:20px }
.af .lhero h1 { font-size:56px; line-height:1.05; letter-spacing:-.025em }
.af .lhero p:not(.kick) { margin:0; text-wrap:pretty } .af .lhero b { font-weight:600 }
.af .facts { margin:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-bottom:1px solid #000 }
.af .facts > div { padding:20px 20px 24px; border-right:1px solid var(--hair); display:flex; flex-direction:column; gap:6px }
.af .facts > div:last-child { border-right:0 }
.af .facts dd { margin:0; font-size:20px; font-weight:600; line-height:1.25 }
.af .faq { padding:80px var(--g) 0; display:grid; grid-template-columns:280px minmax(0,1fr); gap:80px; align-items:start }
.af .faq nav { position:sticky; top:24px; display:flex; flex-direction:column; border-top:1px solid #000 }
.af .faq nav a { padding:10px 0; border-bottom:1px solid var(--hair); font-size:14px; text-decoration:none; display:flex; gap:12px }
.af .faq nav a:last-child { border-bottom-color:#000 } .af .faq nav a span { font-variant-numeric:tabular-nums }
.af .faq nav a:hover { text-decoration:underline }
.af .qs details { border-top:1px solid #000; padding:36px 0; scroll-margin-top:24px }
.af .qs details:first-child { border-top:0; padding-top:0 }
.af .qs summary { list-style:none; display:grid; grid-template-columns:48px minmax(0,1fr) 20px; gap:0 16px; cursor:pointer; align-items:start }
.af .qs summary::-webkit-details-marker { display:none }
.af .qs summary::after { content:'+'; font-size:22px; line-height:32px; text-align:right }
.af .qs details[open] > summary::after { content:'\2212' }
.af .qs .n { font-size:14px; padding-top:6px; font-variant-numeric:tabular-nums }
.af .qs h2 { font-size:26px; line-height:1.25; font-weight:600; margin:0; letter-spacing:-.01em; text-transform:none }
.af .qs details p { margin:10px 0 0 64px; max-width:62ch; text-wrap:pretty } .af .qs details b { font-weight:600 }
.af .unsure { margin:80px var(--g) var(--sec); border:1px solid #000; box-shadow:2px 2px 0 #000; padding:28px 32px; display:flex;
  justify-content:space-between; align-items:center; gap:32px }
.af .unsure > div:first-child { display:flex; flex-direction:column; gap:6px }
.af .unsure .big { margin:0; font-size:20px; font-weight:600 } .af .unsure .acts { display:flex; gap:12px; flex-wrap:wrap }
@media (max-width:900px) {
  .af .feats { padding-top:var(--sec); grid-template-columns:minmax(0,1fr); gap:24px }
  .af .cat { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
  .af .cat .host, .af .cat .more { grid-column:1/-1 } .af .pcard.more { gap:8px }
  .af .pcard { padding:12px; gap:10px } .af .pcard .row { font-size:14px } .af .pcard.more .big { font-size:18px }
  .af.home .tip, .af.licp .tip { margin-bottom:0 }
  .af .top .chip.wide { display:none } .af.home .top, .af.licp .top { padding:0 var(--g) }
  .af .lhero { grid-template-columns:minmax(0,1fr); padding:40px var(--g) 32px; gap:20px }
  .af .lhero h1 { font-size:32px }
  .af .facts { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 var(--g) }
  .af .facts > div { padding:14px 12px 16px 0; border-right:0; border-bottom:1px solid var(--hair) }
  .af .facts > div:nth-child(odd) { padding-left:0; border-right:1px solid var(--hair); padding-right:12px }
  .af .facts > div:nth-child(even) { padding-left:12px }
  .af .facts > div:nth-last-child(-n+2) { border-bottom:0 }
  .af .facts dd { font-size:17px }
  .af .faq { grid-template-columns:minmax(0,1fr); padding-top:32px; gap:0 }
  .af .faq nav { display:none }
  .af .qs details, .af .qs details:first-child { padding:18px 0; border-top:1px solid #000 }
  .af .qs details:last-child { border-bottom:1px solid #000 }
  .af .qs summary { grid-template-columns:minmax(0,1fr) 20px; gap:0 12px }
  .af .qs .n { display:none }
  .af .qs h2 { font-size:18px; line-height:1.35 } .af .qs summary::after { line-height:24px }
  .af .qs details p { margin:10px 0 0; font-size:16px }
  .af .unsure { flex-direction:column; align-items:flex-start; padding:22px 20px; gap:16px; margin-top:var(--sec) }
}