/* ShareRush website: shared styles for every page */

/* ---------- Font ---------- */
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Colours (light) ---------- */
:root {
  color-scheme: light dark;
  --page: #FFFFFF;
  --band: #F7F8FA;
  --c1: #F7F8FA;
  --c2: #FFFFFF;
  --bd: #E5E7EB;
  --bds: #D1D5DB;
  --trk: #EEF0F3;
  --tx: #111827;
  --tx2: #6B7280;
  --ac: #2563EB;
  --act: #2563EB;
  --acm: #EFF6FF;
  --bl: #3B82F6;
  --blbg: #DBEAFE;
  --vio: #7C3AED;
  --viobg: #EDE9FE;
  --okf: #16A34A;
  --ok: #15803D;
  --okc: rgba(22, 163, 74, .18);
  --red: #DC2626;
  --redbg: #FEE2E2;
  --xbg: #F4DDAB;
  --xtx: #604412;
  --pro: #D97706;
  --inv: #111827;
  --invtx: #FFFFFF;
  --shadow: 0 16px 40px rgba(15, 17, 21, .08);
  --radius: 20px;
  --wrap: 1160px;
  --gut: 24px;
}

/* ---------- Colours (dark, follows the device) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0F1115;
    --band: #1C1F26;
    --c1: #1C1F26;
    --c2: #0F1115;
    --bd: #2A2E37;
    --bds: #3A3F4B;
    --trk: #1C1F26;
    --tx: #F3F4F6;
    --tx2: #9CA3AF;
    --ac: #2563EB;
    --act: #60A5FA;
    --acm: #1E293B;
    --bl: #60A5FA;
    --blbg: rgba(59, 130, 246, .15);
    --vio: #A78BFA;
    --viobg: rgba(139, 92, 246, .15);
    --okf: #22C55E;
    --ok: #4ADE80;
    --okc: rgba(22, 163, 74, .2);
    --red: #F87171;
    --redbg: rgba(220, 38, 38, .15);
    --xbg: rgba(217, 119, 6, .15);
    --xtx: #F4DDAB;
    --pro: #F59E0B;
    --inv: #F3F4F6;
    --invtx: #0F1115;
    --shadow: 0 16px 40px rgba(0, 0, 0, .35);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tx);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; }
p { margin: 0; }
b, strong { font-weight: 600; }
a { color: var(--act); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--act); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: 88px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ac); color: #FFFFFF; font-weight: 600;
}
.skip:focus { top: 12px; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Icons (SVG files, coloured by the text colour) ---------- */
.i {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.i-sm { width: 16px; height: 16px; }
.i-md { width: 20px; height: 20px; }
.i-lg { width: 28px; height: 28px; }
.i-xl { width: 34px; height: 34px; }

.i-alert { --icon: url("icons/alert-triangle.svg"); }
.i-bell { --icon: url("icons/bell.svg"); }
.i-bolt { --icon: url("icons/bolt.svg"); }
.i-check { --icon: url("icons/check.svg"); }
.i-chevron-down { --icon: url("icons/chevron-down.svg"); }
.i-chevron-right { --icon: url("icons/chevron-right.svg"); }
.i-clock { --icon: url("icons/clock.svg"); }
.i-clock-x { --icon: url("icons/clock-x.svg"); }
.i-copy { --icon: url("icons/copy.svg"); }
.i-crown { --icon: url("icons/crown.svg"); }
.i-download { --icon: url("icons/download.svg"); }
.i-external { --icon: url("icons/external-link.svg"); }
.i-file { --icon: url("icons/file.svg"); }
.i-file-text { --icon: url("icons/file-text.svg"); }
.i-files { --icon: url("icons/files.svg"); }
.i-help { --icon: url("icons/help-circle.svg"); }
.i-info { --icon: url("icons/info-circle.svg"); }
.i-link { --icon: url("icons/link.svg"); }
.i-link-off { --icon: url("icons/link-off.svg"); }
.i-lock { --icon: url("icons/lock.svg"); }
.i-mail { --icon: url("icons/mail.svg"); }
.i-menu { --icon: url("icons/menu-2.svg"); }
.i-pause { --icon: url("icons/player-pause.svg"); }
.i-photo { --icon: url("icons/photo.svg"); }
.i-refresh { --icon: url("icons/refresh.svg"); }
.i-shield { --icon: url("icons/shield-check.svg"); }
.i-upload { --icon: url("icons/upload.svg"); }
.i-user { --icon: url("icons/user-avatar.svg"); }
.i-user-search { --icon: url("icons/user-search.svg"); }
.i-video { --icon: url("icons/video.svg"); }
.i-x { --icon: url("icons/x.svg"); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: clamp(64px, 8vw, 104px) 0; }
.band { background: var(--band); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.center { text-align: center; }
.muted { color: var(--tx2); }
.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;
}

/* ---------- Text ---------- */
.eyebrow { font-size: 14px; font-weight: 600; color: var(--act); text-transform: uppercase; letter-spacing: .08em; }
.h1 { font-size: clamp(40px, 5.4vw, 64px); line-height: 1.05; letter-spacing: -.035em; }
.h2 { margin-top: 12px; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -.03em; }
.h3 { font-size: 22px; letter-spacing: -.015em; }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--tx2); }
.small { font-size: 14px; }
.tiny { font-size: 13px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--page); border-bottom: 1px solid var(--bd); }
.header-row { height: 72px; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--tx); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav { display: flex; gap: 28px; flex: 1 1 auto; justify-content: center; }
.nav a { color: var(--tx2); font-size: 15px; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--tx); text-decoration: none; }
.header-cta { margin-left: auto; }

