/* qa44 (LG1): the Terms & Privacy page. Standalone, like the 403 and maintenance pages: it
   must not depend on global.css, because it is also served during maintenance and to people
   who are not signed in. Same look as the app (glass card on the lit background), every
   colour a token below, defined for light and dark. The app's own light/dark choice
   (data-theme, set by legal.js) wins, otherwise light. Flat glass only. */
:root{
  color-scheme:light;
  --bg:#e9ecf4;
  --text:#171a22; --text2:#363d4e; --text3:#4a5165;
  --accent:#3d48ab; --accent-ink:#2f3994; --accent-soft:rgba(85,99,201,.14);
  --orb-a:rgba(85,99,201,.26); --orb-b:rgba(86,198,214,.30); --orb-c:rgba(181,138,216,.26); --orb-core:rgba(255,255,255,.40);
  --card-top:rgba(255,255,255,.86); --card-bot:rgba(255,255,255,.70); --card-bd:rgba(255,255,255,.92);
  --shadow:0 24px 70px rgba(40,48,110,.14),0 2px 8px rgba(40,48,110,.06);
  --spec:inset 0 1px 0 rgba(255,255,255,.95);
  --line:rgba(20,24,40,.10); --sunk:rgba(20,24,40,.055);
  --pill-bg:rgba(255,255,255,.62); --pill-bd:rgba(40,48,110,.12);
  --focus:rgba(85,99,201,.45); --fail:#9c1a1a;
  --tab-on-bg:#3d48ab; --tab-on-fg:#ffffff;
}
/* qa44.1 (your R15 note): a first visit is light; dark only when it was chosen in the app */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#080a12;
  --text:#f2f4fa; --text2:#cfd4e1; --text3:#c2c8d6;
  --accent:#b0b9f8; --accent-ink:#dadeff; --accent-soft:rgba(139,152,240,.22);
  --orb-a:rgba(85,99,201,.30); --orb-b:rgba(86,198,214,.18); --orb-c:rgba(181,138,216,.20); --orb-core:rgba(255,255,255,.04);
  --card-top:rgba(30,34,52,.86); --card-bot:rgba(20,24,38,.80); --card-bd:rgba(255,255,255,.14);
  --shadow:0 24px 70px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);
  --spec:inset 0 1px 0 rgba(255,255,255,.14);
  --line:rgba(255,255,255,.12); --sunk:rgba(0,0,0,.26);
  --pill-bg:rgba(255,255,255,.07); --pill-bd:rgba(255,255,255,.14);
  --focus:rgba(139,152,240,.55); --fail:#ff9b9b;
  --tab-on-bg:#b0b9f8; --tab-on-fg:#141826;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans TC",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%}
.orb-a{width:70vmax;height:70vmax;left:-38vmax;top:-40vmax;background:radial-gradient(circle closest-side,var(--orb-core),transparent 60%,var(--orb-a) 95%,transparent 100%)}
.orb-b{width:62vmax;height:62vmax;right:-36vmax;top:20vh;background:radial-gradient(circle closest-side,var(--orb-core),transparent 62%,var(--orb-b) 95%,transparent 100%)}
.orb-c{width:56vmax;height:56vmax;left:30vw;bottom:-44vmax;background:radial-gradient(circle closest-side,var(--orb-core),transparent 62%,var(--orb-c) 95%,transparent 100%)}

.top,.wrap{position:relative;z-index:1;max-width:820px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px;padding:max(18px,env(safe-area-inset-top)) 16px 6px}
/* qa44.1: language buttons and Open XpenseLoop at the top right; on a phone they wrap under the logo, still on the right */
.top-tools{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-left:auto;min-width:0}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;min-width:0}
.brand-mark{width:34px;height:34px;display:block;object-fit:contain;flex:none}
.brand-name{font-size:20px;font-weight:800;letter-spacing:-.02em}
.back{flex:none;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--pill-bd);text-decoration:none;font-weight:700;font-size:14px;padding:9px 16px 9px 13px;border-radius:999px;min-height:40px;display:inline-flex;align-items:center;gap:7px}
.back-ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wrap{padding:8px 16px max(32px,env(safe-area-inset-bottom))}
.page-title{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:10px 4px 14px}

