/* The public reading pages (guides, free tools, legal), 13.9: the website's dark navy on every theme, the same as the
   home page (home.css), so the whole site reads as one product (the owner's decision 11; EC-130). The tool pages' own
   styles use the short token names below (--fg, --muted, --rule, --card, --link, --btn, --btnfg), so keep them. */
@font-face { font-family: 'Inter'; src: url('/static/assets/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  color-scheme: dark;
  --bg: #030a17; --bg-2: #0c1a31; --fg: #ffffff; --muted: #d6e0ee; --dim: #aab9ce; --link: #7ff3ea;
  --rule: #26406a; --card: #10223f; --raised: #143058; --btn: #22d6c8; --btnfg: #03141a; --btn-hover: #52e4d8;
  --brand: linear-gradient(100deg, #2ee6d6 0%, #22d3ee 32%, #3b82f6 70%, #8b5cf6 100%);
  --nav: rgba(3, 10, 23, .82); --shadow: 0 1px 2px rgba(0, 0, 0, .3); --focus: #7ff3ea;
  --cta-bg: linear-gradient(160deg, #10264a, #0a1730); --cta-fg: #ffffff; --cta-muted: #a8bad3; --cta-rule: #22395e;
  --cta-btn: #22d6c8; --cta-btnfg: #03141a; --cta-btn-hover: #52e4d8;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(900px 480px at 50% -160px, rgba(46, 230, 214, .1), transparent 70%), var(--bg); background-repeat: no-repeat; background-color: var(--bg); color: var(--fg); font: 17px/1.7 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -.006em; }
a { color: var(--link); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; }

/* the top bar: the brand, a few links, Sign in and the trial */
.site-nav { position: sticky; top: 0; z-index: 20; background: var(--nav); border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
.site-nav .in { max-width: 1120px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left, 0px)); height: 62px; display: flex; align-items: center; gap: 18px; }
.home { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--fg); font-weight: 680; font-size: 18px; letter-spacing: -.02em; white-space: nowrap; }
.home img { width: 26px; height: 26px; }
.home span span { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-nav nav { display: flex; gap: 2px; }
.site-nav nav a { color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 550; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.site-nav nav a:hover { color: var(--fg); background: var(--bg-2); }
.site-nav .grow { flex: 1; }
.site-nav .signin { color: var(--fg); text-decoration: none; font-size: 14.5px; font-weight: 560; white-space: nowrap; }
.site-nav .signin:hover { color: var(--link); }
.btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 11px 20px; border-radius: 999px; background: var(--btn); color: var(--btnfg);
  font-weight: 650; font-size: 15px; line-height: 1.25; text-decoration: none; border: 0; cursor: pointer; transition: background .12s; }
.btn:hover { background: var(--btn-hover); color: var(--btnfg); }
.site-nav .btn { margin-top: 0; padding: 8px 14px; font-size: 14px; white-space: nowrap; }

/* the reading column */
main { max-width: 760px; margin: 0 auto; padding: 36px max(20px, env(safe-area-inset-left, 0px)) 80px; }
h1 { font-size: 40px; line-height: 1.1; margin: 8px 0 12px; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; color: #fff; }
h2 { font-size: 25px; line-height: 1.25; margin: 40px 0 10px; letter-spacing: -.025em; font-weight: 750; text-wrap: balance; color: #fff; }
h3 { font-size: 18.5px; line-height: 1.35; margin: 26px 0 6px; font-weight: 650; letter-spacing: -.01em; }
p, li { color: var(--fg); }
.muted, small { color: var(--muted); }
ul, ol { padding-left: 22px; }
li { margin: 5px 0; }
.crumbs { font-size: 14px; color: var(--dim); }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.cta { margin: 36px 0; padding: 26px 28px; border: 1px solid var(--cta-rule); border-radius: 22px; background: var(--cta-bg); color: var(--cta-muted);
  box-shadow: 0 30px 70px -40px rgba(46, 230, 214, .35); }
.cta b { color: var(--cta-fg); }
.cta .btn { background: var(--cta-btn); color: var(--cta-btnfg); }
.cta .btn:hover { background: var(--cta-btn-hover); color: var(--cta-btnfg); }
.cta b { display: block; font-size: 20px; line-height: 1.3; letter-spacing: -.015em; margin-bottom: 6px; }
.toc { border-left: 3px solid var(--rule); padding-left: 14px; margin: 18px 0; }
.faq dt { font-weight: 680; margin-top: 16px; }
.faq dd { margin: 4px 0 0; color: var(--muted); }
.more { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule); }
.more b { display: block; margin-top: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 650; }
code { font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--rule); }

/* the footer */
.site-foot { border-top: 1px solid var(--rule); background: transparent; }
.site-foot .in { max-width: 1120px; margin: 0 auto; padding: 26px max(20px, env(safe-area-inset-left, 0px)) 38px; display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: center; justify-content: space-between; font-size: 14px; color: var(--dim); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--fg); }
@media (max-width: 760px) {
  .site-nav nav, .site-nav .signin { display: none; }
  h1 { font-size: 31px; }
  h2 { font-size: 22px; }
  body { font-size: 16.5px; }
}

/* ---------- glass (13.9, the owner: "a really high quality glass finish"): the website's aurora behind the page and
   glass for the boxes and buttons, like the home page (glass.css) ---------- */
body::before { content: ''; position: fixed; inset: -18%; z-index: -1; pointer-events: none; filter: blur(28px) saturate(125%);
  background: radial-gradient(36% 30% at 16% 10%, rgba(46, 230, 214, .2), transparent 70%),
    radial-gradient(34% 30% at 86% 6%, rgba(124, 92, 255, .22), transparent 70%),
    radial-gradient(42% 38% at 72% 60%, rgba(37, 99, 235, .16), transparent 70%),
    radial-gradient(36% 32% at 8% 76%, rgba(255, 143, 179, .09), transparent 70%);
  animation: siteAurora 40s ease-in-out infinite alternate; }
@keyframes siteAurora { 50% { transform: translate3d(3%, 2%, 0) scale(1.06); } 100% { transform: translate3d(-2%, 4%, 0) scale(1.03); } }
body { background: var(--bg); }
.cta { background: radial-gradient(120% 70% at 8% -14%, rgba(255, 255, 255, .17), transparent 56%),
    linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035) 48%, transparent), rgba(10, 24, 48, .5);
  -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%);
  border-color: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 26px 64px -34px rgba(0, 0, 0, .9); }
.btn, .cta .btn { background: radial-gradient(130% 100% at 50% -38%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 54%),
    linear-gradient(180deg, #67f3e8 0%, #26dccd 50%, #15c2b4 100%); color: #03141a; border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 8px rgba(0, 92, 92, .26), 0 10px 26px -10px rgba(34, 214, 200, .7); }
.btn:hover, .cta .btn:hover { filter: brightness(1.06); background: radial-gradient(130% 100% at 50% -38%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 54%),
    linear-gradient(180deg, #67f3e8 0%, #26dccd 50%, #15c2b4 100%); color: #03141a; }
.site-nav { background: rgba(6, 16, 34, .55); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border-bottom-color: rgba(255, 255, 255, .08); }
table, .toc { background: rgba(255, 255, 255, .02); }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* 13.9, card-free (the owner, Nov 3 2026: "Cards are outdated... let's eliminate them"): the call to action sits
   between two hairlines on the page, no box */
.cta { background: none; border: 0; border-top: 1px solid var(--cta-rule); border-bottom: 1px solid var(--cta-rule); border-radius: 0;
  box-shadow: none; padding: 26px 0; -webkit-backdrop-filter: none; backdrop-filter: none; }