/* ═══════════════════════════════════════════════════════════════
   Petro AI — the marketing site, in the dark

   product.html, pricing.html and login.html were built white, on a blue
   accent, with a serif display face. The homepage was rebuilt black on
   the brand palette. Two sites, one product.

   This is the same manoeuvre petro-brand.css performs on the dashboard,
   run in the opposite direction: loaded LAST so its :root beats
   petro.css's, which turns the ground over without touching a single
   line of markup on three pages. What follows the tokens is only the
   handful of rules that had a light ground written into them rather
   than read from a variable — a white card fill, a black-on-white
   button, a shadow tuned for paper.

   The palette is the guidelines' own, and the names are kept pointing
   at what they mean: --ink is still the strongest text, --bg is still
   the ground. Only their values change sides.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── the ground, inverted ── */
  --bg:#020607;            /* the page */
  --soft:#070E12;          /* a tinted section */
  --soft-2:#0C161C;        /* a card lifted off it */

  /* ── type ── */
  --ink:#F7F8FA;           /* headlines: soft white, not pure */
  --ink-2:#9CA8B4;         /* the second line of a two-tone heading */
  --body:#B9C4CE;          /* body copy, comfortably above 7:1 on the ground */
  --muted:#8493A0;

  /* ── the accent ──
     Was a blue borrowed from nothing in particular. Petrol teal is the
     brand's action colour, and pointing these three at it turns every
     button, link and focus ring over in one place. */
  --blue:#009688;
  --blue-lt:#19B8A8;
  --blue-dk:#00786D;

  /* ── lines ──
     On a dark ground a border is light at low opacity, never a lighter
     grey: a solid grey hairline reads as a scratch. */
  --line:rgba(229,231,235,.13);
  --line-2:rgba(229,231,235,.22);

  /* ── depth ──
     Shadows on black cannot be black. Depth comes from a lit edge above
     and a deeper black below. */
  --shadow-sm:0 1px 2px rgba(0,0,0,.6);
  --shadow-md:0 2px 8px rgba(0,0,0,.55), 0 18px 40px -18px rgba(0,0,0,.85);
  --shadow-lg:0 6px 18px rgba(0,0,0,.6), 0 40px 90px -30px rgba(0,0,0,.95);
  --shadow-blue:0 10px 30px -10px rgba(0,150,136,.55), inset 0 1px 0 rgba(255,255,255,.14);
}

html{ background:var(--bg); color-scheme:dark; }
body{ background:var(--bg); color:var(--body); }

/* ── Inter everywhere ──
   The display face on these pages was a serif, which belongs to a
   different product. The guidelines name one family. */
body, h1, h2, h3, h4, .hero h1, .cmp, .amt,
.serif, h1.serif, h2.serif, h3.serif{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* .serif also carried weight 400, which is a display serif's normal and a
   sans-serif's whisper. At these sizes Inter needs its own weight. */
.serif{ font-weight:700; letter-spacing:-.03em; }
.serif .dim, .hero .serif .dim{ color:var(--ink-2); font-weight:600; }
h1, h2, h3, h4{ color:var(--ink); letter-spacing:-.025em; }

/* ── the fills that were written white ── */
.card, .card-soft, .auth-card, .drawer, .cmp, .field, .fr-media, .faq, .plan{
  background:var(--soft-2);
  border-color:var(--line);
  color:var(--body);
}
.card-soft{ background:var(--soft); }

/* ── header and footer ──
   petro.js stamps data-stuck on the header past 8px of scroll, and
   petro.css answers that with a near-opaque WHITE. Overriding only the
   resting state left the bar turning white the moment anyone scrolled,
   which on a black page is a torch across the top of the screen. Both
   states belong here. */
.hdr{
  background:rgba(2,6,7,.72);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(18px);
}
.hdr[data-stuck="true"]{
  background:rgba(2,6,7,.94);
  border-bottom-color:var(--line);
}
.ftr{ background:var(--soft); border-top:1px solid var(--line); color:var(--muted); }
.ftr-bot{ border-top-color:var(--line); }

/* ── buttons ──
   .btn was navy-on-white or white-on-blue depending on the page. One
   primary: teal with white on it, exactly as the dashboard's is. */
.btn{ color:#fff; }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line-2);
  box-shadow:none;
}
.btn-ghost:hover{ background:rgba(229,231,235,.07); border-color:var(--line-2); }

/* ── form fields ──
   A white input on a black page is a torch. These take the card fill and
   light up on focus instead. */
input, select, textarea{
  background:var(--soft-2);
  color:var(--ink);
  border:1px solid var(--line-2);
}
input::placeholder, textarea::placeholder{ color:var(--muted); }
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--blue-lt);
  box-shadow:0 0 0 3px rgba(0,150,136,.22);
}