.tabs{position:sticky;top:8px;z-index:2;display:flex;gap:4px;width:fit-content;max-width:100%;padding:4px;margin:0 0 14px;border-radius:999px;background:var(--pill-bg);border:1px solid var(--pill-bd);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.tab{min-width:0;border:0;background:none;font-family:inherit;cursor:pointer;color:var(--text2);text-decoration:none;font-weight:600;font-size:14px;padding:9px 16px;min-height:40px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab:hover{color:var(--text);background:var(--accent-soft)}
/* qa44.1: the document you are reading is the highlighted tab */
.tab.on,.tab.on:hover{background:var(--tab-on-bg);color:var(--tab-on-fg);font-weight:700}
.doc-next{margin:22px 0 0;text-align:right}
.doc-prev{text-align:left}
.next-btn{border:1px solid var(--pill-bd);background:var(--accent-soft);color:var(--accent-ink);font-family:inherit;font-size:14px;font-weight:700;padding:9px 16px;min-height:40px;border-radius:999px;cursor:pointer}

.doc{border-radius:28px;padding:26px 24px;margin:0 0 16px;background:linear-gradient(180deg,var(--card-top),var(--card-bot));border:1px solid var(--card-bd);box-shadow:var(--spec),var(--shadow);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%)}
.legal-doc{color:var(--text);font-size:15px;line-height:1.65;overflow-wrap:anywhere}
.legal-doc h1{font-size:22px;font-weight:800;margin:0 0 6px;line-height:1.3}
.legal-doc h2{font-size:17px;font-weight:700;margin:24px 0 8px}
.legal-doc p{margin:0 0 11px;color:var(--text2)}
.legal-doc p.note{font-size:13px;color:var(--text3);font-style:italic}
.legal-doc strong{color:var(--text);font-weight:700}
.legal-doc ul{margin:0 0 11px;padding-left:22px}
.legal-doc li{margin:0 0 6px;color:var(--text2)}
.legal-doc blockquote{margin:0 0 16px;padding:12px 14px;border-radius:14px;background:var(--accent-soft);border:1px solid var(--pill-bd);color:var(--text)}
.legal-doc hr{border:none;border-top:1px solid var(--line);margin:18px 0}
.legal-doc table{width:100%;table-layout:fixed;border-collapse:collapse;margin:0 0 14px;font-size:14px}
.legal-doc th,.legal-doc td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;color:var(--text2);overflow-wrap:anywhere}
.legal-doc th{background:var(--sunk);color:var(--text);font-weight:700}
.legal-doc a{color:var(--accent-ink)}
.loading{color:var(--text3)}
.fail{color:var(--fail);font-weight:600}

.note{text-align:center;font-size:13px;color:var(--text3);margin:4px 0 12px}
.contact{text-align:center;font-size:14px;margin:14px 0 0}
.contact a{color:var(--accent-ink);font-weight:600}
.langbar{display:flex;width:fit-content;max-width:100%;padding:3px;border-radius:999px;background:var(--pill-bg);border:1px solid var(--pill-bd)}
.lb-short{display:none}
.lang-btn{position:relative;min-width:0;border:0;background:none;color:var(--text2);font-family:inherit;font-size:13.5px;font-weight:500;padding:8px 14px;min-height:36px;border-radius:999px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-btn+.lang-btn::before{content:"";position:absolute;left:0;top:30%;bottom:30%;width:1px;background:var(--line)}
.lang-btn.on::before,.lang-btn.on+.lang-btn::before{display:none}
.lang-btn.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.back:focus-visible,.tab:focus-visible,.next-btn:focus-visible,.lang-btn:focus-visible,.brand:focus-visible,.contact a:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus)}
@media (max-width:480px){
  .doc{padding:20px 16px;border-radius:22px}
  .legal-doc{font-size:14.5px}
  .legal-doc table{font-size:12.5px}
  .legal-doc th,.legal-doc td{padding:6px 7px}
  .page-title{font-size:24px}
  .brand-name{font-size:18px}
  .back{font-size:13px;padding:8px 13px}
  .lang-btn{padding:8px 11px;font-size:13px}
  .lb-long{display:none}
  .lb-short{display:inline}
  /* qa45.1 (re-audit L31): the two tabs share the width and may take two lines, never "…" */
  .tabs{width:100%}
  .tab{flex:1 1 0;white-space:normal;overflow:visible;text-overflow:clip;text-align:center;line-height:1.25;padding:8px 10px}
  /* ...and the service table is stacked: one card per provider (name, what it does, what it
     handles), so no word is broken in the middle; the header row stays for screen readers */
  .legal-doc table,.legal-doc tbody,.legal-doc tr,.legal-doc td{display:block;width:auto}
  .legal-doc table{table-layout:auto;font-size:13.5px}
  .legal-doc thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .legal-doc tr{border:1px solid var(--line);border-radius:12px;padding:8px 11px;margin:0 0 10px}
  .legal-doc td{border:0;padding:2px 0;overflow-wrap:break-word}
  .legal-doc td:first-child{color:var(--text);padding-bottom:3px}
}
@media (forced-colors:active){.tab.on{outline:2px solid Highlight;outline-offset:-2px;text-decoration:underline}}
@media (prefers-reduced-transparency:reduce){
  .doc,.tabs{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--card-top)}
}
@media print{
  .bg,.top,.tabs,.langbar,.contact,.doc-next{display:none}
  .doc[hidden]{display:block}
  .doc{box-shadow:none;border:none;background:none;padding:0}
  /* qa45.1 (re-audit L32): also the page and the tints, so dark printing with backgrounds on stays readable */
  :root,:root[data-theme="dark"]{--text:#000;--text2:#222;--text3:#333;--accent-ink:#1f2a80;--bg:#fff;--accent-soft:transparent;--sunk:transparent;--line:#999;--pill-bd:#999}
}