/* ============================================================================
   Night Ops -- the ONE shared stylesheet for SwathIQ's marketing and account
   pages (how it works, tools, sign-up, thanks, sign-in, help, privacy, terms,
   /services, /buy, invites).

   Tokens, base, buttons, nav and footer are copied VERBATIM from the live home
   page (api/static/landing/landing.html, PR #157) so every page matches it.
   If you change a token here, change it in landing.html too (or better: point
   landing.html at this file). Design system: Night Ops DIRECTION.md.

   Rules this file keeps: dark storm-green ground, solid slabs with NO outlines,
   one signal yellow used only for thin lines / tiny markers / focus / logo,
   Sofia Sans family, bone (ink1) primary buttons, 16px inputs.
   Load it AFTER the Google Fonts link and BEFORE any page stylesheet.
   ========================================================================== */

:root{
  color-scheme: dark;
  --deep:#050D0D; --ground:#091818; --land:#0D1A1A;
  --s1:#152222; --s2:#1E2C2C; --s3:#293636; --s4:#344241;
  --ink1:#F0F1EB; --ink2:#C2CCC8; --ink3:#9DA9A7; --ink4:#667170;
  --signal:#FFCF00; --on-signal:#091818; --focus:#FFCF00;
  --good:#58DA98; --warn:#FFAB59; --critical:#FE6673;

  --h025:#7E6A96; --h075:#9A7EB7; --h100:#5A3B7E; --h125:#774B9F; --h150:#945DBD;
  --h175:#B076D2; --h200:#CA93E3; --h250:#E0B5EE; --h300:#F1DAF6;

  --f-display:"Sofia Sans Extra Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --f-ui:"Sofia Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-num:"Sofia Sans Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;

  --r-stage:24px; --r-slab:20px; --r-sheet:14px; --r-control:12px; --r-bed:10px; --r-pill:999px;

  --e2: inset 0 1px 0 rgba(240,241,235,.07), 0 4px 12px rgba(1,7,7,.50), 0 24px 56px -12px rgba(1,7,7,.80);

  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-std:cubic-bezier(.2,0,0,1);
  --t-press:90ms; --t-hover:140ms; --t-state:200ms; --t-enter:240ms; --t-exit:160ms;
}

/* ===== Base (home page) ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--ground);color:var(--ink1)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:#344241 var(--ground)}
body{margin:0;font:430 15px/1.55 var(--f-ui);letter-spacing:.003em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;caret-color:var(--signal);accent-color:var(--ink1);-webkit-tap-highlight-color:transparent;overflow-x:clip}
::selection{background:#FFCF00;color:#091818}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.num{font-variant-numeric:tabular-nums lining-nums}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} }
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:#667170;
  transition:color var(--t-hover) var(--ease-std),text-decoration-color var(--t-hover) var(--ease-std)}
a:hover{text-decoration-color:#C2CCC8}
button,input,select,textarea{font:inherit;color:inherit;touch-action:manipulation}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:16px;top:-80px;z-index:60;display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:var(--r-control);
  background:var(--ink1);color:var(--ground);font:650 15px/1 var(--f-ui);text-decoration:none;box-shadow:var(--e2)}
.skip:focus{top:12px}
.wrap{width:min(1280px, 100% - 48px);margin-inline:auto}

/* ===== Type roles (home page) ===== */
.display-1{margin:0;font-family:var(--f-display);font-weight:650;font-size:clamp(52px,6.4vw,92px);line-height:.92;letter-spacing:-.012em;color:var(--ink1)}
.display-2{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(40px,4.6vw,64px);line-height:.95;letter-spacing:-.01em;color:var(--ink1)}
/* The "label" role: 13/650, sentence case, ink3. Never caps, never yellow. */
.label{display:block;margin:0 0 14px;font:650 13px/1.3 var(--f-ui);letter-spacing:.02em;color:var(--ink3)}

