/* =====================================================================
   Podify US - protopapps-us.com
   The category standard, executed at full craft. Near-black ground,
   one saturated aqua accent, large cover art, generous type.
   Quality bar: Spotify, Apple Podcasts, Audible.
   ===================================================================== */

:root{
  --bg:#0a0c0e;
  --bg-2:#101418;
  --surface:#161b21;
  --surface-2:#1d242b;
  --line:#252d36;
  --line-2:#323c47;

  --fg:#f4f7f9;
  --fg-2:#c2ccd6;
  --muted:#8b98a5;

  --aqua:#19dcc4;
  --aqua-2:#0fb8a4;
  --aqua-ink:#04231f;
  --warn:#ff8a4c;

  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-pill:999px;

  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -24px rgba(0,0,0,.9);
  --font:'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:86px}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:800; line-height:1.08; letter-spacing:-.03em}
p{margin:0}
ul,ol{margin:0}
svg{display:block}

.wrap{width:min(1200px, calc(100% - 2.4rem)); margin-inline:auto}

.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--aqua); color:var(--aqua-ink); padding:.8rem 1.2rem; font-weight:700; border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}
:focus-visible{outline:2.5px solid var(--aqua); outline-offset:3px; border-radius:6px}

/* ============================== BUTTONS ============================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:1rem; letter-spacing:-.01em;
  padding:.95rem 1.7rem; min-height:52px; border-radius:var(--r-pill);
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  background:var(--aqua); color:var(--aqua-ink);
  transition:transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn:hover{background:#2af0d7; transform:scale(1.02)}
.btn:active{transform:scale(.99)}
.btn-lg{font-size:1.08rem; padding:1.1rem 2rem; min-height:58px}
.btn-block{display:flex; width:100%}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--fg-2); transform:scale(1.02)}

/* ============================== HEADER ============================== */
.top{
  position:sticky; top:0; z-index:100;
  background:rgba(10,12,14,.82); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s var(--ease);
}
.top.scrolled{border-bottom-color:var(--line)}
.bar{display:flex; align-items:center; gap:1.4rem; padding:.85rem 0}
.logo{display:inline-flex; align-items:center; flex:0 0 auto; min-height:44px}
.logo img{height:28px; width:auto}

.burger{
  display:none; margin-left:auto; width:48px; height:48px; padding:0; cursor:pointer;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface);
  align-items:center; justify-content:center;
}
.burger span{position:relative; display:block; width:18px; height:2px; background:var(--fg); border-radius:2px}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--fg); border-radius:2px; transition:.18s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.top[data-open="true"] .burger span{background:transparent}
.top[data-open="true"] .burger span::before{top:0; transform:rotate(45deg)}
.top[data-open="true"] .burger span::after{top:0; transform:rotate(-45deg)}

.nav{margin-left:auto}
.nav ul{display:flex; align-items:center; gap:.2rem; list-style:none; padding:0; margin:0}
.nav a{
  display:block; text-decoration:none; color:var(--fg-2); font-size:.97rem; font-weight:600;
  padding:.6rem .85rem; border-radius:var(--r-pill); transition:color .16s var(--ease), background .16s var(--ease);
}
.nav a:hover{color:var(--fg); background:var(--surface)}
.nav-cta-li{margin-left:.7rem}
.nav .nav-cta{
  background:var(--aqua); color:var(--aqua-ink); font-weight:700; padding:.7rem 1.3rem;
  min-height:44px; display:flex; align-items:center;
}
.nav .nav-cta:hover{background:#2af0d7}

/* ================================ HERO ================================ */
.hero{position:relative; overflow:hidden; padding-block:clamp(3rem,6vw,5rem) clamp(2.5rem,5vw,4rem)}
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto 30%; height:700px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(25,220,196,.14), transparent 72%);
}
.hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(2rem,4vw,4rem); align-items:center}
.hero h1{font-size:clamp(2.5rem,5vw,4.2rem); max-width:15ch; text-wrap:balance}
.hero h1 em{font-style:normal; color:var(--aqua)}
.hero-sub{margin-top:1.3rem; font-size:1.18rem; color:var(--fg-2); max-width:46ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.hero-fine{margin-top:1.1rem; font-size:.92rem; color:var(--muted)}
.hero-trust{display:flex; flex-wrap:wrap; gap:.55rem; list-style:none; padding:0; margin:1.6rem 0 0}
.hero-trust li{
  display:flex; align-items:center; gap:.45rem; font-size:.9rem; font-weight:600; color:var(--fg-2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:.42rem .9rem;
}
.hero-trust svg{width:14px; height:14px; color:var(--aqua)}

/* cover mosaic */
.mosaic{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem}
.mosaic img{
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r);
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.mosaic img:nth-child(2){transform:translateY(-18px)}
.mosaic img:nth-child(5){transform:translateY(-18px)}
.mosaic img:nth-child(8){transform:translateY(-18px)}

/* =============================== STATS =============================== */
.stats{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.stats li{padding:1.6rem 1.4rem; border-right:1px solid var(--line)}
.stats li:last-child{border-right:0}
.stats .n{font-size:clamp(1.8rem,3vw,2.4rem); font-weight:800; letter-spacing:-.04em; color:var(--aqua)}
.stats .l{margin-top:.2rem; font-size:.94rem; color:var(--muted)}

/* ============================== SECTIONS ============================== */
.section{padding-block:clamp(3rem,6vw,5rem)}
.sec-head{max-width:44rem}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.sec-head p{margin-top:.9rem; font-size:1.06rem; color:var(--fg-2)}
.shelf-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.6rem}
.shelf-head .count{font-size:.92rem; color:var(--muted); white-space:nowrap}
.shelf-tools{display:flex; align-items:center; gap:1rem}
.shelf-nav{display:flex; gap:.5rem}
.shelf-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--surface); color:var(--fg); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .16s var(--ease), border-color .16s var(--ease), opacity .16s var(--ease);
}
.shelf-btn:hover{background:var(--surface-2); border-color:var(--fg-2)}
.shelf-btn[disabled]{opacity:.35; cursor:default}
.shelf-btn svg{width:20px; height:20px}

