/* ============================================================
   TruthForFree.com — shared design system
   Brand: luminous cross breaking through darkness, living water.
   Palette: deep navy base -> electric cyan/blue -> white light.
   One stylesheet drives every page. Edit here to restyle globally.
   ============================================================ */

:root{
  /* --- core palette --- */
  --navy-950:#070f1f;
  --navy-900:#0a1628;   /* base (from brand) */
  --navy-850:#0c1a30;
  --navy-800:#0f2038;
  --navy-700:#142a49;
  --navy-600:#1b365c;

  --cyan:#38bdf8;        /* primary luminous accent */
  --cyan-bright:#7dd3fc;
  --cyan-soft:#a5e2ff;
  --cyan-deep:#0ea5e9;
  --aqua:#22d3ee;
  --gold:#cda856;        /* rare warm accent (ties in the audio family) */

  --white:#eef5ff;
  --text:#c4d4ec;        /* body on navy */
  --text-dim:#8598ba;
  --text-mute:#5f739a;

  --line:rgba(125,211,252,0.16);
  --line-soft:rgba(125,211,252,0.09);
  --glass:rgba(17,34,58,0.55);
  --glass-hi:rgba(23,44,74,0.72);

  --glow-cyan:rgba(56,189,248,0.55);
  --shadow:0 24px 60px rgba(0,0,0,0.45);

  --maxw:1120px;
  --radius:16px;
  --radius-lg:22px;

  --font-ui:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-read:'Newsreader',Georgia,'Times New Roman',serif;
}

/* ---------- reset-ish ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-ui); color:var(--text);
  background:var(--navy-900); line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--cyan-bright); text-decoration:none; transition:color .15s ease; }
a:hover{ color:var(--white); }
h1,h2,h3,h4{ font-family:var(--font-ui); font-weight:700; color:var(--white); line-height:1.12; letter-spacing:-.02em; margin:0 0 .5em; }
p{ margin:0 0 1rem; }
::selection{ background:rgba(56,189,248,.28); color:#fff; }

/* ---------- ambient background (fixed, cinematic) ---------- */
.bg{  /* fixed to the viewport, so page content scrolls over a still background */
  position:fixed; inset:0; z-index:-2;
  background:#0a1628 center top / cover no-repeat;
  background-image:url('/images/tff-bg.jpg');
}
.bg::after{  /* subtle scrim keeps text readable over the artwork */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,22,40,.32) 0%, rgba(10,22,40,.12) 34%, rgba(8,17,32,.55) 100%);
}
@media (orientation:portrait){
  .bg{ background-image:url('/images/tff-bg-mobile.jpg'); }
}

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,4vw,2rem); }
.section{ padding:clamp(3rem,7vw,6rem) 0; }
.center{ text-align:center; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:rgba(8,17,32,.72); border-bottom:1px solid var(--line-soft);
}
.nav-inner{ display:flex; align-items:center; gap:1rem; height:66px; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--white); letter-spacing:-.01em; }
.brand img{ width:34px; height:34px; border-radius:8px; }
.brand b{ font-weight:700 } .brand span{ color:var(--cyan-bright); font-weight:400 }
.nav-links{ display:flex; align-items:center; gap:.35rem; margin-left:auto; }
.nav-links a{
  color:var(--text); font-size:.93rem; font-weight:500; padding:.5rem .8rem; border-radius:9px;
  transition:background .15s ease,color .15s ease;
}
.nav-links a:hover{ color:var(--white); background:rgba(125,211,252,.08); }
.nav-links a.active{ color:var(--cyan-bright); }
.nav-toggle{ display:none; margin-left:auto; background:none; border:1px solid var(--line); color:var(--white);
  width:42px; height:38px; border-radius:10px; cursor:pointer; font-size:1.1rem; align-items:center; justify-content:center; }

