/* ============================================================
   Uncommon Christian Network — stylesheet module: home
   The new home page (hp-*) and the Prayer page's share widget.
   Load order (header.php): base, layout, home, live, support, pages.
   ============================================================ */

/* ===== Apps and distribution =========================================== */
.dist{--dp:#b280cb;position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:clamp(58px,6vw,92px) 0;background:#03050d;
  background-image:radial-gradient(circle at 50% 0,rgba(131,66,163,.18),transparent 36%),linear-gradient(rgba(7,10,22,.25),rgba(1,3,10,.92)),repeating-linear-gradient(90deg,transparent 0 69px,rgba(177,126,203,.025) 70px),repeating-linear-gradient(0deg,transparent 0 69px,rgba(177,126,203,.025) 70px)}
.dist:before,.dist:after{content:"";position:absolute;z-index:-1;width:27vw;height:160px;top:70px;opacity:.75;background-image:radial-gradient(circle,rgba(170,115,198,.95) 0 1.5px,transparent 1.8px);background-size:11px 11px;mask-image:radial-gradient(ellipse,black,transparent 70%)}
.dist:before{left:-3vw;transform:skewY(9deg)}.dist:after{right:-3vw;transform:skewY(-9deg)}
.dist-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:#8744a8;filter:blur(120px);opacity:.13;z-index:-1}.dist-glow--left{left:-150px;top:35%}.dist-glow--right{right:-130px;bottom:15%}
.dist-shell{width:min(1420px,calc(100% - 48px));margin:auto}.dist-hero{min-height:300px;display:grid;grid-template-columns:minmax(220px,330px) 1fr 200px;align-items:center}.dist-phone{grid-column:1;justify-self:center;width:min(270px,100%);height:310px;overflow:hidden;filter:drop-shadow(0 20px 30px #000)}.dist-phone img{width:100%;height:100%;object-fit:cover;object-position:center;transform:rotate(-7deg) scale(.9);border-radius:34px}
.dist-main{grid-column:2;text-align:center;max-width:820px;width:100%;justify-self:center}.dist-kicker{margin:0 0 10px;text-transform:uppercase;letter-spacing:.22em;font:500 14px var(--display);display:flex;align-items:center;justify-content:center;gap:14px}.dist-kicker span{width:32px;height:1px;background:var(--dp)}.dist-main h2{font:800 clamp(2rem,3.4vw,3.35rem)/1.04 var(--display);letter-spacing:-.045em;margin:0}.dist-main h2 em,.dist-bottom em{color:#b27fcb;font-style:normal}.dist-lead{color:#d0d2da;line-height:1.55;margin:12px auto 18px;font-size:clamp(.92rem,1.2vw,1.08rem)}
.dist-stores{display:flex;justify-content:center;gap:8px}.dist-stores a{width:min(300px,47%);height:92px;border:1px solid rgba(170,114,198,.62);border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;background:rgba(3,4,13,.82);transition:.2s}.dist-stores a:hover{border-color:#b584cd;box-shadow:0 0 22px rgba(162,102,192,.25);transform:translateY(-2px)}.dist-stores img{display:block;max-width:190px;max-height:54px}.dist-stores small{color:#b07cc9;margin-top:-2px}.dist-icon{display:block;width:25px;height:25px;color:var(--dp);position:relative}.dist-icon:before{font-size:24px;line-height:1}.dist-icon--antenna:before{content:'⌁'}.dist-icon--headphones:before{content:'♧'}.dist-icon--mic:before{content:'♩'}.dist-icon--heart:before{content:'♡';font-size:31px}.dist-icon--globe:before{content:'◎';font-size:29px}
.dist-rule{display:flex;align-items:center;justify-content:center;gap:16px;margin:12px 0 14px}.dist-rule span{width:52px;height:1px;background:linear-gradient(90deg,transparent,var(--dp))}.dist-rule span:last-child{transform:scaleX(-1)}.dist-rule h3{text-transform:uppercase;letter-spacing:.2em;font:500 clamp(.86rem,1.5vw,1.05rem) var(--display);margin:0;white-space:nowrap}
.dist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.dist-card{min-width:0;min-height:190px;padding:17px 14px 10px;border:1px solid rgba(154,165,195,.25);border-radius:13px;background:linear-gradient(145deg,rgba(12,18,31,.88),rgba(3,6,14,.94));box-shadow:inset 0 0 22px rgba(40,99,160,.04);display:flex;flex-direction:column;text-align:center}.dist-logo{min-height:38px;display:flex;align-items:center;justify-content:center;font:700 1.35rem/1 var(--display);letter-spacing:-.03em}.dist-logo span{color:#a5ff36}.dist-card>p{color:#d2d5dd;font-size:.78rem;line-height:1.45;max-width:33ch;margin:5px auto 10px}.dist-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:auto}.dist-facts span{display:flex;align-items:center;justify-content:center;gap:5px;color:#e5e5eb;font-size:.61rem;line-height:1.18}.dist-facts i{font-style:normal;color:var(--dp);font-size:1.2rem}.dist-card>a{height:29px;margin-top:10px;border:1px solid rgba(165,106,194,.48);border-radius:6px;text-decoration:none;color:#b88acf;font-size:.72rem;display:flex;align-items:center;justify-content:center;transition:.2s}.dist-card>a:hover{background:rgba(165,106,194,.11);box-shadow:0 0 14px rgba(165,106,194,.18);color:#d4b8e2}
.dist-bottom{margin-top:14px;min-height:104px;border:1px solid rgba(170,114,197,.72);border-radius:12px;display:grid;grid-template-columns:320px 330px 1fr 220px;align-items:center;overflow:hidden;background:linear-gradient(90deg,rgba(33,17,40,.42),rgba(2,5,15,.95))}.dist-world{height:100%;position:relative;background:radial-gradient(ellipse at 48% 100%,rgba(157,93,189,.3),transparent 62%);border-right:1px solid rgba(170,115,198,.18)}.dist-world:before{content:"";position:absolute;inset:15px;background-image:radial-gradient(circle,#b88acf 0 1px,transparent 1.6px);background-size:8px 8px;mask-image:radial-gradient(ellipse,black,transparent 70%)}.dist-world span{position:absolute;width:7px;height:7px;background:#c39cd6;border-radius:50%;box-shadow:0 0 12px 4px #a468c2}.dist-world span:nth-child(1){left:20%;top:35%}.dist-world span:nth-child(2){left:45%;top:23%}.dist-world span:nth-child(3){left:62%;top:52%}.dist-world span:nth-child(4){left:78%;top:34%}.dist-bottom-copy{padding:12px 20px}.dist-bottom-copy h3{font:700 1.45rem var(--display);margin:0 0 6px}.dist-bottom-copy p{color:#c8cad3;font-size:.69rem;line-height:1.5;margin:0}.dist-platforms{height:72%;border-left:1px solid rgba(157,168,196,.25);border-right:1px solid rgba(157,168,196,.25);display:flex;align-items:center;justify-content:space-around;color:#aa73c6;text-align:center;gap:10px}.dist-platforms span{font-size:1.45rem}.dist-platforms small{display:block;color:#ddd;font-size:.56rem;line-height:1.3;margin-top:5px}.dist-platforms>small{font-size:.62rem;margin:0}.dist-count{text-align:center;text-transform:uppercase}.dist-count b{display:block;color:#af7ac9;font:800 2.45rem var(--display)}.dist-count span{font-size:.7rem;letter-spacing:.04em}
@media(max-width:1100px){.dist-hero{grid-template-columns:220px 1fr}.dist-main{grid-column:2}.dist-grid{grid-template-columns:repeat(3,1fr)}.dist-bottom{grid-template-columns:240px 1fr 1.2fr 190px}.dist-world{display:block}.dist-platforms{padding:0 10px}}
@media(max-width:800px){.dist-shell{width:min(100% - 28px,680px)}.dist-hero{display:block}.dist-phone{display:none}.dist-grid{grid-template-columns:repeat(2,1fr)}.dist-bottom{grid-template-columns:1fr 170px}.dist-world,.dist-platforms{display:none}.dist-bottom-copy{padding:20px}.dist-rule h3{white-space:normal;text-align:center}}
@media(max-width:520px){.dist{padding:52px 0}.dist-shell{width:calc(100% - 20px)}.dist-main h2{font-size:2.15rem}.dist-lead br{display:none}.dist-stores{flex-direction:column;align-items:center}.dist-stores a{width:100%;height:82px}.dist-grid{grid-template-columns:1fr}.dist-card{min-height:184px}.dist-bottom{grid-template-columns:1fr;text-align:center}.dist-count{padding:0 0 18px}.dist-bottom-copy p br{display:none}.dist-rule span{width:22px;flex:none}}

/* Apps + radio distribution: one restrained black canvas, using the existing
   approved artwork as a logo/phone sprite so third-party marks stay intact. */
.dist.dist--reference{--dp:var(--ucn-purple);position:relative;isolation:isolate;overflow:hidden;padding:clamp(48px,5vw,72px) 0 clamp(52px,5vw,68px);background:linear-gradient(180deg,rgba(6,6,10,1),rgba(9,9,18,0) 120px),linear-gradient(0deg,#050509,rgba(9,9,18,0) 110px),radial-gradient(ellipse 44% 38% at 8% 6%,rgba(167,117,190,.16),transparent 68%),radial-gradient(ellipse 40% 34% at 94% 10%,rgba(167,117,190,.13),transparent 66%),radial-gradient(ellipse 70% 40% at 50% 104%,rgba(122,86,140,.18),transparent 72%),radial-gradient(circle at 50% 46%,rgba(74,51,88,.1),transparent 58%),#090912}
.dist.dist--reference:before,.dist.dist--reference:after{display:block;z-index:0;top:105px;width:20vw;max-width:340px;height:160px;opacity:.1;background-image:radial-gradient(circle,rgba(174,128,197,.7) 0 1px,transparent 1.35px);background-size:10px 10px;mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.55),transparent);transform:skewY(7deg)}
.dist.dist--reference:before{left:-5vw}.dist.dist--reference:after{right:-5vw;transform:skewY(-7deg) scaleX(-1)}
.dist--reference .dist-shell{position:relative;z-index:1}
/* Two more ambient layers behind the content: a hairline violet grid that
   fades out toward the edges, and a wide diagonal sweep across the middle. */
.dist--reference .dist-shell::before,.dist--reference .dist-shell::after{
  content:"";position:absolute;z-index:-1;pointer-events:none}
.dist--reference .dist-shell::before{
  inset:-6% -14%;
  background-image:linear-gradient(rgba(167,117,190,.12) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(167,117,190,.12) 1px,transparent 1px);
  background-size:64px 64px;opacity:.4;
  mask-image:radial-gradient(ellipse 62% 58% at 50% 42%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 42%,#000,transparent 76%)}
.dist--reference .dist-shell::after{
  left:-20%;right:-20%;top:34%;height:340px;opacity:.5;
  background:linear-gradient(102deg,transparent,rgba(167,117,190,.14) 38%,rgba(201,167,219,.08) 52%,transparent 74%);
  filter:blur(28px);transform:rotate(-3deg)}
.dist--reference .dist-shell{display:block;width:min(calc(100% - 64px),1480px);margin-inline:auto}
.dist--reference .dist-hero{min-height:365px;display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:clamp(42px,6vw,92px);align-items:center}
.dist--reference .dist-phone{grid-column:1;grid-row:1;width:300px;max-width:100%;height:365px;position:relative;overflow:visible;justify-self:center;filter:drop-shadow(0 28px 40px rgba(0,0,0,.42)) drop-shadow(0 0 22px rgba(150,103,173,.1));isolation:isolate}
.dist--reference .dist-phone:after{content:"";position:absolute;z-index:-1;width:280px;height:55px;left:50%;bottom:-5px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(137,88,162,.18),transparent 70%);filter:blur(12px)}
.dist--reference .dist-phone img{display:block;position:static;width:auto;height:100%;max-width:100%;margin:auto;transform:none;border-radius:0;object-fit:contain}
.dist--reference .dist-main{grid-column:2;grid-row:1;text-align:center;width:100%;max-width:920px;justify-self:start}
.dist--reference .dist-kicker{margin:0 0 20px;color:#aaa3ad;font:500 clamp(12px,1vw,14px)/1.2 var(--display);letter-spacing:.22em;gap:18px}
.dist--reference .dist-kicker span{width:36px;background:rgba(165,118,188,.65)}
.dist--reference .dist-main h2{margin:0;color:#f0edf1;font:800 clamp(44px,4.2vw,68px)/1 var(--display);letter-spacing:-.025em}
.dist--reference .dist-main h2 em{color:#a372bc}
.dist--reference .dist-lead{max-width:720px;margin:18px auto 24px;color:#b0aab3;font-size:clamp(17px,1.3vw,19px);line-height:1.5}
.dist--reference .dist-stores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:740px;margin-inline:auto}
.dist--reference .dist-stores a{width:100%;height:110px;min-height:105px;padding:10px;overflow:hidden;border:1px solid rgba(167,117,190,.42);border-radius:14px;background:linear-gradient(160deg,rgba(167,117,190,.18),rgba(13,11,22,.94) 46%,rgba(8,7,14,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 30px rgba(167,117,190,.08);transition:border-color .18s,box-shadow .18s,transform .18s}
.dist--reference .dist-stores a:hover{border-color:rgba(201,167,219,.75);background:linear-gradient(160deg,rgba(167,117,190,.3),rgba(18,14,28,.94) 46%,rgba(10,8,16,.97));box-shadow:0 0 26px rgba(167,117,190,.22),inset 0 1px 0 rgba(255,255,255,.07);transform:translateY(-2px)}
.dist--reference .dist-stores a:focus-visible{outline:2px solid var(--ucn-purple-bright);outline-offset:3px}
.dist--reference .dist-stores img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain}
.dist--reference .dist-rule{margin:clamp(60px,5.5vw,75px) 0 18px;gap:18px}
.dist--reference .dist-rule span{width:clamp(42px,7vw,120px);height:1px;background:linear-gradient(90deg,transparent,rgba(167,117,190,.75))}
.dist--reference .dist-rule h3{color:#c1bbc3;font:500 clamp(14px,1.15vw,16px)/1.2 var(--display);letter-spacing:.18em}
.dist--reference .dist-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
/* A directory card: brand mark, the brand's name, one line about it, and a link
   out. Grid rather than flex so the mark and the arrow stay put however long
   the description wraps. */
.dist--reference .dist-card{
  /* min-height and text-align come from the base .dist-card rule, which was
     written for the old tall centred card — reset them here. */
  min-width:0;min-height:0;text-align:left;box-shadow:none;
  display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;
  column-gap:14px;padding:18px 16px;text-decoration:none;
  border:1px solid rgba(137,127,143,.27);border-radius:12px;
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,rgba(167,117,190,.16),rgba(15,13,25,.93) 45%,rgba(9,8,15,.97));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),inset 0 0 34px rgba(167,117,190,.07);
  transition:border-color .2s,box-shadow .2s,background .2s}
/* A violet bloom in the top-left corner of every card, brightening on hover. */
.dist--reference .dist-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;transition:opacity .2s;
  background:radial-gradient(120% 90% at 0% 0%,rgba(167,117,190,.22),transparent 58%)}
.dist--reference .dist-card:hover::before{opacity:1}
.dist--reference .dist-card:hover{
  border-color:rgba(201,167,219,.62);
  box-shadow:0 0 28px rgba(167,117,190,.2),inset 0 1px 0 rgba(255,255,255,.07),
             inset 0 0 40px rgba(167,117,190,.12)}
.dist--reference .dist-mark{
  position:relative;width:46px;height:46px;display:grid;place-items:center;border-radius:11px;overflow:hidden;
  border:1px solid rgba(167,117,190,.2);
  background:linear-gradient(150deg,rgba(167,117,190,.2),rgba(12,10,20,.9))}
.dist--reference .dist-mark svg,.dist--reference .dist-mark img{
  width:100%;height:100%;object-fit:contain;display:block}
.dist--reference .dist-copy{min-width:0;display:flex;flex-direction:column;gap:6px}
.dist--reference .dist-copy b{
  color:#f0edf1;font:600 17px/1.2 var(--display);letter-spacing:-.01em;overflow-wrap:anywhere}
.dist--reference .dist-copy b i{font-style:normal}
.dist--reference .dist-copy small{color:#a9a2b1;font-size:13px;line-height:1.45}
/* Brand accents, so each name reads the way that service writes it. */
.dist--reference .dist-copy .c-red{color:#e8302a}
.dist--reference .dist-copy .c-blue{color:#2f9bff;font-style:italic}
.dist--reference .dist-copy .c-orange{color:#ff6a00}
.dist--reference .dist-card:first-child .dist-copy b i{color:#7ed321}

.dist--reference .dist-bottom{margin-top:28px;min-height:145px;padding:20px 28px;border:1px solid rgba(149,110,169,.31);border-radius:15px;grid-template-columns:minmax(220px,300px) minmax(250px,340px) 1fr minmax(185px,220px);background:linear-gradient(90deg,rgba(14,13,22,.94),rgba(10,10,17,.97));overflow:hidden}
.dist--reference .dist-world{height:100%;border-right:0;background:radial-gradient(ellipse at 48% 100%,rgba(111,76,128,.16),transparent 66%)}
.dist--reference .dist-world:before{inset:20px;background-image:radial-gradient(circle,rgba(174,128,197,.5) 0 1px,transparent 1.5px);background-size:8px 8px;opacity:.42}
.dist--reference .dist-world span{width:5px;height:5px;background:#ae80c5;box-shadow:0 0 10px 2px rgba(150,103,173,.45)}
.dist--reference .dist-bottom-copy{padding:12px 22px}
.dist--reference .dist-bottom-copy h3{margin:0 0 10px;color:#f0edf1;font:700 clamp(20px,1.7vw,26px)/1.15 var(--display)}
.dist--reference .dist-bottom-copy h3 em{color:#a06cba}
.dist--reference .dist-bottom-copy p{margin:0;color:#aaa4ac;font-size:13px;line-height:1.55}
.dist--reference .dist-platforms{height:72%;padding:0 18px;border-color:rgba(113,106,120,.24);color:#9f74b5;gap:14px}
.dist--reference .dist-platforms span{font-size:0}.dist--reference .dist-platforms svg{display:block;width:27px;height:27px;margin:auto;fill:none;stroke:#9f74b5;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.dist--reference .dist-platforms small{color:#b0aab2;font-size:10px}.dist--reference .dist-platforms>small{font-size:11px}.dist--reference .dist-platforms strong{color:#a06cba;font-size:18px}
.dist--reference .dist-count{text-align:center;text-transform:uppercase}.dist--reference .dist-count b{display:block;color:#9c69b5;font:800 clamp(36px,3.4vw,52px)/1 var(--display)}.dist--reference .dist-count b i{font-style:normal;font-weight:400}.dist--reference .dist-count span{display:block;margin-top:10px;color:#b6b0b9;font-size:12px;line-height:1.35;letter-spacing:.04em}
@media(max-width:1100px){.dist--reference .dist-shell{width:min(calc(100% - 48px),1480px)}.dist--reference .dist-hero{grid-template-columns:260px 1fr;gap:38px}.dist--reference .dist-phone{width:260px}.dist--reference .dist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dist--reference .dist-bottom{grid-template-columns:220px 1fr 1.35fr 180px}.dist--reference .dist-platforms{flex-wrap:wrap;height:auto;padding-block:22px}}
@media(max-width:800px){.dist--reference .dist-shell{width:min(calc(100% - 40px),680px)}.dist--reference .dist-hero{display:flex;flex-direction:column;min-height:0;gap:24px}.dist--reference .dist-main{display:contents}.dist--reference .dist-kicker{order:1}.dist--reference .dist-main h2{order:2;text-align:center}.dist--reference .dist-lead{order:3;text-align:center;margin-block:0}.dist--reference .dist-phone{display:block;order:4;width:250px;height:330px}.dist--reference .dist-stores{order:5;width:100%}.dist--reference .dist-rule{margin-top:58px}.dist--reference .dist-bottom{grid-template-columns:1fr 180px}.dist--reference .dist-world{display:none}.dist--reference .dist-platforms{display:flex;grid-column:1/-1;border-top:1px solid rgba(113,106,120,.24);border-left:0;border-right:0}.dist--reference .dist-bottom-copy{padding:26px}.dist--reference .dist-count{padding:22px 18px}}
@media(max-width:520px){.dist.dist--reference{padding-block:48px 56px}.dist.dist--reference:before,.dist.dist--reference:after{opacity:.05}.dist--reference .dist-shell{width:calc(100% - 40px)}.dist--reference .dist-main h2{font-size:clamp(36px,11vw,48px)}.dist--reference .dist-lead br,.dist--reference .dist-bottom-copy p br{display:none}.dist--reference .dist-phone{width:225px;height:300px}.dist--reference .dist-stores{grid-template-columns:1fr}.dist--reference .dist-stores a{min-height:100px}.dist--reference .dist-rule span{width:24px}.dist--reference .dist-grid{grid-template-columns:1fr}.dist--reference .dist-card{min-height:174px}.dist--reference .dist-bottom{grid-template-columns:1fr;text-align:center}.dist--reference .dist-count{border-top:1px solid rgba(113,106,120,.24)}.dist--reference .dist-platforms{justify-content:center}.dist--reference .dist-platforms>small{width:100%}}
/* ===== Home page (clean redesign) =========================================
   Namespaced with hp- so it never collides with the shared/site styles. */
/* ---------- Hero ----------
   A picture with type on it, so the section carries the artwork's own aspect
   ratio (1800x745) and every text size is a vw clamp. Type and picture then
   scale on the same axis, which is what keeps the words on the image and the
   composition identical at any window width. min-height is only a floor for
   very narrow screens, where the copy needs more room than the ratio gives. */
.hp-hero{
  position:relative;z-index:0;overflow:hidden;isolation:isolate;
  aspect-ratio:1800/745;min-height:540px;
  display:grid;align-items:center;
  padding:0 clamp(24px,4vw,96px) 0 clamp(34px,7vw,170px);
  background:#08090b;
  border-bottom:0}

/* The sky. Tiled and slid by exactly one image width, so the loop returns to
   where it started and there is nothing to see at the wrap — the artwork's own
   left and right edges already match. Sliding a background rather than moving
   an element keeps it off the main thread. */
.hp-sky{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:url(/assets/img/hero-sky.webp) repeat-x center/auto 100%;
  animation:hp-drift 90s linear infinite;
  animation-play-state:paused}
@keyframes hp-drift{from{background-position:0 center}to{background-position:-1942px center}}
/* Note 4 of the asset guide: the sky moves while the station is playing and is
   still when it is not. One line to make it always drift, if that reads better
   to you than a hero that waits. */
.hp-hero.is-playing .hp-sky{animation-play-state:running}

/* The tower and cross are ONE object — the guide is explicit about that, and
   the glow below is a separate light over it rather than part of it. Anchored
   to the bottom right and sized by height so the structure never crops or
   distorts, whatever the window does. */
.hp-tower{
  position:absolute;z-index:-2;right:clamp(2%,7vw,13%);bottom:0;
  height:clamp(300px,92%,1100px);width:auto;pointer-events:none;
  filter:drop-shadow(0 0 34px rgba(0,0,0,.55))}

/* The copy sits on the left, where the sky is darkest anyway; this deepens the
   falloff so the text always has ground under it whatever the crop. */
.hp-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(5,5,9,.92) 0 24%,rgba(5,5,9,.66) 44%,rgba(5,5,9,0) 66%)}
/* And a floor, so the section hands off to the page below rather than stopping. */
.hp-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,9,0),var(--ucn-bg))}

/* The cross lights when the radio is playing — over the cross only, which is
   why it is positioned against the tower rather than centred on the section. */
.hp-hero-glow{
  position:absolute;z-index:-1;right:clamp(6%,13vw,20%);top:16%;
  width:clamp(180px,22vw,420px);aspect-ratio:1;
  transform:translate(50%,-50%);pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,242,210,.42) 0%,rgba(255,231,183,.22) 26%,rgba(167,117,190,.12) 48%,transparent 68%);
  transition:opacity 1.1s ease}
.hp-hero.is-playing .hp-hero-glow{opacity:1;animation:hp-breathe 5.5s ease-in-out infinite}
@keyframes hp-breathe{0%,100%{opacity:.72}50%{opacity:1}}

/* Anyone who has asked for less movement gets a still hero. The glow stays —
   it is a state, not motion. */
@media (prefers-reduced-motion:reduce){
  .hp-hero.is-playing .hp-sky{animation:none}
  .hp-hero.is-playing .hp-hero-glow{animation:none}
}

.hp-hero-copy{position:relative;max-width:min(900px,60vw);display:flex;flex-direction:column;
  gap:clamp(14px,1.5vw,22px)}
.hp-hero-title{
  /* Two fixed lines — WHERE FAITH / FINDS A VOICE. — set as blocks rather than
     relying on a <br>, so the break can't move as the type scales.
     Weight stays at 400: that is the only weight bebas-neue.ttf contains, so
     anything heavier is the browser faking a bold by double-drawing, which
     thickens and softens the edges.
     scaleY stretches the letterforms taller without widening them. It is a
     paint-time transform, so the element still reserves its unscaled height —
     margin-bottom gives back the difference (2 lines x .85 line-height x .2). */
  /* 400 is the ONLY weight bebas-neue.ttf contains (usWeightClass 400, not a
     variable font), so anything heavier was the browser faking a bold by
     double-drawing — which is also what was thickening and softening the
     edges. This is the face as drawn. */
  margin:0 0 .45em;font-family:"Bebas Neue","Arial Narrow",var(--display);font-weight:400;
  font-size:clamp(56px,7.4vw,138px);line-height:.85;letter-spacing:.085em;text-transform:uppercase;
  color:#f6f3f7;
  /* No -webkit-text-stroke here. A stroke that size antialiases along every
     edge and reads as blur at display sizes — the synthetic bold alone carries
     the weight. */
  transform:scaleY(1.26);transform-origin:left top}
.hp-hero-title span{display:block;white-space:nowrap}
.hp-hero-title b{font-weight:inherit;color:var(--ucn-purple-bright);
  text-shadow:0 0 26px rgba(150,103,173,.2)}

.hp-hero-tag{display:grid;grid-template-columns:clamp(52px,6.6vw,96px) 1px 1fr;align-items:center;
  gap:clamp(12px,1.6vw,22px);max-width:640px;color:#eee8ed}
.hp-hero-tag svg{width:100%;height:auto;color:var(--ucn-purple)}
.hp-hero-tag>span{height:clamp(44px,5vw,72px);background:rgba(155,111,192,.3)}
.hp-hero-tag p{margin:0;font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(19px,2.2vw,38px);line-height:1.08}
.hp-hero-tag em{display:block;color:#a775be;font-style:normal}

.hp-hero-sub{margin:0;max-width:620px;color:#b6afb8;
  font-family:Georgia,"Times New Roman",serif;font-size:clamp(13px,1.15vw,18px);line-height:1.45}

.hp-hero-signals{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,24px);max-width:880px}
.hp-hero-signals li{display:grid;grid-template-columns:clamp(18px,1.8vw,25px) 1fr;
  column-gap:10px;align-items:start;min-width:0}
.hp-hero-signals svg{grid-row:1/span 2;width:100%;height:auto;color:var(--ucn-purple-bright)}
.hp-hero-signals b{color:#a775be;font-size:clamp(8px,.72vw,10px);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.25}
.hp-hero-signals small{color:#918c96;font-size:clamp(9px,.82vw,11px);line-height:1.35}

@media (max-width:900px){
  .hp-hero{aspect-ratio:auto;min-height:0;padding-block:clamp(48px,9vw,84px);
    padding-left:clamp(24px,5vw,48px)}
  .hp-hero-copy{max-width:none}
  .hp-hero-title{font-size:clamp(52px,11vw,88px);margin-bottom:.42em;letter-spacing:.06em}
  .hp-hero-tag p{font-size:clamp(20px,3.4vw,30px)}
  .hp-hero-sub{font-size:15px}
  .hp-hero-sub br{display:none}
  .hp-hero-signals{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .hp-hero-signals b{font-size:10px}
  .hp-hero-signals small{font-size:12px}
  /* Portrait: the tower stands behind the copy rather than beside it, so the
     structure still reads whole instead of being pushed off the edge. */
  .hp-tower{right:50%;transform:translateX(50%);height:clamp(260px,58vh,620px);opacity:.55}
  .hp-hero-glow{right:50%;transform:translate(50%,-50%);top:12%;width:min(64vw,340px)}
  .hp-hero::before{background:linear-gradient(180deg,rgba(5,5,9,.62) 0 34%,rgba(5,5,9,.88) 100%)}
}

/* Phones: the hero is the headline, the tagline and the picture — nothing else.
   The supporting paragraph and the four signal blocks are dropped so the
   artwork has room; both are said again further down the page.

   The old crop-shifting rule that lived here is gone with the photo it was for.
   The tower is its own element now, so on a portrait screen it is centred and
   dropped back behind the words rather than cropped out of frame. */
@media (max-width:700px){
  .hp-hero{
    min-height:78svh;
    padding-block:clamp(30px,7vw,56px) clamp(44px,12vw,96px);
    align-items:center}
  .hp-hero-sub,
  .hp-hero-signals{display:none}
  /* The copy is pinned to a narrow left column so it runs DOWN the empty side
     of the picture instead of sitting in a band across the top. That means the
     headline has to be free to break — a single word per line is the intended
     result here, so the desktop nowrap is lifted. */
  .hp-hero-copy{max-width:min(64%,320px);gap:clamp(14px,4vw,24px)}
  .hp-hero-title span{white-space:normal}
  /* "A VOICE." stays together even though the rest of the headline is free to
     break — measured at 168px on a 390px screen against a 250px column. */
  .hp-hero-title b{white-space:nowrap}
  .hp-hero-title{
    font-size:clamp(46px,15vw,104px);letter-spacing:.05em;
    /* No scaleY here: with a variable number of wrapped lines the margin that
       compensates for the stretch can't be a fixed value, and the overflow
       would land on the tagline. */
    transform:none;margin-bottom:.22em}
  /* Drop the transmitter mark and its rule on phones: with the copy in a narrow
     column they eat a third of the width and push the tagline out of line with
     the headline above it. Block layout puts it back on the same left edge. */
  .hp-hero-tag{display:block}
  .hp-hero-tag svg,
  .hp-hero-tag>span{display:none}
  .hp-hero-tag p{font-size:clamp(17px,4.6vw,25px)}
  .hp-hero::before{
    background:linear-gradient(180deg,rgba(5,5,9,.86) 0 32%,rgba(5,5,9,.45) 58%,rgba(5,5,9,.25) 100%)}
}
.hp-eyebrow{display:flex;align-items:center;gap:.75rem;margin:0 0 1.2rem;color:var(--violet-400);
  font-size:.78rem;font-weight:850;letter-spacing:.21em;text-transform:uppercase}
.hp-eyebrow::before{content:"";width:38px;height:1px;background:currentColor}
.hp-h1{max-width:660px;margin:0 0 1.4rem;font-family:var(--display);font-weight:800;
  font-size:clamp(4rem,7.4vw,7.2rem);line-height:.88;letter-spacing:-.06em;color:var(--white)}
.hp-h1 span{color:var(--violet-500);text-shadow:0 0 44px rgb(from var(--violet-500) r g b / .24)}
.hp-tagline{margin:0 0 .9rem;color:#fff;font-family:var(--display);font-weight:700;
  font-size:clamp(1.25rem,2vw,1.75rem);letter-spacing:-.02em}
.hp-summary{max-width:590px;margin:0 0 1.9rem;color:#b4b8c5;font-size:1.02rem}
.hp-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hp-btn{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:.6rem;
  border:1px solid transparent;border-radius:999px;padding:.7rem 1.25rem;
  font-family:var(--display);font-size:.9rem;font-weight:800;color:#fff;
  transition:transform .2s ease,border-color .2s ease,background .2s ease}
.hp-btn:hover{transform:translateY(-2px);color:#fff}
.hp-btn--primary{background:var(--violet-600);border-color:var(--violet-500);box-shadow:0 14px 38px rgb(from var(--violet-600) r g b / .34)}
.hp-btn--primary:hover{background:var(--violet-500)}
.hp-btn--secondary{border-color:rgba(255,255,255,.22);background:rgba(9,9,15,.58);backdrop-filter:blur(10px)}
.hp-play{display:inline-grid;width:25px;aspect-ratio:1;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.16)}
.hp-play svg{width:12px;height:12px;margin-left:1px}
.hp-note{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:2rem;color:#8f94a4;font-size:.78rem;font-weight:700}
.hp-note span{display:inline-flex;align-items:center;gap:.45rem}
.hp-note span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 12px rgba(86,214,177,.7)}

/* Sections */
.hp-section{padding:clamp(46px,5.5vw,74px) 0}
.hp-shell{width:min(calc(100% - 40px),1220px);margin:0 auto}
.hp-intro{max-width:760px;margin-bottom:clamp(38px,5vw,58px)}
.hp-label{margin:0 0 1rem;color:var(--violet-400);font-size:.75rem;font-weight:850;letter-spacing:.2em;text-transform:uppercase}
.hp-h2{margin:0 0 1.2rem;font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,5vw,4.8rem);line-height:1;letter-spacing:-.05em}
.hp-lead{margin:0;color:var(--muted);font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.55}
.hp-lead strong{color:#fff}
.hp-about{background:radial-gradient(circle at 12% 12%,rgb(from var(--violet-400) r g b / .1),transparent 28%),var(--surface,#0e1018)}

/* Pillars */
.hp-pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.hp-pillar{--pc:var(--violet-500-rgb);position:relative;isolation:isolate;min-height:235px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(1.35rem,2.2vw,1.7rem);
  border:1px solid rgba(var(--pc),.23);border-radius:24px;
  background:linear-gradient(160deg,rgba(var(--pc),.13),rgba(12,13,21,.85) 60%);
  box-shadow:0 22px 60px rgba(0,0,0,.2);transition:transform .22s ease,border-color .22s ease}
.hp-pillar::after{content:"";position:absolute;z-index:-2;left:50%;top:5%;transform:translateX(-50%);
  width:150px;aspect-ratio:1;border-radius:50%;background:rgba(var(--pc),.16);filter:blur(42px)}
.hp-pillar:hover{transform:translateY(-4px);border-color:rgba(var(--pc),.48)}
/* Neon illustration band — black background drops out via screen blend + edge mask */
.hp-pillar-art{height:clamp(116px,11vw,146px);margin:0 0 1rem;display:flex;align-items:center;justify-content:center}
.hp-pillar-art img{max-width:80%;max-height:100%;object-fit:contain;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(72% 72% at 50% 47%,#000 58%,transparent 100%);
  mask-image:radial-gradient(72% 72% at 50% 47%,#000 58%,transparent 100%)}
.hp-pillar--prayer{--pc:var(--violet-500-rgb)}
.hp-pillar--radio{--pc:255,102,112}
.hp-pillar--shortwave{--pc:70,205,183}
.hp-pillar--podcasts{--pc:74,156,255}
.hp-pillar--apps{--pc:181,128,255}
.hp-pillars--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hp-pillar--soon{cursor:default}
.hp-pillar-soon{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;
  padding:.34rem .74rem;border:1px solid rgba(var(--pc),.45);border-radius:999px;
  color:rgb(var(--pc));font-weight:800;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase}
.hp-pillar-kicker{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.75rem;color:rgb(var(--pc));
  font-size:.68rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.hp-pillar-kicker::before{content:"";width:19px;height:2px;border-radius:2px;background:currentColor}
.hp-pillar h3{font-family:var(--display);margin:0 0 .45rem;font-size:clamp(1.22rem,1.8vw,1.55rem);
  letter-spacing:-.035em}
.hp-pillar p{max-width:34ch;margin:0;color:var(--muted);font-size:.94rem;line-height:1.55}

/* Who we are — mission block + value cards */
/* Near-black at the top so the hero melts cleanly into this section; the violet
   glow is pushed down out of the seam. */
.hp-who{background:
  linear-gradient(180deg,#050609 0,#0a0b11 260px),
  radial-gradient(circle at 90% 58%,rgb(from var(--violet-400) r g b / .08),transparent 32%),
  #0a0b11}
.hp-intro--center{max-width:840px;margin-left:auto;margin-right:auto;text-align:center}
/* Who-we-are: intro on the left, value cards on the right */
.hp-who-grid{display:grid;grid-template-columns:minmax(280px,1.02fr) 2fr;gap:clamp(28px,4vw,54px);align-items:center}
.hp-who-grid .hp-h2{font-size:clamp(1.95rem,2.7vw,2.8rem);line-height:1.06;margin-bottom:1rem}
.hp-intro--flush{max-width:none;margin-bottom:0}
.hp-lead--em{margin-top:1rem}
/* Support: heading on the left, copy on the right */
.hp-support-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:center;margin-bottom:clamp(28px,3.6vw,46px)}
.hp-support-head .hp-h2{margin-bottom:0}
.hp-accent{color:var(--violet-400)}
.hp-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hp-value{padding:1.7rem 1.4rem;border:1px solid var(--line);border-radius:18px;
  background:rgba(255,255,255,.02);transition:transform .2s,border-color .2s}
.hp-value:hover{transform:translateY(-4px);border-color:rgb(from var(--violet-400) r g b / .5)}
.hp-value-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:1.05rem;
  background:rgb(from var(--violet-500) r g b / .15);color:var(--violet-400)}
.hp-value-ico svg{width:24px;height:24px}
.hp-value-ico--glyph{font-size:1.7rem;line-height:1;font-weight:700}
.hp-value h3{font-family:var(--display);margin:0 0 .5rem;font-size:1.2rem;color:#fff}
.hp-value p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55}
.hp-value em{font-style:italic;color:#d9d3ff}
.hp-value--link{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.hp-value-go{margin-top:auto;padding-top:1rem;color:var(--violet-400);font-weight:800;font-size:.88rem}
.hp-value--link:hover .hp-value-go{color:var(--violet-200)}
.hp-values--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Who-we-are image cards (premium: artwork top, glowing icon badge, title) */
.hp-vcard{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:20px;background:#0d0e15;
  transition:transform .2s,border-color .2s,box-shadow .2s}
.hp-vcard:hover{transform:translateY(-5px);border-color:rgb(from var(--violet-400) r g b / .5);
  box-shadow:0 18px 40px -18px rgb(from var(--violet-500) r g b / .55)}
.hp-vcard-img{position:relative;height:clamp(168px,17vw,206px)}
.hp-vcard-img img{width:104%;height:100%;object-fit:cover;object-position:center;margin-left:-2%;display:block}
.hp-vcard-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 38%,rgb(from #0d0e15 r g b / .55) 74%,#0d0e15 99%)}
.hp-vcard-ico{position:absolute;left:50%;top:calc(clamp(168px,17vw,206px) - 30px);bottom:auto;transform:translateX(-50%);z-index:3;
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#dac1e6;
  background:radial-gradient(circle at 50% 30%,#3e1f4d,#1a111f);
  border:1px solid rgb(from var(--violet-400) r g b / .55);
  box-shadow:0 0 0 6px #0d0e15,0 8px 24px rgba(179,129,203,.45),inset 0 1px 10px rgba(197,159,216,.35)}
.hp-vcard-ico svg{width:26px;height:26px}
.hp-vcard-body{flex:1;display:flex;flex-direction:column;text-align:center;padding:2.7rem 1.35rem 1.75rem}
.hp-vcard-title{margin:0;font-family:var(--display);display:flex;flex-direction:column;
  font-weight:800;font-size:1.15rem;line-height:1.14;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.hp-vcard-title .a{color:var(--violet-400)}
.hp-vcard-rule{width:34px;height:3px;border-radius:2px;background:var(--violet-400);margin:.75rem auto .95rem}
.hp-vcard-body p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6}
.hp-vcard-body em{font-style:italic;color:#d9d3ff}
.hp-support-cta{text-align:center;margin-top:clamp(30px,4vw,46px)}

/* Pillars are now links */
.hp-pillar{display:flex;flex-direction:column;text-decoration:none;color:inherit;cursor:pointer}
.hp-pillar-go{margin-top:auto;padding-top:1rem;color:rgb(var(--pc));font-weight:800;font-size:.85rem}
.hp-pillar:hover .hp-pillar-go{filter:brightness(1.15)}

/* Story rows (copy + visual), alternating layout + background by position */
.hp-story{background:#0a0b11}
.hp-story:nth-of-type(even){background:var(--surface,#0e1018)}
.hp-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;
  gap:clamp(48px,7vw,100px)}
.hp-story:nth-of-type(odd) .hp-copy{order:2}
.hp-story:nth-of-type(odd) .hp-visual{order:1}
.hp-copy .hp-h2{font-size:clamp(2.35rem,4.5vw,4.25rem)}
.hp-textlink{display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;color:var(--violet-400);font-weight:800}
.hp-textlink:hover{color:var(--violet-200)}
.hp-textlink::after{content:"→";transition:transform .2s ease}
.hp-textlink:hover::after{transform:translateX(4px)}
.hp-visual{position:relative;min-height:430px;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--line);border-radius:28px;
  background:radial-gradient(circle at 50% 30%,rgb(from var(--violet-200) r g b / .19),transparent 40%),#0b0d15;
  box-shadow:0 28px 80px rgba(0,0,0,.34)}

/* Prayer illustration */
.hp-prayer-visual{overflow:visible;border-color:transparent;background:transparent;box-shadow:none}
.hp-prayer-render{position:absolute;inset:0}
.hp-prayer-render img{width:100%;height:100%;display:block;object-fit:contain;object-position:center}

/* Radio mini-player (genuinely plays the stream) */
.hp-radio-visual{overflow:visible;border-color:transparent;background:transparent;box-shadow:none}
.hp-radio-art{display:block;width:112%;filter:drop-shadow(0 30px 38px rgba(0,0,0,.38))}
.hp-radio-art img{display:block;width:100%;height:auto}
.hp-radio{width:min(86%,500px);border:1px solid rgb(from var(--violet-200) r g b / .34);border-radius:24px;padding:1.75rem;
  background:linear-gradient(145deg,rgb(from var(--violet-900) r g b / .92),rgba(10,11,18,.94))}
.hp-onair{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:2rem;color:var(--beacon-500);
  font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.hp-onair::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--beacon-500);
  box-shadow:0 0 15px rgb(from var(--beacon-500) r g b / .75)}
.hp-radio-now{display:flex;align-items:center;gap:1.1rem}
.hp-radio-play{flex:0 0 auto;width:68px;aspect-ratio:1;border:1px solid var(--violet-500);border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:var(--violet-600);
  box-shadow:0 15px 40px rgb(from var(--violet-600) r g b / .38);transition:transform .14s}
.hp-radio-play:hover{transform:translateY(-1px) scale(1.03)}
.hp-radio-play svg{width:24px;height:24px}
.hp-radio-play .hp-play-i{margin-left:3px}
.hp-radio-play .hp-pause-i{display:none}
.hp-radio-play.is-playing .hp-play-i{display:none}
.hp-radio-play.is-playing .hp-pause-i{display:block}
.hp-radio-meta span{display:block;margin-bottom:.25rem;color:var(--violet-200);font-size:.72rem;font-weight:850;
  letter-spacing:.12em;text-transform:uppercase}
.hp-radio-meta strong{display:block;font-family:var(--display);font-size:1.18rem}
.hp-radio-meta small{color:var(--muted);font-size:.82rem}
.hp-wave{height:74px;display:flex;align-items:center;gap:5px;margin-top:1.75rem;padding-top:1.4rem;
  border-top:1px solid var(--line)}
.hp-wave i{width:100%;height:var(--h);min-height:5px;border-radius:4px;
  background:linear-gradient(var(--violet-200),var(--violet-400));opacity:.9;transform-origin:center;transform:scaleY(.68)}
.hp-radio.playing .hp-wave i{animation:hpWave .8s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -70ms)}
@keyframes hpWave{to{transform:scaleY(.35);opacity:.55}}
@media (prefers-reduced-motion:reduce){.hp-radio.playing .hp-wave i{animation:none}}

/* Shortwave scene */
.hp-sw-visual{overflow:visible;border-color:transparent;background:transparent;box-shadow:none}
.hp-sw-render{position:absolute;inset:-5%}
.hp-sw-render img{width:100%;height:100%;display:block;object-fit:contain;object-position:center}

/* Podcast cards */
.hp-podcast-visual{overflow:visible;border-color:transparent;background:transparent;box-shadow:none}
.hp-podstack{width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,32px)}
.hp-podcard{width:min(47%,310px);aspect-ratio:1;overflow:hidden;border:0;
  border-radius:26px;box-shadow:0 28px 60px rgba(0,0,0,.42);background:#10111a}
.hp-podcard img{width:100%;height:100%;display:block;object-fit:cover}
.hp-podcard--cqa{box-shadow:0 34px 72px rgba(0,0,0,.52)}

/* Support band */
.hp-support{position:relative;overflow:hidden;
  background:radial-gradient(circle at 82% 50%,rgb(from var(--violet-200) r g b / .18),transparent 28%),#0d0d16}
.hp-support-box{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(28px,5vw,50px);
  border:1px solid rgb(from var(--violet-200) r g b / .25);border-radius:30px;padding:clamp(34px,6vw,74px);
  background:linear-gradient(130deg,rgb(from var(--violet-900) r g b / .6),rgba(14,15,24,.92));box-shadow:0 28px 80px rgba(0,0,0,.34)}
.hp-support-copy{max-width:760px}
.hp-support-copy .hp-h2{margin-bottom:1rem;font-size:clamp(2.35rem,5vw,4.5rem)}
.hp-support-copy p{margin:0;color:var(--muted);font-size:1.08rem}
.hp-support-action{min-width:190px}

/* Responsive */
@media (max-width:1080px){
  .hp-pillars{grid-template-columns:repeat(3,1fr)}
  .hp-values{grid-template-columns:repeat(2,1fr)}
  .hp-who-grid{grid-template-columns:1fr;gap:34px;align-items:start}
  .hp-support-head{grid-template-columns:1fr;gap:16px}
  .hp-grid{grid-template-columns:1fr;gap:48px}
  .hp-story:nth-of-type(odd) .hp-copy,.hp-story:nth-of-type(odd) .hp-visual{order:initial}
  .hp-copy{max-width:760px}
}
@media (max-width:700px){
  .hp-h1{font-size:clamp(3.2rem,15vw,4.6rem)}
  .hp-actions .hp-btn{flex:1 1 150px}
  .hp-pillars{grid-template-columns:1fr}
  .hp-values{grid-template-columns:1fr}
  .hp-pillar{min-height:190px}
  .hp-visual{min-height:360px;border-radius:22px}
  .hp-radio{width:calc(100% - 32px)}
  .hp-podstack{gap:14px}
  .hp-podcard{width:min(47%,230px);border-radius:20px}
  .hp-support-box{grid-template-columns:1fr;gap:1.75rem}
  .hp-support-action{min-width:0;width:100%}
}

/* ===== Home visual-system refresh ========================================
   One cinematic rhythm, one content rail, and one card language. */
.hp-hero{border-bottom:0}
.hp-signal-bridge{
  position:relative;height:clamp(74px,8vw,112px);margin-top:-1px;overflow:hidden;
  border-bottom:1px solid rgba(207,176,223,.14);
  background:
    radial-gradient(ellipse 58% 76% at 50% 100%,rgba(146,75,181,.18),transparent 72%),
    linear-gradient(180deg,#050609 0%,#080910 100%)
}
.hp-signal-bridge::before{
  content:"";position:absolute;inset:-34% -5% 0;opacity:.5;
  background-image:
    radial-gradient(ellipse at center,transparent 61%,rgba(186,141,208,.22) 61.3%,transparent 61.8%),
    radial-gradient(ellipse at center,transparent 70%,rgba(186,141,208,.13) 70.3%,transparent 70.8%);
  transform:scaleX(1.35)
}
.hp-signal-line{
  position:absolute;left:-5%;width:110%;height:28px;border-top:1px solid rgba(186,141,208,.25);
  border-radius:50%;filter:drop-shadow(0 0 8px rgba(186,141,208,.22));
  animation:hpSignalDrift 9s ease-in-out infinite alternate
}
.hp-signal-line--1{top:43%;transform:rotate(1deg) scaleY(.45)}
.hp-signal-line--2{top:57%;transform:rotate(-1.4deg) scaleY(.7);animation-delay:-3s}
.hp-signal-line--3{top:69%;transform:rotate(.7deg) scaleY(.35);animation-delay:-6s}
.hp-signal-cue{
  position:absolute;z-index:2;left:50%;top:50%;display:grid;width:48px;height:48px;place-items:center;
  transform:translate(-50%,-50%);border:1px solid rgba(207,176,223,.35);border-radius:50%;
  color:#e1ceeb;background:rgba(9,8,17,.86);box-shadow:0 0 32px rgba(146,75,181,.2);
  font:400 25px/1 var(--font)
}
@keyframes hpSignalDrift{to{translate:1.5% 3px}}

.hp-section{padding:clamp(96px,9vw,132px) 0}
.hp-shell{width:min(calc(100% - 64px),1220px)}
.hp-label{margin:0 0 20px;font-size:.72rem;letter-spacing:.21em}
.hp-h2{max-width:840px;margin:0 0 24px;font-size:clamp(2.75rem,4.75vw,4.6rem);line-height:1.02}
.hp-lead{max-width:780px;font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.7}
.hp-intro{max-width:780px;margin-bottom:56px}
.hp-accent{color:#c097d4;text-shadow:0 0 30px rgba(186,141,208,.12)}

.hp-who{
  background:
    radial-gradient(circle at 88% 25%,rgba(146,75,181,.1),transparent 28%),
    linear-gradient(180deg,#080910,#090a12)
}
.hp-who-grid{grid-template-columns:minmax(300px,.92fr) minmax(0,1.92fr);gap:56px;align-items:start}
.hp-who-grid .hp-h2{font-size:clamp(2.35rem,3.5vw,3.45rem);line-height:1.04;margin-bottom:24px}
.hp-lead--em{margin-top:18px}

.hp-values,.hp-pillars{gap:14px}
.hp-vcard,.hp-pillar{
  border-radius:18px;border:1px solid rgba(207,176,223,.22);
  background:linear-gradient(155deg,rgba(39,22,47,.58),rgba(10,11,18,.96) 62%);
  box-shadow:0 22px 56px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease
}
.hp-vcard:hover,.hp-pillar:hover{
  transform:translateY(-5px);border-color:rgba(207,176,223,.48);
  box-shadow:0 28px 64px rgba(0,0,0,.32),0 0 34px rgba(146,75,181,.12)
}
.hp-vcard-img{height:150px}
.hp-vcard-img img{filter:saturate(.82) contrast(1.03)}
.hp-vcard-ico{top:122px;width:54px;height:54px}
.hp-vcard-body{padding:2.45rem 1.1rem 1.45rem}
.hp-vcard-title{font-size:1rem}
.hp-vcard-body p{font-size:.82rem;line-height:1.62}

.hp-about{
  border-top:1px solid rgba(207,176,223,.12);
  background:
    radial-gradient(circle at 12% 0%,rgba(146,75,181,.13),transparent 30%),
    linear-gradient(180deg,#0b0c15,#090a12)
}
.hp-pillars{grid-template-columns:repeat(5,minmax(0,1fr))}
.hp-pillar{min-height:370px;padding:22px 20px}
.hp-pillar-art{
  position:relative;height:168px;margin:-12px -10px 18px;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 82% 75% at 50% 50%,#000 50%,rgba(0,0,0,.92) 67%,transparent 100%);
  mask-image:radial-gradient(ellipse 82% 75% at 50% 50%,#000 50%,rgba(0,0,0,.92) 67%,transparent 100%)
}
.hp-pillar-art picture{display:block;width:100%;height:100%}
.hp-pillar-art img{
  width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;
  mix-blend-mode:screen;filter:saturate(.92) contrast(1.08)
}
.hp-pillar-kicker{margin-bottom:10px;font-size:.62rem}
.hp-pillar h3{font-size:1.18rem;margin-bottom:8px}
.hp-pillar p{font-size:.84rem;line-height:1.58}
.hp-pillar-go{font-size:.79rem;padding-top:18px}

.hp-support{
  border-top:1px solid rgba(207,176,223,.13);
  background:
    radial-gradient(circle at 14% 4%,rgba(146,75,181,.14),transparent 30%),
    radial-gradient(circle at 90% 70%,rgba(186,141,208,.07),transparent 28%),
    #090a12
}
.hp-support-head{grid-template-columns:minmax(300px,.8fr) minmax(0,1.25fr);align-items:end;margin-bottom:56px}
.hp-support-head .hp-h2{font-size:clamp(2.7rem,4.6vw,4.4rem)}
.hp-pillars--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hp-pillars--3 .hp-pillar{min-height:310px;padding:24px 28px}
.hp-pillars--3 .hp-pillar-art{height:150px;margin:-12px -14px 18px}
.hp-pillars--3 .hp-pillar h3{font-size:1.25rem}
.hp-pillars--3 .hp-pillar p{font-size:.9rem}
.hp-support-cta{margin-top:42px}
.hp-support-cta .hp-btn{min-width:300px;min-height:52px}

@media (max-width:1080px){
  .hp-shell{width:min(calc(100% - 48px),1220px)}
  .hp-who-grid{grid-template-columns:1fr;gap:52px}
  .hp-who-grid .hp-intro{max-width:780px}
  .hp-pillars{grid-template-columns:repeat(3,1fr)}
  .hp-support-head{grid-template-columns:1fr;align-items:start}
}
@media (max-width:760px){
  .hp-signal-bridge{height:72px}
  .hp-signal-cue{width:42px;height:42px}
  .hp-section{padding:82px 0}
  .hp-shell{width:min(calc(100% - 34px),1220px)}
  .hp-h2,.hp-who-grid .hp-h2{font-size:clamp(2.35rem,11vw,3.2rem)}
  .hp-intro{margin-bottom:42px}
  .hp-values{grid-template-columns:1fr 1fr}
  .hp-pillars,.hp-pillars--3{grid-template-columns:1fr}
  .hp-pillar,.hp-pillars--3 .hp-pillar{min-height:0;padding:22px}
  .hp-pillar-art,.hp-pillars--3 .hp-pillar-art{height:190px;margin:-10px -8px 16px}
  .hp-support-head{margin-bottom:42px}
  .hp-support-cta .hp-btn{width:100%;min-width:0}
}
@media (max-width:500px){
  .hp-values{grid-template-columns:1fr}
  .hp-vcard-img{height:180px}
  .hp-vcard-ico{top:152px}
}
@media (prefers-reduced-motion:reduce){
  .hp-signal-line{animation:none}
}

/* ============================================================
   Concept sections: App feature · Shortwave story · cinematic Support
   ============================================================ */
.hp-num{color:var(--violet-400);font-size:11px;font-weight:800;letter-spacing:.2em}

/* UCN in your pocket (app feature) */
.hp-app{background:linear-gradient(160deg,#0a0a14,#070810 70%)}
.hp-app-grid{display:grid;grid-template-columns:.84fr 1.22fr;gap:clamp(30px,4vw,64px);align-items:center}
.hp-app-copy{max-width:none;margin-bottom:0}
.hp-app-copy .hp-lead{margin-bottom:.85rem}
.hp-soon-pill{display:inline-flex;align-items:center;margin-top:1.15rem;padding:.4rem .85rem;border-radius:999px;
  border:1px solid rgb(from var(--violet-400) r g b / .45);color:var(--violet-200);
  font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.hp-app-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hp-appcard,.hp-swcard{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;
  padding:16px 18px 20px;box-shadow:0 24px 60px rgba(0,0,0,.26);
  background:linear-gradient(145deg,rgba(30,18,36,.85),rgba(10,10,18,.95))}
.hp-appcard:nth-child(even){transform:translateY(34px)}
.hp-appcard-art{height:clamp(158px,16vw,206px);margin-bottom:15px;overflow:hidden;border-radius:15px;background:#0b0b14}
.hp-appcard-art img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;filter:saturate(.9) brightness(.9)}
.hp-appcard h3,.hp-swcard h3{font-family:var(--display);margin:.5rem 0 .4rem;font-size:1.16rem;letter-spacing:-.02em;color:#fff}
.hp-appcard p,.hp-swcard p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.58}

/* Shortwave story */
.hp-sw{position:relative;overflow:hidden;background:#080910;padding-bottom:clamp(46px,5.5vw,74px)}
.hp-sw-head{position:relative;min-height:clamp(360px,42vw,520px);display:flex;align-items:center}
.hp-sw-bg{position:absolute;inset:0;z-index:0}
.hp-sw-bg img{width:100%;height:100%;object-fit:cover;object-position:center right;display:block}
.hp-sw-head::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#080910 0%,rgba(8,9,16,.94) 30%,rgba(8,9,16,.35) 58%,transparent 80%),
             linear-gradient(0deg,#080910 0%,transparent 26%)}
.hp-sw-head .hp-shell{position:relative;z-index:2}
.hp-sw-intro{max-width:520px;margin-bottom:0}
.hp-sw-cards{position:relative;z-index:2;margin-top:clamp(-58px,-4vw,-42px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hp-swcard{padding-bottom:22px}
.hp-swcard-art{height:clamp(150px,15vw,198px);margin-bottom:15px;overflow:hidden;border-radius:15px;background:#090a12}
.hp-swcard-art img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) brightness(.85)}
.hp-swcard h3{font-size:1.2rem}
.hp-sw-cta{margin-top:clamp(24px,3vw,38px);text-align:center}

/* Support — cinematic full-bleed scene, copy in the dark negative space */
.hp-mission{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(440px,52vw,640px);padding:clamp(66px,9vw,120px) 0;background:#0a0912}
.hp-mission-art{position:absolute;inset:0;z-index:-3}
.hp-mission-art img{width:100%;height:100%;object-fit:cover;object-position:center right;display:block}
.hp-mission::before{content:"";position:absolute;z-index:-2;inset:0;
  background:linear-gradient(90deg,#0a0912 0%,rgba(10,9,18,.95) 24%,rgba(10,9,18,.55) 47%,rgba(10,9,18,.1) 72%,rgba(10,9,18,.2) 100%),
             linear-gradient(0deg,#0a0912 0%,transparent 22%,transparent 82%,#0a0912 100%)}
.hp-mission-inner{position:relative;z-index:1}
.hp-mission-copy{max-width:520px}
.hp-mission-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.8rem}

@media (max-width:1080px){
  .hp-app-grid{grid-template-columns:1fr;gap:38px}
  .hp-appcard:nth-child(even){transform:none}
}
@media (max-width:760px){
  .hp-app-cards{grid-template-columns:1fr}
  .hp-sw-cards{grid-template-columns:1fr;margin-top:26px}
  .hp-sw-head{min-height:clamp(300px,70vw,420px)}
  .hp-mission{min-height:0;padding:64px 0}
  .hp-mission::before{background:linear-gradient(0deg,#0a0912 6%,rgba(10,9,18,.72) 55%,rgba(10,9,18,.5) 100%)}
}

/* ==== BEGIN concept (#ucnx) ==== */
#ucnx { --ink: #070810;
  --ink-2: #0b0b17;
  --panel: #10101d;
  --paper: #f6f3f8;
  --muted: #b2a7b7;
  --dim: #747181;
  --violet: #c097d4;
  --violet-light: #d7bde4;
  --line: rgba(206,174,222, .2);
  --line-soft: rgba(255, 255, 255, .08);
  --shell: 1260px; }
#ucnx * { box-sizing: border-box; }
#ucnx { scroll-behavior: smooth; background: var(--ink); }
#ucnx { margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#ucnx a { color: inherit; }
#ucnx .skip { position: fixed; z-index: 50; top: 10px; left: 10px; padding: 10px 16px; color: #000; background: #fff; transform: translateY(-150%); }
#ucnx .skip:focus { transform: none; }
#ucnx .section-shell { width: min(calc(100% - 64px), var(--shell)); margin-inline: auto; }
#ucnx .existing-hero { position: relative; overflow: hidden; background: #030409; }
#ucnx .existing-hero img { display: block; width: 100%; height: auto; }
#ucnx .hero-message { position: absolute;
  inset: 17% 38% 11% 0;
  padding-left: max(3.1vw, 34px);
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(90deg, #030409 0%, #030409 78%, rgba(3,4,9,.97) 88%, transparent 100%); }
#ucnx .hero-message > p { display: flex; align-items: center; gap: 11px; margin: 0 0 24px; color: #9e99aa; font-size: clamp(7px, .64vw, 11px); font-weight: 800; letter-spacing: .25em; text-transform: uppercase; }
#ucnx .hero-message > p span { width: 27px; height: 1px; background: var(--violet-light); box-shadow: 0 0 8px var(--violet); }
#ucnx .hero-message h1 { margin: 0; white-space: nowrap; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(34px, 4.15vw, 64px); font-weight: 760; line-height: 1; letter-spacing: -.052em; }
#ucnx .hero-message h1 em { display: inline; color: var(--violet-light); font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; }
#ucnx .hero-tagline { display: grid; grid-template-columns: 1px auto; column-gap: 16px; margin-top: 31px; }
#ucnx .hero-tagline i { grid-row: 1 / 3; width: 1px; background: linear-gradient(var(--violet-light), rgba(215,189,228,.15)); }
#ucnx .hero-tagline span, #ucnx .hero-tagline strong { display: block; font-size: clamp(10px, 1vw, 16px); line-height: 1.5; }
#ucnx .hero-tagline span { color: #8e8999; }
#ucnx .hero-tagline strong { color: var(--violet-light); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
#ucnx .signal-bridge { position: relative; height: 180px; overflow: hidden; background: linear-gradient(#030409, var(--ink)); }
#ucnx .signal-bridge i { position: absolute; left: 50%; bottom: -145px; width: 420px; height: 270px; transform: translateX(-50%); border: 1px solid rgba(192,151,212,.18); border-radius: 50% 50% 0 0; }
#ucnx .signal-bridge i:nth-child(2) { width: 650px; height: 390px; bottom: -230px; opacity: .65; }
#ucnx .signal-bridge i:nth-child(3) { width: 900px; height: 520px; bottom: -325px; opacity: .4; }
#ucnx .signal-bridge span { position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%); color: var(--violet-light); font-size: 9px; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; }
#ucnx .who { padding: 85px 0 155px; display: grid; grid-template-columns: .78fr 1.22fr; gap: 86px; align-items: start; }
#ucnx .who-copy { position: sticky; top: 45px; padding-top: 8px; }
#ucnx .eyebrow { margin: 0 0 22px; color: var(--violet-light); font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; }
#ucnx .eyebrow::before { content: ""; display: inline-block; width: 26px; height: 1px; margin-right: 11px; vertical-align: middle; background: currentColor; box-shadow: 0 0 8px currentColor; }
#ucnx h1, #ucnx h2, #ucnx h3, #ucnx p { margin-top: 0; }
#ucnx h1, #ucnx .section-head h2, #ucnx .support h2, #ucnx .footer-statement h2 { margin-bottom: 28px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em; }
#ucnx h1 { font-size: clamp(52px, 5.4vw, 78px); }
#ucnx h1 em, #ucnx .section-head h2 em, #ucnx .support h2 em { display: block; color: var(--violet-light); font-weight: inherit; }
#ucnx .lede { max-width: 520px; color: #cfc8d3; font-size: 19px; line-height: 1.7; }
#ucnx .body-copy { max-width: 500px; color: var(--muted); font-size: 15px; line-height: 1.78; }
#ucnx .free-statement { margin: 35px 0 0; padding-top: 22px; color: #fff; border-top: 1px solid var(--line-soft); font-size: 13px; font-weight: 800; }
#ucnx .free-statement span { margin-right: 9px; color: var(--violet-light); }
#ucnx .value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#ucnx .value-card { position: relative; min-height: 480px; padding: 22px 24px 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(30,18,36,.88), rgba(10,10,18,.96)); box-shadow: 0 28px 70px rgba(0,0,0,.22); }
#ucnx .value-card:nth-child(even) { transform: translateY(42px); }
#ucnx .art-frame { height: 250px; display: grid; place-items: center; margin: -8px -10px 25px; overflow: hidden; border-radius: 17px; background: radial-gradient(circle, rgba(160,97,191,.18), transparent 66%); }
#ucnx .art-frame img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
#ucnx .number { color: var(--violet-light); font-size: 9px; font-weight: 900; letter-spacing: .2em; }
#ucnx .value-card h2 { margin: 12px 0 12px; font-family: Georgia, serif; font-size: 27px; font-weight: 500; letter-spacing: -.025em; }
#ucnx .value-card p { color: var(--muted); font-size: 13px; line-height: 1.65; }
#ucnx .app-feature { overflow: hidden; border-block: 1px solid var(--line-soft); background: linear-gradient(150deg, #090914, #070810 68%); }
#ucnx .app-editorial { padding: 85px 0 155px; display: grid; grid-template-columns: 1.22fr .78fr; gap: 86px; align-items: start; }
#ucnx .app-editorial-copy { position: sticky; top: 45px; order: 2; padding-top: 8px; }
#ucnx .app-editorial-copy h2 { margin-bottom: 28px; font-family: Georgia, serif; font-size: clamp(52px, 5.4vw, 78px); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
#ucnx .app-editorial-copy h2 em { color: var(--violet-light); font-weight: inherit; }
#ucnx .app-editorial-copy .download-row { margin-top: 34px; }
#ucnx .app-free { margin: 24px 0 0; padding-top: 20px; color: #fff; border-top: 1px solid var(--line-soft); font-size: 12px; font-weight: 800; }
#ucnx .app-free span { margin-right: 8px; color: var(--violet-light); }
#ucnx .app-mini-library { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
#ucnx .mini-label { display: block; margin-bottom: 13px; color: #827d8c; font-size: 8px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
#ucnx .mini-stations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
#ucnx .mini-stations > span { min-width: 0; min-height: 78px; padding: 14px; display: flex; justify-content: flex-end; flex-direction: column; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; }
#ucnx .mini-stations b, #ucnx .mini-stations small { display: block; }
#ucnx .mini-stations b { font-size: 14px; line-height: 1; }
#ucnx .mini-stations small { margin-top: 6px; overflow: hidden; color: rgba(255,255,255,.66); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
#ucnx .mini-ucn { background: radial-gradient(circle at 75% 10%, #ac75c7, transparent 48%), #1e1025; border-color: rgba(215,189,228,.48) !important; }
#ucnx .mini-espn { background: linear-gradient(145deg, #d91835, #580811); }
#ucnx .mini-espn b { font-style: italic; }
#ucnx .mini-bbc { background: linear-gradient(145deg, #a91722, #270609); }
#ucnx .mini-podcasts { margin-top: 9px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
#ucnx .mini-podcasts > span { min-width: 0; display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; padding: 9px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,.025); }
#ucnx .mini-podcasts img { width: 48px; height: 48px; display: block; object-fit: cover; border-radius: 8px; }
#ucnx .mini-podcasts small { overflow: hidden; color: #cbc2cf; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
#ucnx .app-card-grid { display: grid; grid-template-columns: 1fr 1fr; order: 1; gap: 18px; }
#ucnx .app-card { position: relative; min-height: 480px; padding: 22px 24px 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(30,18,36,.88), rgba(10,10,18,.96)); box-shadow: 0 28px 70px rgba(0,0,0,.22); }
#ucnx .app-card:nth-child(even) { transform: translateY(42px); }
#ucnx .app-art-frame { height: 250px; display: grid; place-items: center; margin: -8px -10px 25px; overflow: hidden; border-radius: 17px; background: radial-gradient(circle, rgba(160,97,191,.18), transparent 66%); }
#ucnx .app-art-frame img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 42%; filter: saturate(.86) contrast(.96) brightness(.84); }
#ucnx .app-card h3 { margin: 12px 0; font-family: Georgia, serif; font-size: 27px; font-weight: 500; line-height: 1.02; letter-spacing: -.025em; }
#ucnx .app-card p { color: var(--muted); font-size: 13px; line-height: 1.65; }
#ucnx .download-row { display: flex; align-items: center; gap: 12px; }
#ucnx .download-row a { height: 50px; display: block; transition: transform .2s, filter .2s; }
#ucnx .download-row a:last-child { height: 66px; margin: -8px 0; }
#ucnx .download-row a:hover { transform: translateY(-2px); filter: brightness(1.08); }
#ucnx .download-row img { width: auto; height: 100%; display: block; object-fit: contain; }
#ucnx .discovery-shelves { padding: 115px max(32px, calc((100vw - var(--shell)) / 2)) 130px; border-top: 1px solid var(--line-soft); background: linear-gradient(180deg, #080910, rgba(20,11,25,.96) 55%, #080910); }
#ucnx .discovery-intro { max-width: none; margin: 0 0 55px; display: grid; grid-template-columns: 1fr .72fr; gap: 80px; align-items: end; }
#ucnx .discovery-intro h3 { margin-bottom: 15px; font-family: Georgia, serif; font-size: clamp(43px, 5vw, 68px); font-weight: 500; letter-spacing: -.04em; }
#ucnx .discovery-intro > p:last-child { margin-bottom: 18px; color: var(--muted); font-size: 16px; line-height: 1.7; }
#ucnx .shelf { display: grid; grid-template-columns: 155px 1fr; gap: 25px; padding: 28px 0; border-top: 1px solid var(--line-soft); }
#ucnx .shelf-label span, #ucnx .shelf-label small { display: block; }
#ucnx .shelf-label span { color: #f2edf4; font-family: Georgia, serif; font-size: 18px; }
#ucnx .shelf-label small { margin-top: 4px; color: #777180; font-size: 9px; }
#ucnx .station-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
#ucnx .station-tile { min-height: 145px; padding: 17px; display: flex; align-items: flex-start; justify-content: flex-end; flex-direction: column; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; box-shadow: 0 16px 34px rgba(0,0,0,.25); }
#ucnx .station-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(0,0,0,.52)); pointer-events: none; }
#ucnx .station-tile > * { position: relative; z-index: 1; }
#ucnx .station-tile > span { font-size: 20px; font-weight: 950; line-height: .9; letter-spacing: -.04em; }
#ucnx .station-tile > b { margin-top: 5px; font-size: 8px; letter-spacing: .16em; }
#ucnx .station-tile > small { margin-top: 13px; color: rgba(255,255,255,.68); font-size: 8px; }
#ucnx .station-tile.ucn { background:
    radial-gradient(circle at 70% 10%, #b27fcb, transparent 45%),
    linear-gradient(145deg, #2d1737, #150c19);
  border-color: rgba(219,195,230, .74);
  box-shadow:
    0 0 0 1px rgba(199,163,217, .15),
    0 20px 52px rgba(95,48,118, .34); }
#ucnx .station-tile.ucn > b { margin: 0 0 11px;
  color: #e7d7ef;
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase; }
#ucnx .station-tile.espn { background: linear-gradient(145deg, #e31837, #660915); }
#ucnx .station-tile.espn > span { font-style: italic; }
#ucnx .station-tile.bbc { background: linear-gradient(145deg, #b61824, #35060a); }
#ucnx .station-tile.bbc > span { padding: 4px; color: #111; background: white; letter-spacing: .04em; }
#ucnx .station-tile.npr { background: #f2f2f2; color: #111; }
#ucnx .station-tile.npr i { padding: 3px 5px; color: white; background: #d62021; font-style: normal; font-size: 14px; }
#ucnx .station-tile.npr i:nth-child(2) { background: #111; }
#ucnx .station-tile.npr i:nth-child(3) { background: #237bbd; }
#ucnx .station-tile.npr > small { color: #555; }
#ucnx .station-tile.bloomberg { background: linear-gradient(145deg, #2e1b37, #0a0910); }
#ucnx .station-tile.bloomberg > span { font-size: 13px; letter-spacing: .02em; }
#ucnx .station-tile.bloomberg > b { color: #f47820; }
#ucnx .station-tile.kexp { background: linear-gradient(145deg, #f05a22, #421209); }
#ucnx .station-tile.kexp > span { font-size: 25px; }
#ucnx .podcast-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
#ucnx .podcast-row article { min-width: 0; }
#ucnx .podcast-row img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; box-shadow: 0 17px 38px rgba(0,0,0,.28); }
#ucnx .podcast-row b, #ucnx .podcast-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ucnx .podcast-row b { margin-top: 11px; font-size: 11px; }
#ucnx .podcast-row small { margin-top: 3px; color: #777180; font-size: 8px; }
#ucnx .shortwave-story { padding: 0 0 78px; overflow: hidden; position: relative; border-bottom: 1px solid var(--line-soft); background: #080910; }
#ucnx .shortwave-head { min-height: 540px; display: flex; align-items: center; position: relative; }
#ucnx .shortwave-intro { max-width: 520px; position: relative; z-index: 2; text-align: left; }
#ucnx .shortwave-intro h2 { margin-bottom: 26px; font-family: Georgia, serif; font-size: clamp(52px, 6vw, 86px); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
#ucnx .shortwave-intro h2 em { color: var(--violet-light); font-weight: inherit; }
#ucnx .shortwave-intro > p:not(.eyebrow) { max-width: 520px; color: var(--muted); font-size: 17px; line-height: 1.75; }
#ucnx .shortwave-feature-art { width: 100vw; height: 650px; position: absolute; top: 0; left: 50%; overflow: hidden; transform: translateX(-50%); }
#ucnx .shortwave-feature-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #080910 0%, rgba(8,9,16,.96) 31%, rgba(8,9,16,.3) 58%, transparent 78%), linear-gradient(0deg, #080910 0%, transparent 30%); pointer-events: none; }
#ucnx .shortwave-feature-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: saturate(.82) brightness(.8); }
#ucnx .shortwave-card-grid { margin-top: -70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; z-index: 2; text-align: left; }
#ucnx .shortwave-card { min-height: 475px; padding: 22px 24px 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(30,18,36,.88), rgba(10,10,18,.96)); box-shadow: 0 28px 70px rgba(0,0,0,.22); }
#ucnx .shortwave-art { height: 270px; margin: -8px -10px 25px; overflow: hidden; border-radius: 17px; background: #090a12; }
#ucnx .shortwave-art img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.8) brightness(.78); }
#ucnx .shortwave-card h3 { margin: 12px 0; font-family: Georgia, serif; font-size: 25px; font-weight: 500; letter-spacing: -.025em; }
#ucnx .shortwave-card p { color: var(--muted); font-size: 13px; line-height: 1.65; }
#ucnx .shortwave-cta { margin-top: 34px; display: flex; justify-content: flex-end; }
#ucnx .shortwave-link { min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; gap: 32px; border: 1px solid var(--line); border-radius: 999px; background: rgba(192,151,212,.08); text-decoration: none; font-size: 12px; font-weight: 800; transition: transform .2s, background .2s; }
#ucnx .shortwave-link:hover { transform: translateY(-2px); background: rgba(192,151,212,.14); }
#ucnx .shortwave-link span { color: var(--violet-light); }
#ucnx .mission-close { position: relative; isolation: isolate; overflow: hidden; min-height: 720px; padding: 130px 0; display: flex; align-items: center; background: #0a0912; }
#ucnx .mission-art { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; filter: saturate(.98) contrast(1.06); }
#ucnx .mission-close::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, #0a0912 0%, rgba(10,9,18,.96) 24%, rgba(10,9,18,.58) 43%, rgba(10,9,18,.12) 66%, rgba(10,9,18,.2) 100%), linear-gradient(0deg, #0a0912 0%, transparent 20%, transparent 80%, #0a0912 100%); }
#ucnx .mission-close::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 72% 47%, rgba(182,135,206,.12), transparent 30rem); }
#ucnx .mission-close-inner { position: relative; z-index: 1; display: block; }
#ucnx .mission-copy { max-width: 520px; }
#ucnx .mission-close h2 { margin-bottom: 28px; font-family: Georgia, serif; font-size: clamp(52px, 6vw, 82px); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
#ucnx .mission-close h2 em { color: var(--violet-light); font-weight: inherit; }
#ucnx .mission-copy > p:not(.eyebrow) { max-width: 520px; color: var(--muted); font-size: 17px; line-height: 1.75; }
#ucnx .mission-actions { margin-top: 38px; display: flex; align-items: center; gap: 24px; }
#ucnx .mission-impact { overflow: hidden; border: 1px solid rgba(197,160,216,.28); border-radius: 26px; background: linear-gradient(145deg, rgba(34,20,41,.76), rgba(9,10,18,.86)); box-shadow: 0 32px 100px rgba(0,0,0,.52), 0 0 72px rgba(172,117,199,.13), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(18px) saturate(1.18); -webkit-backdrop-filter: blur(18px) saturate(1.18); }
#ucnx .impact-label { margin: 0; padding: 24px 28px; color: var(--violet-light); border-bottom: 1px solid var(--line-soft); font-size: 9px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
#ucnx .mission-impact article { min-height: 128px; padding: 25px 28px; display: grid; grid-template-columns: 42px 1fr; gap: 18px; border-bottom: 1px solid var(--line-soft); transition: background .25s ease, transform .25s ease; }
#ucnx .mission-impact article:hover { background: rgba(169,112,197,.09); transform: translateX(4px); }
#ucnx .mission-impact article:last-child { border-bottom: 0; }
#ucnx .mission-impact article > span { color: var(--violet-light); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
#ucnx .mission-impact b { display: block; margin-bottom: 7px; font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
#ucnx .mission-impact article p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
#ucnx .primary-button { width: 300px; min-height: 58px; padding: 0 25px; display: flex; align-items: center; justify-content: space-between; color: #fff; border-radius: 999px; background: linear-gradient(135deg, #a367c1, #c097d4); box-shadow: 0 15px 45px rgba(163,103,193,.25); text-decoration: none; font-size: 13px; font-weight: 850; }
#ucnx .primary-button span { font-size: 22px; }
#ucnx .secondary-link { padding-bottom: 7px; color: #cbc2cf; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 12px; font-weight: 750; }
#ucnx .secondary-link span { margin-left: 16px; color: var(--violet-light); }
#ucnx .footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: #06070d; }
#ucnx .footer-nav { padding: 85px 0 70px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; position: relative; }
#ucnx .footer-brand p { margin: 25px 0 0; color: #aaa6b4; font-family: Georgia, serif; font-size: 15px; line-height: 1.6; }
#ucnx .footer-brand p em { color: var(--violet-light); font-style: normal; }
#ucnx .wordmark { display: flex; align-items: center; gap: 15px; text-decoration: none; }
#ucnx .wordmark > span { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, #a367c1, #c097d4); font-weight: 900; }
#ucnx .wordmark b { font-family: Georgia, serif; font-size: 17px; line-height: 1.2; }
#ucnx .footer-nav nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; }
#ucnx .footer-nav nav div { display: flex; flex-direction: column; gap: 12px; }
#ucnx .footer-nav nav strong { margin-bottom: 5px; color: var(--violet-light); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
#ucnx .footer-nav nav a { color: #9c98a7; text-decoration: none; font-size: 12px; }
#ucnx .footer-nav nav a:hover { color: #fff; }
#ucnx .footer-bottom { min-height: 82px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-top: 1px solid var(--line-soft); color: #6e6a79; font-size: 10px; }
#ucnx .footer-bottom p { margin: 0; }
#ucnx .footer-bottom p:nth-child(2) { text-align: center; color: #ae83c4; text-transform: uppercase; letter-spacing: .13em; }
#ucnx .footer-bottom p:last-child { display: flex; justify-content: flex-end; gap: 18px; }
@media (max-width: 980px) {
  #ucnx .who { grid-template-columns: 1fr; }
  #ucnx .who-copy { position: static; }
  #ucnx .app-editorial { grid-template-columns: 1fr; }
  #ucnx .app-editorial-copy { position: static; order: 1; }
  #ucnx .app-card-grid { order: 2; }
  #ucnx .discovery-intro { grid-template-columns: 1fr; gap: 10px; }
  #ucnx .shelf { grid-template-columns: 1fr; }
  #ucnx .station-row { grid-template-columns: repeat(3, 1fr); }
  #ucnx .podcast-row { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; padding-bottom: 15px; }
  #ucnx .shortwave-head { min-height: 540px; }
  #ucnx .shortwave-feature-art { height: 620px; }
  #ucnx .shortwave-card-grid { grid-template-columns: 1fr; max-width: 700px; margin-top: -40px; }
  #ucnx .mission-close-inner { grid-template-columns: 1fr; gap: 55px; }
}
@media (max-width: 680px) {
  #ucnx .section-shell { width: min(calc(100% - 32px), var(--shell)); }
  #ucnx .hero-message { inset: 10% 26% 12% 0; padding-left: 18px; background: linear-gradient(90deg, #030409 0%, #030409 60%, rgba(3,4,9,.94) 76%, transparent); }
  #ucnx .hero-message > p { margin-bottom: 12px; letter-spacing: .16em; }
  #ucnx .hero-message h1 { white-space: normal; font-size: clamp(27px, 8vw, 44px); }
  #ucnx .hero-tagline { margin-top: 15px; column-gap: 10px; }
  #ucnx .hero-tagline span, #ucnx .hero-tagline strong { font-size: clamp(8px, 2.4vw, 12px); }
  #ucnx .signal-bridge { height: 110px; }
  #ucnx .who { padding: 55px 0 100px; gap: 50px; }
  #ucnx h1 { font-size: 52px; }
  #ucnx .value-grid { grid-template-columns: 1fr; }
  #ucnx .value-card:nth-child(even) { transform: none; }
  #ucnx .value-card { min-height: auto; }
  #ucnx .art-frame { height: 225px; }
  #ucnx .app-editorial { padding: 90px 0 110px; gap: 55px; }
  #ucnx .app-editorial-copy h2 { font-size: 52px; }
  #ucnx .app-card-grid { grid-template-columns: 1fr; }
  #ucnx .app-card:nth-child(even) { transform: none; }
  #ucnx .app-card { min-height: auto; }
  #ucnx .app-art-frame { height: 225px; }
  #ucnx .discovery-shelves { padding-inline: 16px; }
  #ucnx .shortwave-intro h2, #ucnx .mission-close h2 { font-size: 50px; }
  #ucnx .download-row { align-items: flex-start; flex-direction: column; }
  #ucnx .discovery-shelves { padding: 80px 16px 95px; }
  #ucnx .station-row { grid-template-columns: 1fr 1fr; }
  #ucnx .station-tile { min-height: 130px; }
  #ucnx .shortwave-story { padding-bottom: 60px; }
  #ucnx .shortwave-head { min-height: 520px; align-items: flex-end; padding-bottom: 50px; }
  #ucnx .shortwave-feature-art { height: 600px; }
  #ucnx .shortwave-feature-art img { object-position: 68% center; }
  #ucnx .shortwave-feature-art::after { background: linear-gradient(0deg, #080910 0%, rgba(8,9,16,.83) 56%, rgba(8,9,16,.28)); }
  #ucnx .shortwave-card-grid { margin-top: -20px; }
  #ucnx .shortwave-card { min-height: auto; }
  #ucnx .shortwave-art { height: 230px; }
  #ucnx .shortwave-cta { justify-content: flex-start; }
  #ucnx .mission-close { padding: 90px 0; }
  #ucnx .mission-art { object-position: 72% center; opacity: .58; }
  #ucnx .mission-close::before { background: linear-gradient(180deg, rgba(10,9,18,.96) 0%, rgba(10,9,18,.68) 44%, rgba(10,9,18,.86) 100%), linear-gradient(90deg, #0a0912 0%, rgba(10,9,18,.42) 70%, #0a0912 100%); }
  #ucnx .mission-actions { align-items: stretch; flex-direction: column; }
  #ucnx .primary-button { width: 100%; }
  #ucnx .footer-nav { grid-template-columns: 1fr; gap: 50px; }
  #ucnx .footer-nav nav { grid-template-columns: 1fr 1fr; }
  #ucnx .footer-bottom { padding: 28px 0; grid-template-columns: 1fr; gap: 16px; }
  #ucnx .footer-bottom p:nth-child(2), #ucnx .footer-bottom p:last-child { text-align: left; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  #ucnx { scroll-behavior: auto; }
  #ucnx *, #ucnx *::before, #ucnx *::after { transition: none !important; }
}
/* ==== END concept (#ucnx) ==== */

/* Uniform deep-dark canvas across every #ucnx section — no lighter bands
   between "UCN in your pocket", "Beyond the Internet", and "Listener supported". */
#ucnx{background:#050509}
#ucnx .app-feature{background:#050509}
#ucnx .shortwave-story{background:#010103}

/* Darken the support (mission) section so the transition down from the shortwave
   section stays deep-dark — no lighter band between them. */
#ucnx .mission-close{background:#050509}
#ucnx .mission-close::before{
  background:
    linear-gradient(90deg,#050509 0%,rgba(5,5,9,.96) 24%,rgba(5,5,9,.56) 44%,rgba(5,5,9,.12) 66%,rgba(5,5,9,.2) 100%),
    linear-gradient(0deg,#050509 0%,transparent 20%,transparent 80%,#050509 100%);
}

/* Shortwave globe: fill the full width, enlarged, and pushed down so the
   sunburst at the top clears the header instead of being clipped. */
@media (min-width:981px){
  #ucnx .shortwave-feature-art{display:flex;align-items:flex-start;justify-content:center;height:clamp(600px,44vw,740px)}
  /* Darken the globe image so its dark space matches the near-black section
     background — so it fades into the background instead of forming a lighter box. */
  /* Mask tightly to the LIT part of the globe (sunburst, city lights, arcs);
     the dark lower hemisphere + navy space fade to transparent so the true
     near-black background shows through (no grey block). */
  #ucnx .shortwave-feature-art img{width:114%;height:auto;object-fit:fill;object-position:center;margin:34px 0 0;
    -webkit-mask-image:radial-gradient(ellipse 40% 44% at 73% 30%,#000 42%,transparent 80%);
    mask-image:radial-gradient(ellipse 40% 44% at 73% 30%,#000 42%,transparent 80%)}
}
/* Section background: near-black, matching the darkened globe space. */
#ucnx .shortwave-story{background:#010103}
#ucnx .shortwave-feature-art{background:#010103}
@media (min-width:981px){
  #ucnx .shortwave-feature-art::after{background:none}
}

/* ===== Unified Who We Are + Support component ========================== */
.hp-unified{padding:22px clamp(14px,3.8vw,60px) 0;color:#f5f5f7;background:radial-gradient(circle at 50% 5%,rgba(134,68,167,.09),transparent 37%),radial-gradient(circle at 0 34%,rgba(133,68,165,.08),transparent 24%),radial-gradient(circle at 100% 34%,rgba(133,68,165,.08),transparent 24%),linear-gradient(145deg,#070a16,#030511 68%)}
.page-home .site-footer{margin-top:0}
.hp-unified-shell{position:relative;isolation:isolate;overflow:hidden;width:min(1416px,100%);margin:auto;border:1px solid rgba(179,129,203,.5);border-radius:24px;
  background:radial-gradient(circle at 50% 2%,rgba(134,68,167,.08),transparent 32%),radial-gradient(circle at 8% 34%,rgba(133,68,165,.09),transparent 25%),radial-gradient(circle at 92% 33%,rgba(133,68,165,.08),transparent 25%),linear-gradient(145deg,#070a16,#030511 68%);
  box-shadow:0 0 25px rgba(158,95,190,.16),inset 0 0 50px rgba(92,47,114,.05)}
.hp-unified-shell:before,.hp-unified-shell:after{content:"";position:absolute;z-index:-1;top:100px;width:34%;height:360px;opacity:.42;pointer-events:none;
  background-image:radial-gradient(circle,rgba(170,114,197,.95) 0 1.25px,transparent 1.55px);background-size:9px 9px;mask-image:radial-gradient(ellipse,black 5%,transparent 69%)}
.hp-unified-shell:before{left:-20%;transform:rotate(8deg) skewY(7deg)}
.hp-unified-shell:after{right:-20%;transform:rotate(-8deg) skewY(-7deg)}
.hp-unified-who{padding:26px clamp(24px,11vw,172px) 35px}
.hp-unified .hp-intro{max-width:760px;margin:0 auto 24px;text-align:center}
.hp-unified .hp-label{margin:0 0 10px;color:#b686ce;font-size:.75rem;font-weight:850;letter-spacing:.25em;text-transform:uppercase}
.hp-unified .hp-h2{max-width:none;margin:0 0 13px;color:#f5f5f7;font-size:clamp(2.75rem,4vw,3.8rem);line-height:.98;letter-spacing:-.045em;text-align:center}
.hp-unified .hp-accent{color:#ae79c8;text-shadow:0 0 25px rgba(179,129,203,.18)}
.hp-unified .hp-lead{max-width:760px;margin:auto;color:#aeb2c0;font-size:clamp(.9rem,1.05vw,1.02rem);line-height:1.47;text-align:center}
.hp-unified-who .hp-lead strong{display:block;margin-top:8px;color:#fff;font-weight:800}
.hp-unified .hp-values{display:grid;gap:17px;margin:0}
.hp-unified-who .hp-values{grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-unified .hp-value{min-height:214px;padding:17px 24px 22px;border:1px solid rgba(179,129,203,.55);border-radius:14px;background:linear-gradient(135deg,rgba(15,18,31,.96),rgba(6,8,20,.98));box-shadow:0 0 22px rgba(158,95,190,.1),inset 0 0 22px rgba(179,129,203,.035);transition:border-color .2s,box-shadow .2s}
.hp-unified .hp-value:hover{transform:none;border-color:rgba(190,148,211,.82);box-shadow:0 0 25px rgba(158,95,190,.18),inset 0 0 22px rgba(179,129,203,.05)}
.hp-unified .hp-value:focus-visible{outline:2px solid #be94d3;outline-offset:3px}
.hp-unified .hp-value-ico{width:51px;height:51px;margin:0 0 13px;border:1px solid rgba(190,148,211,.65);border-radius:12px;color:#d7bce4;background:linear-gradient(145deg,rgba(148,78,182,.78),rgba(68,35,84,.9));box-shadow:0 0 22px rgba(179,129,203,.4),inset 0 0 10px rgba(255,255,255,.1)}
.hp-unified .hp-value-ico svg{width:27px;height:27px}.hp-unified .hp-value-ico--glyph{font-size:2rem}
.hp-unified .hp-value h3{margin:0 0 7px;font-size:1rem;line-height:1.25;letter-spacing:-.015em}
.hp-unified .hp-value p{color:#abb0be;font-size:.86rem;line-height:1.55}
.hp-unified-divider{position:relative;height:48px;border-top:1px solid rgba(179,129,203,.43)}
.hp-unified-divider span{position:absolute;left:50%;top:0;display:grid;width:54px;height:54px;place-items:center;transform:translate(-50%,-50%);border:1px solid rgba(190,148,211,.8);border-radius:50%;color:#ceafde;background:#070915;box-shadow:0 0 22px rgba(179,129,203,.3)}
.hp-unified-divider svg{width:27px;height:27px}
.hp-unified-support{padding:0 clamp(24px,17.5vw,264px) 7px}
.hp-unified-support .hp-intro{max-width:700px;margin-bottom:20px}
.hp-unified-support .hp-h2{font-size:clamp(2.25rem,3.35vw,3.15rem);line-height:.9;margin-bottom:11px}
.hp-unified-support .hp-lead{max-width:720px;font-size:.88rem;line-height:1.3}
.hp-unified-support .hp-values{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:650px;margin-inline:auto}
.hp-unified-support .hp-value{display:grid;grid-template-columns:47px 1fr;grid-template-rows:auto 1fr auto;column-gap:14px;min-height:145px;padding:13px 18px 12px;border-radius:13px}
.hp-unified-support .hp-value-ico{grid-column:1;grid-row:1 / span 2;width:45px;height:45px;margin:0;border-radius:10px}
.hp-unified-support .hp-value-ico svg{width:24px;height:24px}
.hp-unified-support .hp-value h3{grid-column:2;margin:5px 0 4px;font-size:.88rem}
.hp-unified-support .hp-value p{grid-column:2;font-size:.74rem;line-height:1.42}
.hp-unified-support .hp-value-go{grid-column:1 / -1;padding-top:7px;color:#bc90d2;font-size:.78rem;font-weight:600}
.hp-unified .hp-support-cta{margin:16px auto 0;text-align:center}
.hp-unified .hp-support-cta .hp-btn{position:relative;width:min(356px,100%);min-height:45px;padding:.55rem 1.1rem;border-color:#ba8dd0;background:linear-gradient(90deg,rgba(65,33,81,.96),rgba(127,65,158,.9),rgba(65,33,81,.96));box-shadow:0 8px 24px rgba(158,95,190,.32),inset 0 0 12px rgba(255,255,255,.08);font-size:.92rem}
.hp-unified .hp-support-cta .hp-btn:hover{transform:none;background:linear-gradient(90deg,#522a66,#8f49b2,#522a66);box-shadow:0 8px 30px rgba(179,129,203,.46)}
.hp-unified .hp-support-cta svg{width:23px;height:23px}.hp-unified .hp-support-cta b{position:absolute;right:22px;font-size:1.35rem;font-weight:400}
@media(max-width:1100px){.hp-unified-who{padding-inline:40px}.hp-unified-support{padding-inline:40px}.hp-unified-who .hp-values{grid-template-columns:repeat(2,1fr)}.hp-unified .hp-value{min-height:190px}.hp-unified-support .hp-values{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.hp-unified{padding:14px 10px 0}.hp-unified-shell{border-radius:18px}.hp-unified-shell:before,.hp-unified-shell:after{opacity:.15}.hp-unified-who{padding:38px 18px 32px}.hp-unified .hp-h2{font-size:clamp(2.2rem,10vw,3rem);line-height:1}.hp-unified .hp-lead{font-size:.91rem;line-height:1.58}.hp-unified-who .hp-values,.hp-unified-support .hp-values{grid-template-columns:1fr}.hp-unified .hp-value{min-height:0}.hp-unified-divider{height:52px}.hp-unified-support{padding:0 18px 22px}.hp-unified-support .hp-intro{margin-bottom:24px}.hp-unified-support .hp-h2{font-size:2.35rem}.hp-unified-support .hp-lead{line-height:1.55}.hp-unified-support .hp-value:last-child{grid-column:auto;width:auto}.hp-unified .hp-support-cta{margin-top:20px}}

/* ============================================================
   RESTORE — last-night home page (icon "Who we are", letter-mark
   "Four ways to connect", 3-card support). Appended last so it wins
   over the image-card + concept overrides above.
   ============================================================ */
/* Who-we-are icon cards */
.hp-who-grid{display:block}
.hp-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hp-value{position:relative;display:flex;flex-direction:column;padding:1.7rem 1.4rem;min-height:0;
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02);
  transition:transform .2s,border-color .2s;overflow:visible;box-shadow:none}
.hp-value:hover{transform:translateY(-4px);border-color:rgb(from var(--violet-400) r g b / .5)}
.hp-value-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin:0 0 1.05rem;
  background:rgb(from var(--violet-500) r g b / .15);color:var(--violet-400)}
.hp-value-ico svg{width:24px;height:24px}
.hp-value-ico--glyph{font-size:1.7rem;line-height:1;font-weight:700}
.hp-value h3{font-family:var(--display);margin:0 0 .5rem;font-size:1.2rem;color:#fff}
.hp-value p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55}
.hp-value em{font-style:italic;color:#d9d3ff}
.hp-value--link{text-decoration:none;color:inherit}
.hp-value-go{margin-top:auto;padding-top:1rem;color:var(--violet-400);font-weight:800;font-size:.88rem}
.hp-value--link:hover .hp-value-go{color:var(--violet-200)}
.hp-values--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hp-values--3 .hp-value{min-height:0;padding:1.7rem 1.4rem}

/* Four-ways letter-mark pillars */
.hp-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hp-pillar{--pc:var(--violet-500-rgb);position:relative;isolation:isolate;min-height:235px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.35rem,2.2vw,1.8rem);
  border:1px solid rgba(var(--pc),.23);border-radius:24px;
  background:linear-gradient(145deg,rgba(var(--pc),.11),rgba(12,13,21,.8) 62%);
  box-shadow:0 22px 60px rgba(0,0,0,.2);transition:transform .22s ease,border-color .22s ease}
.hp-pillar::before{content:attr(data-mark);position:absolute;z-index:-1;left:.34em;top:.08em;
  color:rgba(var(--pc),.105);font-family:var(--display);font-size:clamp(3.4rem,4.8vw,5rem);
  font-weight:900;line-height:1;letter-spacing:-.07em;white-space:nowrap;transition:transform .28s ease,color .28s ease}
.hp-pillar::after{content:"";position:absolute;z-index:-2;right:8%;top:10%;left:auto;transform:none;
  width:140px;aspect-ratio:1;border-radius:50%;background:rgba(var(--pc),.12);filter:blur(38px)}
.hp-pillar:hover{transform:translateY(-4px);border-color:rgba(var(--pc),.48)}
.hp-pillar:hover::before{transform:translateX(5px);color:rgba(var(--pc),.15)}
.hp-pillar--prayer{--pc:var(--violet-500-rgb)}
.hp-pillar--radio{--pc:255,102,112}
.hp-pillar--shortwave{--pc:70,205,183}
.hp-pillar--podcasts{--pc:74,156,255}
.hp-pillar-kicker{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.75rem;color:rgb(var(--pc));
  font-size:.68rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.hp-pillar-kicker::before{content:"";width:19px;height:2px;border-radius:2px;background:currentColor}
.hp-pillar h3{font-family:var(--display);margin:0 0 .45rem;font-size:clamp(1.22rem,1.8vw,1.55rem);letter-spacing:-.035em}
.hp-pillar p{max-width:34ch;margin:0;color:var(--muted);font-size:.94rem;line-height:1.55}
.hp-pillar-go{margin-top:auto;padding-top:1rem;color:rgb(var(--pc));font-weight:800;font-size:.85rem}

/* Support CTA button */
.hp-support-cta{text-align:center;margin-top:clamp(30px,4vw,46px)}

@media (max-width:1080px){
  .hp-values{grid-template-columns:repeat(2,1fr)}
  .hp-pillars{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .hp-values,.hp-values--3,.hp-pillars{grid-template-columns:1fr}
  .hp-pillar{min-height:190px}
}

/* ===== Hero-derived homepage night palette ============================== */
.page-home main{background:var(--ucn-bg);color:var(--ucn-text)}
.page-home .hp-hero{height:calc(41.6667vw + 124px);min-height:0}
/* NOTE: `page-home` is never set on <body>, so this override is dead. Kept
   in sync with .dist.dist--reference above so it can't silently flatten the
   section's background if that class is ever switched on. */
.page-home .dist.dist--reference{background:linear-gradient(180deg,rgba(6,6,10,1),rgba(9,9,18,0) 120px),linear-gradient(0deg,#050509,rgba(9,9,18,0) 110px),radial-gradient(ellipse 44% 38% at 8% 6%,rgba(167,117,190,.16),transparent 68%),radial-gradient(ellipse 40% 34% at 94% 10%,rgba(167,117,190,.13),transparent 66%),radial-gradient(ellipse 70% 40% at 50% 104%,rgba(122,86,140,.18),transparent 72%),radial-gradient(circle at 50% 46%,rgba(74,51,88,.1),transparent 58%),#090912}
.page-home .hp-unified{background:radial-gradient(circle at 80% 0,rgba(99,61,118,.08),transparent 40%),radial-gradient(circle at 10% 60%,rgba(78,45,95,.05),transparent 42%),var(--ucn-bg)}
.page-home .hp-unified-shell{border-color:var(--ucn-border);background:radial-gradient(circle at 78% 0,rgba(96,55,117,.07),transparent 36%),linear-gradient(180deg,rgba(11,11,18,.99),rgba(5,5,10,.99));box-shadow:0 22px 64px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.022)}
.page-home .hp-unified-shell:before,.page-home .hp-unified-shell:after{opacity:.14;background-image:radial-gradient(circle,rgba(152,91,183,.62) 0 1px,transparent 1.4px)}
.page-home .hp-unified .hp-label{color:var(--ucn-purple-bright)}
.page-home .hp-unified .hp-h2{color:var(--ucn-text)}
.page-home .hp-unified .hp-accent{color:var(--ucn-purple-bright);text-shadow:0 0 26px var(--ucn-glow)}
.page-home .hp-unified .hp-lead,.page-home .hp-unified .hp-value p{color:var(--ucn-text-secondary)}
.page-home .hp-unified .hp-value{border-color:var(--ucn-border);background:linear-gradient(135deg,rgba(15,15,24,.96),rgba(7,7,13,.99));box-shadow:inset 0 1px rgba(255,255,255,.018)}
.page-home .hp-unified .hp-value:hover{border-color:var(--ucn-border-hover);box-shadow:0 0 18px rgba(118,73,140,.07),inset 0 1px rgba(255,255,255,.025)}
.page-home .hp-unified .hp-value-ico{color:#c6a5d7;border-color:rgba(171,117,198,.38);background:linear-gradient(135deg,rgba(132,79,158,.3),rgba(70,42,84,.18));box-shadow:0 0 16px rgba(132,79,158,.13),inset 0 1px rgba(255,255,255,.035)}
.page-home .hp-unified .hp-value h3{color:var(--ucn-text)}
.page-home .hp-unified .hp-value-go{color:var(--ucn-purple-bright)}
.page-home .hp-unified-divider{border-color:var(--ucn-border)}
.page-home .hp-unified-divider span{color:#c6a5d7;border-color:var(--ucn-border-hover);background:var(--ucn-surface);box-shadow:0 0 18px var(--ucn-glow)}
.page-home .hp-unified .hp-support-cta .hp-btn{border-color:var(--ucn-border-active);background:linear-gradient(90deg,rgba(60,39,70,.96),rgba(117,72,139,.88),rgba(60,39,70,.96));box-shadow:0 8px 24px rgba(0,0,0,.32),0 0 16px var(--ucn-glow)}
.page-home .hp-unified .hp-support-cta .hp-btn:hover{background:linear-gradient(90deg,rgba(71,45,84,.98),rgba(133,83,158,.92),rgba(71,45,84,.98));box-shadow:0 8px 28px rgba(0,0,0,.36),0 0 20px var(--ucn-glow-active)}
.page-home .hp-btn:focus-visible,.page-home .hp-value:focus-visible{outline-color:var(--ucn-purple-bright)}
@media(max-width:1000px) and (min-width:701px){.page-home .hp-hero{height:760px;min-height:760px;max-height:none}}
@media(max-width:700px){.page-home .hp-hero{height:calc(100svh - 74px);min-height:620px;max-height:none}.page-home .hp-unified-shell:before,.page-home .hp-unified-shell:after{opacity:.07}}