/* JumboChat website — the whole site, all four pages.
   The old styles.css was deleted on 2026-08-10; it had been orphaned since the
   landing page shipped and was still being served. support.html and
   privacy.html are the two URLs App Store Connect points at, so anything here
   that changes their shape has to be checked against those pages too. */

:root{
  --captain:#3d5ac9; --captain-h:#2f49a8;
  --coral:#e0552e; --coral-soft:#f0a68d; --amber:#e9b44c;
  --ink:#131e33; --mut:#6a7285;
  --paper:#f7f2e9; --card:#ffffff; --subtle:#efe8da; --line:#e7dfd0;
  --night:#0c1526; --panel:#101d33; --nline:#1d2c49;
  --ntext:#f7f2e9; --nmut:#a8b3cc;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:16px/1.65 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1120px,92vw);margin:0 auto}

/* ---- header ---- */
.top{background:var(--night);color:var(--ntext)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:74px}
.brandline{display:flex;align-items:center;gap:12px;text-decoration:none}
.brandline img{width:34px;height:34px;border-radius:9px}
.wm{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:3px;text-transform:uppercase;white-space:nowrap}
.wm b{color:var(--coral-soft);font-weight:700}
.top nav{display:flex;align-items:center;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:1.8px;text-transform:uppercase}
.top nav a{color:var(--nmut);text-decoration:none;transition:color .16s}
.top nav a:hover{color:var(--ntext)}

/* ---- hero ---- */
.hero{background:linear-gradient(160deg,#0c1526 0%,#101d33 45%,#16264a 100%);color:var(--ntext);
  padding:74px 0 92px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--amber) 0 3px,transparent 3px 26px);opacity:.55}
.pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:2px;
  color:var(--amber);border:1px solid rgba(233,180,76,.38);background:rgba(233,180,76,.09);
  padding:7px 14px;border-radius:999px;text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:blink 2.2s infinite}
@keyframes blink{50%{opacity:.25}}
.hero h1{margin:26px 0 0;font-size:clamp(38px,5.6vw,66px);line-height:1.03;letter-spacing:-.02em;font-weight:800;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--coral-soft)}
.hero p.lede{margin-top:20px;max-width:52ch;font-size:clamp(16px,1.5vw,19px);color:var(--nmut)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-block;text-decoration:none;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:1.4px;
  padding:13px 22px;border-radius:9px;text-transform:uppercase;transition:transform .16s var(--ease),background .16s}
.btn-primary{background:var(--coral);color:#fff}
.btn-primary:hover{background:#c94a26;transform:translateY(-2px)}
.cta-note{margin:14px 0 0;font-size:13.5px;color:var(--nmut)}
.btn-ghost{border:1px solid var(--nline);color:var(--ntext)}
.btn-ghost:hover{border-color:var(--nmut);transform:translateY(-2px)}

/* ---- phrase pairs ----
   The product IS the pair: something said, the same thing understood. Two
   stacked cards say that faster than a paragraph, and every pair below is a
   real translation in a language the app actually supports. */
.pairs{display:grid;gap:14px;margin-top:14px}
.pair{background:rgba(247,242,233,.05);border:1px solid var(--nline);border-radius:14px;padding:16px 18px;
  backdrop-filter:blur(2px)}
.pair .lang{font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;color:var(--nmut);text-transform:uppercase}
.pair .said{font-size:19px;font-weight:600;margin-top:6px;line-height:1.35}
.pair.out{border-color:rgba(224,85,46,.42);background:rgba(224,85,46,.08)}
.pair.out .said{color:#ffd9cb}
.hero-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:52px;align-items:center}

/* ---- ticker ---- */
.strip{background:var(--panel);border-top:1px solid var(--nline);border-bottom:1px solid var(--nline);
  overflow:hidden;white-space:nowrap}
.strip-track{display:inline-block;padding:13px 0;animation:marq 34s linear infinite;
  font-family:var(--mono);font-size:12px;letter-spacing:1.6px;color:var(--nmut)}
.strip-track b{color:var(--amber);font-weight:700}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- sections ---- */
section.band{padding:78px 0}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:2.4px;color:var(--captain);text-transform:uppercase}
h2{font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.015em;margin-top:12px;font-weight:800}
.sub{margin-top:14px;max-width:60ch;color:var(--mut);font-size:17px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;margin-top:34px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;
  transition:transform .18s var(--ease),box-shadow .18s}
.tile:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(19,30,51,.09)}
.tile h3{font-size:18px;font-weight:700;margin-bottom:8px}
.tile p{color:var(--mut);font-size:15px}
.num{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;color:var(--coral);margin-bottom:14px}

/* ---- language board ---- */
.board{background:var(--night);color:var(--ntext);border-radius:16px;padding:34px;margin-top:34px}
.langs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;
  background:var(--nline);border:1px solid var(--nline);border-radius:11px;overflow:hidden}
