/* ============================================================
   Uncommon Christian Network — stylesheet module: pages
   Interior utility pages: Terms + Privacy policy text.
   Load order (header.php): base, layout, home, live, support, pages.
   ============================================================ */
/* ---------- Policy ---------- */
.policy{max-width:820px}
.policy h2{font-size:1.32rem;margin:2.2rem 0 .6rem}
.policy h3{font-size:1.05rem;margin:1.5rem 0 .4rem;color:var(--text)}
.policy p{color:var(--muted);margin:.7rem 0;line-height:1.7}
.policy ul{color:var(--muted);margin:.5rem 0 1rem;padding-left:1.3rem;line-height:1.7}
.policy li{margin:.35rem 0}
.policy strong{color:var(--text);font-weight:600}
.policy a{color:var(--accent-2)}
.policy a:hover{text-decoration:underline}

/* ===== Contact page ======================================================= */
.ct-section{padding:clamp(64px,8vw,96px) 0}
.ct-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  align-items:start;gap:clamp(48px,7vw,100px)}
.ct-intro{min-width:0}
.ct-title{font-family:var(--display);font-weight:800;font-size:clamp(3rem,7vw,5.6rem);
  line-height:.92;letter-spacing:-.06em;margin:.6rem 0 1.2rem;color:#fdfbfe}
.ct-title .accent{color:var(--violet-500)}
.ct-lead{max-width:430px;margin:0 0 1.6rem;color:var(--muted);font-size:1.06rem;line-height:1.6}
.ct-note{display:flex;align-items:center;gap:.6rem;color:#c7cad3;font-size:.84rem;font-weight:700;margin:0}
.ct-note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 14px rgba(88,215,176,.62);flex:none}
.ct-prayer-note{margin:1.2rem 0 0;color:var(--muted);font-size:.9rem;line-height:1.6;max-width:430px}
.ct-prayer-note a{color:var(--accent-2);font-weight:600}
.ct-prayer-note a:hover{text-decoration:underline}
.ct-cancel{margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.ct-cancel p{margin:0 0 .8rem;color:var(--muted);font-size:.9rem}

.ct-card{border:1px solid var(--line);border-radius:28px;padding:clamp(28px,5vw,48px);
  background:linear-gradient(145deg,rgba(25,27,40,.96),rgba(13,14,22,.96));box-shadow:0 32px 90px rgba(0,0,0,.36)}
.ct-card-title{font-family:var(--display);margin:0 0 .5rem;font-size:1.7rem;letter-spacing:-.03em}
.ct-card-sub{margin:0 0 2rem;color:var(--muted);font-size:.92rem}
.ct-form{margin:0}
.ct-hp{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);opacity:0;pointer-events:none}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem}
.ct-field{display:grid;gap:.5rem;min-width:0}
.ct-full{grid-column:1/-1}
.ct-field label{color:#d9dbe3;font-size:.82rem;font-weight:700}
.ct-form input,.ct-form textarea{width:100%;border:1px solid rgba(255,255,255,.13);border-radius:13px;
  outline:none;background:#0b0c12;color:var(--text);font-family:var(--font);
  transition:border-color .2s ease,box-shadow .2s ease}
.ct-form input{height:50px;padding:0 .95rem;font-size:1rem}
.ct-form textarea{min-height:180px;resize:vertical;padding:.85rem .95rem;line-height:1.55;font-size:1rem}
.ct-form input::placeholder,.ct-form textarea::placeholder{color:#666b7a}
.ct-form input:focus,.ct-form textarea:focus{border-color:var(--violet-400);box-shadow:0 0 0 4px rgb(from var(--violet-400) r g b / .18)}
.ct-footer{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;margin-top:1.6rem;flex-wrap:wrap}
.ct-required{margin:0;color:#777c8c;font-size:.76rem}
.ct-send{min-height:48px;border:1px solid var(--violet-500);border-radius:999px;padding:.7rem 1.3rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.5rem;color:#fff;font-weight:800;
  background:var(--violet-600);box-shadow:0 14px 38px rgb(from var(--violet-600) r g b / .32);
  transition:transform .2s ease,box-shadow .2s ease}
.ct-send:hover{transform:translateY(-2px);background:var(--violet-500);box-shadow:0 18px 44px rgb(from var(--violet-500) r g b / .42);color:#fff}
.ct-send:disabled{opacity:.6;cursor:default;transform:none}
.ct-send svg{width:16px;height:16px}
.ct-status{margin:1.2rem 0 0;font-size:.86rem;color:var(--ok);min-height:1.1em}
.ct-status.is-err{color:var(--danger)}
.ct-done{text-align:center;padding:1.5rem .5rem}
.ct-done[hidden]{display:none}
.ct-form[hidden]{display:none}
.ct-done-ico{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:rgba(88,215,176,.16);color:var(--ok);margin:0 auto .7rem}
.ct-done-ico svg{width:28px;height:28px}
.ct-done h3{font-family:var(--display);font-size:1.4rem;margin:0 0 .4rem}
.ct-done p{color:var(--muted);max-width:44ch;margin:0 auto}
@media (max-width:940px){
  .ct-layout{grid-template-columns:1fr;gap:2.6rem}
  .ct-lead,.ct-prayer-note{max-width:650px}
}
@media (max-width:560px){
  .ct-grid{grid-template-columns:1fr}
  .ct-full{grid-column:auto}
  .ct-footer{align-items:stretch;flex-direction:column-reverse}
  .ct-send{width:100%;justify-content:center}
}

/* ===== Prayer page ========================================================
   A direct port of the approved redesign: the 1180px shell, the 680px hero,
   the three-up story carousel with the middle card lifted, the reach panel,
   and the amber "what happens next" strip. Colours are the design file's own
   values, scoped to this page's sections so nothing leaks sitewide; the faces
   are DM Sans + Fraunces, self-hosted in support.css alongside the /support
   port. Everything is prefixed prx-. */
.prx-hero,.prx-stories,.prx-reach{
  --p1:#9667ad;
  --p2:#af80c5;
  --p3:#7a568c;
  --p4:#60466c;
  --p5:#322637;
  --pg:#07060e;
  --ink:#f7f3fa;
  --dim:#b9b0c2;
  --amber:#efb23d;
  --teal:#55d5c2;
  --edge:rgba(175,128,197,.34);
  --sans:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:Fraunces,Georgia,serif;
  font-family:var(--sans);
  color:var(--ink);
}
.prx-shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.prx-hero h1,.prx-stories h2,.prx-reach h2{font-family:var(--serif);font-weight:600}
.prx-hero p,.prx-stories p,.prx-reach p{color:var(--dim);line-height:1.6}
.prx-eyebrow{margin:0 0 10px;color:var(--p2);font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase}
.prx-amber{color:var(--amber)}
.prx-panel{border:1px solid var(--edge);border-radius:22px;
  background:linear-gradient(145deg,rgba(24,20,34,.97),rgba(11,10,18,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.32)}

/* ---------- Hero ----------
   The section takes the artwork's own aspect ratio, so `contain` is an exact
   fit: the whole picture, uncropped, with no bars at the edges. */
.prx-hero{position:relative;aspect-ratio:1774/887;min-height:680px;display:grid;align-items:center;
  background:var(--pg)}
.prx-hero-art,.prx-hero-shade{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#07060e}
.prx-hero-shade{background:
  linear-gradient(90deg,rgba(5,4,11,.98),rgba(5,4,11,.76) 35%,rgba(5,4,11,.1) 68%),
  linear-gradient(0deg,var(--pg),transparent 18%)}
.prx-hero-copy{position:relative;z-index:1}
.prx-rule{display:block;width:70px;height:3px;margin-bottom:28px;background:var(--p1)}
.prx-hero h1{margin:0 0 25px;font-size:clamp(4rem,7vw,7rem);line-height:.82;letter-spacing:-.05em;
  color:var(--ink)}
.prx-hero h1 em,.prx-reach h2 em{color:var(--p2);font-style:normal}
.prx-hero-copy>p{max-width:500px;margin:0;font-size:1.05rem}
.prx-hero-copy strong{color:var(--p2)}
.prx-trust{display:flex;flex-wrap:wrap;gap:24px;margin:42px 0 0;padding:0;list-style:none}
.prx-trust li{display:grid;grid-template-columns:auto 1fr;column-gap:9px;padding-right:24px;
  border-right:1px solid rgba(255,255,255,.16)}
.prx-trust li:last-child{border-right:0;padding-right:0}
.prx-trust svg{grid-row:1 / span 2;align-self:center;width:30px;height:30px;fill:none;
  stroke:var(--p2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.prx-trust b{align-self:end;color:#fff;font-size:.78rem}
.prx-trust small{grid-column:2;color:var(--dim);font-size:.78rem}

/* ---------- The story carousel ---------- */
.prx-stories{padding:36px 0 62px;text-align:center}
.prx-stories h2{margin:0;font-size:2.4rem;line-height:1.15;color:var(--ink)}
.prx-carousel{position:relative;display:grid;grid-template-columns:.68fr 1.55fr .68fr;
  align-items:stretch;margin-top:26px}
.prx-story{position:relative;overflow:hidden;border:1px solid var(--edge);border-radius:16px;
  background:#12101b;text-align:left}
.prx-story{display:flex}
.prx-story>img,.prx-story-shade{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;
  background:#0a0811}
/* The active card's own 16:9 sets the row height; the sides stretch to match. */
.prx-story-side>img{height:100%;aspect-ratio:auto;object-fit:cover}
.prx-story-shade{position:absolute;inset:0;height:100%;
  background:linear-gradient(180deg,transparent 20%,rgba(8,6,14,.88) 86%)}
.prx-story-active{z-index:2;transform:scale(1.06);border-color:#b35c75;
  box-shadow:0 24px 55px rgba(0,0,0,.5)}
.prx-story-side{opacity:.66}
.prx-badge{position:absolute;z-index:2;top:18px;left:18px;display:inline-flex;align-items:center;
  gap:7px;padding:8px 14px;border-radius:999px;background:rgba(80,42,103,.9);
  font-size:.75rem;color:var(--ink)}
.prx-badge svg{width:15px;height:15px;flex:none;fill:currentColor}
.prx-badge-prayer{color:#f0c7de}
.prx-badge-testimony{background:rgba(157,103,23,.9);color:#fff2c7}
.prx-badge-question svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.prx-story blockquote{position:absolute;z-index:2;left:22px;right:22px;bottom:40px;margin:0;
  color:#fff;font-size:1.02rem;line-height:1.45}
.prx-story>small{position:absolute;z-index:2;left:22px;bottom:18px;color:#d3c6da;
  font-size:.58rem;letter-spacing:.13em;text-transform:uppercase}
.prx-arrow{position:absolute;z-index:4;top:50%;width:48px;height:48px;transform:translateY(-50%);
  border:1px solid var(--p3);border-radius:50%;background:#492260;color:#fff;font-size:2rem;
  line-height:1;cursor:pointer;font-family:var(--sans)}
.prx-arrow:hover{background:#5c2c78}
.prx-arrow:focus-visible{outline:2px solid var(--p2);outline-offset:3px}
.prx-arrow-left{left:-25px}
.prx-arrow-right{right:-25px}
.prx-dots{display:flex;justify-content:center;gap:10px;margin:30px 0 18px}
.prx-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#403748;
  cursor:pointer}
.prx-dots button[aria-selected="true"]{background:var(--p1)}
.prx-dots button:focus-visible{outline:2px solid var(--p2);outline-offset:3px}
.prx-privacy-note{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;
  color:var(--p2);font-size:.9rem;line-height:1.6}
.prx-privacy-note svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Reach out ---------- */
.prx-reach{padding:38px 42px}
.prx-reach-top{display:grid;grid-template-columns:1.5fr .7fr;gap:54px}
.prx-reach h2{margin:0 0 18px;font-size:2.8rem;line-height:1.1;color:var(--ink)}
.prx-reach-top>div:first-child>p:last-child{max-width:650px;margin:0;font-size:.88rem}
.prx-reach-top strong{color:#ddd3e1}
/* The call pill, kept from the previous prayer page: one big pill that flashes
   through the five tag colours in step with the tiles below (see ppPillHue),
   with "or text" and the availability lines centred under it. The number is set
   in the site display face, not the design file's. */
.prx-phone{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;text-align:center}
.pp-pill{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
  padding:.62rem 1.3rem .62rem .7rem;border-radius:999px;color:#fff;
  background-color:#e8890b;
  background-image:linear-gradient(180deg,rgba(255,255,255,.24),rgba(0,0,0,.2));
  box-shadow:0 12px 30px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 6px rgba(0,0,0,.22);
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  animation:ppPillHue 10.8s linear infinite;transition:transform .14s}
.pp-pill:hover{transform:translateY(-1px)}
.pp-pill:focus-visible{outline:3px solid var(--violet-400);outline-offset:2px}
.pp-pill-ico{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:2px solid rgba(255,255,255,.7);color:#fff}
.pp-pill-ico svg{width:19px;height:19px}
.pp-pill-copy{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.pp-number{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.01em;color:#fff}
.pp-sub{margin-top:.16rem;color:rgba(255,255,255,.9);font-size:.72rem;font-weight:600;
  font-variant-numeric:tabular-nums}
.pp-text{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;
  color:var(--muted);font-weight:600;font-size:.92rem;transition:color .16s}
.pp-text:hover{color:var(--text)}
.pp-text svg{width:16px;height:16px}
/* The flash: the same five colours, the same hold-then-snap timing as the tiles,
   and no delay, so the pill's rose lands with tile #1 (rose) at t=0. */
@keyframes ppPillHue{
  0%,18%   {background-color:#f43f5e}          /* rose   - Prayer Request */
  20%,38%  {background-color:#f59e0b}          /* amber  - Testimony */
  40%,58%  {background-color:var(--violet-600)}/* violet - Question */
  60%,78%  {background-color:#38bdf8}          /* sky    - Comment */
  80%,98%  {background-color:#2dd4bf}          /* teal   - Skeptic */
  100%     {background-color:#f43f5e}
}
.pp-avail{display:inline-flex;align-items:center;gap:.45rem;margin-top:.2rem;
  color:var(--muted);font-size:.82rem}
.pl-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px rgba(67,197,158,.18)}
.pp-age{color:var(--muted);font-size:.78rem}
@media (prefers-reduced-motion:reduce){.pp-pill{animation:none}}
.prx-prompt{margin:14px 0;color:var(--p2);font-size:.85rem;font-weight:600}

/* The share widget itself. */
.prx-hp{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);opacity:0;pointer-events:none}
/* Tags. Each carries its own colour (--tc as R,G,B) and they run a "chase":
   one lights up at a time, in order, around a shared 10.8s cycle — the previous
   page's behaviour, kept because it is what tells people the tags are live.
   --chase is each tile's slot offset into that cycle. Hover and selected states
   are !important so they beat the running animation without pausing it, since
   pausing would drift the tiles out of step with the phone pill. */
.prx-types{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.prx-send,.prx-again{padding:15px 12px;border:1px solid rgba(255,255,255,.14);
  border-radius:9px;background:#181624;color:#fff;cursor:pointer;font:inherit}
.prx-type{display:flex;flex-direction:row;align-items:center;gap:.7rem;min-width:0;
  padding:.62rem .8rem;cursor:pointer;font:inherit;text-align:left;color:var(--ink);
  border:1px solid var(--edge);border-radius:10px;background:rgba(255,255,255,.03);
  --tc:146,75,181;
  animation:prxTagChase 10.8s linear infinite;animation-delay:var(--chase,0s);
  transition:transform .12s}
.prx-type[data-topic="prayer"]   {--tc:244,63,94;  --chase:-10.8s}
.prx-type[data-topic="testimony"]{--tc:245,158,11; --chase:-8.64s}
.prx-type[data-topic="question"] {--tc:146,75,181; --chase:-6.48s}
.prx-type[data-topic="comment"]  {--tc:56,189,248; --chase:-4.32s}
.prx-type[data-topic="skeptic"]  {--tc:45,212,191; --chase:-2.16s}
.prx-type-ico{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:#c3cad4;
  animation:prxTagIcoChase 10.8s linear infinite;animation-delay:var(--chase,0s)}
.prx-type-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.prx-type[data-topic="prayer"] svg,.prx-type[data-topic="testimony"] svg{fill:currentColor;stroke:none}
.prx-type-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:700;font-size:.95rem;line-height:1.2}
/* Five tiles: each lit for one 1/5 slot — hold to 18%, snap out by 20%. */
@keyframes prxTagChase{
  0%,18%   {background-color:rgba(var(--tc),.5);border-color:rgb(var(--tc))}
  20%,100% {background-color:rgba(255,255,255,.03);border-color:var(--edge)}
}
@keyframes prxTagIcoChase{
  0%,18%   {background-color:rgb(var(--tc));color:#0d0f16}
  20%,100% {background-color:rgba(255,255,255,.07);color:#c3cad4}
}
.prx-type:hover{background:rgba(var(--tc),.42)!important;border-color:rgb(var(--tc))!important;
  transform:translateY(-1px)}
.prx-type:hover .prx-type-ico{background:rgb(var(--tc))!important;color:#0d0f16!important}
.prx-type:focus-visible{outline:2px solid rgb(var(--tc));outline-offset:2px}
.prx-type.is-active{border-color:rgb(var(--tc))!important;background:rgb(var(--tc))!important;
  box-shadow:0 0 0 1px rgb(var(--tc)) inset,0 8px 22px rgba(var(--tc),.4)}
.prx-type.is-active .prx-type-name{color:#fff}
.prx-type.is-active .prx-type-ico{background:rgba(255,255,255,.9)!important;color:#0d0f16!important}
/* Once a tag is chosen the chase stops (the phone pill keeps its own). */
.prx-types.picked .prx-type,.prx-types.picked .prx-type-ico{animation:none}
@media (prefers-reduced-motion:reduce){
  .prx-type,.prx-type-ico{animation:none}}
.prx-message-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin:30px 0 10px;font-size:.8rem}
.prx-switch-label{display:flex;align-items:center;gap:9px;color:var(--dim);cursor:pointer}
.prx-switch-label input{position:absolute;opacity:0;width:0;height:0}
.prx-switch{position:relative;width:42px;height:22px;border-radius:99px;background:#3a3446;
  transition:background .18s}
.prx-switch:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .18s}
.prx-switch-label input:checked + .prx-switch{background:var(--p1)}
.prx-switch-label input:checked + .prx-switch:after{transform:translateX(20px)}
.prx-switch-label input:focus-visible + .prx-switch{outline:2px solid var(--p2);outline-offset:2px}
.prx-reach textarea,.prx-fields input{width:100%;border:1px solid rgba(255,255,255,.16);
  border-radius:8px;background:#090810;color:#fff;outline:0;font:inherit}
.prx-reach textarea{display:block;min-height:150px;padding:18px;resize:vertical}
.prx-reach textarea:focus,.prx-fields input:focus{border-color:var(--p2)}
.prx-reach textarea::placeholder,.prx-fields input::placeholder{color:#7a7286}
/* The consent line is a legal record of what was agreed to — never hidden. */
.prx-consent{margin:12px 0 0;padding:10px 14px;border:1px solid var(--edge);border-radius:8px;
  font-size:.74rem;font-weight:700;letter-spacing:.03em;line-height:1.5}
.prx-consent.is-private{color:var(--dim);background:rgba(255,255,255,.02)}
.prx-consent.is-public{color:#8ee6c8;border-color:rgba(85,213,194,.5);background:rgba(85,213,194,.08)}
.prx-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.prx-fields input{padding:14px}
.prx-fields input:last-child{grid-column:1/-1}
.prx-send-row{display:flex;align-items:center;flex-wrap:wrap;gap:28px;margin-top:24px}
.prx-send{min-width:145px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;background:linear-gradient(135deg,#7139c8,var(--p1));font-weight:600}
.prx-send:hover{filter:brightness(1.08)}
.prx-send[disabled]{opacity:.55;cursor:default;filter:none}
.prx-send svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.prx-send-row>p{display:flex;align-items:center;gap:9px;margin:0;font-size:.75rem;line-height:1.6}
.prx-send-row>p svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--p2)}
.prx-status{flex:1 1 100%;min-height:1.1em;color:var(--p2);font-size:.8rem}
.prx-status.is-err{color:#ff9a9a}
.prx-done{text-align:center;padding:26px 0 8px}
.prx-done>span{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 16px;
  border-radius:50%;background:rgba(85,213,194,.16);color:var(--teal)}
.prx-done>span svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.prx-done h3{margin:0 0 .4rem;font-family:var(--serif);font-weight:600;font-size:1.6rem;color:var(--ink)}
.prx-done-msg{margin:0 0 18px;color:var(--dim);line-height:1.6}
.prx-again{background:transparent;border-color:var(--p3);font-weight:600}
.prx-again:hover{border-color:var(--p2);background:rgba(150,103,173,.14)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .prx-shell{width:min(100% - 28px,700px)}
  .prx-hero{aspect-ratio:auto;min-height:620px}
  .prx-hero-art{object-fit:cover;object-position:63% center}
  .prx-hero-shade{background:linear-gradient(90deg,rgba(5,4,11,.93),rgba(5,4,11,.48)),
    linear-gradient(0deg,var(--pg),transparent 25%)}
  .prx-hero h1{font-size:clamp(3.6rem,14vw,5.7rem)}
  .prx-carousel{grid-template-columns:1fr}
  .prx-story-side{display:none}
  .prx-story-active{transform:none}
  .prx-arrow-left{left:-10px}
  .prx-arrow-right{right:-10px}
  .prx-reach-top{grid-template-columns:1fr;gap:28px}
  .prx-types{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .prx-trust{gap:12px}
  .prx-trust li{padding-right:12px}
  .prx-stories h2{font-size:1.9rem}
  .prx-reach{padding:28px 22px}
  .prx-reach h2{font-size:2.2rem}
  .prx-types{grid-template-columns:1fr}
  .prx-fields{grid-template-columns:1fr}
  .prx-fields input:last-child{grid-column:auto}
  .prx-send-row{align-items:flex-start;flex-direction:column;gap:16px}
}

/* ── listen.php: the page a shared link lands on ─────────────────────────────
   Deliberately one card and nothing else. Someone arriving here followed a
   link from a text message; the job is to let them press play in one tap, not
   to sell them the rest of the site. */
.lsn{max-width:640px;margin:0 auto;padding:48px 20px 72px}
.lsn-card{background:var(--ucn-surface,#16131f);border:1px solid rgba(255,255,255,.14);
  border-radius:24px;padding:32px 28px;text-align:center}
.lsn-art{width:220px;height:220px;object-fit:cover;border-radius:18px;
  border:1px solid rgba(175,128,197,.35);margin:0 auto 20px;display:block}
.lsn-eyebrow{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--ucn-bright,#af80c5)}
.lsn-title{margin:0 0 4px;font-size:clamp(24px,5vw,32px);line-height:1.15}
.lsn-by{margin:0 0 22px;color:var(--ucn-muted-text,#b9abc1)}
.lsn-audio{width:100%;margin-bottom:18px}
.lsn-note{margin:0 0 22px;font-size:13px;color:var(--ucn-muted-text,#b9abc1)}
.lsn-links{display:flex;flex-direction:column;gap:10px}
.lsn-btn{display:block;padding:13px 18px;border-radius:14px;text-decoration:none;
  font-weight:700;color:#fff;background:linear-gradient(135deg,#af80c5,#743a94)}
.lsn-btn-quiet{background:none;border:1px solid rgba(255,255,255,.16);
  color:var(--ucn-bright,#af80c5)}