/* =============================== SHELVES =============================== */
.shelf{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(178px,1fr);
  gap:1.2rem; overflow-x:auto; scroll-snap-type:x proximity;
  padding-bottom:1rem; margin-inline:-.4rem; padding-inline:.4rem;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.shelf::-webkit-scrollbar{height:8px}
.shelf::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:var(--r-pill)}
.shelf::-webkit-scrollbar-track{background:transparent}

.card{scroll-snap-align:start; text-decoration:none; display:block}
.card-art{
  position:relative; aspect-ratio:1; border-radius:var(--r); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card-art img{width:100%; height:100%; object-fit:cover}
.card:hover .card-art, .card:focus-visible .card-art{transform:translateY(-5px); box-shadow:0 22px 40px -22px rgba(0,0,0,.95)}
.card-play{
  position:absolute; right:.65rem; bottom:.65rem; width:44px; height:44px; border-radius:50%;
  background:var(--aqua); color:var(--aqua-ink); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(8px); transition:.2s var(--ease); box-shadow:0 8px 20px -8px rgba(0,0,0,.9);
}
.card-play svg{width:18px; height:18px; margin-left:2px}
.card:hover .card-play, .card:focus-visible .card-play{opacity:1; transform:none}
.card-name{margin-top:.8rem; font-weight:700; font-size:1.01rem; letter-spacing:-.015em; line-height:1.25; min-height:2.5em}
.card-by{margin-top:.15rem; font-size:.9rem; color:var(--muted)}

/* station cards are wider and hold a logo beside the text */
.shelf-stations{grid-auto-columns:minmax(250px,1fr)}
.station{
  display:flex; align-items:center; gap:.95rem; text-decoration:none; scroll-snap-align:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.85rem;
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.station:hover{border-color:var(--aqua); transform:translateY(-3px)}
.station-logo{width:56px; height:56px; flex:0 0 auto; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2); border:1px solid var(--line)}
.station-logo img{width:100%; height:100%; object-fit:cover}
.station-name{display:block; font-weight:700; font-size:1rem; letter-spacing:-.015em; line-height:1.25}
.station-genre{display:block; margin-top:.15rem; font-size:.88rem; color:var(--muted)}

.shelf-note{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; margin-top:1.4rem}
.shelf-note p{color:var(--muted); font-size:.97rem}

/* ============================== FEATURES ============================== */
.features{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.4rem}
.feature{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.7rem 1.5rem}
.feature .ic{
  width:46px; height:46px; border-radius:var(--r-sm); background:rgba(25,220,196,.13);
  color:var(--aqua); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem;
}
.feature .ic svg{width:23px; height:23px}
.feature h3{font-size:1.28rem}
.feature p{margin-top:.6rem; color:var(--fg-2); font-size:.99rem}

/* ============================== STEPS ============================== */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.4rem}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.7rem 1.5rem}
.step .n{
  width:40px; height:40px; border-radius:50%; background:var(--aqua); color:var(--aqua-ink);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.05rem; margin-bottom:1.1rem;
}
.step h3{font-size:1.28rem}
.step p{margin-top:.6rem; color:var(--fg-2); font-size:.99rem}

