/* ============ NEBULA THEME (lifted from the dashboard) ============ */
:root{
  --gradient-from:#120e36;     /* deep indigo */
  --gradient-mid:#1d1850;      /* purple-navy */
  --gradient-to:#0a3566;       /* deep ocean  */
  --surface-solid:#0a0b22;

  --accent:#00d4ff;
  --accent-hover:#0099cc;
  --accent-rgb:0,212,255;
  --accent-soft:rgba(0,212,255,.15);

  --text-primary:#ffffff;
  --text-secondary:rgba(255,255,255,.82);
  --text-muted:rgba(255,255,255,.65);
  --text-faint:rgba(255,255,255,.45);
  --text-on-accent:#ffffff;
  /* fill for buttons that carry white text: the bright accent is too pale for it (~1.7:1), this is ~4.6:1 */
  --accent-fill:#0782ae;
  --accent-fill-hover:#06698d;
  --text-rgb:255,255,255;

  --border:rgba(255,255,255,.16);
  --border-strong:rgba(255,255,255,.26);
  --border-subtle:rgba(255,255,255,.08);

  --card-bg:linear-gradient(155deg, rgba(255,255,255,.09) 0%, rgba(0,212,255,.05) 100%);
  --card-border:rgba(255,255,255,.16);
  --card-shadow:0 4px 18px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
  --card-shadow-hover:0 10px 32px rgba(0,212,255,.18), 0 4px 18px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.10);

  --topbar-bg:rgb(15,25,50);
  --console-bg:rgba(0,0,0,.40);
  --surface-bg-solid:#0f1729;

  --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-mono:"SF Mono", "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;

  --maxw:1760px;
  --gutter:18px;   /* side padding of the content, and of the header above it, on both sites (wider below) */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
/* The wiki's own side padding was 12px on a phone and 4vw (at most 56px) above 768px; the shared gutter is that plus 6px. */
@media (min-width:769px){:root{--gutter:min(62px,calc(4vw + 6px))}}
html{scroll-behavior:smooth;background:var(--surface-solid)}
body{font-family:var(--font-sans);background:transparent;color:var(--text-primary);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ============ AURORA BACKDROP (from aurora-background.css) ============ */
/* No `filter:blur` on these layers. They are fixed and animated forever, so a
   blur here was re-run by the compositor on every frame over 1.5x the
   viewport, and anything that animated anywhere on the page paid for it: that
   was the lag on phones. The gradients are soft by construction instead (the
   radial stops reach a little further, standing in for the blur's spread), so
   the layers rasterise once and the animation only moves a finished texture. */
.cosmos{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse 55% 42% at 90% 0%, rgba(8,92,134,.8) 0%, transparent 62%),
    radial-gradient(ellipse 75% 65% at 4% 62%, rgba(78,48,168,.92) 0%, transparent 68%),
    radial-gradient(ellipse 60% 45% at 60% 100%, rgba(40,22,96,.8) 0%, transparent 70%),
    linear-gradient(165deg,#120e36 0%,#1b1550 46%,#0a0a26 100%);}
/* The slow sweep. This was a conic gradient softened by a 70px blur; without
   the blur a conic shows its pinch at the centre and the rotated box shows its
   edges, so it is now an off-centre glow that fades to nothing before the box's
   edge, turning about the middle of the screen. Same light, same 38s turn. The
   box is sized from vmax so no edge ever crosses the viewport as it turns. */
.cosmos::before{content:'';position:absolute;left:50%;top:50%;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;
  background:radial-gradient(closest-side circle at 50% 58%,
    rgba(var(--accent-rgb),.22) 0%, rgba(var(--accent-rgb),.17) 40%,
    rgba(var(--accent-rgb),.07) 75%, rgba(var(--accent-rgb),0) 100%);
  animation:auroraSpin 38s linear infinite;opacity:.2;}
.cosmos::after{content:'';position:absolute;inset:-10%;
  background:
    radial-gradient(circle at 18% 22%, rgba(var(--accent-rgb),.34) 0%, rgba(var(--accent-rgb),.12) 24%, transparent 41%),
    radial-gradient(circle at 78% 18%, rgba(var(--accent-rgb),.29) 0%, rgba(var(--accent-rgb),.10) 22%, transparent 38%),
    radial-gradient(circle at 30% 80%, rgba(var(--accent-rgb),.27) 0%, rgba(var(--accent-rgb),.10) 26%, transparent 44%),
    radial-gradient(circle at 84% 82%, rgba(var(--accent-rgb),.30) 0%, rgba(var(--accent-rgb),.11) 25%, transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),.13) 0%, transparent 56%);
  animation:auroraDrift 22s ease-in-out infinite alternate;}
.stars{position:fixed;inset:0;z-index:-1;pointer-events:none}
/* The backdrop layers are as tall as the LARGEST viewport (100lvh), not whatever the phone's address bar
   leaves at that moment, so scrolling never exposes a flat strip below them. 100vh is the fallback, and
   html/body paint the darkest backdrop colour behind everything, so a gap would blend in anyway. */
.cosmos,.stars{inset:0 0 auto 0;height:100vh;height:100lvh}
.stars::before,.stars::after{content:'';position:absolute;inset:0;background-repeat:repeat}
.stars::before{background-image:
    radial-gradient(1.5px 1.5px at 12px 18px, rgba(var(--text-rgb),.9), transparent 60%),
    radial-gradient(1px 1px at 47px 92px, rgba(var(--accent-rgb),.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 110px 40px, rgba(var(--text-rgb),.75), transparent 60%),
    radial-gradient(1px 1px at 165px 130px, rgba(var(--accent-rgb),.7), transparent 60%);
  background-size:200px 200px;animation:auroraTwinkleA 4.5s ease-in-out infinite;}
.stars::after{background-image:
    radial-gradient(1px 1px at 30px 60px, rgba(var(--accent-rgb),.8), transparent 60%),
    radial-gradient(1.4px 1.4px at 88px 22px, rgba(var(--text-rgb),.7), transparent 60%),
    radial-gradient(1px 1px at 140px 100px, rgba(var(--accent-rgb),.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 195px 70px, rgba(var(--text-rgb),.6), transparent 60%);
  background-size:240px 240px;background-position:80px 50px;animation:auroraTwinkleB 6.5s ease-in-out infinite;}
@keyframes auroraSpin{to{transform:rotate(360deg)}}
@keyframes auroraDrift{0%{transform:translate(0,0) scale(1);opacity:.28}50%{transform:translate(-3%,4%) scale(1.08);opacity:.38}100%{transform:translate(2%,-3%) scale(.95);opacity:.3}}
@keyframes auroraTwinkleA{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes auroraTwinkleB{0%,100%{opacity:1}50%{opacity:.45}}

/* ============ shared ============ */
.grad{background:linear-gradient(100deg,#7ae9ff,#00d4ff 55%,#0aa6d6);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
section{position:relative;z-index:1}
.eyebrow{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;display:block}
h2{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08;letter-spacing:-.02em;font-weight:800}
.lead{color:var(--text-secondary);font-size:1.08rem;max-width:54ch;margin-top:18px;font-weight:400}
/* Vertical only: these classes sit on the same element as .wrap, and the
   `padding` shorthand would reset its left/right gutter back to zero. */
.pad{padding-block:clamp(80px,12vh,140px)}
.glass{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ============ TOPBAR ============
   The header itself (buttons, brand, Home/Wiki switch, drawer) is assets/header.css, shared with the wiki.
   What stays here is what other parts of the pages use. */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:0 24px;height:60px;
  position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--topbar-bg);
  border-bottom:1px solid var(--border);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}
.libreportal-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-primary);font-weight:700;font-size:1.05rem}
.libreportal-logo img{width:32px;height:32px}
.libreportal-logo b{color:var(--accent);font-weight:700}
.libreportal-logo .wordmark{display:inline-block}
.topbar .wordmark{display:inline-block;text-decoration:none;color:var(--text-primary);font-weight:700;font-size:1.05rem;white-space:nowrap}
.topbar .wordmark b{color:var(--accent);font-weight:700}
.tb-ghost{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--border);border-radius:8px;
  background:rgba(var(--text-rgb),.05);color:var(--text-secondary);text-decoration:none;font-size:.85rem;font-weight:600;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.tb-ghost:hover{background:rgba(var(--text-rgb),.12);color:var(--text-primary)}
.tb-cta{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:8px;background:var(--accent-fill);
  color:var(--text-on-accent);text-decoration:none;font-size:.85rem;font-weight:700;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.tb-cta svg,.tb-ghost svg{width:15px;height:15px;flex:0 0 auto}
.tb-cta:hover{background:var(--accent-fill-hover);transform:translateY(-1px)}

/* ============ hero ============ */
/* Screens first: the words on the left, a real install on the right, and the
   portal shrunk to a soft disc behind the screenshots. On a phone the two
   stack, words first. */
header.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(28px,4vw,64px);align-items:center;max-width:var(--maxw);margin:0 auto;min-height:100vh;
  padding:100px var(--gutter) 112px}
/* the bottom padding is the scroll cue's room: it sits 28px up and is ~60px tall */
.hero-copy{position:relative;z-index:1;min-width:0}
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding:7px 15px;border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.35);background:var(--accent-soft);margin-bottom:26px}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
h1{font-size:clamp(2.4rem,4.4vw,3.9rem);line-height:1.03;letter-spacing:-.035em;font-weight:800;max-width:17ch;text-wrap:balance}
.sub{margin-top:22px;max-width:44ch;font-size:clamp(1.04rem,1.6vw,1.2rem);color:var(--text-secondary);font-weight:400}
.proof{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;color:var(--text-muted);font-size:.92rem}
.proof li{display:flex;align-items:center;gap:8px}
.proof li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.proof b{color:var(--text-primary);font-weight:700}