/* ── the pastel blobs ──
   Three soft colour washes painted behind the hero. On white they read
   as light through frosted glass; on black they read as smears. Replaced
   with one teal bloom, which is the only glow the brand has. */
.blob, .blob-b, .blob-c{ display:none; }
.hero{
  position:relative;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0,150,136,.16) 0%, transparent 60%),
    var(--bg);
}

/* ── tables and rules ── */
table{ color:var(--body); }
th{ color:var(--ink); }
td, th{ border-color:var(--line); }
hr{ border-color:var(--line); }

/* ── the eyebrow ── */
.eyebrow{ color:var(--blue-lt); }

/* ── alerts keep their meaning, on a ground that suits them ── */
.alert-ok{ background:rgba(0,150,136,.10); border-color:rgba(0,150,136,.34); color:#8FE3D8; }
.alert-bad{ background:rgba(214,69,69,.10); border-color:rgba(214,69,69,.34); color:#FFB4B4; }

/* ── the sign-in page ──
   Its right-hand column was a pale panel carrying a quotation. On black
   it becomes the darker half, so the form is the lit thing on the page
   and the eye goes to it. */
.auth-side{ background:var(--soft); border-left:1px solid var(--line); }
.auth-quote{ color:var(--ink-2); }
.auth-stats strong{ color:var(--ink); }

/* ── selection, scrollbar, the small surfaces nobody lists ── */
::selection{ background:rgba(0,150,136,.34); color:#fff; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#16242C; border:3px solid var(--bg); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:#1E323C; }

/* ── a screenshot of the dashboard, which is white ──
   The product is a light interface and these pages are dark, so a raw
   screenshot floats on the page like a hole cut in it. A frame, a rim of
   light and a deep shadow make it read as a screen being shown rather
   than as a mistake. It is never cropped or reshaped: the picture is the
   evidence, and evidence is not restyled. */
.shot-frame{
  position:relative;
  margin:0;
  padding:8px;
  border-radius:16px;
  background:linear-gradient(180deg,#16242C,#0B1319);
  border:1px solid var(--line-2);
  box-shadow:0 0 0 1px rgba(0,0,0,.8), 0 30px 70px -24px rgba(0,0,0,.95);
}
.shot-frame img{
  display:block; width:100%; height:auto;
  border-radius:9px;
}
.shot-frame figcaption{
  display:flex; align-items:center; gap:9px;
  padding:12px 4px 2px;
  color:var(--muted); font-size:12px;
}
.shot-frame figcaption i{
  width:7px; height:7px; border-radius:50%;
  background:var(--blue-lt); flex:none;
}


/* ═══════════════ the pieces that named #fff outright ═══════════════
   These could not be reached by re-pointing a token, because they were
   written as a literal white rather than as a variable. On a black page
   each one was a torch: a white input, a white selected tab with white
   text on it, a white plan card. */

/* A form field. The fill is the card surface and the focus ring is teal,
   which is the same pairing the dashboard uses. */
.field input, .field select, .field textarea{
  background:var(--soft-2);
  color:var(--ink);
  border:1px solid var(--line-2);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.field input:hover, .field select:hover{ border-color:var(--line-2); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:0;
  border-color:var(--blue-lt);
  box-shadow:0 0 0 4px rgba(0,150,136,.20);
}

/* A segmented control. On white the chosen one was lifted by being whiter
   than its track; on black it is lifted by being lighter than it, which is
   the same idea and the opposite value. White-on-white made the selected
   tab's label vanish entirely. */
.tabs button[aria-selected="true"],
.toggle button[aria-pressed="true"]{
  background:rgba(229,231,235,.12);
  color:var(--ink);
  box-shadow:none;
}
.tabs, .toggle{ background:var(--soft); border-color:var(--line); }

/* The testimonial on the sign-in page was set in the display serif. */
.auth-quote p{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:600;
  letter-spacing:-.02em;
}
.auth-quote cite{ color:var(--muted); }

/* The three figures beside the sign-in form were the last of the serif. */
.auth-stats b{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:700; letter-spacing:-.03em; color:var(--ink);
}
.auth-stats span{ color:var(--muted); }

/* The price itself. Written as .price .amt, which outranks the plain .amt in
   the family rule above, so it kept the serif while everything around it had
   changed. Specificity, not intent. */
.price .amt{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:700; letter-spacing:-.035em; color:var(--ink);
}

/* ── the mark ──
   product, pricing and login carried a bare droplet with an inner droplet
   filled #0A63F8 — a blue from the old palette that appears nowhere in the
   guidelines. They now use the same mark the homepage does: the droplet on
   its own tile, which is what the guidelines call the Icon Mark.

   nova-home.css styles this for the homepage, and these three pages do not
   load that file, so the rule is repeated here rather than shared. Repeating
   six lines is better than making three pages download a stylesheet written
   for a fourth. */
.logo{ display:inline-flex; align-items:center; gap:11px; }
.logo-mark{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border-radius:10px;
  background:var(--ink);        /* soft white on this dark ground */
  color:#0D1B2A;                /* the droplet: Deep Navy, always */
  box-shadow:0 0 0 1px rgba(255,255,255,.1);
}
.logo-mark svg{ width:23px; height:23px; display:block; }
.logo-mark path{ fill:currentColor; }
.logo b{ color:var(--blue-lt); font-weight:700; }
.ftr .logo-mark{ background:var(--ink); color:#0D1B2A; }

/* ── a row that lost its picture ──
   .frow is a two-column grid: copy on one side, a screenshot on the other.
   Four of those screenshots were captures of the dashboard BEFORE it was
   turned white — a dark interface that no longer exists, sitting beside
   copy describing the one that does. A screenshot that is no longer true
   is worse than no screenshot, so they were removed.

   That leaves the copy alone in a two-column grid, holding an empty column
   half the width of the page. A row with nothing to show beside it should
   simply be a paragraph: full width, at a measure that can be read. */
.frow > .fr-body:only-child{
  grid-column:1 / -1;
  max-width:70ch;
}

/* The line under the price. It carries the two facts a dealer needs before
   deciding — that GST is already in the number, and what a year saves —
   and it is written by the cycle toggle, so it can never disagree with the
   figure above it. */
.plan-note{
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px; line-height:1.5;
}

/* A plan card. The featured one is lifted by a teal edge rather than by a
   white fill, which is what it had on the old light page and which on black
   would be a slab of glare in the middle of the page. */
.plan{ border:1px solid var(--line); }
.plan-feat{
  border-color:rgba(0,150,136,.45);
  box-shadow:0 0 0 1px rgba(0,150,136,.18), var(--shadow-lg);
}
.plan-tag{
  background:var(--blue); color:#fff;
  font-weight:700; letter-spacing:.02em;
}
.plan h3{ color:var(--ink); }
.plan-desc, .plan .per{ color:var(--muted); }
.plan .amt, .plan .cur{ color:var(--ink); }
.plan ul li{ color:var(--body); }
.plan ul li svg{ color:var(--blue-lt); }