/* ===== Buttons: no borders, ever (home page) ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border:0;border-radius:var(--r-control);
  font:650 15px/1 var(--f-ui);letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation;
  transition:background-color var(--t-hover) var(--ease-std),color var(--t-hover) var(--ease-std),transform var(--t-press) var(--ease-std)}
.btn:active{transform:scale(.98)}
.btn[disabled]{background:var(--s4);color:var(--ink3);cursor:not-allowed;transform:none}
.btn-primary{background:var(--ink1);color:var(--ground)}
.btn-primary:hover{background:#FFFFFF}
.btn-secondary{background:var(--s3);color:var(--ink1)}
.btn-secondary:hover{background:var(--s4)}
.btn-secondary.on-ground{background:var(--s1)}
.btn-secondary.on-ground:hover{background:var(--s2)}
.btn-ghost{background:transparent;color:var(--ink2)}
.btn-ghost:hover{background:var(--s2);color:var(--ink1)}
.btn-sm{height:40px;padding:0 14px;font-size:14px}
.btn-lg{height:56px;padding:0 24px;font-size:16px}
.btn .i,.btn svg{width:18px;height:18px;flex:none}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:0;border-radius:var(--r-bed);background:transparent;color:var(--ink2);cursor:pointer;
  transition:background-color var(--t-hover) var(--ease-std),color var(--t-hover) var(--ease-std)}
.icon-btn:hover{background:var(--s3);color:var(--ink1)}
@media (pointer:coarse){ .btn-sm{height:44px} }

/* ===== Nav (home page, minus the hero overlay: sub-pages sit it in flow) ===== */
.nav{position:relative;z-index:20;height:72px}
.nav-in{height:100%;display:flex;align-items:center;gap:48px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink1);text-decoration:none}
.brand svg{width:28px;height:28px;flex:none}
.wordmark{font:700 22px/1 var(--f-num);letter-spacing:0}
.logo-fill{fill:var(--signal);stroke:var(--on-signal);stroke-width:1.6;stroke-linejoin:round}
.logo-ink{fill:none;stroke:var(--on-signal);stroke-width:1.6;stroke-linecap:round}
.logo-dot{fill:var(--on-signal)}
.nav-links{display:flex;gap:28px}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;font:550 15px/1 var(--f-ui);color:var(--ink2);text-decoration:underline;text-decoration-color:transparent}
.nav-links a:hover{color:var(--ink1);text-decoration-color:currentColor}
.nav-links a[aria-current="page"]{color:var(--ink1)}
.nav-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-end .btn{height:44px}
.nav-end .btn-primary{font-size:16px}
.menu-btn{display:none}
.nav-menu{position:absolute;top:64px;left:12px;right:12px;z-index:30;padding:6px;border-radius:var(--r-sheet);background:var(--s1);box-shadow:var(--e2);transform-origin:top right}
.nav-menu:not([hidden]){animation:pop var(--t-enter) var(--ease-out)}
.nav-menu a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:var(--r-bed);font:550 16px/1 var(--f-ui);color:var(--ink1);text-decoration:none;
  transition:background-color var(--t-hover) var(--ease-std)}
.nav-menu a:hover{background:var(--s2)}
@keyframes pop{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}

/* ===== Footer: the night deepens, then the footer (home page) ===== */
.deepen{height:160px;margin-top:96px;background:linear-gradient(180deg,var(--ground),var(--deep))}
.foot{background:var(--deep);padding:24px 0 max(48px,env(safe-area-inset-bottom))}
.foot-in{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:28px 56px}
.foot nav{display:flex;flex-wrap:wrap;gap:0 24px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;font:550 15px/1 var(--f-ui);color:var(--ink2);text-decoration:underline;text-decoration-color:transparent}
.foot nav a:hover{color:var(--ink1);text-decoration-color:currentColor}
.foot .legal{margin:0;padding-top:12px;max-width:52ch;font:450 14px/1.55 var(--f-ui);color:var(--ink3)}
.foot-more{margin-top:40px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:20px}
.foot-more .call{grid-column:1 / span 5;margin:0;font:450 15px/1.6 var(--f-ui);color:var(--ink2)}
.foot-more .call a{color:var(--ink1)}
.foot-more .states{grid-column:6 / span 7;font:450 14px/1.7 var(--f-ui);color:var(--ink3)}
.foot-more .states p{margin:0}
.foot-more .states a{color:var(--ink2)}
.foot-base{margin-top:40px;display:flex;flex-wrap:wrap;gap:6px 28px;font:450 14px/1.55 var(--f-ui);color:var(--ink3)}
.foot-base a{color:var(--ink2)}

/* ===== Shared sub-page pieces ===== */
.crumbs{margin:8px 0 0;font:450 14px/1.4 var(--f-ui);color:var(--ink3)}
.crumbs a{color:var(--ink2)}
.lede{margin:16px 0 0;font:430 18px/1.6 var(--f-ui);color:var(--ink2);max-width:60ch}
/* A slab: solid, opaque, no outline. Depth by tone step (s1 on the ground). */
.slab{border-radius:var(--r-slab);background:var(--s1)}
.slab.lifted{box-shadow:var(--e2)}
/* Form beds (home search recipe): s2 bed, no border, 16px text, signal focus */
.bed-input{display:block;width:100%;min-height:52px;padding:14px 16px;border:0;border-radius:var(--r-control);background:var(--s2);color:var(--ink1);
  font:500 16px/1.35 var(--f-ui);caret-color:var(--signal);transition:background-color var(--t-hover) var(--ease-std)}
.bed-input:hover{background:var(--s3)}
.bed-input:focus{outline:2px solid var(--focus);outline-offset:3px;background:var(--s2)}
.bed-input::placeholder{color:var(--ink3);opacity:1}
select.bed-input:invalid{color:var(--ink3)}
select.bed-input option{color:var(--ink1);background:var(--s2)}
textarea.bed-input{min-height:96px;resize:vertical}
select.bed-input{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DA9A7' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:20px 20px}

/* ===== Tablet and phone (home page breakpoints) ===== */
@media (max-width:1099px){
  .nav{height:64px}
  .nav-links,.nav-end .signin{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:767px){
  .nav{padding-top:env(safe-area-inset-top)}
  .nav-in{gap:12px}
  .nav-end{gap:4px}
  .nav-end .btn-primary{padding:0 16px}
  .wrap{width:calc(100% - 32px)}
  .lede{font-size:17px}
  .deepen{height:120px;margin-top:72px}
  .foot-in{grid-template-columns:1fr;gap:12px}
  .foot nav{gap:0 20px}
  .foot-more{display:block}
  .foot-more .states{margin-top:20px}
}