/* The stage: a browser window with the phone in front of its corner. */
.hero-stage{position:relative;z-index:1;min-width:0;padding:0 0 9% 0}
.hero-stage .frame-browser{position:relative;z-index:1;margin-left:6%}
.hero-stage .frame-phone{position:absolute;z-index:2;left:0;bottom:0;width:29%;max-width:200px}
/* The portal: a square canvas behind the screens, faded to a disc by the
   shader itself (main.js mounts it with `round`). `portal-on` is set only
   once the shader is really running; without WebGL nothing shows. */
.hero-portal{position:absolute;z-index:0;left:50%;top:46%;width:118%;aspect-ratio:1;transform:translate(-50%,-50%);
  display:block;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.hero.portal-on .hero-portal{opacity:.95}
/* clicking Copy flies through the portal and settles back */
.hero.warping .hero-copy,.hero.warping .hero-stage>figure{
  animation:heroSuck 1400ms cubic-bezier(.55,0,.85,.25) forwards;will-change:transform,opacity}
@keyframes heroSuck{
  0%{transform:scale(1);opacity:1}
  37%{transform:scale(1.18);opacity:0}
  56%{transform:scale(1.05);opacity:0}
  100%{transform:scale(1);opacity:1}}
.hero-stage .frame-phone{transform-origin:20% 90%}
@media (prefers-reduced-motion:reduce){
  .hero.warping .hero-copy,.hero.warping .hero-stage>figure{animation:none}
  .hero-portal{transition:none}}

/* install box */
.portal{margin-top:34px;width:min(620px,100%);max-width:100%;position:relative}
/* The glow is soft by its own gradient, not by filter:blur — a blurred layer
   that also breathes is re-blurred on every frame of the breath. */
.portal::before{content:"";position:absolute;inset:-30px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--accent-rgb),.32) 0%, rgba(var(--accent-rgb),.22) 60%,
    rgba(var(--accent-rgb),.08) 84%, rgba(var(--accent-rgb),0) 100%);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.45;transform:scale(.98)}50%{opacity:.8;transform:scale(1.03)}}
.term{border:1px solid var(--card-border);border-radius:14px;overflow:hidden;
  background:linear-gradient(155deg, rgba(255,255,255,.10) 0%, rgba(0,212,255,.06) 100%),rgba(8,16,38,.62);box-shadow:var(--card-shadow-hover)}