@media (max-width:820px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute; top:66px; left:0; right:0; flex-direction:column; align-items:stretch; gap:.15rem;
    background:rgba(9,19,36,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
    padding:.6rem clamp(1.1rem,4vw,2rem) 1rem; margin:0;
    max-height:0; overflow:hidden; transition:max-height .28s ease; pointer-events:none;
  }
  .nav-links.open{ max-height:70vh; pointer-events:auto; }
  .nav-links a{ padding:.7rem .6rem; font-size:1rem; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-family:var(--font-ui); font-weight:600; font-size:.95rem; line-height:1;
  padding:.8rem 1.4rem; border-radius:12px; border:1px solid transparent; transition:all .18s ease;
}
.btn-primary{ background:linear-gradient(135deg,var(--cyan) 0%,var(--cyan-deep) 100%); color:#04121f;
  box-shadow:0 10px 26px rgba(14,165,233,.32); }
.btn-primary:hover{ color:#04121f; transform:translateY(-2px); box-shadow:0 16px 36px rgba(14,165,233,.42); }
.btn-ghost{ border-color:var(--line); color:var(--white); background:rgba(125,211,252,.05); }
.btn-ghost:hover{ color:var(--white); border-color:var(--cyan); background:rgba(125,211,252,.12); }

/* ---------- hero (home) ---------- */
.hero{ position:relative; text-align:center; padding:clamp(3rem,9vw,7rem) 0 clamp(2.5rem,6vw,4rem); }
.hero .halo{ position:absolute; inset:0; z-index:-1; display:flex; justify-content:center; }
.hero .halo::after{ content:""; width:min(560px,88vw); aspect-ratio:1; margin-top:-6%;
  background:radial-gradient(closest-side, rgba(56,189,248,.22), rgba(56,189,248,0) 70%); filter:blur(8px); }
.hero-logo{ width:clamp(210px,36vw,320px); margin:0 auto 1.2rem;
  will-change:transform; backface-visibility:hidden; transform:translateZ(0);
  animation:floaty 8s ease-in-out infinite; }
.hero-logo img{ width:100%; display:block;
  filter:drop-shadow(0 8px 34px rgba(56,189,248,.35)); }
@keyframes floaty{
  0%,100%{ transform:translate3d(0,4px,0); }
  50%{ transform:translate3d(0,-6px,0); }
}
.hero h1{ font-size:clamp(2.4rem,7vw,4.4rem); letter-spacing:-.03em; margin-bottom:.35em; }
.hero h1 .grad{ background:linear-gradient(120deg,var(--cyan-bright),var(--aqua) 60%,var(--white));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* elegant script headline (home hero) */
.hero-script{
  font-family:'Great Vibes', cursive; font-weight:400;
  font-size:clamp(1.7rem,7vw,5.4rem); line-height:1.55; letter-spacing:.01em;
  padding:.12em 0 .16em; margin-bottom:.25em; white-space:nowrap;
}
/* Solid fill + text-shadow glow (NOT background-clip:text + filter, which
   iOS Safari renders as an invisible/ghost — the gradient trick is unreliable
   on mobile, so these use plain color that paints identically everywhere). */
.hero-script.gold{
  color:#eccb78; -webkit-text-fill-color:#eccb78;
  text-shadow:0 1px 1px rgba(74,52,12,.4), 0 0 20px rgba(231,199,120,.4);
}
.hero-script.cyan{
  color:#a6dffb; -webkit-text-fill-color:#a6dffb;
  text-shadow:0 1px 1px rgba(8,32,58,.4), 0 0 18px rgba(56,189,248,.5);
}
.hero-script.silver{
  color:#e8eef6; -webkit-text-fill-color:#e8eef6;
  text-shadow:0 1px 1px rgba(24,38,60,.4), 0 0 18px rgba(190,215,240,.45);
}
.hero-script.pinyon{ font-family:'Pinyon Script', cursive; }
.hero .tag{ font-size:clamp(1.05rem,2.4vw,1.3rem); color:var(--text); max-width:640px; margin:0 auto 2rem; }
.hero .cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.kicker{ text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; font-weight:600;
  color:var(--cyan); margin-bottom:1rem; }

/* ---------- section heads ---------- */
.sec-head{ text-align:center; max-width:640px; margin:0 auto clamp(2rem,4vw,3rem); }
.sec-head h2{ font-size:clamp(1.8rem,4vw,2.6rem); }
.sec-head p{ color:var(--text-dim); font-size:1.05rem; }

/* ---------- cards / grid ---------- */
.grid{ display:grid; gap:1.1rem; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .grid.cols-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .grid.cols-2,.grid.cols-3{ grid-template-columns:1fr; } }

.card{
  position:relative; display:flex; flex-direction:column; gap:.5rem;
  background:var(--glass); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:1.4rem 1.35rem; overflow:hidden; transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.card:hover{ transform:translateY(-4px); border-color:var(--line); background:var(--glass-hi); }
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:0; transition:opacity .2s ease; }
.card:hover::before{ opacity:.8; }
.card .ic{ width:38px; height:38px; color:var(--cyan-bright); margin-bottom:.4rem; }
.card h3{ font-size:1.2rem; margin:0; }
.card .meta{ font-size:.82rem; color:var(--text-mute); letter-spacing:.02em; }
.card p{ color:var(--text-dim); font-size:.95rem; margin:0; }
.card .go{ margin-top:auto; padding-top:.6rem; color:var(--cyan-bright); font-weight:600; font-size:.9rem; }

/* article list rows */
.list{ display:flex; flex-direction:column; gap:.7rem; }
.row{ display:flex; align-items:baseline; gap:1rem; justify-content:space-between;
  background:var(--glass); border:1px solid var(--line-soft); border-radius:14px; padding:1.05rem 1.25rem;
  transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.row:hover{ border-color:var(--line); background:var(--glass-hi); transform:translateX(3px); }
.row .t{ color:var(--white); font-weight:600; font-size:1.08rem; }
.row .by{ color:var(--text-dim); font-size:.88rem; }
.row .d{ color:var(--text-mute); font-size:.82rem; white-space:nowrap; }

/* search box */
.search{ display:flex; align-items:center; gap:.6rem; max-width:440px; margin:0 auto 2rem;
  background:var(--glass); border:1px solid var(--line); border-radius:12px; padding:.7rem 1rem; }
.search input{ flex:1; background:none; border:0; outline:none; color:var(--white); font-family:var(--font-ui); font-size:.98rem; }
.search input::placeholder{ color:var(--text-mute); }
.search svg{ width:18px; height:18px; color:var(--cyan); flex:none; }

/* ---------- article (reading) ---------- */
.article{ max-width:760px; margin:0 auto; padding:clamp(2rem,5vw,3.5rem) 0; }
.article-head{ text-align:center; margin-bottom:2.4rem; padding-bottom:2rem; border-bottom:1px solid var(--line-soft); }
.article-head h1{ font-size:clamp(2rem,5vw,3rem); margin-bottom:.6rem; }
.article-head .byline{ color:var(--text-dim); font-size:1rem; }
.article-head .byline b{ color:var(--cyan-bright); font-weight:600; }
.article-head .pub{ display:inline-block; margin-top:.7rem; font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-mute); }
.article-head .subtitle{ font-family:var(--font-ui); font-size:1.06rem; font-weight:500; letter-spacing:.01em;
  color:var(--cyan-bright); margin:.35rem 0 .9rem; }
.prose{ font-family:var(--font-read); font-size:1.16rem; line-height:1.8; color:#d6e2f4; }
.prose p{ margin:0 0 1.3rem; }
.prose b,.prose strong{ color:var(--white); font-weight:600; }
.prose em,.prose i{ color:#e7eefb; }
.prose h2{ font-family:var(--font-ui); font-size:1.5rem; margin:2.4rem 0 1rem; }
.prose a{ color:var(--cyan-bright); border-bottom:1px solid rgba(125,211,252,.3); }
.prose .ref{ color:var(--text-dim); font-style:italic; border:0; }  /* de-linked source references */
.scripture{
  margin:1.6rem 0; padding:1.1rem 1.4rem; border-left:3px solid var(--cyan);
  background:rgba(56,189,248,.06); border-radius:0 12px 12px 0; font-size:1.05rem;
}
.scripture .ref-v{ display:block; font-family:var(--font-ui); font-size:.8rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--cyan); margin-bottom:.35rem; }
.scripture .q{ color:#e7eefb; }
.pull{ font-family:var(--font-ui); font-weight:600; font-size:1.4rem; line-height:1.4; color:var(--white);
  text-align:center; margin:2.4rem 0; padding:0 1rem; }
.prose blockquote{ margin:1.7rem 0; padding:.5rem 1.3rem; border-left:3px solid var(--line);
  color:var(--text-dim); font-style:italic; }
.prose blockquote p:last-child{ margin-bottom:0; }
.prose .footnote{ margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--line-soft);
  font-family:var(--font-ui); font-size:.82rem; line-height:1.65; color:var(--text-mute); }
.prose .footnote b{ color:var(--text-dim); }

/* disclaimer / permission block */
.disclaimer{
  margin-top:3rem; padding:1.3rem 1.4rem; border-radius:14px;
  background:rgba(125,211,252,.05); border:1px solid var(--line-soft);
  font-family:var(--font-ui); font-size:.9rem; color:var(--text-dim); line-height:1.65;
}
.disclaimer b{ color:var(--cyan-bright); }

/* ---------- article cover + reusable audio player ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.article-cover{ max-width:540px; margin:0 auto; }
.article-cover img{ width:100%; border-radius:18px; border:1px solid var(--line);
  box-shadow:0 22px 60px rgba(0,0,0,.55); }

.aplayer{ --ap-accent:var(--cyan-bright);
  display:flex; align-items:center; gap:1rem; max-width:560px; margin:1.6rem auto 0;
  background:rgba(20,32,54,.72); border:1px solid var(--line); border-radius:16px;
  padding:.85rem 1.05rem; backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%); }
.aplayer.warm{ --ap-accent:#eab861; border-color:rgba(234,184,97,.34); background:rgba(28,22,14,.62); }
.aplayer.violet{ --ap-accent:#bd93ef; border-color:rgba(189,147,239,.34); background:rgba(24,18,34,.64); }
.ap-play{ flex:none; width:50px; height:50px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; color:#161006;
  background:radial-gradient(circle at 34% 30%, #fff6df, var(--ap-accent));
  box-shadow:0 6px 18px rgba(0,0,0,.35); transition:transform .15s ease; }
.ap-play:hover{ transform:scale(1.06); }
.ap-play svg{ width:22px; height:22px; margin-left:2px; }
.ap-play.playing svg{ margin-left:0; }
.ap-main{ flex:1; min-width:0; }
.ap-label{ font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--ap-accent); margin-bottom:.45rem; }
.ap-seek{ position:relative; height:8px; border-radius:6px; background:rgba(255,255,255,.12); cursor:pointer; touch-action:none; }
.ap-fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:6px; background:var(--ap-accent); }
.ap-knob{ position:absolute; top:50%; left:0; width:14px; height:14px; border-radius:50%; background:#fff;
  transform:translate(-50%,-50%); box-shadow:0 1px 4px rgba(0,0,0,.5); }
.ap-times{ display:flex; justify-content:space-between; font-size:.74rem; color:var(--text-dim);
  margin-top:.4rem; font-variant-numeric:tabular-nums; }
.ap-dl{ flex:none; width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  color:var(--ap-accent); border:1px solid var(--line); }
.ap-dl:hover{ background:rgba(255,255,255,.06); color:var(--ap-accent); }
.ap-dl svg{ width:18px; height:18px; }

/* ---------- share row (reusable) ---------- */
.share{ display:flex; align-items:center; justify-content:center; gap:.55rem; flex-wrap:wrap;
  margin:2.6rem auto 0; padding-top:1.6rem; border-top:1px solid var(--line-soft); }
.share .lbl{ font-size:.76rem; color:var(--text-mute); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; margin-right:.2rem; }
.share button, .share a{ display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:var(--glass);
  color:var(--text); cursor:pointer; transition:all .15s ease; text-decoration:none; }
.share button:hover, .share a:hover{ border-color:var(--cyan); color:var(--white); background:var(--glass-hi); transform:translateY(-2px); }
.share svg{ width:18px; height:18px; }
.share .copied{ color:var(--cyan-bright); border-color:var(--cyan); font-size:.85rem; font-weight:700; }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line-soft); margin-top:2rem; padding:3rem 0 2.5rem;
  background:rgba(7,15,31,.5); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
@media (max-width:720px){ .footer-grid{ grid-template-columns:1fr; gap:1.4rem; } }
.footer .brand{ margin-bottom:.7rem; }
.footer p{ color:var(--text-mute); font-size:.9rem; max-width:34ch; }
.footer h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim); margin-bottom:.8rem; }
.footer nav a{ display:block; color:var(--text-dim); font-size:.92rem; padding:.25rem 0; }
.footer nav a:hover{ color:var(--cyan-bright); }
.footer .fine{ text-align:center; padding-top:1.6rem; border-top:1px solid var(--line-soft);
  color:var(--text-mute); font-size:.82rem; line-height:1.7; }
.footer .fine .free{ color:var(--cyan); font-weight:600; }

/* ---------- ambient water sparkles ---------- */
.sparkles{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.sparkle{
  position:absolute; border-radius:50%; opacity:0; will-change:transform,opacity;
  background:radial-gradient(circle, #f2fbff 0%, rgba(160,224,255,.85) 34%, rgba(56,189,248,0) 72%);
  box-shadow:0 0 8px 2px rgba(125,211,252,.55);
  animation:twinkle var(--dur,6s) ease-in-out var(--delay,0s) infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:0; transform:translateY(7px) scale(.3); }
  38%,62%{ opacity:var(--peak,.9); transform:translateY(-5px) scale(1); }
}

/* ---------- back-to-top button ---------- */
.to-top{ position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:45;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:rgba(20,32,54,.82); backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%);
  color:var(--cyan-bright); display:grid; place-items:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, color .15s ease, border-color .15s ease;
  box-shadow:0 6px 20px rgba(0,0,0,.4); }
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ color:#fff; border-color:var(--cyan); background:rgba(23,44,74,.92); }
.to-top svg{ width:20px; height:20px; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- visit counter ---------- */
.site-counter{ display:inline-block; margin-top:.5rem; font-family:var(--font-ui);
  font-size:.72rem; letter-spacing:.03em; color:var(--text-mute); opacity:.8; }

/* ---------- PWA install: persistent header button ---------- */
.nav-install{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-ui);
  font-size:.82rem; font-weight:600; color:var(--cyan); background:rgba(56,189,248,.1);
  border:1px solid rgba(56,189,248,.38); border-radius:999px; padding:.4rem .85rem; cursor:pointer;
  white-space:nowrap; transition:background .15s ease, border-color .15s ease; }
.nav-install:hover{ background:rgba(56,189,248,.2); border-color:var(--cyan); }
.nav-install svg{ width:15px; height:15px; }

/* ---------- PWA install banner ---------- */
.pwa-banner{ position:fixed; left:50%; bottom:calc(1rem + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(150%); z-index:130;
  width:min(440px, calc(100vw - 1.5rem)); display:flex; align-items:center; gap:.85rem;
  padding:.7rem .8rem; border-radius:16px; background:rgba(12,26,46,.94); border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  opacity:0; transition:transform .34s cubic-bezier(.2,.8,.2,1), opacity .34s ease; }
.pwa-banner.show{ transform:translateX(-50%) translateY(0); opacity:1; }
.pwa-banner .pwa-ico{ width:44px; height:44px; border-radius:11px; flex:0 0 auto; }
.pwa-banner .pwa-txt{ display:flex; flex-direction:column; line-height:1.28; min-width:0; flex:1; }
.pwa-banner .pwa-txt b{ font-family:var(--font-ui); font-size:.92rem; color:var(--white); }
.pwa-banner .pwa-txt span{ font-size:.78rem; color:var(--text-mute); }
.pwa-banner .pwa-go{ flex:0 0 auto; font-family:var(--font-ui); font-weight:600; font-size:.85rem;
  color:#04121f; background:var(--cyan); border:0; border-radius:10px; padding:.55rem 1rem; cursor:pointer;
  box-shadow:0 4px 14px rgba(56,189,248,.35); }
.pwa-banner .pwa-go:hover{ filter:brightness(1.08); }
.pwa-banner .pwa-x{ flex:0 0 auto; background:transparent; border:0; color:var(--text-mute);
  font-size:1.4rem; line-height:1; cursor:pointer; padding:.1rem .35rem; }
.pwa-banner .pwa-x:hover{ color:var(--white); }
@media (max-width:400px){ .pwa-banner .pwa-txt span{ font-size:.73rem; } .pwa-banner .pwa-go{ padding:.5rem .8rem; } }