/* Site chrome shared by the homepage, the legal pages and the error pages: fonts, colour tokens,
   base type, buttons, the top bar and the footer. Page sections keep their own styles. */

/* Self-hosted variable fonts, latin subset, weights 400 to 700 (SIL Open Font License). */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/instrument-sans-latin.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/inter-latin.woff2") format("woff2")}

:root{
  --paper:#FFFFFF; --canvas:#F5F7FA; --soft:#EEF1F5; --line:#E3E7ED; --line-strong:#CBD2DC;
  --ink:#172E44; --text-2:#3B4A5C;
  --action:#373C9A; --action-hover:#2B2F7A; --on-action:#FFFFFF; --tint:#E8EAF6;
  --stage:#0F1F30; --stage-line:#24364B; --stage-text-2:#B9C6D6;
  --paid:#14532D; --paid-bg:#E8F3EC;
  --amber:#7A3D00; --amber-bg:#FDF1DC; --amber-ring:#B45309;
  --focus:#373C9A;
  --shadow:0 1px 2px rgba(23,46,68,.06),0 8px 24px rgba(23,46,68,.08);
  --max:1120px; --gutter:16px; --bar:64px;
  --page-font:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --app-font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0B1420; --canvas:#131D2B; --soft:#131D2B; --line:#24324A; --line-strong:#33445E;
    --ink:#E6E9F0; --text-2:#B4BDCB;
    --action:#A9AEF0; --action-hover:#C7CBF6; --on-action:#0B1420; --tint:#1E2A44;
    --stage-text-2:#B4BDCB; --focus:#A9AEF0;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--page-font);overflow-x:hidden}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:var(--action);text-underline-offset:3px}
a:hover{color:var(--action-hover)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.wrap{width:min(var(--max),100% - var(--gutter) * 2);margin:0 auto}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--paper);color:var(--action);padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{top:10px}
#main:focus{outline:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:8px;font:600 16px/1 var(--page-font);text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:background-color .15s,border-color .15s,color .15s}
.btn--primary{background:var(--action);color:var(--on-action)}
.btn--primary:hover{background:var(--action-hover);color:var(--on-action)}
.btn--quiet{color:var(--ink);border-color:var(--line-strong);background:transparent}
.btn--quiet:hover{border-color:var(--action);color:var(--action)}
.btn--sm{min-height:44px;padding:0 14px;font-size:15px}

/* Top bar: wordmark, Sign in and the demo request at every width; it scrolls with the page */
.bar{background:var(--paper);border-bottom:1px solid var(--line)}
.bar__in{display:flex;align-items:center;gap:8px;min-height:var(--bar)}
.mark{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.02em}
.mark:hover{color:var(--ink)}
.bar__signin{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;padding:0 10px;border-radius:8px;color:var(--text-2);text-decoration:none;font-weight:500;font-size:15px;white-space:nowrap}
.bar__signin:hover{color:var(--ink);background:var(--soft)}
@media (min-width:640px){
  .bar__in{gap:16px}
  .mark{font-size:20px}
  .bar__signin{padding:0 12px}
  .bar .btn--sm{padding:0 16px}
}

/* Footer */
.foot{padding:48px 0 40px;border-top:1px solid var(--line);font-size:14px;color:var(--text-2)}
.foot__grid{display:grid;gap:24px}
.foot .mark{font-size:18px}
.foot address{font-style:normal;margin-top:8px}
.foot__links{display:flex;flex-wrap:wrap;gap:0 4px}
.foot__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--text-2);text-decoration:none}
.foot__links--flush{margin:4px 0 0 -10px}
.foot__links a:hover{color:var(--action);text-decoration:underline}
.foot__copy{margin-top:24px}
@media (min-width:760px){.foot__grid{grid-template-columns:1fr auto;align-items:start}}

/* Legal and error pages */
.page{padding:56px 0 88px}
.page__head{max-width:760px}
.page__head h1{font-size:32px;line-height:1.12;font-weight:700;letter-spacing:-.025em}
.page__head p{margin-top:16px;font-size:18px;color:var(--text-2)}
.page__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.page__note{margin-top:28px;color:var(--text-2)}
.page__head--doc{margin-bottom:32px}
.eyebrow{font-size:15px;font-weight:600;color:var(--action);margin-bottom:12px}
@media (min-width:760px){
  .page{padding:88px 0 112px}
  .page__head h1{font-size:44px}
}

/* The policy text comes from Termly in its own light styles, so it sits on a light sheet in both themes */
.doc{--ink:#172E44;--text-2:#3B4A5C;--action:#373C9A;--action-hover:#2B2F7A;--focus:#373C9A;
  background:#FFFFFF;color:#172E44;border:1px solid var(--line);border-radius:12px;padding:24px 16px;box-shadow:var(--shadow);overflow-wrap:break-word}
.doc h1,.doc h2,.doc h3{margin:1.2em 0 .5em;line-height:1.25}
.doc p,.doc ul,.doc ol{margin:0 0 1em}
.doc ul{list-style:disc;padding-left:1.4em}
@media (min-width:760px){.doc{padding:48px}}

/* Legal document loading state and fallback */
.legal-skeleton-group{display:grid;gap:12px;margin-bottom:24px}
.legal-loading{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:40px;color:#3B4A5C;font-size:14px;font-weight:500}
.legal-loading__dots{display:flex;gap:4px}
.legal-loading__dots span{width:6px;height:6px;border-radius:50%;background:#373C9A}
.legal-fallback{padding:48px 0;text-align:center}
.legal-fallback h2{font-size:24px;line-height:1.2;font-weight:700}
.legal-fallback p{max-width:560px;margin:16px auto 0;color:#3B4A5C}
@media (prefers-reduced-motion: no-preference){
  .legal-loading__dots span{animation:legal-dot 1s ease-in-out infinite}
  .legal-loading__dots span:nth-child(2){animation-delay:.15s}
  .legal-loading__dots span:nth-child(3){animation-delay:.3s}
  @keyframes legal-dot{0%,100%{transform:none}50%{transform:translateY(-4px)}}
}