/* Self-hosted fonts (Barlow Semi Condensed, Inter, IBM Plex Mono) — Google Fonts dependency removed for CSP/privacy. latin + latin-ext only. */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/barlow-sc-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/barlow-sc-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/barlow-sc-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/barlow-sc-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/barlow-sc-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/barlow-sc-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* TankBinder marketing site, bespoke build v3 (2026-06-24).
   Customer-facing (the station owner, not an internal pitch). Photographic, editorial, NOT a grid of
   boxes. Strong color. Signature move: the real OUT OF SERVICE red tag, the dusk-station photography,
   and the live state Form Explorer. No customer-facing em-dashes (house rule). */

:root{
  --petrol-900:#0a2230; --petrol-800:#0f2e40; --petrol-700:#134b63; --petrol-600:#1b6a86; --petrol-500:#2b86a4;
  --petrol-100:#d6e6ed; --petrol-50:#edf4f7;
  --redtag:#d7263d; --redtag-700:#b01d31; --redtag-600:#c21f37; --redtag-50:#fdecee;
  --amber:#e0902a; --amber-50:#fdf3e3;
  --green:#157a48; --green-600:#15924f; --green-50:#e7f5ee;
  --slate-900:#0e1a20; --slate-800:#1d2a32; --slate-700:#33454f; --slate-600:#4b5d67;
  --slate-500:#6a7c86; --slate-400:#93a4ad; --slate-300:#c2cdd3; --slate-200:#dde5e9; --slate-100:#eef2f4; --slate-50:#f6f9fa;
  --ink:#14242c; --muted:#4a5c66;
  --shadow-sm:0 1px 2px rgba(10,34,48,.06), 0 1px 3px rgba(10,34,48,.10);
  --shadow-md:0 8px 18px -8px rgba(10,34,48,.20), 0 2px 6px -3px rgba(10,34,48,.12);
  --shadow-lg:0 30px 60px -22px rgba(10,34,48,.40), 0 12px 24px -14px rgba(10,34,48,.22);
  --maxw:1140px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Barlow Semi Condensed','Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* MANY soft, varied-hue blooms distributed densely down the WHOLE tall page, with big radii + soft falloff
     so they OVERLAP into one seamless field (Andrew: "only two splotches show, add more and blend them
     seamlessly"). Analogous cool family (petrol/teal/cyan/sky/periwinkle) + one soft coral accent, so it is
     rich and varied with no muddy midpoints. Tinted base so there are no pale gaps. */
  /* Richer, more varied palette (petrol, teal, cyan, sky, periwinkle, violet, mint-green, amber, coral) and
     ORGANIC, irregular placement + varied sizes, all soft + heavily overlapping so the many points blend
     into one seamless field. Hues grouped so neighbours blend cleanly (cool up top, violet/green through the
     middle, a warm amber/coral zone lower) with no muddy clashes. */
  background:
    radial-gradient(1400px 1180px at 8% 1%,   rgba(16,102,150,.40) 0%, transparent 74%),   /* petrol     */
    radial-gradient(1050px 960px at 84% 5%,    rgba(52,178,214,.35) 0%, transparent 74%),   /* cyan       */
    radial-gradient(1250px 1100px at 40% 12%,  rgba(28,150,176,.33) 0%, transparent 72%),   /* teal       */
    radial-gradient(1150px 1050px at 96% 21%,  rgba(86,158,232,.35) 0%, transparent 74%),   /* sky        */
    radial-gradient(1200px 1080px at 14% 26%,  rgba(132,140,228,.31) 0%, transparent 74%),  /* periwinkle */
    radial-gradient(980px 940px at 62% 33%,    rgba(58,184,210,.31) 0%, transparent 72%),   /* cyan       */
    radial-gradient(1300px 1150px at 0% 42%,   rgba(150,124,214,.29) 0%, transparent 74%),  /* violet     */
    radial-gradient(1120px 1040px at 88% 47%,  rgba(60,196,164,.28) 0%, transparent 72%),   /* mint-green */
    radial-gradient(1250px 1120px at 36% 55%,  rgba(86,158,232,.31) 0%, transparent 74%),   /* sky        */
    radial-gradient(1080px 1000px at 72% 62%,  rgba(132,140,228,.28) 0%, transparent 72%),  /* periwinkle */
    radial-gradient(1200px 1080px at 8% 68%,   rgba(28,150,176,.31) 0%, transparent 74%),   /* teal       */
    radial-gradient(1250px 1120px at 54% 76%,  rgba(236,170,70,.26) 0%, transparent 72%),   /* amber      */
    radial-gradient(1120px 1040px at 92% 82%,  rgba(234,134,148,.26) 0%, transparent 72%),  /* coral      */
    radial-gradient(1200px 1080px at 22% 90%,  rgba(236,170,70,.23) 0%, transparent 72%),   /* amber      */
    radial-gradient(1320px 1180px at 70% 99%,  rgba(16,102,150,.33) 0%, transparent 74%),   /* petrol     */
    linear-gradient(180deg,#e6f1f4 0%, #eef3f2 100%);
  background-repeat:no-repeat; background-color:#e6f1f4;
}
h1,h2,h3{ font-family:var(--display); line-height:1.04; letter-spacing:-.01em; color:var(--slate-900); margin:0; font-weight:800; }
p{ margin:0; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* monospace "field stamp" kicker */
.stamp{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.74rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--redtag-700); }
.stamp .n{ color:var(--slate-400); }
.stamp::before{ content:""; width:26px; height:2px; background:var(--redtag); display:inline-block; }
.stamp.cool{ color:var(--petrol-700); } .stamp.cool::before{ background:var(--petrol-600); }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:1rem; padding:.8rem 1.4rem;
  border-radius:11px; cursor:pointer; border:1px solid transparent; transition:transform .12s, box-shadow .2s, background .2s, filter .2s; white-space:nowrap; }
.btn-primary{ background:var(--redtag); color:#fff; box-shadow:0 10px 24px -8px rgba(215,38,61,.6); }
.btn-primary:hover{ filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(215,38,61,.65); }
.btn-ghost{ background:#fff; color:var(--slate-800); border-color:var(--slate-200); }
.btn-ghost:hover{ background:var(--slate-50); border-color:var(--slate-300); }
.btn-on-photo{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.4); backdrop-filter:blur(4px); }
.btn-on-photo:hover{ background:rgba(255,255,255,.22); }
.btn-lg{ padding:.95rem 1.8rem; font-size:1.08rem; }

/* ---- header ---- */
header{ position:sticky; top:0; z-index:50; background:rgba(238,244,247,.86); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid rgba(19,75,99,.10); }
header.on-photo{ background:transparent; border-color:transparent; }
.nav{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand-link{ display:flex; align-items:center; } .brand-link svg{ height:34px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:1.5rem; }
.nav-links a{ color:var(--slate-600); font-weight:500; font-size:.95rem; } .nav-links a:hover{ color:var(--slate-900); }
.nav-links a.lang-switch{ font-weight:700; color:var(--petrol-700); border:1px solid var(--petrol-100); border-radius:7px; padding:.16rem .5rem; font-size:.82rem; }
.nav-links a.btn-primary{ color:#fff; }
.nav-toggle{ display:none; background:none; border:0; font-size:1.5rem; color:var(--slate-700); cursor:pointer; }
@media (max-width:880px){
  .nav-toggle{ display:block; }
  .nav-links{ position:absolute; top:66px; left:0; right:0; flex-direction:column; align-items:stretch; gap:.2rem;
    background:#fff; border-bottom:1px solid var(--slate-200); padding:.6rem 24px 1rem; box-shadow:var(--shadow-md); display:none; }
  .nav-links.open{ display:flex; } .nav-links a{ padding:.6rem .2rem; border-bottom:1px solid var(--slate-100); color:var(--slate-700); }
  .nav-links a.lang-switch{ width:max-content; } .nav-links a.btn-primary{ margin-top:.5rem; justify-content:center; }
}

/* ---- HERO (bespoke cross-section art: the station above, the tanks TankBinder watches below) ---- */
.hero{ position:relative; overflow:hidden; color:#fff; background:#081a28; isolation:isolate; }
.hero-art{ position:absolute; inset:0; z-index:0; }
.hero-art svg{ width:100%; height:100%; display:block; }
.hero-inner{ position:relative; z-index:2; min-height:600px; display:flex; align-items:center; padding:84px 0; }
/* FULL-WIDTH scrim on the hero (NOT on .hero-inner, which is also .wrap=1140 centered and would create
   hard vertical seams at the wrap margins). z:1 sits above the art (z:0) and below the copy (z:2). */
.hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(102deg, rgba(6,18,28,.9) 0%, rgba(6,18,28,.66) 34%, rgba(6,18,28,.28) 54%, rgba(6,18,28,0) 74%); }
.hero-copy{ max-width:560px; }
.hero .kicker{ font-family:var(--mono); font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#ffd39a; display:inline-flex; align-items:center; gap:.55rem; }
.hero .kicker::before{ content:""; width:26px; height:2px; background:var(--amber); display:inline-block; }
.hero h1{ color:#fff; font-size:clamp(2.7rem,5.6vw,4.3rem); line-height:.98; margin:1.1rem 0; text-shadow:0 2px 30px rgba(0,0,0,.45); }
.hero h1 .redtag{ color:#ff5d6c; }
.hero .sub{ font-size:1.2rem; color:rgba(255,255,255,.92); max-width:42ch; margin-bottom:2rem; }
.hero-cta{ display:flex; gap:.85rem; flex-wrap:wrap; }
.hero-note{ margin-top:1.4rem; font-size:.92rem; color:rgba(255,255,255,.78); display:inline-flex; align-items:center; gap:.55rem; }
.hero-note .pip{ width:9px; height:9px; border-radius:50%; background:#46d98a; box-shadow:0 0 0 4px rgba(70,217,138,.2); flex:none; }
/* art motion (subtle, paused for reduced-motion) */
.hero-scan{ animation:scan 8s linear infinite; transform-box:fill-box; }
.hero-pulse{ animation:hpulse 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.hero-pulse.b{ animation-delay:1.1s; } .hero-pulse.c{ animation-delay:2.3s; }
.hero-blip{ animation:blip 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.hero-blip.b{ animation-delay:1.1s; } .hero-blip.c{ animation-delay:2.3s; }
@keyframes scan{ 0%{ transform:translateX(-180px); opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ transform:translateX(1520px); opacity:0; } }
@keyframes hpulse{ 0%,100%{ opacity:.78; } 50%{ opacity:1; } }
@keyframes blip{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.22); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .hero-scan,.hero-pulse,.hero-blip{ animation:none; } .hero-pulse{ opacity:1; } }
@media (max-width:920px){ .hero-inner{ min-height:0; padding:60px 0 64px; }
  .hero::after{ background:linear-gradient(125deg, rgba(6,18,28,.92) 0%, rgba(6,18,28,.72) 56%, rgba(6,18,28,.4) 100%); } }

/* the app dashboard panel (real product, glowing over the photo) */
.appwin{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); color:var(--ink); }
.appwin .winbar{ display:flex; align-items:center; gap:.7rem; padding:.55rem .85rem; background:var(--slate-50); border-bottom:1px solid var(--slate-100); }
.appwin .winbar .dots{ display:flex; gap:6px; } .appwin .winbar .dots i{ width:11px; height:11px; border-radius:50%; background:var(--slate-300); }
.appwin .winbar .url{ font-family:var(--mono); font-size:.72rem; color:var(--slate-500); background:#fff; border:1px solid var(--slate-200); border-radius:999px; padding:.14rem .7rem; }
.app-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.15rem .85rem; border-bottom:1px solid var(--slate-100); }
.app-head .site{ font-weight:700; color:var(--slate-900); font-size:1.02rem; } .app-head .site small{ display:block; font-weight:500; color:var(--slate-500); font-size:.78rem; }
.status-pill{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.82rem; padding:.34rem .7rem; border-radius:999px; color:var(--green); background:var(--green-50); border:1px solid #bfe6cf; }
.status-pill .d{ width:8px; height:8px; border-radius:50%; background:var(--green-600); }
.app-body{ padding:.85rem 1.15rem 1.15rem; display:grid; gap:.5rem; }
.task{ display:flex; align-items:center; gap:.7rem; padding:.66rem .8rem; border:1px solid var(--slate-100); border-radius:11px; font-size:.9rem; color:var(--slate-700); }
.task .bx{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:none; font-size:.8rem; font-weight:800; }
.task .bx.ok{ background:var(--green-50); color:var(--green-600); border:1px solid #bfe6cf; } .task .bx.due{ background:var(--amber-50); color:var(--amber); border:1px solid #f1d39a; }
.task .label{ flex:1; } .task .label b{ display:block; font-weight:600; color:var(--slate-800); }
.task .when{ font-size:.78rem; color:var(--slate-500); font-weight:600; } .task.is-due{ border-color:#f1d39a; background:var(--amber-50); } .task .when.amber{ color:var(--amber); }
.app-file{ display:flex; align-items:center; gap:.6rem; padding:.66rem .8rem; border-radius:11px; background:var(--petrol-50); border:1px solid var(--petrol-100); font-size:.88rem; color:var(--petrol-800); font-weight:600; }
.app-file .meta{ margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--petrol-700); } .app-file .ic{ color:var(--petrol-700); }

/* ---- sections ---- */
section.band{ padding:88px 0; position:relative; }
.section-head{ max-width:46rem; margin:0 auto 52px; } .section-head.center{ text-align:center; }
.section-head h2{ font-size:clamp(2.1rem,4vw,2.9rem); margin-top:.8rem; }
.section-head .lead{ color:var(--muted); font-size:1.14rem; margin-top:.9rem; }

/* ---- THE RISK: editorial scene, not boxes ---- */
.scene{ display:grid; grid-template-columns:1.25fr .75fr; gap:54px; align-items:center; }
.scene .big{ font-family:var(--display); font-weight:800; font-size:clamp(2.1rem,3.8vw,3rem); line-height:1.02; color:var(--slate-900); }
.scene .big em{ font-style:normal; color:var(--redtag); }
.scene p{ color:var(--muted); font-size:1.12rem; margin-top:1.2rem; max-width:48ch; }
.scene p.calm{ color:var(--slate-800); font-weight:600; border-left:3px solid var(--green-600); padding-left:1rem; margin-top:1.6rem; }
.scene .relief{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem; font-weight:600; color:var(--green); }
@media (max-width:880px){ .scene{ grid-template-columns:1fr; gap:36px; } }

/* the red tag is hung ON a fuel fill-port riser (zip-tied), not floating.
   Riser stands at the upper-left; the tag hangs down-right off a visible zip-tie. */
.redtag-stage{ position:relative; justify-self:center; width:312px; min-height:392px; }
.redtag-stage .redtag-rig{ position:absolute; left:-6px; top:0; width:230px; height:auto; z-index:0;
  filter:drop-shadow(0 18px 26px rgba(10,34,48,.30)); }
.redtag-stage .redtag-obj{ position:absolute; z-index:1; top:104px; right:2px; }

/* the OUT OF SERVICE red tag (signature object) */
.redtag-obj{ width:206px; background:linear-gradient(180deg,#e23145,#c11f35); color:#fff; border-radius:12px;
  padding:2rem 1.5rem 1.6rem; position:relative; box-shadow:0 30px 50px -18px rgba(176,29,49,.55), inset 0 0 0 2px rgba(255,255,255,.18);
  transform:rotate(-4deg); text-align:center; }
.redtag-obj::before{ content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:24px; height:24px; border-radius:50%; border:3px solid rgba(255,255,255,.55); background:#a81930; }
.redtag-obj .ttl{ font-family:var(--display); font-weight:800; font-size:1.9rem; line-height:.95; letter-spacing:.01em; margin-top:1.4rem; }
.redtag-obj .sub{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; margin-top:.5rem; opacity:.9; }
.redtag-obj .rule{ height:1px; background:rgba(255,255,255,.35); margin:.9rem 0; }
.redtag-obj .meta{ font-family:var(--mono); font-size:.68rem; opacity:.85; display:flex; justify-content:space-between; }

/* ---- HOW IT WORKS: alternating editorial rows (not a grid), bigger screens ---- */
/* de-carded "how it works": a connected 3-step process, numbered nodes on a dashed line, NO card frames */
.steps{ list-style:none; padding:0; margin:0 auto; max-width:1020px; display:grid; grid-template-columns:repeat(3,1fr); gap:48px; position:relative; }
.steps::before{ content:""; position:absolute; top:54px; left:16%; right:16%; height:2px; z-index:0;
  background:repeating-linear-gradient(90deg, var(--petrol-500) 0 9px, transparent 9px 17px); opacity:.5; }
.steps .step{ position:relative; z-index:1; text-align:center; padding:0 .4rem; }
/* bespoke illustrative spot, hero-styled: a petrol-metal plate with a soil base + a number tag.
   Each of the three steps gets a DISTINCT silhouette so the set reads as three different actions,
   not three identical discs: 1 = clipboard (portrait rounded panel), 2 = phone (tall slab),
   3 = calendar (landscape squared panel). Shared petrol material + sheen keep them a cohesive set. */
.steps .step-art{ position:relative; width:120px; height:120px; margin:0 auto 1.4rem; border-radius:24px;
  background:radial-gradient(120% 120% at 32% 24%, #1a5d79 0%, #0f3a4f 54%, #0a2738 100%);
  border:2px solid rgba(74,163,196,.45); box-shadow:0 16px 30px -14px rgba(10,34,48,.55), inset 0 2px 8px rgba(111,160,182,.20); display:grid; place-items:center; }
.steps .step-art svg{ width:78px; height:78px; display:block; }
/* step 1: clipboard, portrait, softly rounded, with a clip notch up top */
.steps .step:nth-child(1) .step-art{ width:104px; height:128px; border-radius:18px; }
/* step 2: phone, the clearest, a tall narrow slab */
.steps .step:nth-child(2) .step-art{ width:92px; height:132px; border-radius:26px; }
.steps .step:nth-child(2) .step-art svg{ width:84px; height:84px; }
/* step 3: calendar, landscape, squarer */
.steps .step:nth-child(3) .step-art{ width:134px; height:114px; border-radius:16px; }
.steps .step:nth-child(3) .step-art svg{ width:88px; height:80px; }
.steps .step-no{ position:absolute; top:-6px; right:-2px; width:34px; height:34px; border-radius:50%;
  background:var(--redtag); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.05rem;
  border:2px solid #fff; box-shadow:0 4px 10px -3px rgba(215,38,61,.5); }
.steps .step:nth-child(2) .step-no{ background:var(--amber); box-shadow:0 4px 10px -3px rgba(224,144,42,.5); }
.steps .step:nth-child(3) .step-no{ background:var(--green-600); box-shadow:0 4px 10px -3px rgba(21,146,79,.5); }
.steps .step h3{ font-size:1.3rem; } .steps .step p{ color:var(--muted); margin-top:.6rem; font-size:1rem; }
@media (max-width:780px){ .steps{ grid-template-columns:1fr; gap:34px; max-width:430px; } .steps::before{ display:none; } }

.step-row{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; padding:38px 0; }
.step-row.rev .s-copy{ order:2; }
.s-copy .num{ font-family:var(--display); font-weight:800; font-size:1rem; color:#fff; background:var(--petrol-700); width:38px; height:38px; border-radius:10px; display:grid; place-items:center; margin-bottom:1rem; }
.s-copy h3{ font-size:1.9rem; } .s-copy p{ color:var(--muted); margin-top:.7rem; font-size:1.06rem; }
.s-copy ul{ list-style:none; padding:0; margin:1.1rem 0 0; display:grid; gap:.5rem; }
.s-copy ul li{ display:flex; gap:.55rem; color:var(--slate-700); font-size:.98rem; } .s-copy ul li .ic{ color:var(--green-600); flex:none; margin-top:.18rem; }
@media (max-width:880px){ .step-row{ grid-template-columns:1fr; gap:26px; } .step-row.rev .s-copy{ order:0; } }

.screen{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--slate-100); }
.screen .winbar{ display:flex; align-items:center; gap:.6rem; padding:.5rem .8rem; background:var(--slate-50); border-bottom:1px solid var(--slate-100); }
.screen .winbar .dots{ display:flex; gap:5px; } .screen .winbar .dots i{ width:9px; height:9px; border-radius:50%; background:var(--slate-300); } .screen .winbar .url{ font-family:var(--mono); font-size:.7rem; color:var(--slate-500); }
.screen .sbody{ padding:1.15rem 1.25rem; display:grid; gap:.55rem; }
.screen .sb-title{ font-weight:700; color:var(--slate-900); font-size:1rem; display:flex; align-items:center; justify-content:space-between; }
.screen .sb-title .tagm{ font-family:var(--mono); font-size:.7rem; color:var(--slate-400); font-weight:500; }
.line{ display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem; border:1px solid var(--slate-100); border-radius:9px; font-size:.9rem; color:var(--slate-700); }
.line .bx{ width:20px; height:20px; border-radius:6px; display:grid; place-items:center; flex:none; font-size:.74rem; font-weight:800; }
.line .bx.ok{ background:var(--green-50); color:var(--green-600); } .line .bx.empty{ border:1.5px dashed var(--slate-300); }
.line .ph{ margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--slate-500); } .line .gal{ margin-left:auto; font-family:var(--mono); font-size:.76rem; color:var(--petrol-700); font-weight:600; }
.rem{ display:flex; align-items:center; gap:.7rem; padding:.62rem .78rem; border-radius:10px; border:1px solid var(--slate-100); }
.rem .d{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-weight:800; font-size:.9rem; flex:none; }
.rem.green{ background:var(--green-50); border-color:#bfe6cf; } .rem.green .d{ background:#fff; color:var(--green-600); border:1px solid #bfe6cf; }
.rem.amber{ background:var(--amber-50); border-color:#f1d39a; } .rem.amber .d{ background:#fff; color:var(--amber); border:1px solid #f1d39a; font-family:var(--mono); }
.rem .t b{ display:block; font-weight:600; color:var(--slate-800); font-size:.9rem; } .rem .t small{ color:var(--slate-500); font-size:.78rem; }

/* ---- state form explorer (live signature) ---- */
.explorer{ display:grid; grid-template-columns:248px 1fr; gap:0; background:#fff; border:1px solid var(--slate-200); border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden; }
.exp-list{ background:var(--slate-50); border-right:1px solid var(--slate-100); padding:.7rem; display:grid; gap:.3rem; align-content:start; max-height:580px; overflow:auto; }
.exp-btn{ display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; width:100%; text-align:left; cursor:pointer; font:inherit; font-weight:600; color:var(--slate-700); background:#fff; border:1px solid var(--slate-200); border-radius:10px; padding:.6rem .7rem; transition:border-color .15s, background .15s; }
.exp-btn .exp-btn-name{ flex:1 1 auto; min-width:0; line-height:1.3; overflow-wrap:break-word; }
.exp-btn:hover{ border-color:var(--petrol-100); background:var(--petrol-50); }
.exp-btn[aria-selected=true]{ border-color:var(--petrol-700); box-shadow:inset 3px 0 0 var(--petrol-700); color:var(--slate-900); }
.exp-btn .badge{ font-size:.62rem; font-weight:700; padding:.1rem .4rem; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; flex:none; margin-top:.1rem; }
.exp-btn .badge.full{ background:var(--green-50); color:var(--green); border:1px solid #bfe6cf; } .exp-btn .badge.lib{ background:var(--petrol-50); color:var(--petrol-700); border:1px solid var(--petrol-100); }
.exp-panel{ padding:1.6rem 1.8rem; }
.exp-name{ font-family:var(--display); font-weight:800; font-size:1.8rem; color:var(--slate-900); margin:0 0 .6rem; }
.exp-meta{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; }
.exp-meta .m{ font-size:.76rem; font-weight:600; color:var(--slate-600); background:var(--slate-50); border:1px solid var(--slate-200); border-radius:999px; padding:.22rem .6rem; }
.exp-meta .m.full{ color:var(--green); background:var(--green-50); border-color:#bfe6cf; } .exp-meta .m.lib{ color:var(--petrol-700); background:var(--petrol-50); border-color:var(--petrol-100); }
.exp-meta .m.sme{ color:#92600a; background:#fef6e6; border-color:#f3d79a; }
.exp-status{ color:var(--muted); font-size:.96rem; margin-bottom:1rem; }
.exp-sme{ font-size:.86rem; color:#7a5208; background:#fef6e6; border:1px solid #f3d79a; border-radius:.55rem; padding:.6rem .8rem; margin:0 0 1rem; }
.exp-sections{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.4rem; } .exp-sections li{ display:flex; gap:.55rem; font-size:.92rem; color:var(--slate-700); } .exp-sections li .ic{ color:var(--green-600); flex:none; }
.exp-fednote{ font-size:.76rem; color:var(--slate-500); font-style:italic; line-height:1.45; margin:-.45rem 0 1rem; }
.exp-note{ font-size:.78rem; color:var(--slate-500); border-top:1px solid var(--slate-100); padding-top:.7rem; }
.exp-foot{ grid-column:1/-1; font-size:.72rem; color:var(--slate-500); line-height:1.45; padding:.65rem .35rem .15rem; margin-top:.35rem; border-top:1px solid var(--slate-200); }
@media (max-width:760px){ .explorer{ grid-template-columns:1fr; } .exp-list{ border-right:0; border-bottom:1px solid var(--slate-100); grid-auto-flow:row; max-height:280px; overflow-y:auto; overflow-x:hidden; } .exp-btn{ flex-direction:row; align-items:center; gap:.5rem; } .exp-btn .badge{ margin-top:0; } }

/* ---- THE MATH: a station cross-section gauge band (on-identity, not a flat navy box) ---- */
.math{ position:relative; max-width:980px; margin:0 auto; border-radius:24px; padding:3.2rem 3.2rem 2.4rem; color:#fff; overflow:hidden;
  background:
    radial-gradient(680px 300px at 22% 8%, rgba(215,38,61,.16) 0%, transparent 60%),
    radial-gradient(680px 320px at 86% 100%, rgba(70,217,138,.16) 0%, transparent 60%),
    linear-gradient(168deg,#0a2738 0%, #0c3245 46%, #08222f 100%);
  box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:1fr auto 1fr; gap:2.4rem; align-items:stretch; }
/* the band is a cross-section: surface on top (copy), underground below (strata + buried gauges) */
.math::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:46%; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,206,138,.28) 0 2px, transparent 2px),       /* grade line */
    linear-gradient(180deg, rgba(11,27,38,.5) 2px 4px, transparent 4px),
    linear-gradient(180deg, rgba(7,24,33,.42) 0%, rgba(4,16,26,.62) 100%),         /* soil darkening */
    repeating-linear-gradient(90deg, transparent 0 56px, rgba(111,160,182,.06) 56px 57px); }
.math::after{ content:""; position:absolute; right:-50px; bottom:-50px; width:260px; height:150px; z-index:0; pointer-events:none; opacity:.45;
  border-radius:130px / 75px; background:radial-gradient(110px 64px at 40% 36%, rgba(74,163,196,.45), rgba(12,37,49,0) 72%);
  border:2px solid rgba(74,163,196,.24); }
.math > *{ position:relative; z-index:1; }
.math .m-side{ display:flex; flex-direction:column; }
.math .m-side .k{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.5rem; }
.math .m-side .k::before{ content:""; width:8px; height:8px; border-radius:50%; flex:none; }
.math .m-side.bad .k{ color:#f4a8b1; } .math .m-side.bad .k::before{ background:var(--redtag); box-shadow:0 0 0 4px rgba(215,38,61,.22); }
.math .m-side.good .k{ color:#8fe6b6; } .math .m-side.good .k::before{ background:#46d98a; box-shadow:0 0 0 4px rgba(70,217,138,.22); }
.math .m-side .v{ font-family:var(--display); font-weight:800; font-size:2.7rem; line-height:1; margin:.5rem 0 .6rem; }
.math .m-side.bad .v{ color:#ff8a96; } .math .m-side.good .v{ color:#7fe0a6; }
.math .m-side p{ color:rgba(226,238,244,.82); font-size:.94rem; }
.math .m-gauge{ margin-top:auto; padding-top:1.4rem; }
.math .m-gauge svg{ display:block; width:248px; max-width:100%; height:auto; }
.math .vs{ align-self:center; font-family:var(--mono); font-weight:600; letter-spacing:.1em; color:rgba(226,238,244,.55); font-size:.8rem;
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.5rem .2rem; writing-mode:vertical-rl; }
.math .m-src{ grid-column:1/-1; font-family:var(--mono); font-size:.7rem; color:rgba(226,238,244,.55); text-align:center; margin-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.10); padding-top:1rem; }
@media (max-width:680px){ .math{ grid-template-columns:1fr; padding:2.2rem 1.6rem; text-align:center; gap:1.6rem; }
  .math .vs{ writing-mode:horizontal-tb; justify-self:center; padding:.35rem 1rem; }
  .math .m-side .k{ justify-content:center; } .math::after{ display:none; } }

/* ---- BINDER vs TANKBINDER: one cohesive split panel, traffic-light contrast (not two plain cards) ---- */
.versus{ display:grid; grid-template-columns:1fr 1fr; max-width:960px; margin:0 auto; border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow-lg); position:relative; isolation:isolate; }
.versus::before{ content:"vs"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:50px; height:50px; border-radius:50%; background:var(--petrol-800); color:#fff; display:grid; place-items:center;
  font-family:var(--mono); font-weight:600; font-size:.82rem; letter-spacing:.05em; border:3px solid #fff; box-shadow:0 6px 16px -6px rgba(10,34,48,.5); }
.vcol{ padding:2.3rem 2rem; position:relative; }
.vcol h3{ font-size:1.3rem; display:flex; align-items:center; gap:.55rem; font-family:var(--mono); font-weight:600; letter-spacing:.02em; }
.vcol h3 .dot{ width:11px; height:11px; border-radius:50%; flex:none; }
/* LEFT: the back-room binder, desaturated manila, red-tag failings */
.vcol.old{ background:linear-gradient(180deg,#f3efe7 0%, #ece6da 100%); border-right:1px solid rgba(10,34,48,.10); }
.vcol.old h3{ color:var(--slate-700); } .vcol.old h3 .dot{ background:var(--redtag); box-shadow:0 0 0 4px rgba(215,38,61,.16); }
.vcol.old::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--redtag); opacity:.85; }
/* RIGHT: TankBinder, petrol-glow, green-clear wins */
.vcol.new{ background:radial-gradient(420px 240px at 80% 0%, rgba(70,217,138,.14) 0%, transparent 60%), linear-gradient(180deg,#0c3245 0%, #0a2738 100%); color:#dceaef; }
.vcol.new h3{ color:#eaf3f6; } .vcol.new h3 .dot{ background:#46d98a; box-shadow:0 0 0 4px rgba(70,217,138,.2); }
.vcol.new::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:5px; background:#46d98a; opacity:.85; }
.vcol ul{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.85rem; }
.vcol li{ display:flex; align-items:flex-start; gap:.7rem; font-size:.97rem; line-height:1.5; }
.vcol .mk{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.8rem; font-weight:800; margin-top:.05rem; }
.vcol.old li{ color:var(--slate-700); } .vcol.old .mk{ background:var(--redtag-50); color:var(--redtag); border:1px solid rgba(215,38,61,.3); }
.vcol.new li{ color:rgba(220,234,239,.9); } .vcol.new .mk{ background:rgba(70,217,138,.16); color:#7fe0a6; border:1px solid rgba(70,217,138,.4); }
@media (max-width:760px){ .versus{ grid-template-columns:1fr; }
  .vcol.old{ border-right:none; border-bottom:1px solid rgba(10,34,48,.12); }
  .versus::before{ top:auto; left:50%; }
  .vcol.old::after{ width:100%; height:5px; bottom:0; top:auto; } .vcol.new::after{ width:100%; height:5px; top:0; bottom:auto; } }

/* ---- pricing ---- */
.bill-toggle{ display:flex; width:max-content; gap:.25rem; margin:0 auto 2rem; padding:.3rem; border:1px solid var(--slate-200); background:#fff; border-radius:999px; box-shadow:var(--shadow-sm); }
.bill-toggle .bt{ border:0; background:transparent; cursor:pointer; font:inherit; font-weight:600; font-size:.92rem; color:var(--slate-600); padding:.5rem 1.1rem; border-radius:999px; display:inline-flex; align-items:center; gap:.5rem; transition:background .15s,color .15s; }
.bill-toggle .bt.is-active{ background:var(--petrol-800); color:#fff; }
.bill-toggle .save-badge{ font-size:.72rem; font-weight:700; padding:.1rem .45rem; border-radius:999px; background:var(--green-50); color:var(--green); } .bill-toggle .bt.is-active .save-badge{ background:rgba(255,255,255,.22); color:#fff; }
.price-card .price-annual{ display:none; } .price-grid.annual .price-card .price-monthly{ display:none; } .price-grid.annual .price-card .price-annual{ display:inline; }
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; align-items:stretch; max-width:980px; margin:0 auto; background:#fff; border:1px solid var(--slate-200); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md); }
.price-card{ padding:2.1rem 1.7rem; display:flex; flex-direction:column; border-right:1px solid var(--slate-100); position:relative; }
.price-card:last-child{ border-right:0; }
.price-card.rec{ background:linear-gradient(180deg,var(--petrol-50),#fff); }
.price-card .rec-tag{ display:inline-block; width:max-content; background:var(--petrol-800); color:#fff; font-size:.7rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; letter-spacing:.03em; margin-bottom:.6rem; }
.price-card .pname{ font-family:var(--display); font-weight:800; font-size:1.4rem; color:var(--slate-900); }
.price-card .pbest{ font-size:.86rem; color:var(--slate-500); margin-top:.2rem; min-height:2.4em; }
.price-card .pamt{ margin:1rem 0 .2rem; } .price-card .pamt .n{ font-family:var(--display); font-size:2.8rem; font-weight:800; color:var(--slate-900); } .price-card .pamt .per{ color:var(--slate-500); font-weight:500; font-size:.95rem; }
.price-card ul{ list-style:none; padding:0; margin:1.2rem 0; display:grid; gap:.6rem; } .price-card li{ display:flex; gap:.55rem; font-size:.93rem; color:var(--slate-700); } .price-card li .ic{ color:var(--petrol-700); flex:none; margin-top:.15rem; }
.price-card .btn{ width:100%; justify-content:center; margin-top:auto; }
.price-foot{ text-align:center; color:var(--slate-500); font-size:.94rem; margin-top:1.6rem; } .price-foot b{ color:var(--slate-800); }
@media (max-width:820px){ .price-grid{ grid-template-columns:1fr; } .price-card{ border-right:0; border-bottom:1px solid var(--slate-100); } }

/* ---- why: integrated 2-col list ---- */
.why-list{ max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2.4rem; }
.why-row{ display:flex; gap:.9rem; } .why-row .check{ width:30px; height:30px; border-radius:9px; background:var(--green-50); color:var(--green-600); display:grid; place-items:center; flex:none; font-weight:800; border:1px solid #bfe6cf; }
.why-row h3{ font-size:1.16rem; } .why-row p{ color:var(--muted); margin-top:.25rem; font-size:.96rem; }
@media (max-width:720px){ .why-list{ grid-template-columns:1fr; } }

/* ---- CTA: photographic band (replaces ugly flat navy) ---- */
.cta-photo{ position:relative; color:#fff; isolation:isolate; overflow:hidden; }
.cta-photo::before{ content:""; position:absolute; inset:0; z-index:-2; background:#0a2230 url("assets/photos/station-dusk.jpg?v=5") center 60%/cover no-repeat; }
.cta-photo::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(8,26,38,.92), rgba(15,46,64,.78) 60%, rgba(176,29,49,.45)); }
.cta-photo .pilot-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.cta-photo .pilot-grid h2{ color:#fff; font-size:clamp(2rem,3.6vw,2.7rem); }
.cta-photo .pilot-grid .lead{ color:rgba(255,255,255,.85); margin-top:.9rem; font-size:1.1rem; }
.cta-photo ul{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.7rem; } .cta-photo ul li{ display:flex; gap:.6rem; color:rgba(255,255,255,.92); } .cta-photo ul li .tick{ color:#7fe0a6; font-weight:800; flex:none; }
.lead-form{ background:#fff; color:var(--ink); border-radius:18px; padding:1.9rem; box-shadow:var(--shadow-lg); }
.lead-form h3{ font-size:1.45rem; } .lead-form .form-sub{ color:var(--muted); font-size:.94rem; margin:.4rem 0 1.2rem; }
.field{ margin-bottom:.85rem; } .field label{ display:block; font-size:.84rem; font-weight:600; color:var(--slate-700); margin-bottom:.3rem; }
.field input,.field select{ width:100%; font:inherit; font-size:.96rem; padding:.64rem .78rem; border:1px solid var(--slate-200); border-radius:10px; background:#fff; color:var(--ink); }
.field input:focus,.field select:focus{ outline:none; border-color:var(--petrol-700); box-shadow:0 0 0 3px var(--petrol-50); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.lead-form .btn{ width:100%; justify-content:center; margin-top:.4rem; }
.form-note{ font-size:.78rem; color:var(--slate-500); margin-top:.7rem; text-align:center; }
.form-success{ display:none; margin-top:1rem; padding:.85rem 1rem; border-radius:10px; background:var(--green-50); border:1px solid #bfe6cf; color:var(--green); font-size:.92rem; } .form-success.show{ display:block; }
@media (max-width:820px){ .cta-photo .pilot-grid{ grid-template-columns:1fr; gap:30px; } }

/* ---- FAQ ---- */
.faq{ max-width:760px; margin:0 auto; }
.faq details{ border-bottom:1px solid var(--slate-200); padding:1.1rem 0; }
.faq summary{ font-weight:700; font-size:1.05rem; color:var(--slate-900); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; } .faq summary .ico{ color:var(--petrol-700); font-size:1.4rem; line-height:1; transition:transform .2s; flex:none; }
.faq details[open] summary .ico{ transform:rotate(45deg); } .faq details p{ color:var(--muted); margin-top:.7rem; font-size:1rem; }

/* ---- footer ---- */
footer{ border-top:1px solid var(--slate-100); padding:50px 0 38px; color:var(--slate-500); font-size:.92rem; background:rgba(255,255,255,.5); }
.footer-honesty{ max-width:760px; margin:0 auto 2rem; text-align:center; color:var(--slate-600); font-size:.9rem; background:var(--slate-50); border:1px solid var(--slate-200); border-radius:12px; padding:1rem 1.2rem; }
.foot-grid{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.foot-grid .col h4{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-400); margin:0 0 .8rem; font-weight:600; }
.foot-grid .col a{ display:block; color:var(--slate-600); padding:.2rem 0; } .foot-grid .col a:hover{ color:var(--petrol-700); }
.foot-bottom{ margin-top:38px; padding-top:22px; border-top:1px solid var(--slate-100); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }
.foot-legal a{ color:var(--slate-600); } .foot-legal a:hover{ color:var(--petrol-700); }

.ic{ width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:-.18em; flex:none; }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .65s cubic-bezier(.2,.8,.25,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1!important; transform:none!important; transition:none!important; } html{ scroll-behavior:auto; } }
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{ outline:3px solid var(--petrol-600); outline-offset:2px; border-radius:8px; }
.hero a:focus-visible{ outline-color:#fff; }

/* ---- COMPLIANCE CALENDAR BUILDER (interactive) ---- */
.calc{ display:grid; grid-template-columns:352px 1fr; gap:28px; max-width:1060px; margin:0 auto; align-items:start; }
.calc-form{ background:#fff; border:1px solid var(--slate-200); border-radius:18px; box-shadow:var(--shadow-lg); padding:1.6rem 1.5rem; position:sticky; top:84px; }
.calc-field{ margin-bottom:.95rem; }
.calc-field label{ display:block; font-size:.8rem; font-weight:600; color:var(--slate-700); margin-bottom:.32rem; }
.calc-field select, .calc-field input{ width:100%; font:inherit; font-size:.96rem; padding:.62rem .72rem; border:1px solid var(--slate-200); border-radius:10px; background:#fff; color:var(--ink); }
.calc-field select:focus, .calc-field input:focus{ outline:none; border-color:var(--petrol-700); box-shadow:0 0 0 3px var(--petrol-50); }
.calc-row2{ display:grid; grid-template-columns:1fr 1.2fr; gap:.7rem; }
.calc-check{ display:flex; align-items:flex-start; gap:.55rem; font-size:.88rem; color:var(--slate-700); margin:.5rem 0; cursor:pointer; line-height:1.4; }
.calc-check input{ width:17px; height:17px; margin-top:.12rem; flex:none; accent-color:var(--petrol-700); cursor:pointer; }
.calc-formnote{ font-size:.74rem; color:var(--slate-500); margin-top:1rem; line-height:1.5; border-top:1px solid var(--slate-100); padding-top:.8rem; }

.calc-out{ display:grid; gap:1rem; align-content:start; }
/* the next-due "field readout" hero, color-coded by urgency */
.calc-next{ position:relative; border-radius:16px; padding:1.4rem 1.5rem; color:#fff; overflow:hidden;
  background:linear-gradient(150deg,#0a2738 0%, #0c3245 60%, #08222f 100%); box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.06); }
.calc-next .cn-k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.5rem; color:rgba(226,238,244,.7); }
.calc-next .cn-k::before{ content:""; width:9px; height:9px; border-radius:50%; flex:none; background:#7fe0a6; box-shadow:0 0 0 4px rgba(70,217,138,.18); }
.calc-next .cn-v{ font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.02; margin:.5rem 0 .35rem; color:#fff; }
.calc-next .cn-sub{ color:rgba(226,238,244,.84); font-size:.95rem; }
.calc-next .cn-sub b{ color:#fff; }
.calc-next.is-red{ background:linear-gradient(150deg,#3a0f17 0%, #5c1622 55%, #2a0a10 100%); }
.calc-next.is-red .cn-k{ color:#f4a8b1; } .calc-next.is-red .cn-k::before{ background:var(--redtag); box-shadow:0 0 0 4px rgba(215,38,61,.25); }
.calc-next.is-amber{ background:radial-gradient(540px 320px at 80% -14%, rgba(224,144,42,.52) 0%, rgba(224,144,42,.12) 44%, rgba(224,144,42,0) 70%), linear-gradient(150deg,#11222c 0%, #15262e 58%, #0c1b22 100%); }
.calc-next.is-amber .cn-k{ color:#ffd39a; } .calc-next.is-amber .cn-k::before{ background:var(--amber); box-shadow:0 0 0 4px rgba(224,144,42,.25); }
/* citation line inside the next box (changes with the selected state) */
.calc-next .cn-cite{ margin-top:.85rem; padding-top:.7rem; border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.01em; color:rgba(226,238,244,.82); }
.calc-next .cn-cite .cn-sep{ color:rgba(226,238,244,.42); padding:0 .15rem; }

/* SME hedge line (state sub-fact not yet expert-verified) */
.calc-sme{ font-size:.84rem; color:#7a5208; background:#fef6e6; border:1px solid #f3d79a;
  border-radius:.6rem; padding:.6rem .8rem; margin:0; line-height:1.45; }

/* ---- the compliance-year card: title + live count + the 12-month visual timeline + stakes ---- */
.calc-yearcard{ background:#fff; border:1px solid var(--slate-200); border-radius:18px; box-shadow:var(--shadow-md);
  padding:1.3rem 1.4rem 1.15rem; }
.calc-yearhead{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-bottom:1rem; }
.calc-yeartitle{ font-family:var(--display); font-weight:800; font-size:1.18rem; letter-spacing:.01em;
  color:var(--slate-900); margin:0; text-transform:uppercase; }
.calc-count{ flex:none; font-family:var(--mono); font-size:.82rem; font-weight:700; color:var(--petrol-800);
  background:var(--petrol-50); border:1px solid var(--petrol-100); border-radius:999px; padding:.3rem .75rem; white-space:nowrap; }

/* the grid: a fixed label column + 12 equal month tracks */
.cg{ display:grid; gap:.5rem; }
.cg-row{ display:grid; grid-template-columns:118px 1fr; align-items:center; gap:.6rem; }
.cg-head{ margin-bottom:.1rem; }
.cg-head .cg-track{ border-bottom:1px solid var(--slate-100); padding-bottom:.4rem; }
.cg-m{ font-family:var(--mono); font-size:.66rem; font-weight:600; color:var(--slate-500); text-align:center; letter-spacing:.01em; }
.cg-track{ display:grid; grid-template-columns:repeat(12,1fr); align-items:center; }
.cg-cell{ height:24px; display:grid; place-items:center; position:relative; }
.cg-cell + .cg-cell{ } /* equal cells */
.cg-row:not(.cg-head) .cg-track{ background:
  repeating-linear-gradient(90deg, transparent 0, transparent calc(100%/12 - 1px), var(--slate-100) calc(100%/12 - 1px), var(--slate-100) calc(100%/12));
  border-radius:8px; }
.cg-label{ display:flex; flex-direction:column; line-height:1.1; }
.cg-label .cg-name{ font-size:.84rem; font-weight:700; color:var(--slate-800); }
.cg-label small{ font-size:.66rem; color:var(--slate-500); font-weight:600; }
.cg-label .cg-mk{ display:none; }

/* markers — three distinct shapes/hues, one per obligation type */
.mk{ position:relative; display:inline-grid; place-items:center; }
.mk-dot{ width:13px; height:13px; border-radius:50%; background:var(--petrol-600); box-shadow:0 0 0 4px rgba(27,106,134,.12); }
.mk-tri{ width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:14px solid var(--amber);
  filter:drop-shadow(0 1px 1px rgba(224,144,42,.35)); }
.mk-dia{ width:12px; height:12px; background:var(--green-600); transform:rotate(45deg); border-radius:2px; box-shadow:0 0 0 4px rgba(21,146,79,.12); }
.mk-x{ position:absolute; top:-7px; right:-9px; font-family:var(--mono); font-size:.58rem; font-weight:700; color:#fff;
  background:var(--petrol-700); border-radius:999px; padding:0 .26rem; line-height:1.35; }

.tl-legend{ font-size:.74rem; color:var(--slate-500); margin:.85rem 0 0; }
.calc-stakes{ font-size:.96rem; line-height:1.5; color:var(--slate-800); font-weight:600; margin:.95rem 0 0;
  padding-top:.85rem; border-top:1px solid var(--slate-100); }

/* the mobile agenda (hidden on desktop, shown when the grid would get too tight) */
.calc-agenda{ display:none; list-style:none; padding:0; margin:.2rem 0 0; }
.ag-item{ display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--slate-100); }
.ag-item:last-child{ border-bottom:0; }
.ag-mk{ flex:none; }
.ag-mk.mk-tri{ margin:0 2px; } .ag-mk.mk-dia{ margin:0 1px; }
.ag-body{ display:flex; flex-direction:column; line-height:1.25; }
.ag-name{ font-size:.92rem; font-weight:700; color:var(--slate-800); }
.ag-when{ font-family:var(--mono); font-size:.74rem; color:var(--slate-600); }

/* the column of non-monthly deadline cards (between the year timeline and the Coming-up box) */
.cd-head{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--petrol-800); margin:0 0 .7rem; }
.cd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.cd-card{ background:#fff; border:1px solid var(--slate-200); border-left:4px solid var(--petrol-700); border-radius:14px; padding:.9rem 1rem; box-shadow:var(--shadow-sm); }
.cd-card.is-tri{ border-left-color:var(--amber); }
.cd-when{ font-family:var(--mono); font-size:.82rem; font-weight:700; color:var(--petrol-800); margin-bottom:.28rem; }
.cd-card.is-tri .cd-when{ color:#92600a; }
.cd-name{ font-weight:800; font-size:1.02rem; line-height:1.18; color:var(--slate-900); margin-bottom:.22rem; }
.cd-meta{ font-size:.85rem; line-height:1.45; color:var(--slate-600); margin-bottom:.65rem; }
.cd-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; border-top:1px solid var(--slate-100); padding-top:.55rem; }
.cd-cad{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--petrol-700); background:var(--petrol-50); border:1px solid var(--petrol-100); border-radius:999px; padding:.16rem .5rem; }
.cd-card.is-tri .cd-cad{ color:#92600a; background:var(--amber-50); border-color:#f3d79a; }
.cd-cite{ font-family:var(--mono); font-size:.72rem; color:var(--slate-500); }

.calc-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.2rem; }
.calc-actions .btn{ flex:1 1 200px; justify-content:center; text-align:center; }

@media (max-width:900px){
  .calc{ grid-template-columns:1fr; }
  .calc-form{ position:static; }
}
/* narrow: drop the 12-column grid, show the clean vertical agenda instead (never overflow) */
@media (max-width:560px){
  .cg{ display:none; }
  .calc-agenda{ display:block; }
  .calc-yearhead{ margin-bottom:.4rem; }
  .calc-yeartitle{ font-size:1.05rem; }
  .cg-label .cg-mk, .ag-mk{ display:inline-grid; }
  .cd-grid{ grid-template-columns:1fr; }
}

/* ---- state subpages (doc) ---- */
.doc{ max-width:820px; margin:0 auto; padding:44px 0 20px; }
.doc h1{ font-family:var(--display); font-size:2.4rem; font-weight:800; color:var(--slate-900); margin-bottom:.4rem; }
.doc .eff{ color:var(--slate-500); font-family:var(--mono); font-size:.82rem; }
.doc section{ margin-bottom:1.6rem; } .doc h2{ font-size:1.3rem; font-weight:700; color:var(--slate-900); margin:0 0 .6rem; }
.doc p{ color:var(--slate-700); line-height:1.7; margin:0 0 .7rem; } .doc ul{ color:var(--slate-700); line-height:1.7; padding-left:1.3rem; display:grid; gap:.35rem; margin:0 0 .7rem; }

/* ---- interior content pages (Contact / About / Privacy / Terms / 404) ---- */
.page-masthead{ position:relative; isolation:isolate; overflow:hidden; color:#fff;
  background:linear-gradient(135deg,#0a2230 0%, #103a52 52%, #134b63 100%); padding:74px 0 62px; }
.page-masthead::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:radial-gradient(680px 360px at 86% 8%, rgba(86,158,232,.35), transparent 70%),
             radial-gradient(560px 320px at 8% 96%, rgba(224,144,42,.28), transparent 72%); }
.page-masthead .kicker{ font-family:var(--mono); font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#ffd39a; display:inline-flex; align-items:center; gap:.55rem; }
.page-masthead .kicker::before{ content:""; width:26px; height:2px; background:var(--amber); display:inline-block; }
.page-masthead h1{ color:#fff; font-size:clamp(2.2rem,4.6vw,3.2rem); line-height:1.04; margin:1rem 0 0; text-shadow:0 2px 26px rgba(0,0,0,.35); }
.page-masthead .lead{ color:rgba(255,255,255,.86); font-size:1.16rem; margin-top:1rem; max-width:54ch; }
.page-masthead .crumb{ font-size:.86rem; color:rgba(255,255,255,.62); margin-bottom:.2rem; }
.page-masthead .crumb a{ color:rgba(255,255,255,.82); text-decoration:underline; text-underline-offset:2px; }

.draft-banner{ display:flex; gap:.7rem; align-items:flex-start; max-width:820px; margin:0 auto 1.6rem;
  background:#fef6e6; border:1px solid #f3d79a; color:#7a5208; border-radius:.7rem; padding:.85rem 1.1rem; font-size:.92rem; line-height:1.5; }
.draft-banner .bt{ font-weight:800; color:#92600a; flex:none; }

.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; max-width:980px; margin:0 auto; align-items:start; }
.contact-card{ background:#fff; border:1px solid var(--slate-200); border-radius:16px; padding:1.6rem 1.7rem; box-shadow:var(--shadow-md); }
.contact-card h2{ font-size:1.3rem; margin:0 0 .4rem; } .contact-card p{ color:var(--slate-700); line-height:1.65; margin:0 0 .8rem; }
.contact-rows{ list-style:none; padding:0; margin:.4rem 0 0; display:grid; gap:.7rem; }
.contact-rows li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--slate-700); }
.contact-rows li .ic{ color:var(--petrol-600); flex:none; margin-top:.15rem; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:28px; } }

.notfound{ text-align:center; max-width:640px; margin:0 auto; padding:18px 0 8px; }
.notfound .code{ font-family:var(--display); font-weight:800; font-size:clamp(4rem,12vw,7rem); line-height:1; color:var(--petrol-700); letter-spacing:-.02em; }
.notfound .links{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; }