/* Shared look for talaai.ph/docs, /privacy and /terms. Tokens follow BRAND.md. */
:root{
  --bg:#F0F3F5;--sf:#FFFFFF;--sf2:#EAEEF2;
  --bd:rgba(23,35,57,.10);--bd2:rgba(23,35,57,.16);
  --t1:#172339;--t2:#44526A;--t3:#6B778A;
  --ac:#037685;--ac-soft:rgba(3,118,133,.09);--amber:#F1A104;
  --nav:#0B1220;
  --good:#2E8A57;--good-t:#1F6B42;--good-bg:#E3F2EA;
  --watch:#D9661A;--watch-t:#9A4510;--watch-bg:#FCEBDD;
  --bad:#C8372D;--bad-bg:#F9E1DF;
  --f-head:'Schibsted Grotesk',system-ui,sans-serif;
  --f-text:'Instrument Sans',system-ui,sans-serif;
  --f-mono:'Spline Sans Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B1220;--sf:#121B2B;--sf2:#1A2638;
    --bd:rgba(255,255,255,.08);--bd2:rgba(255,255,255,.14);
    --t1:rgba(255,255,255,.92);--t2:rgba(255,255,255,.68);--t3:rgba(255,255,255,.48);
    --ac:#2AA3B0;--ac-soft:rgba(42,163,176,.12);
    --good-t:#7CCB9C;--good-bg:rgba(46,138,87,.18);
    --watch-t:#F0A36A;--watch-bg:rgba(217,102,26,.18);
    --bad:#F0857C;--bad-bg:rgba(200,55,45,.2);
  }
}
*{box-sizing:border-box}
html{scroll-padding-top:136px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--t1);font:16px/1.65 var(--f-text);overflow-wrap:break-word}
a{color:var(--ac)}
img{max-width:100%}

/* Top bar: same size and look as the landing page's dark bar, so moving
   between talaai.ph and these pages keeps the header still. */
.pg-top{position:sticky;top:0;z-index:10;background:var(--nav);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06);view-transition-name:site-nav}
.pg-top-in{max-width:1180px;margin:0 auto;padding:0 32px;height:72px;display:flex;align-items:center;gap:30px}
.pg-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:800 19px var(--f-head);letter-spacing:-.03em}
.pg-brand img{width:30px;height:30px;border-radius:8px}
.pg-links{display:flex;gap:24px;margin-left:auto}
.pg-links a{color:#fff;opacity:.72;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent;transition:opacity .2s,border-color .2s}
.pg-links a:hover{opacity:1}
.pg-links a[aria-current]{opacity:1;border-bottom-color:var(--amber)}
.pg-signin{color:#0B1220;background:#fff;text-decoration:none;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:999px;transition:transform .2s}
.pg-signin:hover{transform:translateY(-1px)}

/* Page-to-page fade (Chrome, Edge, Safari 18+; others just load normally) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-group(site-nav){animation-duration:.32s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* Section bar for the docs */
.pg-sub{position:sticky;top:72px;z-index:9;background:var(--sf);border-bottom:1px solid var(--bd)}
.pg-sub ul{position:relative;max-width:1180px;margin:0 auto;padding:0 22px;list-style:none;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.pg-sub ul::-webkit-scrollbar{display:none}
.pg-sub a{display:block;white-space:nowrap;padding:12px 10px;font-size:13.5px;font-weight:500;color:var(--t2);text-decoration:none;border-bottom:2px solid transparent}
.pg-sub a:hover{color:var(--t1)}
.pg-sub a.on{color:var(--ac);border-bottom-color:var(--ac)}

/* Page body */
.pg-main{max-width:820px;margin:0 auto;padding:56px 20px 80px}
.pg-main.wide{max-width:1000px}
.pg-eyebrow{font:600 12.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ac)}
h1{font:800 clamp(32px,5vw,48px)/1.1 var(--f-head);letter-spacing:-.02em;margin:12px 0 14px}
h1 .ac{color:var(--ac)}
.pg-updated{font:500 13px var(--f-mono);color:var(--t3);margin:0 0 18px}
.pg-intro{font-size:18px;color:var(--t2);margin:0 0 8px}
.pg-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pg-pill{font-size:13px;font-weight:500;padding:5px 12px;border-radius:999px;background:var(--ac-soft);color:var(--ac)}

section{margin-top:52px}
h2{font:700 24px/1.25 var(--f-head);letter-spacing:-.01em;margin:0 0 12px;display:flex;gap:12px;align-items:baseline}
h2 .n{font:600 14px var(--f-mono);color:var(--ac);min-width:24px}
h3{font:700 17px var(--f-head);margin:26px 0 8px}
.legal section{margin-top:36px}
.legal h2{font-size:20px}
p{margin:0 0 12px}
ul.pg-list{margin:0 0 12px;padding-left:22px}
ul.pg-list li{margin-bottom:6px}
.sub{color:var(--t2);font-size:16.5px;margin-bottom:18px}
strong,b{font-weight:600;color:var(--t1)}
.mono{font-family:var(--f-mono);font-size:.92em}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:18px 0}
.card{background:var(--sf);border:1px solid var(--bd);border-radius:16px;padding:20px}
.card h4{font:700 16px var(--f-head);margin:0 0 4px}
.card .tag{font:500 12px var(--f-mono);color:var(--t3);display:block;margin-bottom:10px}
.card p{font-size:15px;color:var(--t2);margin:0}
.steps{counter-reset:s;list-style:none;padding:0;margin:18px 0;display:grid;gap:10px}
.steps li{counter-increment:s;background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:14px 16px 14px 56px;position:relative}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:16px;top:14px;font:600 14px var(--f-mono);color:var(--ac)}

/* Tables */
.tbl-wrap{overflow-x:auto;margin:16px 0;border:1px solid var(--bd);border-radius:14px;background:var(--sf)}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--bd);vertical-align:top}
th{font:600 12px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--t3);background:var(--sf2)}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right;font-family:var(--f-mono)}
.st{display:inline-block;font-size:12.5px;font-weight:600;padding:2px 10px;border-radius:999px}
.st.good{background:var(--good-bg);color:var(--good-t)}
.st.watch{background:var(--watch-bg);color:var(--watch-t)}
.st.bad{background:var(--bad-bg);color:var(--bad)}

.note{border-left:3px solid var(--ac);background:var(--ac-soft);padding:12px 16px;border-radius:0 12px 12px 0;margin:16px 0;font-size:15px;color:var(--t2)}
.note.amber{border-left-color:var(--amber);background:rgba(241,161,4,.10)}

/* FAQ */
details{background:var(--sf);border:1px solid var(--bd);border-radius:14px;margin:10px 0}
summary{cursor:pointer;padding:14px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font:500 20px/1 var(--f-mono);color:var(--ac)}
details[open] summary::after{content:'–'}
details > div{padding:0 18px 14px;color:var(--t2);font-size:15.5px}

/* Footer */
.pg-foot{border-top:1px solid var(--bd);background:var(--sf)}
.pg-foot-in{max-width:1180px;margin:0 auto;padding:26px 32px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13.5px;color:var(--t3)}
.pg-foot-in nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.pg-foot-in a{color:var(--t2);text-decoration:none}
.pg-foot-in a:hover{color:var(--ac)}

@media (max-width:640px){
  .pg-links a:not([aria-current]){display:none}
  .pg-top-in{gap:12px}
  .pg-main{padding:36px 16px 64px}
  .pg-top-in,.pg-sub ul,.pg-foot-in{padding-left:16px;padding-right:16px}
  .pg-intro{font-size:16.5px}
}