.term-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--border-subtle);background:var(--console-bg)}
.term-bar i{width:10px;height:10px;border-radius:50%;display:block}
.term-bar i:nth-child(1){background:#ff6b5e}.term-bar i:nth-child(2){background:#ffc107}.term-bar i:nth-child(3){background:var(--accent)}
.term-bar em{margin-left:auto;font-family:var(--font-mono);font-size:.7rem;color:var(--text-faint);font-style:normal}
.term-body{display:flex;align-items:center;gap:14px;padding:16px 16px 16px 18px}
.term-body code{font-family:var(--font-mono);font-size:clamp(.8rem,1.5vw,.95rem);color:var(--text-primary);
  white-space:pre;word-break:normal;overflow-x:auto;overflow-y:hidden;flex:1;text-align:left;min-width:0;padding-bottom:6px;
  scrollbar-width:thin;scrollbar-color:rgba(var(--text-rgb),.3) transparent}
.term-body code::-webkit-scrollbar{height:5px}
.term-body code::-webkit-scrollbar-thumb{background:rgba(var(--text-rgb),.3);border-radius:3px}
.term-body code::-webkit-scrollbar-track{background:transparent}
/* a command wider than its box scrolls inside it; the right edge fades while there is more to see (main.js sets .more) */
.term-body code.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.term-body code .p{color:var(--accent)}
.term-body code .u{color:#e6f3ff}
.copy{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-weight:700;
  font-size:.84rem;color:var(--text-on-accent);background:var(--accent-fill);border:none;border-radius:9px;padding:9px 15px;cursor:pointer;
  transition:transform .15s,background .25s,box-shadow .25s}
.copy:hover{transform:translateY(-1px);background:var(--accent-fill-hover)}
.copy.done{background:#28a745;color:#fff}
.portal-foot{display:flex;align-items:center;gap:6px 18px;margin-top:12px;flex-wrap:wrap;font-size:.84rem;color:var(--text-faint)}
.portal-foot a{color:var(--text-secondary);text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.3);transition:color .2s,border-color .2s}
.portal-foot a:hover{color:var(--accent);border-color:var(--accent)}
.hint{font-family:var(--font-mono);font-size:.76rem}
.scroll-cue{position:absolute;z-index:1;bottom:28px;left:50%;transform:translateX(-50%);color:var(--text-faint);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;animation:bob 2.6s ease-in-out infinite}
.scroll-cue::after{content:"";width:1px;height:34px;background:linear-gradient(var(--text-faint),transparent)}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ============ device frames ============ */
/* CSS only. The screenshot is the content; the frame just says "this is a
   window" or "this is a phone". Both open the lightbox on click. */
.frame-browser,.frame-phone{margin:0;cursor:zoom-in}
.frame-browser{border-radius:12px;overflow:hidden;background:#0b1328;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.85),0 0 0 1px rgba(var(--accent-rgb),.06)}
.fb-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#121b36;border-bottom:1px solid rgba(255,255,255,.08)}
.fb-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.fb-bar span{margin-left:10px;flex:0 1 260px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  background:rgba(0,0,0,.32);border-radius:6px;padding:2px 10px;font:500 .7rem/1.6 var(--font-sans);color:var(--text-faint)}
.frame-browser img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;background:#0f1729}
.frame-phone{border-radius:13% / 6.2%;padding:3.2%;background:#04070f;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.04)}
/* a slim status-bar band with a punch-hole camera above the screenshot, so
   the camera never sits on the app's own heading */
.fp-screen{position:relative;border-radius:10.5% / 4.9%;overflow:hidden;background:#0a0f1e;padding-top:7%}
.fp-screen::before{content:"";position:absolute;z-index:1;top:2.2%;left:50%;width:3.6%;aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.fp-screen img{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top}
/* the moving sign-in screen sits exactly over the still, which stays under it as the poster */
.fp-video{position:absolute;left:0;bottom:0;width:100%;aspect-ratio:390/844;object-fit:cover;pointer-events:none;background:#0a0f1e}
@media (prefers-reduced-motion:reduce){.fp-video{display:none}}

/* ============ section heads ============ */
.sec-head{max-width:760px}
.tag{display:inline-block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px}
h3{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.02em;font-weight:750}
.muted{color:var(--text-muted)}
.center{text-align:center}

/* ============ tour rows ============ */
/* Text and a screen side by side, alternating sides; on a phone the text
   goes first and the screen follows at full width. */
.row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center;
  margin-top:clamp(64px,10vh,112px)}
.row.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.row.flip .row-text{order:2}
.row-text p{color:var(--text-secondary);font-size:1.05rem;margin-top:14px;max-width:44ch}
.row-text h2+.lead,.row-text h2+p{margin-top:16px}
.ticks{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:11px}
.ticks li{position:relative;padding-left:30px;color:var(--text-secondary);font-size:.98rem;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.18em;width:19px;height:19px;border-radius:50%;
  background:var(--accent-soft) no-repeat center/11px;border:1px solid rgba(var(--accent-rgb),.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")}
.ticks b{color:var(--text-primary)}
.ticks.big li{font-size:1.06rem}
.row-media{position:relative;min-width:0}
.pad>.row:first-child{margin-top:0}
/* a window with a phone in front of its lower corner */
.row-media.duo{padding-bottom:10%}
.row-media.duo .frame-browser{margin-right:12%}
.row-media.duo .frame-phone{position:absolute;right:0;bottom:0;width:26%;max-width:190px}

/* the three smaller screens under the rows */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);margin-top:clamp(72px,11vh,120px)}
.g-item{margin:0;display:flex;flex-direction:column;gap:16px}
.g-item figcaption{color:var(--text-muted);font-size:.95rem;line-height:1.5}
.g-item figcaption b{color:var(--text-primary);display:block;font-size:1.05rem;margin-bottom:2px}
.phone-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.phone-pair .frame-phone:nth-child(2){margin-top:12%}
.g-phones .phone-pair{max-width:360px}

/* ============ themes ============ */
.swatches{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.swatches li{display:flex;align-items:center;gap:10px;padding:7px 15px 7px 7px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--border-subtle);font-size:.92rem;font-weight:600;color:var(--text-primary)}
.swatches i{width:26px;height:26px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.25);
  background:radial-gradient(circle at 50% 50%,var(--c1) 0 34%,transparent 36%),linear-gradient(135deg,var(--c2),#0a3566)}

/* ============ sign-in ============ */
.app-strip{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.app-strip li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--border-subtle);font-size:.84rem;color:var(--text-secondary)}
.app-strip img{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.08);padding:3px;object-fit:contain}

/* ============ LibreSync ============ */
/* Four phones in a row; on a phone they scroll sideways inside their own
   strip (the page itself never does). */
.phone-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:48px}
.phone-row figure{margin:0;display:flex;flex-direction:column;gap:12px}
.phone-row figcaption{text-align:center;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.libresync .center{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:12px}

/* ============ privacy ============ */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
.pcard{border-radius:16px;padding:24px 22px;background:var(--card-bg),rgba(10,18,40,.22);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.pcard .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),.30)}
.pcard .ico svg{width:21px;height:21px;stroke:var(--accent);fill:none;stroke-width:1.6}
.pcard h3{font-size:1.12rem;margin-bottom:8px}
.pcard p{color:var(--text-secondary);font-size:.94rem}
.contacts-box{margin-top:22px;border-radius:14px;border:1px solid var(--border-subtle);background:rgba(255,255,255,.025);padding:4px 20px}
.contacts-box summary{cursor:pointer;padding:14px 0;font-weight:700;color:var(--text-secondary);list-style:none;display:flex;align-items:center;gap:10px}
.contacts-box summary::-webkit-details-marker{display:none}
.contacts-box summary::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.45);color:var(--accent);font-weight:700;transition:transform .2s}
.contacts-box[open] summary::before{transform:rotate(45deg)}
.contacts-box>p{color:var(--text-secondary);font-size:.95rem;margin:4px 0 0}
.contacts-box>p.muted{margin:18px 0 16px;color:var(--text-muted)}

/* ============ connect strip ============ */
.pad-s{padding-block:clamp(20px,4vh,40px)}
.connect-strip{border-radius:18px;padding:clamp(24px,4vw,40px);border:1px solid rgba(var(--accent-rgb),.25);
  background:linear-gradient(120deg,rgba(var(--accent-rgb),.10),rgba(120,90,255,.08) 60%,rgba(255,255,255,.02))}
.connect-strip h3{margin-top:2px}
.connect-strip p{color:var(--text-secondary);margin-top:12px;max-width:72ch}

/* ============ lightbox ============ */
.lightbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;
  display:none;place-items:center;overflow:hidden}
.lightbox[open]{display:grid}
.lightbox::backdrop{background:rgba(4,8,18,.9)}
.lightbox img{max-width:min(96vw,1600px);max-height:92vh;width:auto;height:auto;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.lb-close{position:fixed;top:14px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);
  background:rgba(15,25,50,.9);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
/* ============ apps (data-driven) ============ */
.apps-section{text-align:center}
.app-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:40px}
.chip{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.04em;padding:8px 15px;border-radius:999px;
  border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--text-secondary);cursor:pointer;transition:all .2s}