/* Phone menu (details/summary, no script needed) */
.menu { display: none; position: relative; }
.menu summary {
  list-style: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tx); border: 1px solid var(--bd); background: var(--c1);
}
.menu summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; right: 0; top: 54px; width: min(280px, calc(100vw - 32px));
  display: flex; flex-direction: column; padding: 8px;
  background: var(--c2); border: 1px solid var(--bd); border-radius: 16px; box-shadow: var(--shadow);
}
.menu-panel a { padding: 12px 14px; border-radius: 10px; color: var(--tx); font-weight: 500; }
.menu-panel a:hover { background: var(--c1); text-decoration: none; }

@media (max-width: 820px) {
  .nav { display: none; }
  .menu { display: block; }
  .header-row { gap: 12px; }
}
@media (max-width: 400px) {
  .header-cta { display: none; }
  .menu { margin-left: auto; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 12px;
  font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: filter .15s, border-color .15s, background-color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--ac); color: #FFFFFF; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--c1); color: var(--tx); border-color: var(--bd); }
.btn-secondary:hover { border-color: var(--bds); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn-lg { min-height: 56px; }
.btn-block { width: 100%; }
.btn-icon { width: 48px; padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; }

/* "Coming soon on Google Play" badge */
.store {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 22px 0 18px; border-radius: 14px;
  background: var(--inv); color: var(--invtx);
}
.store:hover { text-decoration: none; }
.store-text { display: flex; flex-direction: column; line-height: 1.15; }
.store-text small { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.store-text span { font-size: 17px; font-weight: 600; }
.store-light { background: #FFFFFF; color: #111827; }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.pill-accent { background: var(--acm); color: var(--act); }
.pill-expires { background: var(--xbg); color: var(--xtx); }
.pill-plain { background: var(--c2); color: var(--tx2); border: 1px solid var(--bd); font-weight: 500; }

/* ---------- Cards ---------- */
.card { background: var(--c1); border: 1px solid var(--bd); border-radius: var(--radius); padding: clamp(22px, 3vw, 30px); }
.band .card { background: var(--c2); }
.icon-box {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--acm); color: var(--act);
}
.icon-box-lg { width: 52px; height: 52px; border-radius: 14px; }
.icon-circle { border-radius: 50%; }
.tint-blue { background: var(--blbg); color: var(--bl); }
.tint-violet { background: var(--viobg); color: var(--vio); }
.tint-ok { background: var(--okc); color: var(--okf); }
.tint-expired { background: var(--xbg); color: var(--xtx); }

.feat h3 { margin-top: 16px; font-size: 17px; }
.feat p { margin-top: 8px; font-size: 15px; color: var(--tx2); }

/* How it works */
.step-num {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ac); color: #FFFFFF; font-size: 17px; font-weight: 600;
}
.step h3 { margin-top: 20px; font-size: 20px; }
.step p { margin-top: 8px; color: var(--tx2); }

/* ---------- Hero ---------- */
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px); }
.hero-grid {
  display: grid; align-items: center; gap: clamp(44px, 6vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}
/* NEW: on wide screens the screens side gets a little more room, so both screens are wider */
@media (min-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; }
  .hero .showcase { padding: 24px; gap: 16px; }
  .hero .showcase .scr { padding-left: 14px; padding-right: 14px; }
}
.hero .lead { margin-top: 22px; max-width: 520px; }
.hero-actions { margin-top: 34px; }
.showcase {
  display: grid; gap: 18px; align-items: stretch; /* CHANGED: start -> stretch, both screens get the same height */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); /* CHANGED: 230px -> 200px, the two screens sit side by side on laptops */
  padding: clamp(18px, 3vw, 32px); border-radius: 32px;
  background: var(--band); border: 1px solid var(--bd);
}