.lang-cell{background:var(--panel);padding:18px 16px}
.lang-cell .code{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--amber)}
.lang-cell .name{font-size:17px;font-weight:700;margin-top:5px}
.lang-cell .native{font-size:14px;color:var(--nmut);margin-top:2px}
.board .note{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--nmut);margin-top:22px}

/* ---- privacy band ---- */
.plain{background:var(--subtle)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:30px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:20px}
.fact b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:1.6px;color:var(--captain);margin-bottom:8px}
.fact span{color:var(--mut);font-size:15px}

/* ---- footer ---- */
footer{background:var(--night);color:var(--nmut);padding:56px 0 48px;border-top:1px solid var(--nline)}
.fgrid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:2.2px;color:var(--ntext);margin-bottom:10px}
footer a{color:var(--nmut);text-decoration:none;line-height:2}
footer a:hover{color:var(--ntext)}
.legal{margin-top:34px;border-top:1px solid var(--nline);padding-top:20px;font-size:13px;line-height:1.75}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero{padding:56px 0 70px}
  .top nav a:not(.keep){display:none}
  section.band{padding:58px 0}
}
@media (prefers-reduced-motion:reduce){
  .strip-track{animation:none}
  .dot{animation:none}
  html{scroll-behavior:auto}
}

/* ---- inner pages (support, privacy) ----
   Same shell as the landing page so following a nav link doesn't drop the
   visitor into a different-looking site. Content stays exactly as written —
   privacy.html is a submitted legal page, only its skin changed. */
.page-head{background:linear-gradient(160deg,#0c1526 0%,#101d33 60%,#16264a 100%);
  color:var(--ntext);padding:54px 0 58px;position:relative;overflow:hidden}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--amber) 0 3px,transparent 3px 26px);opacity:.5}
.page-head h1{font-size:clamp(32px,4.6vw,50px);line-height:1.05;letter-spacing:-.02em;font-weight:800;margin-top:14px}
.page-head p{margin-top:14px;max-width:56ch;color:var(--nmut);font-size:17px}
.page-head .kick{color:var(--amber)}
.doc{padding:56px 0 78px}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px}
.doc-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.doc-card.wide{grid-column:1/-1}
.doc-card h2{font-size:19px;font-weight:700;margin:0 0 10px;letter-spacing:0}
.doc-card p{color:var(--mut);font-size:15px}
.doc-card p+p{margin-top:10px}
.doc-card ul{margin:0;padding-left:0;list-style:none}
.doc-card li{color:var(--mut);font-size:15px;padding:7px 0 7px 18px;position:relative;border-bottom:1px solid var(--subtle)}
.doc-card li:last-child{border-bottom:0}
.doc-card li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;background:var(--coral-soft)}
.doc-card a{color:var(--captain);text-decoration:underline;text-underline-offset:2px}
.tag{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:1.4px;
  color:var(--captain);background:var(--subtle);border-radius:5px;padding:2px 7px;margin-right:7px;text-transform:uppercase}
.stamp{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:1.8px;
  color:var(--nmut);border:1px dashed var(--nline);border-radius:8px;padding:8px 13px;margin-top:22px;text-transform:uppercase}

/* ---- app preview ----
   Device frames, not bare rectangles: a screenshot floating on a page reads as
   a picture of something, in a frame it reads as the app. */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:20px;margin-top:34px}
.phone{position:relative;border-radius:30px;padding:9px}
.phone{background:linear-gradient(155deg,#33405e 0%,#151f36 46%,#0c1526 100%);
  box-shadow:0 22px 48px rgba(12,21,38,.32),0 2px 0 rgba(255,255,255,.08) inset}
.phone::before{content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:34%;height:15px;background:#0c1526;border-radius:0 0 11px 11px;z-index:2}
.phone img{border-radius:23px;display:block;width:100%}
.phone figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;color:var(--nmut);
  text-align:center;padding:11px 4px 3px;text-transform:uppercase}

/* ---- Part of Jumbo ----
   Three sites, one group. Each footer lists all three and marks the one you
   are standing on with a filled pip instead of linking it to itself. */
.jgroup{display:grid}
.jgroup a,.jgroup span{display:flex;align-items:center;gap:9px;font-size:14px;line-height:2;text-decoration:none}
.jgroup i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:1.3px;color:#5f6f92;text-transform:uppercase}
.jgroup a{color:var(--nmut)}
.jgroup a:hover{color:var(--ntext)}
.jgroup a::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;border:1px solid #3a4a6b}
.jgroup .here{color:var(--ntext);font-weight:700}
.jgroup .here::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--coral-soft);
  box-shadow:0 0 0 3px rgba(240,166,141,.20)}