/* ============================== PRICING ============================== */
.price-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.4rem; margin-top:2.4rem; align-items:start}
.price-card{
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(1.7rem,3vw,2.4rem);
  box-shadow:var(--shadow);
}
.price-card .k{font-size:.86rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--aqua)}
.amt{display:flex; align-items:baseline; gap:.5rem; margin-top:.9rem}
.amt .v{font-size:clamp(3rem,6vw,4rem); font-weight:800; letter-spacing:-.05em; line-height:.95}
.amt .per{color:var(--muted); font-size:1rem}
.then{margin-top:1.3rem; padding-top:1.2rem; border-top:1px solid var(--line); color:var(--fg-2); font-size:1rem}
.then b{color:var(--fg)}
.incl{list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.75rem}
.incl li{position:relative; padding-left:1.9rem; color:var(--fg-2); font-size:1rem}
.incl li svg{position:absolute; left:0; top:.28em; width:18px; height:18px; color:var(--aqua)}
.price-card .btn{margin-top:1.7rem}
.fine{margin-top:1.1rem; font-size:.84rem; line-height:1.55; color:var(--muted)}
.price-side h3{font-size:1.4rem}
.price-side p{margin-top:.7rem; color:var(--fg-2)}
.side-list{list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:1rem}
.side-list li{display:flex; gap:.9rem; align-items:flex-start}
.side-list .ic{
  width:40px; height:40px; flex:0 0 auto; border-radius:var(--r-sm);
  background:rgba(25,220,196,.13); color:var(--aqua); display:flex; align-items:center; justify-content:center;
}
.side-list .ic svg{width:20px; height:20px}
.side-list .t{font-weight:700}
.side-list .d{font-size:.94rem; color:var(--muted)}

/* ================================ FAQ ================================ */
.qa{max-width:52rem; margin:2.4rem auto 0; border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:1.2rem;
  padding:1.3rem .3rem; min-height:56px; font-weight:700; font-size:1.08rem; letter-spacing:-.015em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:""; margin-left:auto; flex:0 0 auto; width:12px; height:12px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-3px,-3px); transition:transform .22s var(--ease);
}
.qa details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px); border-color:var(--aqua)}
.qa .a{padding:0 .3rem 1.4rem; color:var(--fg-2); max-width:68ch}

/* =============================== END CTA =============================== */
.cta{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(2.4rem,5vw,4rem);
}
.cta::before{
  content:""; position:absolute; inset:auto -10% -60% -10%; height:420px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(25,220,196,.16), transparent 70%);
}
.cta > *{position:relative}
.cta h2{font-size:clamp(2rem,4vw,3rem); max-width:18ch; margin-inline:auto}
.cta p{margin:1.1rem auto 0; max-width:48ch; color:var(--fg-2); font-size:1.08rem}
.cta .hero-cta{justify-content:center}

/* ================================ FOOTER ================================ */
.foot{background:var(--bg-2); border-top:1px solid var(--line); padding-block:clamp(2.8rem,5vw,3.6rem) 2rem; margin-top:clamp(2.5rem,5vw,4rem)}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:2.4rem}
.foot h4{font-size:.98rem; margin-bottom:.8rem; color:var(--fg)}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:0}
.foot li a{display:flex; align-items:center; padding:.6rem 0; min-height:44px; text-decoration:none; color:var(--fg-2); font-size:.95rem}
.foot li a:hover{color:var(--aqua)}
.foot-brand .logo img{height:26px; margin-bottom:1.2rem}
.foot-contact{display:grid; gap:0; margin-bottom:.6rem}
.foot-contact a{display:inline-flex; align-items:center; gap:.55rem; padding:.6rem 0; min-height:44px; color:var(--fg-2); text-decoration:none; font-size:.95rem}
.foot-contact a:hover{color:var(--aqua)}
.foot-contact svg{flex:0 0 auto; opacity:.7}
.foot-tag{font-size:.93rem; color:var(--muted); max-width:34ch}
.foot-base{margin-top:2.6rem; padding-top:1.7rem; border-top:1px solid var(--line); display:grid; gap:.75rem; text-align:center}
.foot-disc{font-size:.84rem; line-height:1.65; color:var(--muted); max-width:900px; margin-inline:auto}
.foot-disc a{color:var(--fg-2); text-decoration:underline}
.foot-copy{font-size:.9rem; font-weight:700; color:var(--fg)}
.foot-addr,.foot-own{font-size:.82rem; color:var(--muted)}