/* ---------- App screen look-alikes ---------- */
.scr {
  display: flex; flex-direction: column; min-width: 0;
  padding: 14px 18px 20px; border-radius: 28px;
  background: var(--c2); border: 1px solid var(--bd); box-shadow: var(--shadow);
}
.scr-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; font-size: 17px; font-weight: 600; }
.scr-title { margin-top: 10px; text-align: center; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-h { margin-top: 16px; text-align: center; font-size: 19px; font-weight: 600; }
.scr-s { margin-top: 6px; text-align: center; font-size: 13px; font-weight: 500; color: var(--tx2); }
.ring { position: relative; width: 168px; height: 168px; margin: 18px auto 0; } /* CHANGED: 150px -> 168px, more room for the text */
.ring svg { width: 100%; height: 100%; } /* NEW */
.ring circle { fill: none; stroke-width: 12; }
.ring .trk { stroke: var(--trk); }
.ring .bar { stroke: var(--ac); stroke-linecap: round; }
.ring.paused .bar { stroke: var(--bds); }
.ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-in b { font-size: 28px; }
.ring.paused .ring-in b { color: var(--tx2); }
.ring-in span { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--tx2); }
.stats { display: flex; gap: 10px; margin-top: 18px; }
.stat { flex: 1; padding: 12px 6px; border-radius: 14px; background: var(--c1); color: var(--tx2); text-align: center; }
.stat .i { margin: 0 auto; }
.stat b { display: block; margin-top: 6px; font-size: 14px; color: var(--tx); }
.stat span { font-size: 12px; }
.scr-btns { display: flex; gap: 10px; margin-top: 12px; }
.scr-btns-end { flex-direction: column; margin-top: auto; padding-top: 16px; } /* NEW: buttons at the bottom of the screen, one under the other */
.scr-btn { flex: 1; min-height: 42px; border-radius: 14px; border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.scr-btn-resume { color: var(--act); border: 1.5px solid var(--ac); }
.scr-btn-cancel { color: var(--red); }
.scr-btn-fill { background: var(--ac); border-color: var(--ac); color: #FFFFFF; gap: 8px; }
.ok-circle { width: 64px; height: 64px; margin: 18px auto 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--okc); color: var(--okf); }
.info-box { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding: 14px; border-radius: 14px; background: var(--c1); }
.info-box > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--tx2); }
.info-box > div > span { white-space: nowrap; } /* NEW: labels like "File integrity" stay on one line */
.info-box b { display: flex; align-items: center; gap: 5px; color: var(--tx); white-space: nowrap; } /* CHANGED: value stays on one line */
.info-box b.ok { color: var(--ok); }
.link-box { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--c1); border: 1px solid var(--bd); color: var(--act); }
.link-box span { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caption { display: flex; align-items: center; gap: 8px; margin: 14px 0 0 6px; font-size: 14px; font-weight: 600; color: var(--tx2); }

/* ---------- Plans ---------- */
.plans-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--c1); border: 1px solid var(--bd); }
.seg button {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 9px;
  background: transparent; color: var(--tx2); font-size: 14px; font-weight: 600; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--c2); color: var(--tx); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.plan { border: 1px solid var(--bd); border-radius: 24px; padding: 30px; background: var(--c1); }
.plan-featured { border: 2px solid var(--ac); padding: 29px; background: var(--c2); box-shadow: 0 12px 32px rgba(37, 99, 235, .12); }
.plan h3 { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.plan h3 .i { color: var(--pro); }
.price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.price b { font-size: 44px; letter-spacing: -.03em; line-height: 1.1; }
.price span { font-size: 15px; color: var(--tx2); }
.plan hr { height: 1px; margin: 24px 0; border: 0; background: var(--bd); }
.ticks { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .i { color: var(--act); margin-top: 2px; }
.plans-note { margin-top: 28px; max-width: 820px; font-size: 14px; line-height: 1.65; color: var(--tx2); }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 64px); align-items: flex-start; }
.faq-side { flex: 1 1 300px; min-width: 0; }
.faq-list { flex: 2 1 520px; min-width: 0; border-top: 1px solid var(--bd); }
.faq-list details { border-bottom: 1px solid var(--bd); }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0; font-size: 17px; font-weight: 600;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .i { color: var(--tx2); transition: transform .2s; }
.faq-list details[open] summary .i { transform: rotate(180deg); }
.faq-list details p { padding-bottom: 22px; color: var(--tx2); line-height: 1.65; }

