/* The night look for the inner pages, as overrides on top of styles.css, the page CSS and css/field.css.
   It matches the night water home: deep blue-black sky, thin display type, red for titles and buttons, soft blue for secondary text,
   square red buttons, no boxes with hard borders. No 3D here: the inner pages are for reading. */
:root:not(#fld):not(#ngt){
  --paper:#060914;--surface:rgba(16,24,48,.62);--soft:rgba(20,30,60,.7);--line:rgba(143,180,255,.14);--line-strong:rgba(143,180,255,.28);
  --ink:#f3f1ec;--text-soft:#c2cdf0;--muted:#8fa6e8;
  --strike:#ff4b4b;--strike-deep:#e23a3a;--fld-red:#ff4b4b;--focus:#ffffff;
  --accent:#8fb4ff;--accent-bg:rgba(20,30,60,.7);
  --btn:#ff4b4b;--btn-fg:#12060a;--btn-hover:#ff7373;
  --r:2px;--r-sm:2px;--r-lg:4px;--shadow:none;--shadow-lg:0 40px 90px -50px #000;
  --font:"Instrument Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --ngt-display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --fld-panel:rgba(16,24,48,.62);
}
html{background:#060914}
body{background:
  radial-gradient(90vw 46vh at 70% -6vh,#1a2a5e88,transparent 70%),
  linear-gradient(#0e1836 0,#0b1229 26vh,#060914 62vh) no-repeat,#060914;
  background-attachment:fixed;font-family:var(--font)}
/* a line of light low on the page, like the water's edge on the home */
body::before{content:"";position:fixed;left:0;right:0;bottom:0;height:34vh;pointer-events:none;z-index:0;display:none;
  background:radial-gradient(60vw 30vh at 50% 120%,#24408f44,transparent 70%)}
main,header,footer{position:relative;z-index:1}

/* type: thin display face, red titles, blue secondary text */
h1,h2,h3,.display,.hero-title,.closer,.section-head h2,.doc h1,.foot-cta .foot-cta-title{font-family:var(--ngt-display);font-weight:300;letter-spacing:-.02em}
h1,.display,.hero-title,.doc h1{color:#ff4b4b;line-height:1.08}
h1 em,h1 .accent,h1 .ai,.display em{color:#f3f1ec;font-style:normal}
h2,.section-head h2{color:#f3f1ec}
h3,h4{font-weight:500;letter-spacing:-.01em}
.eyebrow{font:500 12.5px/1.4 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#8fb4ff}
p,li,dd{color:var(--text-soft)}
.lede{color:#c2cdf0;font-size:clamp(17px,1.25vw,20px)}
a{color:#f3f1ec}
main a:not(.button):not(.mini-btn):not(.brand){text-decoration-color:#ff4b4b;text-underline-offset:4px}
::selection{background:#ff4b4b66}

/* header: clear over the sky, the same wordmark and underlined links as the home */
.top{background:linear-gradient(#0e1836f2 55%,transparent);border:0;backdrop-filter:none}
.top.is-scrolled{background:#0a1124f2}
.top nav a:not(.button){border-bottom:1px solid transparent;padding-bottom:4px}
.top nav a:not(.button):hover,.top nav a[aria-current]{border-bottom-color:#ff4b4b;color:#fff}

/* buttons: square, red, with a soft red glow; the quiet one is an outline */
.button,.mini-btn{border-radius:0;font-weight:600;box-shadow:0 0 30px -6px #ff4b4b88;border:0}
.button.secondary,.button.ghost,.button.quiet,.mini-btn{background:transparent;color:#f3f1ec;box-shadow:inset 0 0 0 1px #f3f1ec99}
.button.secondary:hover,.button.ghost:hover,.button.quiet:hover,.mini-btn:hover{background:#f3f1ec;color:#060914}

/* panels: see-through dark glass with a thin line of light on top, never a hard box */
.card,.plan,.panel,.spotlight,.feat,.callout,table,.doc aside{background:var(--surface);border:0;border-radius:4px;box-shadow:inset 0 1px 0 #8fb4ff40,0 30px 60px -40px #000}
.plan.founder,.card.founder{box-shadow:inset 0 2px 0 #ffcc55,0 0 60px -20px #ffcc5566}
.plan.featured,.plan.yearly{box-shadow:inset 0 2px 0 #ff4b4b,0 0 60px -20px #ff4b4b66}
th{color:#8fb4ff;font-weight:500;letter-spacing:.06em}
td,th{border-color:var(--line)}
hr{border-color:var(--line)}
summary{font-family:var(--ngt-display);font-weight:400;font-size:1.1em;color:#f3f1ec}
details[open] summary{color:#ff4b4b}
code,kbd,pre{background:rgba(10,16,34,.8);border-color:var(--line);color:#cfe0ff}
input,select,textarea{background:rgba(10,16,34,.8);border:0;box-shadow:inset 0 0 0 1px var(--line-strong);color:#f3f1ec;border-radius:2px}
.site-foot{background:transparent;border-top:0;box-shadow:none}
.site-foot h4{color:#8fb4ff;font-weight:500;letter-spacing:.1em}

/* the questions page made from the home page's questions part */
.ngt-faq{padding-top:clamp(60px,10vh,120px)}
.ngt-faq #faq .section-head h2{font-size:clamp(40px,5vw,84px);color:#ff4b4b}


/* sign-in and account: the provider buttons are quiet outlines with room between them; the red glow belongs to the one main button only */
.button[data-provider]{display:flex;width:100%;margin:0;background:rgba(10,16,34,.6);color:#f3f1ec;box-shadow:inset 0 0 0 1px #8fb4ff59;border-radius:2px}
.button[data-provider]:hover{background:#f3f1ec;color:#060914}
.account-field{margin:0 0 14px}
.account-field .note{margin:16px 0 0}
.account-tabs{display:flex;gap:26px;margin-bottom:24px;box-shadow:inset 0 -1px 0 #8fb4ff33}
.account-tabs button,.account-tabs .button{background:none!important;color:#9fb0dd;box-shadow:none;border-radius:0;padding:0 0 12px;font-family:var(--ngt-display);font-weight:400;font-size:18px}
.account-tabs [aria-pressed="true"],.account-tabs [aria-selected="true"],.account-tabs .is-active,.account-tabs .active{color:#fff;box-shadow:inset 0 -2px 0 #ff4b4b}
.co-card,.co-card-main{border-left:0}
/* Buttons, settled. On this site .button.dark is the main button and a plain .button is the second one (checked across every page).
   Main: red with a soft red glow. Second: a clear outline with no glow and no tinted fill. */
.button,.mini-btn{background:transparent!important;color:#f3f1ec!important;border:0;border-radius:0;box-shadow:inset 0 0 0 1px #f3f1ec80!important;font-weight:600}
.button:hover,.mini-btn:hover{background:#f3f1ec!important;color:#060914!important}
.button.dark{background:#ff4b4b!important;color:#12060a!important;box-shadow:0 0 30px -8px #ff4b4b99!important}
.button.dark:hover{background:#ff7373!important;color:#12060a!important}
.button[data-provider]{background:rgba(10,16,34,.6)!important;box-shadow:inset 0 0 0 1px #8fb4ff59!important}
.button[data-provider]:hover{background:#f3f1ec!important}
.account-tabs .button{color:#9fb0dd!important;box-shadow:none!important}
.account-tabs .button:hover{background:none!important;color:#fff!important}
.account-tabs [aria-pressed="true"],.account-tabs [aria-selected="true"],.account-tabs .is-active,.account-tabs .active{color:#fff!important;box-shadow:inset 0 -2px 0 #ff4b4b!important}
.account-tabs .button.dark{background:none!important;color:#fff!important;box-shadow:inset 0 -2px 0 #ff4b4b!important}
/* questions are a list on the sky, not boxes: a hairline of light under each, and the text never touches an edge */
details{background:none;border:0;border-radius:0;box-shadow:inset 0 -1px 0 var(--line)}
/* padding audit, 2026-10-03 (measured on all 24 pages at 1280 and 390 wide): nothing may touch or leave its box */
.plan ul,.plan-check,.plan-checks{padding-bottom:14px;padding-right:14px}
pre{overflow-x:auto;max-width:100%}
.vd-line{white-space:normal;overflow-wrap:anywhere}
@media (max-width:720px){
  .top .wrap{gap:10px}
  .top nav{overflow-x:auto;scrollbar-width:none;gap:14px;max-width:100%}
  .top nav::-webkit-scrollbar{display:none}
  table.compare{display:block;overflow-x:auto;max-width:100%}
}
@media (max-width:720px){.top nav a:not(.button):not([href*="pricing"]){display:none}}
/* the home's scene behind every page (night-scene.js): fixed to the window, the page scrolls over it */
.ngt-scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
body{padding-bottom:12vh}
/* 2026-10-03, the user: "less red/blue mix". Text is one quiet family of off-white and grey; blue stays in the water and the sky,
   red stays on the main button, the mark in the logo and the pointer's light. Titles are off-white, not red. */
:root:not(#fld):not(#ngt){--text-soft:#c9ccd8;--muted:#9a9fb2;--accent:#dfe3ee;--line:rgba(205,214,238,.13);--line-strong:rgba(205,214,238,.26)}
h1,.display,.hero-title,.doc h1,.ngt-faq #faq .section-head h2{color:#f3f1ec}
.eyebrow,th,.site-foot h4{color:#9a9fb2}
.lede{color:#c9ccd8}
main a:not(.button):not(.mini-btn):not(.brand){text-decoration-color:#f3f1ec55}
main a:not(.button):not(.mini-btn):not(.brand):hover{text-decoration-color:#ff4b4b}
details[open] summary{color:#fff}
code,kbd,pre{color:#dfe3ee}
.account-tabs .button{color:#9a9fb2!important}
/* the coloured bar down the left of the main card belongs to the old look; a card here has only its line of light on top */
.co-card-main:before,#signin-root:before{display:none}
/* how-it-works.html: the page that holds what the old home page said, under a plain title */
.ngt-head{padding:clamp(56px,9vh,110px) 0 clamp(20px,4vh,48px)}
.ngt-head h1{font-size:clamp(38px,5vw,84px);margin:10px 0 18px;max-width:16ch}
.ngt-head .lede{max-width:62ch}
.ngt-head .actions{margin-top:26px}