.chip:hover{color:var(--text-primary);border-color:rgba(var(--accent-rgb),.45)}
.chip.active{background:var(--accent-fill);color:var(--text-on-accent);border-color:var(--accent-fill);font-weight:600}
.chip .n{opacity:.55;margin-left:6px}
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px;margin-top:34px;text-align:left}
.app-card{border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:11px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.app-card.hidden,.app-card.capped{display:none}
.app-toggle{margin-top:18px;padding:10px 22px;font-size:.82rem}
.app-toggle[hidden]{display:none}
.app-card:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.4);box-shadow:var(--card-shadow-hover)}
.app-card-head{display:flex;align-items:center;gap:12px}
.app-ico{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.06);padding:6px;object-fit:contain;border:1px solid var(--border-subtle);flex:0 0 auto}
.app-card h3{font-size:1.06rem;font-weight:700;line-height:1.2}
.app-cat{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.app-card p{font-size:.9rem;color:var(--text-secondary);margin:0}
.app-count{margin-top:26px;color:var(--text-faint);font-size:.85rem;font-family:var(--font-mono)}
.app-more{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px}
.app-more .hint{color:var(--text-faint);max-width:44ch;text-align:center;line-height:1.5}

/* ============ chips: Lit Stars ============
 * The site wears the Lit Stars look (html[data-chip-style="stars"]): a glass
 * pill with a per-category star dot and a glow when active, matching the WebUI
 * default. The --cat palette below is the single source of truth, kept in step
 * with the WebUI's copy in
 * containers/libreportal/frontend/core/theme/css/chip-styles.css. */
[data-cat="all"]{--cat:#67e8f9}
[data-cat="recommended"]{--cat:#fcd34d}
[data-cat="libreportal"]{--cat:#22d3ee}
[data-cat="communication"]{--cat:#38bdf8}
[data-cat="media"]{--cat:#a78bfa}
[data-cat="networking"]{--cat:#5eead4}
[data-cat="network"]{--cat:#5eead4}
[data-cat="productivity"]{--cat:#fbbf24}
[data-cat="ai"]{--cat:#e879f9}
[data-cat="security"]{--cat:#34d399}
[data-cat="development"]{--cat:#60a5fa}
[data-cat="storage"]{--cat:#818cf8}
[data-cat="home"]{--cat:#fb7185}
[data-cat="knowledge"]{--cat:#a3e635}
[data-cat="monitoring"]{--cat:#fb923c}
[data-cat="finance"]{--cat:#4ade80}
[data-cat="privacy"]{--cat:#c084fc}
[data-cat="social"]{--cat:#f472b6}
[data-cat="system"]{--cat:#94a3b8}
[data-cat="utilities"]{--cat:#94a3b8}

html[data-chip-style="stars"] .chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 13px;border-radius:999px;
  border:0;background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  color:var(--text-secondary);transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
html[data-chip-style="stars"] .chip::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--cat,#67e8f9);
  box-shadow:0 0 7px var(--cat,#67e8f9);flex:none}
html[data-chip-style="stars"] .chip:hover{
  background:rgba(255,255,255,.1);color:var(--text-primary);transform:translateY(-1px)}
html[data-chip-style="stars"] .chip.active{
  background:linear-gradient(120deg,rgba(103,232,249,.16),rgba(167,139,250,.16));
  box-shadow:inset 0 0 0 1px rgba(150,220,255,.55),0 0 18px -2px rgba(120,200,255,.55);color:#f1f8ff}
html[data-chip-style="stars"] .chip.active::before{box-shadow:0 0 12px var(--cat,#67e8f9),0 0 3px #fff}
html[data-chip-style="stars"] .chip .n{opacity:.55;margin-left:4px}

/* The card's category tag joins the constellation with its own star dot; it
 * stays a label (not a filter button), so it keeps its uppercase mono text. */
html[data-chip-style="stars"] .app-cat{display:inline-flex;align-items:center;gap:7px}
html[data-chip-style="stars"] .app-cat::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--cat,var(--accent));
  box-shadow:0 0 6px var(--cat,var(--accent));flex:none}

/* ============ promise ============ */
.contacts{list-style:none;margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.contacts li{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.contacts b{font-family:var(--font-mono);font-size:.9rem;color:var(--accent);font-weight:700}
.contacts span{color:var(--text-secondary);font-size:.95rem;line-height:1.55}
.contacts code{font-family:var(--font-mono);font-size:.85em}
.card p a{color:var(--accent);text-decoration:none}
.promise{text-align:center}
.pledges{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px}
.pledge{border-radius:14px;padding:28px 18px}
.pledge .big{font-size:2.4rem;font-weight:800;margin-bottom:8px;line-height:1}
.pledge p{font-size:.92rem;color:var(--text-secondary)}
.promise .link{display:inline-block;margin-top:40px;color:var(--accent);text-decoration:none;font-weight:700;
  border-bottom:1px solid rgba(var(--accent-rgb),.45);padding-bottom:2px;transition:color .2s,border-color .2s}
.promise .link:hover{color:#fff;border-color:#fff}

/* promise page (/promise, rendered from the product's docs/guide/promise.md) */
.doc{max-width:72ch;margin-inline:auto}
.doc h1{font-size:clamp(2rem,4.6vw,3rem);line-height:1.1;letter-spacing:-.02em;font-weight:800;margin-bottom:24px}
.doc h2{font-size:clamp(1.3rem,2.6vw,1.7rem);margin:44px 0 14px}
.doc p,.doc li{color:var(--text-secondary);font-size:1.02rem;line-height:1.7}
.doc p{margin-bottom:16px}
.doc ul{margin:0 0 16px 1.2em}
.doc li{margin-bottom:8px}
.doc strong{color:var(--text-primary)}
.doc a{color:var(--accent)}
.doc a.tb-cta{color:var(--text-on-accent);text-decoration:none}

/* ============ final ============ */
/* clip sideways: the install box's glow reaches 40px past it, which on a phone
   is past the screen edge and made the page scroll horizontally */
.final{text-align:center;padding-block:clamp(90px,14vh,160px);overflow-x:clip}
.final h2{max-width:18ch;margin-inline:auto}
.final .portal{margin:42px auto 0}

/* ============ footer ============ */
footer{border-top:1px solid var(--border-subtle);padding:40px 0 44px;margin-top:40px;background:rgba(10,16,32,.62)}
.foot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,240px));justify-content:center;gap:28px 56px;align-items:start}
.foot-brand{grid-column:1/-1;text-align:center}
.foot-brand p{color:var(--text-faint);font-size:.92rem;line-height:1.5;max-width:380px;margin:0 auto}
.foot-grid .libreportal-logo{margin-bottom:12px;justify-content:center}
.foot-col{text-align:center}
.foot-col h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px;font-family:var(--font-mono)}
.foot-col a{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--text-secondary);text-decoration:none;font-size:.95rem;margin-bottom:9px;transition:color .2s}
.foot-col a svg{width:16px;height:16px;flex:0 0 auto;opacity:.7}
.foot-col a:hover{color:var(--accent)}
.foot-col a:hover svg{opacity:1}
/* Brand centred on top, the two link groups centred under it; one column on a small phone. */
@media (max-width:420px){.foot-grid{grid-template-columns:minmax(0,260px)}}

.pledge{border-radius:14px;padding:26px 18px;background:var(--card-bg),rgba(10,18,40,.22);border:1px solid var(--card-border)}
.start-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.start-links a{padding:11px 20px;font-size:.92rem}

/* ============ cheap glass ============
 * backdrop-filter re-blurs whatever is behind an element on every frame that
 * anything behind it moves, and behind the page sits the animated aurora and
 * the twinkling stars. Nothing on the home page uses it any more: cards carry
 * a faint dark wash instead. On phones the topbar drops its blur too, for a
 * more opaque fill (the guide's search panel keeps its real blur). */
.app-grid>.glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card-bg),rgba(10,18,40,.22)}
@media (max-width:768px),(pointer:coarse){
  .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--topbar-bg)}
}

/* ============ reveal ============ */
/* Hidden only where script will un-hide it (the .js class is set in <head>), and
   even then a pure-CSS timer shows everything after 10s: a page whose script never
   ran, or whose observer never fired, still ends up readable. */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);animation:revealSafety .01s 10s forwards}
.js .reveal.in{opacity:1;transform:none}
.js .stagger>*{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);animation:revealSafety .01s 10s forwards}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>*:nth-child(2){transition-delay:.07s}.js .stagger.in>*:nth-child(3){transition-delay:.14s}
.js .stagger.in>*:nth-child(4){transition-delay:.21s}.js .stagger.in>*:nth-child(5){transition-delay:.28s}.js .stagger.in>*:nth-child(6){transition-delay:.35s}
@keyframes revealSafety{to{opacity:1;transform:none}}
.h-anim{opacity:0;transform:translateY(24px);animation:rise .95s var(--ease) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.28s}.d4{animation-delay:.4s}.d5{animation-delay:.52s}
@keyframes rise{to{opacity:1;transform:none}}

/* ============ responsive ============ */
@media(max-width:980px){
  header.hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:96px;padding-bottom:104px;text-align:center}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  h1{margin-inline:auto}
  .sub{margin-inline:auto}
  .proof,.portal-foot{justify-content:center}
  .hero-stage{width:min(640px,100%);margin:8px auto 0}
  .portal{margin-inline:auto}
  .row,.row.flip{grid-template-columns:1fr;gap:28px}
  .row.flip .row-text{order:0}
  .gallery{grid-template-columns:1fr 1fr}
  .g-phones{grid-column:1/-1;align-items:center}
  .g-phones figcaption{text-align:center;max-width:44ch}
  .pgrid{grid-template-columns:1fr 1fr}
  .pledges{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .gallery{grid-template-columns:1fr}
  .phone-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;
    margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 10px;scrollbar-width:none}
  .phone-row::-webkit-scrollbar{display:none}
  .phone-row figure{flex:0 0 62%;scroll-snap-align:center}
  .pgrid{grid-template-columns:1fr}
}
@media(max-width:540px){
  .term-body{flex-direction:column;align-items:stretch}
  .copy{justify-content:center}
  /* the two links stack */
  .portal-foot{flex-direction:column;gap:8px}
  .proof{gap:6px 16px;font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.stagger>*,.h-anim,.js .reveal,.js .stagger>*{opacity:1;transform:none}
}

/* ============ DOWNLOAD PAGE ============ */
.dl-head{padding-top:clamp(110px,16vh,160px);padding-bottom:clamp(8px,2vh,24px)}
.dl-head h1{max-width:20ch}
.dl-sec{padding-block:clamp(24px,5vh,48px)}
.dl-h{display:flex;align-items:center;gap:12px;font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:22px}
.dl-h svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.7;flex:0 0 auto}
.dl-grid{display:grid;gap:16px}
.dl-servers{grid-template-columns:repeat(3,minmax(0,1fr))}
.dl-card{border-radius:16px;padding:24px 22px;background:var(--card-bg),rgba(10,18,40,.22);border:1px solid var(--card-border);
  box-shadow:var(--card-shadow);display:flex;flex-direction:column;gap:14px;min-width:0}
.dl-card h3{font-size:1.25rem}
.dl-card .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.25)}
.dl-card .ico svg{width:21px;height:21px;stroke:var(--accent);fill:none;stroke-width:1.6}
.dl-blurb{color:var(--text-secondary);font-size:.98rem}
.dl-note{color:var(--text-muted);font-size:.86rem}
.dl-servers .term-body{padding:12px 12px 12px 14px;gap:10px}
.dl-servers .term-body code{font-size:.8rem}
.dl-servers .copy{padding:8px 12px}
.dl-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:auto;font-size:.88rem}
.dl-links a{display:inline-flex;align-items:center;gap:7px;color:var(--text-secondary);text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.3);transition:color .2s,border-color .2s}
.dl-links a:hover{color:var(--accent);border-color:var(--accent)}
.dl-links svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.dl-hero{padding:clamp(24px,4vw,38px);border-color:rgba(var(--accent-rgb),.3);box-shadow:var(--card-shadow-hover)}
.dl-main{display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:640px}
.dl-title{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.dl-title h3{font-size:clamp(1.7rem,3vw,2.3rem)}
.dl-pill svg{width:13px;height:13px;fill:currentColor;vertical-align:-2px;margin-right:5px}
.dl-pill{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),.35);color:var(--accent)}
.dl-pill-soft{background:rgba(var(--text-rgb),.06);border-color:var(--border);color:var(--text-muted)}
.dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 28px;border-radius:12px;
  background:var(--accent-fill);color:var(--text-on-accent);text-decoration:none;font-size:1.1rem;font-weight:750;
  transition:transform .15s,background .25s,box-shadow .25s}
.dl-btn:hover{transform:translateY(-1px);background:var(--accent-fill-hover)}
.dl-btn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2}
.dl-meta{font-family:var(--font-mono);font-size:.82rem;color:var(--text-muted)}
.dl-meta b{color:var(--text-primary);font-weight:600}
.dl-meta i{font-style:normal;opacity:.5;margin:0 4px}
.dl-lic{color:var(--accent)!important}
.dl-verify{font-size:.86rem;color:var(--text-muted);max-width:100%}
.dl-verify summary{cursor:pointer;color:var(--text-secondary);width:max-content}
.dl-verify p{margin-top:10px}
.dl-verify code{display:block;margin-top:6px;font-family:var(--font-mono);font-size:.76rem;color:var(--text-primary);
  word-break:break-all;background:var(--console-bg);border:1px solid var(--border-subtle);border-radius:8px;padding:8px 10px}
.dl-foot{margin-top:22px;color:var(--text-muted);font-size:.9rem}
.dl-foot a{color:var(--accent)}
@media(max-width:980px){.dl-servers{grid-template-columns:1fr}}
@media(max-width:540px){
  .dl-main{align-items:stretch}
  .dl-btn{width:100%;padding:20px 24px;font-size:1.2rem}
  .dl-servers .term-body{flex-direction:column;align-items:stretch}
}
.dl-hero{flex-direction:row;align-items:center;justify-content:space-between;gap:clamp(24px,5vw,64px)}
.dl-hero .dl-main{flex:1 1 auto}
.dl-shot{flex:0 0 200px;width:200px}
@media(max-width:768px){.dl-shot{display:none}}
.dl-ico{flex:0 0 auto;width:56px;height:56px;border-radius:14px;padding:9px;display:grid;place-items:center;
  background:rgba(8,16,38,.7);border:1px solid var(--card-border);overflow:hidden}
.dl-ico img{display:block;width:100%;height:100%}
.dl-ico-full{padding:0;border:0}
.dl-ico-lg{width:72px;height:72px;border-radius:18px;padding:12px}
.dl-ico-lg.dl-ico-full{padding:0}
.dl-servers .dl-title{gap:14px;flex-wrap:nowrap}
.dl-hero .dl-title{gap:16px}
.dl-head h1{margin-inline:0}

/* ============ logo popover (logo-pop.js) — the WebUI's "This server" card ============ */
.lp-pop{position:fixed;z-index:1300;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:16px;
  color:var(--text-primary);background-color:var(--surface-bg-solid);background-image:radial-gradient(120% 90% at 0% 0%,rgba(var(--accent-rgb),.10) 0%,transparent 60%);
  border:1px solid var(--card-border);box-shadow:0 18px 48px rgba(0,0,0,.38),inset 0 1px 0 rgba(var(--text-rgb),.06);outline:none;
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:var(--arrow-x,24px) 0;transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.3,1)}
.lp-pop.is-open{opacity:1;transform:none}
.lp-pop::before{content:"";position:absolute;top:-6px;left:var(--arrow-x,24px);width:10px;height:10px;transform:rotate(45deg);
  background:var(--surface-bg-solid);border-left:1px solid var(--card-border);border-top:1px solid var(--card-border)}
.lp-pop-head{display:flex;align-items:center;gap:12px;padding:2px 2px 0}
.lp-pop-mark{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(var(--accent-rgb),.14);
  border:1px solid rgba(var(--accent-rgb),.32);box-shadow:0 0 18px rgba(var(--accent-rgb),.18)}
.lp-pop-mark img{display:block;width:28px;height:28px}
.lp-pop-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-pop-name{font-weight:700;font-size:1.05rem;line-height:1.2;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lp-pop-name b{color:var(--accent);font-weight:700}
.lp-pop-ver{font-family:var(--font-mono);font-size:.7rem;font-weight:600;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.35);
  background:var(--accent-soft);border-radius:999px;padding:2px 8px}
.lp-pop-sub{font-size:.8rem;color:var(--text-muted)}
.lp-pop-links{display:flex;flex-direction:column;gap:2px;padding-top:8px;border-top:1px solid var(--border-subtle)}
.lp-pop-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;font-size:.92rem;color:var(--text-primary);
  text-decoration:none;transition:background .14s}
.lp-pop-link:hover{background:rgba(var(--text-rgb),.09)}
.lp-pop-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lp-pop-link>svg{flex:none;width:18px;height:18px;color:var(--text-secondary)}
.lp-pop-link:hover>svg{color:var(--accent)}
.lp-pop-link span{flex:1;min-width:0}
.lp-pop-ext{flex:none;display:grid;color:var(--text-muted)}
.lp-pop-ext svg{width:13px;height:13px}
@media (prefers-reduced-motion:reduce){.lp-pop{transition:none;transform:none}}
.lp-pop:focus{outline:none}

/* ============ THE PROMISE PAGE (/promise) ============ */
.pr-hero{text-align:center;padding-top:clamp(120px,18vh,180px);padding-bottom:clamp(36px,6vh,64px)}
.pr-hero-mark{width:76px;height:76px;margin:0 auto 26px;border-radius:50%;display:grid;place-items:center;color:var(--accent);
  background:radial-gradient(circle at 50% 40%,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.05) 70%);
  border:1px solid rgba(var(--accent-rgb),.35);box-shadow:0 0 44px rgba(var(--accent-rgb),.22);animation:prGlow 6s ease-in-out infinite}
.pr-hero-mark svg{width:38px;height:38px}
.pr-hero h1{margin-inline:auto;max-width:15ch;font-size:clamp(2.4rem,6.4vw,4.4rem)}
.pr-lead{max-width:56ch;margin:22px auto 0;color:var(--text-secondary);font-size:clamp(1.05rem,2.1vw,1.2rem);line-height:1.7}
.pr-down{display:inline-grid;place-items:center;width:44px;height:44px;margin-top:38px;border-radius:50%;color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.4);transition:background .2s,transform .2s}
.pr-down:hover{background:rgba(var(--accent-rgb),.15);transform:translateY(3px)}
.pr-down svg{width:20px;height:20px}
.pr-down:focus-visible,.pr-close a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.pr-list{max-width:860px;display:flex;flex-direction:column;gap:clamp(22px,4vw,34px);padding-block:clamp(16px,4vh,40px)}
.pr-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:start;
  padding:clamp(24px,4vw,44px);border-radius:22px;scroll-margin-top:90px;
  background:var(--card-bg),rgba(10,18,40,.30);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.pr-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:var(--accent);
  background:linear-gradient(150deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.06));border:1px solid rgba(var(--accent-rgb),.32)}