/* ---------- Call to action band ---------- */
.cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
  padding: clamp(36px, 5vw, 64px); border-radius: 28px; background: var(--ac);
}
.cta h2 { max-width: 560px; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.03em; color: #FFFFFF; }
.cta p { margin-top: 12px; font-size: 17px; color: #DBEAFE; }

/* ---------- Footer ---------- */
/* CHANGED: the footer is always dark, in light and dark mode */
.site-footer, .footer-small { background: #0F1115; color: #9CA3AF; }
.site-footer a, .footer-small a { color: #D1D5DB; }
.site-footer a:hover, .footer-small a:hover, .footer-small a[aria-current="page"] { color: #FFFFFF; }
.site-footer .brand { color: #FFFFFF; }
.site-footer .muted { color: #9CA3AF; }
.site-footer :focus-visible, .footer-small :focus-visible { outline-color: #60A5FA; }
.site-footer { padding: 56px 0 40px; border-top: 1px solid #0F1115; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer-col strong { color: #F3F4F6; }
.footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid #2A2E37; font-size: 13px; color: #9CA3AF; }
.footer-small { padding: 24px 0; border-top: 1px solid #0F1115; font-size: 13px; }
/* NEW: in dark mode the footer is a shade darker than the page, with a thin line on top */
@media (prefers-color-scheme: dark) {
  .site-footer, .footer-small { background: #08090C; border-top-color: #2A2E37; }
}
.footer-small .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---------- Download page ---------- */
.page-fill { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page-fill main { flex: 1; }
.dl { max-width: 680px; margin: 0 auto; padding: clamp(24px, 6vw, 72px) var(--gut); display: flex; flex-direction: column; gap: 20px; }
.dl-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
.dl-card .icon-box { width: 64px; height: 64px; border-radius: 18px; background: var(--ac); color: #FFFFFF; }
.dl-card-body { flex: 1 1 260px; min-width: 0; }
.dl-card h1 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; letter-spacing: -.02em; }
.dl-card .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.files { display: flex; flex-direction: column; gap: 10px; }
.file-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 14px 14px 16px; border-radius: 18px;
  background: var(--c2); border: 1px solid var(--bd);
}
.file-info { flex: 1; min-width: 0; }
.file-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-size { margin-top: 3px; font-size: 13px; color: var(--tx2); }
.file-row .btn-label { display: inline; }
.result {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 14px; font-size: 14px; font-weight: 600;
}
.result span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-ok { background: var(--okc); color: var(--ok); }
.result-bad { background: var(--redbg); color: var(--red); }
.progress { height: 6px; margin-top: 10px; border-radius: 999px; background: var(--bd); overflow: hidden; }
.progress > div { height: 100%; width: 0; border-radius: 999px; background: var(--ac); transition: width .2s; }
.app-box { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.app-box img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.app-box-text { flex: 1 1 220px; min-width: 0; }

@media (max-width: 520px) {
  .file-row { padding: 12px 12px 12px 14px; gap: 12px; }
  .file-row .btn { width: 48px; padding: 0; }
  .file-row .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
}

/* Status pages: expired, removed, not found, 404 */
.status { max-width: 440px; margin: 0 auto; padding: 48px var(--gut); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; }
.status-icon { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.status h1 { margin-top: 24px; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
.status p { margin-top: 12px; color: var(--tx2); }
.status .btn { margin-top: 28px; }

/* Loading placeholder: border pulse, same as the app skeletons */
.skeleton { border-radius: 12px; background: var(--c1); border: 1px solid var(--bd); animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { border-color: var(--bd); } to { border-color: var(--bds); } }

/* ---------- Legal and help pages ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gut); }
.doc-head h1 { font-size: clamp(32px, 4vw, 44px); letter-spacing: -.03em; }
.doc-head p { margin-top: 10px; color: var(--tx2); }
.prose { margin-top: 36px; }
.prose h2 { margin: 40px 0 12px; font-size: 22px; letter-spacing: -.015em; }
.prose h3 { margin: 28px 0 8px; font-size: 18px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; color: var(--tx); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose table { width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--bd); text-align: left; vertical-align: top; }
.prose th { background: var(--c1); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.note { padding: 16px 18px; border-radius: 14px; background: var(--acm); color: var(--tx); }
.toc { margin-top: 28px; padding: 18px 20px; border-radius: 16px; background: var(--c1); border: 1px solid var(--bd); }
.toc ol { margin: 8px 0 0; padding-left: 20px; }
.toc li { margin: 4px 0; }