/* ============================= DOC PAGES ============================= */
.page-hero{padding-block:clamp(2.4rem,5vw,3.6rem); border-bottom:1px solid var(--line)}
.page-hero .back{display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; color:var(--aqua); font-size:.94rem; font-weight:600; padding:.5rem 0; min-height:40px}
.page-hero .back::before{content:"\2190"}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.2rem)}
.page-hero .lead{margin-top:1.1rem; color:var(--fg-2); font-size:1.08rem; max-width:64ch}
.page-hero .updated{margin-top:.9rem; font-size:.88rem; color:var(--muted)}

.doc{padding-block:clamp(2.4rem,5vw,3.4rem)}
.doc-card{max-width:62rem; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.6rem,4vw,3rem)}
.doc-card h2{font-size:clamp(1.3rem,2.4vw,1.7rem); margin-top:2.6rem; scroll-margin-top:96px}
.doc-card h2:first-of-type{margin-top:0}
.doc-card p{margin-top:1rem; color:var(--fg-2); max-width:72ch}
.doc-card ul,.doc-card ol{margin-top:1rem; padding-left:1.35rem; display:grid; gap:.55rem; color:var(--fg-2); max-width:72ch}
.doc-card a{color:var(--aqua); text-decoration:underline; text-underline-offset:2px}
.doc-card hr{border:0; border-top:1px solid var(--line); margin:2.4rem 0}

.toc{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem 1.5rem; margin-bottom:2.4rem}
.toc h2{font-size:1rem!important; margin:0!important}
.toc ol{margin-top:.9rem; columns:2; column-gap:2.4rem; gap:0}
.toc li{margin-bottom:.5rem; break-inside:avoid}
.toc a{font-size:.95rem}

.note{background:rgba(25,220,196,.09); border:1px solid rgba(25,220,196,.28); border-radius:var(--r); padding:1.15rem 1.3rem; margin-top:1.8rem; color:var(--fg-2); font-size:.99rem}
.info-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem}
.info-cards .ic{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem}
.info-cards .l{font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.info-cards .v{font-size:1.12rem; font-weight:800; margin-top:.3rem; letter-spacing:-.02em; word-break:break-word}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:1.8rem}
.contact-card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem}
.contact-card h2{margin-top:0!important; font-size:1.25rem!important}
.contact-row{display:flex; align-items:flex-start; gap:.9rem; margin-top:1.1rem}
.contact-row .ic{width:40px; height:40px; flex:0 0 auto; border-radius:var(--r-sm); background:rgba(25,220,196,.13); color:var(--aqua); display:flex; align-items:center; justify-content:center}
.contact-row .l{font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.contact-row .v{font-weight:600; margin-top:.1rem}

.end-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem}

/* ============================== MOTION ============================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important; animation-duration:.01ms!important}
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1040px){
  .hero .wrap{grid-template-columns:1fr}
  .mosaic{max-width:520px}
  .features{grid-template-columns:repeat(2,1fr)}
  .price-wrap{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .shelf-nav{display:none}
  .burger{display:flex}
  .nav{
    position:absolute; left:0; right:0; top:100%; display:none; margin:0;
    background:var(--bg-2); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  }
  .top[data-open="true"] .nav{display:block}
  .nav ul{flex-direction:column; align-items:stretch; gap:0; padding:.5rem 1.2rem 1.2rem}
  .nav a{padding:.9rem .3rem; border-radius:var(--r-sm)}
  .nav-cta-li{margin:.8rem 0 0}
  .nav .nav-cta{justify-content:center; min-height:52px}
  .stats{grid-template-columns:1fr 1fr}
  .stats li:nth-child(2){border-right:0}
  .stats li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .steps{grid-template-columns:1fr}
  .contact-grid,.info-cards{grid-template-columns:1fr}
  .toc ol{columns:1}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{width:calc(100% - 1.6rem)}
  .features{grid-template-columns:1fr}
  .mosaic{gap:.6rem}
  .mosaic img:nth-child(2),.mosaic img:nth-child(5),.mosaic img:nth-child(8){transform:none}
  /* six covers is enough to read as a library and keeps the offer above the fold */
  .mosaic img:nth-child(n+7){display:none}
  .hero-cta .btn{flex:1 1 100%}
  .foot-grid{grid-template-columns:1fr; gap:1.6rem}
}