.pr-icon svg{width:30px;height:30px}
.pr-num{display:block;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.pr-card h2{font-size:clamp(1.55rem,3.4vw,2.1rem);line-height:1.15;margin-bottom:18px}
.pr-body p{color:var(--text-secondary);font-size:1.05rem;line-height:1.75;margin-bottom:16px;max-width:62ch}
.pr-body p:last-child{margin-bottom:0}
.pr-body strong{color:var(--text-primary)}
.pr-body p.pr-big{color:var(--text-primary);font-size:clamp(1.15rem,2.2vw,1.35rem);line-height:1.55}
.pr-body p.pr-soft{color:var(--accent);font-weight:600}
.pr-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.pr-mini{padding:22px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid var(--border-subtle)}
.pr-mini-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--accent);margin-bottom:14px;background:rgba(var(--accent-rgb),.12)}
.pr-mini-icon svg{width:20px;height:20px}
.pr-mini h3{font-size:1.12rem;margin-bottom:8px}
.pr-body .pr-mini p{font-size:.97rem;line-height:1.65}
.pr-test{margin-top:24px;padding:20px 24px;border-radius:0 14px 14px 0;border-left:3px solid var(--accent);background:rgba(var(--accent-rgb),.07)}
.pr-test-label{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.pr-never{list-style:none;display:flex;flex-direction:column;gap:14px}
.pr-never li{display:flex;gap:16px;align-items:center;padding:16px 18px;border-radius:14px;background:rgba(0,0,0,.22);
  border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:1.05rem;line-height:1.55}
.pr-never li strong{color:var(--text-primary)}
.pr-never-icon{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--accent);background:rgba(var(--accent-rgb),.12)}
.pr-never-icon svg{width:20px;height:20px}

.pr-close{text-align:center;max-width:640px;padding-block:clamp(64px,10vh,110px) clamp(40px,6vh,70px)}
.pr-dove{font-size:2.6rem;line-height:1;margin-bottom:18px;display:inline-block;animation:prFloat 7s ease-in-out infinite}
.pr-close h2{font-size:clamp(1.9rem,4.6vw,2.8rem)}
.pr-close p{margin-top:14px;color:var(--text-secondary);font-size:1.15rem}
.pr-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
@keyframes prGlow{0%,100%{box-shadow:0 0 36px rgba(var(--accent-rgb),.18)}50%{box-shadow:0 0 60px rgba(var(--accent-rgb),.34)}}
@keyframes prFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:700px){
  .pr-card{grid-template-columns:1fr;gap:16px}
  .pr-icon{width:54px;height:54px;border-radius:15px}
  .pr-pair{grid-template-columns:1fr}
}
.pr-hero h1{text-wrap:balance}.pr-hero .nw{white-space:nowrap}

/* ============ privacy of every app (privacy.njk; also used by the Wiki) ============ */
.pv-more{text-align:center;margin-top:26px}
.pv-more a,.pr-more a{color:var(--accent);font-weight:600;text-decoration:none}
.pv-more a:hover,.pr-more a:hover{text-decoration:underline}
.pr-more{margin-top:22px}
.pv-head h1{max-width:22ch}
.pv-sec{padding-block:clamp(22px,4vh,40px)}
.pv-sec .pv-lead{max-width:62ch;color:var(--text-secondary);margin:-6px 0 24px}
.pv-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 8px;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap;
  border:1px solid currentColor;line-height:1.5;flex:0 0 auto}
.pv-chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pv-green{color:#6ee7a0;background:rgba(74,222,128,.12)}
.pv-amber{color:#fcd34d;background:rgba(251,191,36,.12)}
.pv-red{color:#fca5a5;background:rgba(248,113,113,.14)}
.pv-none-chip{color:var(--text-muted);background:rgba(255,255,255,.06)}
.pv-legend{list-style:none;display:grid;gap:12px;margin-bottom:20px}
.pv-legend li{display:flex;gap:14px;align-items:flex-start;color:var(--text-secondary);font-size:.97rem}
.pv-legend .pv-chip{min-width:152px;justify-content:flex-start;margin-top:1px}
.pv-count{color:var(--text-secondary);max-width:70ch;margin-bottom:24px}
.pv-tools{display:none;flex-direction:column;gap:14px;margin-bottom:20px}
.js .pv-tools{display:flex}
.pv-filter{display:flex;flex-wrap:wrap;gap:10px}
.pv-find{display:flex;flex-wrap:wrap;gap:14px}
.pv-field{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.pv-field input,.pv-field select{font:400 1rem var(--font-sans);color:var(--text-primary);background:rgba(10,18,40,.55);border:1px solid var(--border-strong);
  border-radius:10px;padding:10px 12px;min-height:44px;min-width:0;text-transform:none;letter-spacing:0}
.pv-field input{width:min(100%,320px)}
.pv-field input::placeholder{color:var(--text-faint)}
.pv-field input:focus-visible,.pv-field select:focus-visible,.chip:focus-visible,.pv-app summary:focus-visible,.pv-src summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pv-status{min-height:1.4em;color:var(--text-muted);font-size:.9rem}
.pv-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.pv-row[hidden],.pv-empty[hidden]{display:none}
.pv-empty{color:var(--text-muted);margin-top:16px}
.pv-app{border-radius:14px}
.pv-app summary,.pv-app-flat{display:grid;grid-template-columns:42px minmax(120px,190px) auto minmax(0,1fr) 20px;gap:6px 14px;align-items:center;padding:12px 16px;cursor:pointer;list-style:none}
.pv-app-flat{grid-template-columns:42px minmax(120px,190px) auto minmax(0,1fr);cursor:default}
.pv-app summary::-webkit-details-marker{display:none}
.pv-app summary:hover{background:rgba(255,255,255,.03);border-radius:14px}
.pv-app[open]{border-color:rgba(var(--accent-rgb),.35)}
.pv-name{font-weight:700;font-size:1.02rem;line-height:1.25;overflow-wrap:anywhere}
.pv-line{color:var(--text-secondary);font-size:.92rem;line-height:1.45}
.pv-caret{width:20px;height:20px;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.pv-app[open]>summary .pv-caret{transform:rotate(180deg)}
.pv-body{padding:4px 18px 20px 18px;border-top:1px solid var(--border-subtle);margin:0 16px 0;padding-inline:2px}
.pv-body{padding-top:16px}
.pv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pv-sum{color:var(--text-primary);font-size:1rem;line-height:1.65;max-width:70ch;margin-bottom:16px}
.pv-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pv-two>div,.pv-card{padding:16px 18px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid var(--border-subtle)}
.pv-body h4,.pv-card h4{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;font-weight:600}
.pv-body ul,.pv-card ul{margin:0 0 0 1.1em}
.pv-body li,.pv-card li,.pv-card p{color:var(--text-secondary);font-size:.94rem;line-height:1.55;margin-bottom:6px}
.pv-none{color:var(--text-muted);font-size:.94rem}
.pv-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;color:var(--text-muted);font-size:.88rem}
.pv-meta b{color:var(--text-secondary);font-weight:600}
.pv-src{margin-top:12px}
.pv-src summary{cursor:pointer;color:var(--accent);font-size:.9rem;font-weight:600;width:max-content;padding:4px 0}
.pv-src ul{margin-top:8px}
.pv-src a,.pv-ph-links a,.pv-card a,.pv-foot a{color:var(--accent);overflow-wrap:anywhere}
.pv-phones{display:grid;gap:18px}
.pv-phone{border-radius:16px;padding:clamp(18px,3vw,28px)}
.pv-ph-head{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.pv-ph-head h3{font-size:1.35rem}
.pv-ph-sub{color:var(--text-muted);font-size:.88rem;margin:0}
.pv-intro p{color:var(--text-secondary);max-width:70ch;margin-bottom:14px}
.pv-secs{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.pv-card table{width:100%;border-collapse:collapse;font-size:.9rem}
.pv-card th,.pv-card td{text-align:left;vertical-align:top;padding:6px 10px 6px 0;color:var(--text-secondary);border-bottom:1px solid var(--border-subtle)}
.pv-card th{color:var(--text-primary);font-weight:600}
.pv-scroll{overflow-x:auto}
.pv-soon{display:flex;align-items:center;gap:10px;padding:16px 18px;border-radius:12px;background:rgba(var(--accent-rgb),.07);border:1px dashed rgba(var(--accent-rgb),.4);
  color:var(--text-secondary);font-weight:600}
.pv-soon svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pv-ph-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px;font-size:.92rem}
.pv-foot{color:var(--text-secondary);padding-bottom:clamp(60px,10vh,110px)}
@media(max-width:840px){
  .pv-app summary,.pv-app-flat{grid-template-columns:42px minmax(0,1fr) 20px;grid-template-areas:"i n c" "i v v" "l l l"}
  .pv-app-flat{grid-template-columns:42px minmax(0,1fr);grid-template-areas:"i n" "i v" "l l"}
  .pv-app .app-ico{grid-area:i;align-self:start}
  .pv-app .pv-name{grid-area:n}
  .pv-app .pv-chip{grid-area:v;justify-self:start}
  .pv-app .pv-caret{grid-area:c}
  .pv-app .pv-line{grid-area:l}
  .pv-two{grid-template-columns:1fr}
  .pv-legend .pv-chip{min-width:0}
  .pv-legend li{flex-direction:column;gap:6px}
}
.pv-app{scroll-margin-top:80px}
.pv-phone{scroll-margin-top:80px}
.pv-src summary::after{content:" +";color:var(--text-muted)}
.pv-src[open] summary::after{content:" \2212"}

/* Support page: a short list of sections, each with an icon. */
.doc h2 .h-ico{display:inline-grid;place-items:center;width:36px;height:36px;margin-right:12px;vertical-align:middle;border-radius:10px;color:var(--accent);
  background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),.35)}
.doc h2 .h-ico svg{width:20px;height:20px}

.foot-col a.sponsor svg{color:#f472b6;opacity:1}

/* ==========================================================================
   Site blocks: the guide's house style on libreportal.org. Sentence-case
   kickers in the normal font, and the dark navy glass block (an icon chip, a
   title, a line, a line-art scene on the right) for feature and app cards.
   ========================================================================== */
.eyebrow,.badge,.pr-num,.pr-test-label,.dl-pill,.tag,.app-cat,.phone-row figcaption,.foot-col h4,.pv-field,.pv-body h4,.pv-card h4,.scroll-cue{
  font-family:var(--font-sans);letter-spacing:0;text-transform:none}
.eyebrow{font-size:.98rem;font-weight:700}
.badge{font-size:.86rem;font-weight:650}
.tag{font-size:.82rem;font-weight:700}
.app-cat{font-size:.82rem;font-weight:650}
.pr-num,.pr-test-label{font-size:.92rem;font-weight:700}
.dl-pill{font-size:.8rem;font-weight:700}
.phone-row figcaption{font-size:.9rem;font-weight:600}
.foot-col h4{font-size:.9rem;font-weight:700}
.pv-field,.pv-body h4,.pv-card h4{font-size:.86rem;font-weight:700}
.scroll-cue{font-size:.9rem;font-weight:650;color:var(--text-muted)}
.term-bar em,.hint{font-family:var(--font-sans);font-size:.85rem}
.pv-field{text-transform:none}

/* The standard block, the same as the guide's topic card: dark navy gradient, an icon chip, a title on one line, a line of
   text (two lines reserved), and one big faint line-art scene across the right ~70%, faded in behind the text. */
.block{position:relative;isolation:isolate;display:flex;min-height:168px;border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.14);background:radial-gradient(120% 140% at 100% 0%,#1d4f9a 0%,#12306a 38%,#0a1634 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(8,20,50,.28);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.block:hover{transform:translateY(-4px);border-color:rgba(95,224,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 32px rgba(8,20,50,.4)}
.block-art,svg.block-art{position:absolute;display:block;top:0;bottom:0;right:0;left:30%;width:auto;height:auto;z-index:-1;opacity:.62;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,rgba(0,0,0,.9) 82%);mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,rgba(0,0,0,.9) 82%)}
.block-art svg{width:100%;height:100%;display:block}
svg.block-art{width:calc(70% - 0px);height:100%}
.block-body{display:flex;flex-direction:column;gap:5px;width:100%;box-sizing:border-box;padding:18px 20px 16px}
.block .tile{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:6px;flex:0 0 auto;background:rgba(95,224,255,.14);border:1px solid rgba(95,224,255,.4)}
.block .tile svg{width:20px;height:20px;stroke:#5fe0ff;fill:none;stroke-width:1.7}
.block .tile-logo{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.4)}
.block .tile-logo img{width:28px;height:28px;border-radius:6px;display:block}
.block h3{font-size:1.12rem;line-height:1.25;color:#fff;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.block p,.block-line{color:rgba(235,244,255,.88);font-size:.9rem;line-height:1.45;margin:0;min-height:2.9em;text-shadow:0 1px 8px rgba(8,16,40,.85);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.block .app-cat{color:#7fe9ff}
.block-grid{gap:16px}
.block-app{min-height:150px}
.block-app .block-art{opacity:.55}
.app-grid.reveal,.app-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
@media (prefers-reduced-motion:reduce){.block{transition:none}.block:hover{transform:none}}
.chip,.app-count,.app-toggle{font-family:var(--font-sans);letter-spacing:0;font-size:.88rem;font-weight:600}
.chip .n{font-family:var(--font-sans);font-weight:700}

/* The other cards wear the same skin: navy gradient, white text, a faint scene behind. */
.pledge,.connect-strip,.dl-card,.pr-card{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  --text-primary:#fff;--text-secondary:rgba(235,244,255,.88);--text-muted:rgba(235,244,255,.7);--text-rgb:255,255,255;--accent:#5fe0ff;--accent-rgb:95,224,255;
  border:1px solid rgba(255,255,255,.14);background:radial-gradient(120% 140% at 100% 0%,#1d4f9a 0%,#12306a 38%,#0a1634 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(8,20,50,.28)}
.pledge{display:flex;min-height:150px;padding:0;text-align:left;border-radius:18px}
.pledge .big{font-size:2rem;margin:0 0 4px;white-space:normal;max-width:100%}
.pledge p{min-height:2.9em}
.connect-strip{display:flex;min-height:168px;padding:0;border-radius:18px}
.connect-strip .block-body{padding:clamp(22px,3vw,34px)}
.connect-strip p{display:block;min-height:0;max-width:72ch;-webkit-line-clamp:unset}
.dl-card .block-art,.pr-card .block-art,.connect-strip .block-art{left:30%}
.pr-card .block-art{opacity:.4}
.dl-card>*:not(.block-art),.pr-card>*:not(.block-art){position:relative}
.connect-strip h3{font-size:clamp(1.3rem,2.4vw,1.7rem);white-space:normal;overflow:visible;margin:2px 0 0}
.dl-hero .block-art{display:block;left:36%;opacity:.5}
.dl-hero:has(.dl-shot) .block-art{right:250px;left:34%}
@media(max-width:768px){.dl-hero .block-art{left:24%;opacity:.3}}
.dl-card:not(.dl-hero) .block-art{opacity:.4}
.pr-card .block-art{display:none}
.pr-list{max-width:var(--maxw);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr));align-items:stretch}
.pr-list .pr-story{grid-column:1/-1}
@media (min-width:900px){.pr-story .pr-body{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-items:start}.pr-story .pr-num,.pr-story h2{grid-column:1/-1}}

/* ============ buttons in night glass (dark), matching the header (header.css) ============
   Secondary = navy glass, thin light border, 12px radius, cyan icons, white text.
   Primary (Install, Download, View the catalog, Copy) = the glowing blue Install style. */
:root:not([data-theme="light"]) :is(.tb-ghost,.chip,.app-toggle,.dl-links a){
  border-radius:12px;border:1px solid rgba(255,255,255,.14);color:#fff;text-shadow:none;
  background:linear-gradient(160deg,rgba(29,79,154,.42) 0%,rgba(10,22,52,.6) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
:root:not([data-theme="light"]) :is(.tb-ghost,.chip,.app-toggle,.dl-links a):is(:hover,:focus-visible){
  border-color:rgba(95,224,255,.6);color:#fff;background:linear-gradient(160deg,rgba(36,96,180,.5) 0%,rgba(12,28,66,.66) 100%)}
:root:not([data-theme="light"]) :is(.tb-ghost,.dl-links a) svg{color:#5fe0ff;stroke:currentColor}
:root:not([data-theme="light"]) .chip.active{background:rgba(95,224,255,.22);color:#fff;border-color:rgba(95,224,255,.6);box-shadow:inset 0 0 0 1px rgba(95,224,255,.35)}
:root:not([data-theme="light"]) :is(.tb-cta,.dl-btn,.copy):not(.done){
  border-radius:12px;color:#fff;border:1px solid rgba(95,224,255,.55);background:linear-gradient(135deg,#0b7fb0 0%,#1557b8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(8,90,160,.35)}
:root:not([data-theme="light"]) :is(.tb-cta,.dl-btn,.copy):not(.done):hover{background:linear-gradient(135deg,#0d8fc6 0%,#1a63cf 100%);color:#fff}
:root:not([data-theme="light"]) :is(.tb-cta,.dl-btn,.copy) svg{color:#fff}
.doc a.tb-cta,.doc a.tb-ghost{color:#fff}
.tb-ghost.tb-sm{padding:6px 12px;font-size:.8rem}
.tb-ghost.reveal{display:inline-flex}
.portal-foot a.tb-ghost{color:#fff}
.dl-links a{padding:8px 14px;min-height:38px;box-sizing:border-box;border-radius:12px}

/* privacy page: the panels wear the navy glass card skin */
.pv-app,.pv-card,.pv-two>div{position:relative;color:#fff;
  --text-primary:#fff;--text-secondary:rgba(235,244,255,.88);--text-muted:rgba(235,244,255,.7);--text-rgb:255,255,255;--accent:#5fe0ff;--accent-rgb:95,224,255;
  border:1px solid rgba(255,255,255,.14);background:radial-gradient(120% 140% at 100% 0%,#1d4f9a 0%,#12306a 38%,#0a1634 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(8,20,50,.28)}
.pv-app[open]{border-color:rgba(95,224,255,.45)}
.pv-two>div{background:linear-gradient(160deg,rgba(10,22,52,.7),rgba(10,22,52,.4))}
.pv-app .pv-body{background:transparent}
.promise>.center .tb-ghost,.promise a.tb-ghost.reveal{margin-top:24px}
:root:not([data-theme="light"]) :is(.pv-field input,.pv-field select){border-radius:12px;border:1px solid rgba(255,255,255,.14);color:#fff;
  background:linear-gradient(160deg,rgba(29,79,154,.42) 0%,rgba(10,22,52,.6) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}

/* Sponsor page: three-up topic cards and the "coming soon" glass card. */
.sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sp-grid .block h3{white-space:normal}
.sp-grid .block p{min-height:0}
.sp-soon{border-radius:18px;padding:clamp(20px,3vw,30px);color:#fff;border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(120% 140% at 100% 0%,#1d4f9a 0%,#12306a 38%,#0a1634 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(8,20,50,.28);backdrop-filter:none;-webkit-backdrop-filter:none}
.sp-soon p{color:rgba(235,244,255,.86)!important}
.sp-soon h3{font-size:1.2rem;margin:0 0 6px}
.sp-soon p{color:var(--text-muted);margin:0}
.sp-link{color:#7fe9ff;text-decoration:underline;text-underline-offset:3px;border-radius:4px}
@media (max-width:860px){.sp-grid{grid-template-columns:1fr}}
.sp-lead{max-width:none}
/* Phones: tighter gaps between the sections of the download and sponsor pages. */
@media(max-width:640px){.dl-head{padding-top:84px;padding-bottom:4px}.dl-sec{padding-block:12px}.dl-h{margin-bottom:14px}}

/* The coming-soon card: a faint construction scene behind, like the other cards. */
.sp-soon{position:relative;isolation:isolate;overflow:hidden;min-height:140px;display:flex;align-items:center}
.sp-soon-body{position:relative;max-width:640px}
.sp-soon{min-height:168px}
.sp-soon .block-art{left:auto;width:min(420px,60%);top:0;bottom:0;right:0}
.sp-soon .tile{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:12px;background:rgba(95,224,255,.14);border:1px solid rgba(95,224,255,.4)}
.sp-soon .tile svg{width:20px;height:20px;stroke:#5fe0ff;fill:none;stroke-width:1.7}
.sp-soon .block-art{opacity:.62;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 10%,rgba(0,0,0,.9) 70%);mask-image:linear-gradient(90deg,transparent 0%,transparent 10%,rgba(0,0,0,.9) 70%)}

/* ---------- Contact page: glass cards in the home standard ---------- */
.rb-sec{display:grid;gap:16px;padding-block:12px 56px}
.rb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rb-card{position:relative;border-radius:18px;padding:clamp(20px,3vw,30px);color:#fff;
  --text-primary:#fff;--text-secondary:rgba(235,244,255,.88);--accent:#5fe0ff;
  border:1px solid rgba(255,255,255,.14);background:radial-gradient(120% 140% at 100% 0%,#1d4f9a 0%,#12306a 38%,#0a1634 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 24px rgba(8,20,50,.28)}
.rb-card h2{font-size:1.25rem;margin:0 0 8px;color:#fff;line-height:1.25}
.rb-card p,.rb-card li{color:rgba(235,244,255,.88);font-size:1rem;line-height:1.65;margin:0 0 12px}
.rb-card p:last-child{margin-bottom:0}
.rb-card a:not(.tb-cta):not(.tb-ghost){color:#7fe9ff;text-decoration:underline;text-underline-offset:3px}
.rb-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;margin-bottom:14px;background:rgba(95,224,255,.14);border:1px solid rgba(95,224,255,.4)}
.rb-ico svg{width:22px;height:22px;stroke:#5fe0ff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rb-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.rb-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rb-list li{margin:0;padding:12px 16px 12px 40px;position:relative;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.rb-list li::before{content:"";position:absolute;left:16px;top:1.2em;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#5fe0ff,#1557b8)}
.rb-security{border-color:rgba(255,194,75,.4)}
@media (max-width:760px){.rb-grid{grid-template-columns:1fr}.rb-actions .tb-cta,.rb-actions .tb-ghost{flex:1 1 100%}}

/* ---------- One button system: primary = filled gradient, white text; secondary = glass; 44px tap height ---------- */
.tb-cta,.tb-ghost{padding-inline:20px}
.tb-cta,.tb-ghost,.dl-btn{min-height:44px;box-sizing:border-box;justify-content:center;border-radius:12px;font-weight:700;font-size:.95rem;text-decoration:none;line-height:1.2}
.tb-cta,.dl-btn{color:#fff;border:1px solid rgba(95,224,255,.55);background:linear-gradient(135deg,#0b7fb0 0%,#1557b8 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(8,90,160,.3)}
.tb-cta:hover,.dl-btn:hover{color:#fff;background:linear-gradient(135deg,#0d8fc6 0%,#1a63cf 100%)}
.tb-ghost{color:#fff;border-color:rgba(255,255,255,.18);background:linear-gradient(160deg,rgba(29,79,154,.55),rgba(10,22,52,.75))}
.tb-ghost.tb-sm{min-height:40px;padding-inline:14px;font-size:.85rem}
.dl-links a{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.copy{min-height:44px;border-radius:12px}
@media (max-width:640px){.dl-links{gap:8px}.dl-links a{flex:1 1 0;min-width:0;padding:0 10px;font-size:.84rem;white-space:nowrap}}