/* EasyJobSite marketing site — one stylesheet, no framework, no build step, no external requests.
   Everything visual is here: the palette and the type scale live in :root, and every effect below is plain CSS
   (gradients, masks, shadows, transitions). No web font is loaded — the Content-Security-Policy on this site
   allows same-origin only, and a font request would be the one thing on the page that leaves the server. The
   distinctive look comes from a tight system stack, a monospace accent for labels, and the blueprint motif. */

:root {
  /* --- blues: the structural colour, dark to light --- */
  --navy-950:    #061220;
  --navy-900:    #0a1b2c;
  --navy:        #0f2a3f;
  --navy-700:    #16405e;
  --navy-600:    #1d5580;
  --navy-500:    #2d6288;
  --blue-500:    #2f80ed;
  --blue-400:    #4f9dff;
  --blue-300:    #8cc0ff;

  /* --- amber: the accent, used sparingly so it still means something --- */
  --amber:       #f5a524;
  --amber-400:   #ffbe4d;
  --amber-700:   #9a6206;   /* darkened from #b5760a: as 12px uppercase label text it has to clear 4.5:1 */

  --ink:         #0c1219;
  --body:        #3f4b5a;
  --muted:       #5d6b7f;   /* was #64748b: at 20px the ledes sat at 4.4:1 on the tinted sections */
  --line:        #dde6ef;
  --line-soft:   #edf2f7;
  --bg:          #ffffff;
  --bg-alt:      #f2f7fc;
  --bg-deep:     #061220;
  --green:       #12855a;
  --mint:        #34d399;

  /* --- on dark --- */
  --on-dark:      #b3cadd;
  --on-dark-soft: #8aa6bd;

  /* Two brand gradients, on purpose. Blue and amber sit on opposite sides of the colour wheel, so a straight
     sRGB blend between them passes through grey — fine across a 3px rule, muddy across a word or a price.
     --grad-brand is therefore blue only and is what text ever uses; --grad-edge carries the amber and is only
     ever put on lines and borders. (An `in oklab` gradient would fix the blend, but a browser that does not
     understand it drops the declaration, and transparent text with no background is invisible text.) */
  --grad-brand:  linear-gradient(100deg, var(--blue-300) 0%, var(--blue-400) 45%, var(--blue-500) 100%);
  --grad-edge:   linear-gradient(115deg, var(--blue-400) 0%, var(--blue-500) 45%, #c98a2a 76%, var(--amber) 100%);
  --grad-amber:  linear-gradient(135deg, #ffc756 0%, var(--amber) 52%, #e2900f 100%);
  --grad-navy:   linear-gradient(135deg, var(--navy-700) 0%, var(--navy) 100%);

  --radius:      16px;
  --radius-sm:   10px;
  --radius-lg:   22px;

  --shadow-sm:   0 1px 2px rgba(6, 18, 32, .05), 0 3px 10px -4px rgba(6, 18, 32, .08);
  --shadow:      0 1px 2px rgba(6, 18, 32, .06), 0 10px 28px -10px rgba(6, 18, 32, .16);
  --shadow-lift: 0 2px 4px rgba(6, 18, 32, .05), 0 22px 48px -18px rgba(6, 18, 32, .30);
  --shadow-glow: 0 18px 44px -16px rgba(47, 128, 237, .45);

  --wrap:        1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* The blueprint grid, reused by the hero, the dark bands and the page heads. */
  --blueprint:
    linear-gradient(rgba(140, 192, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 192, 255, .09) 1px, transparent 1px);
  --blueprint-size: 58px 58px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.025em; font-weight: 800; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); letter-spacing: -.038em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); letter-spacing: -.03em; }
h3 { font-size: 1.16rem; letter-spacing: -.015em; font-weight: 700; }
p  { margin: 0 0 1em; }
a  { color: var(--navy-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-500); }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong { color: var(--ink); font-weight: 650; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 5px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.section { padding: clamp(3.4rem, 7vw, 6rem) 0; position: relative; }
.section[id], [id] { scroll-margin-top: 92px; }    /* clears the sticky header */
.section--tight { padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.center { text-align: center; }
.lede { font-size: clamp(1.06rem, 1.6vw, 1.24rem); color: var(--muted); max-width: 62ch; line-height: 1.6; }
.center .lede { margin-left: auto; margin-right: auto; }

/* Monospace, uppercase, with a short rule in front: the one "technical" tic on the page, used for every
   section label so the eye learns it. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber-700); margin-bottom: .9rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, var(--amber), rgba(245, 165, 36, .2));
}
.section-head { max-width: 64ch; margin-bottom: 2.8rem; }
.section-head.center { margin-left: auto; margin-right: auto; }

/* Light sections that need separating from the plain white ones: a soft vertical wash plus a faint dot grid. */
.section--alt {
  background-color: var(--bg-alt);
  background-image:
    radial-gradient(rgba(15, 42, 63, .055) 1px, transparent 1px),
    linear-gradient(180deg, #f9fbfe 0%, #eaf2fa 100%);
  background-size: 24px 24px, 100% 100%;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* ---------- the dark bands: hero, page heads, deep sections, call to action ---------- */
/* All four share one recipe: near-black navy, a blueprint grid faded out at the edges, and two soft colour
   washes (blue and amber) sitting behind the content. */
.hero, .page-head, .section--deep, .cta-band, .section--hero-foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--navy-950);
  color: var(--on-dark);
}
.hero::before, .page-head::before, .section--deep::before, .cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--blueprint);
  background-size: var(--blueprint-size);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 35%, transparent 100%);
}
.hero::after, .page-head::after, .section--deep::after, .cta-band::after {
  content: ""; position: absolute; inset: -30% -15% -30% -15%; z-index: -1;
  background-image:
    radial-gradient(38% 52% at 16% 22%, rgba(47, 128, 237, .38), transparent 70%),
    radial-gradient(34% 46% at 84% 14%, rgba(245, 165, 36, .18), transparent 70%);
}
.hero h1, .hero h2, .hero h3,
.page-head h1, .page-head h2, .page-head h3,
.section--deep h2, .section--deep h3,
.cta-band h1, .cta-band h2, .cta-band h3 { color: #fff; }
.hero .lede, .page-head .lede, .section--deep .lede, .cta-band .lede,
.cta-band p, .section--deep p { color: var(--on-dark); }
.hero .eyebrow, .page-head .eyebrow, .section--deep .eyebrow, .cta-band .eyebrow { color: var(--amber-400); }
/* :not(.btn) matters — a bare ".hero a" outranks ".btn-primary" on specificity and would repaint the
   call-to-action's dark label in link blue. */
.hero a:not(.btn), .page-head a:not(.btn), .section--deep a:not(.btn), .cta-band a:not(.btn) { color: var(--blue-300); }
.hero a:not(.btn):hover, .page-head a:not(.btn):hover, .section--deep a:not(.btn):hover, .cta-band a:not(.btn):hover { color: #fff; }
.hero .btn-note, .page-head .btn-note { color: var(--on-dark-soft); }

/* A hairline of brand colour where a dark band meets the light page below it. */
.hero, .page-head, .cta-band { border-bottom: 1px solid rgba(140, 192, 255, .14); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 18, 32, .88);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(140, 192, 255, .13);
}
.header-wrap { display: flex; align-items: center; gap: 1rem; min-height: 68px; }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 800; color: #fff; font-size: 1.14rem; letter-spacing: -.03em; margin-right: auto; }
.brand:hover { color: #fff; }
.brand-mark { width: 32px; height: 32px; flex: none; filter: drop-shadow(0 4px 10px rgba(47, 128, 237, .45)); }
.brand-word { white-space: nowrap; }
.brand em { font-style: normal; color: var(--amber); }

.nav-toggle {
  display: none; align-items: center; justify-content: center; gap: .45rem;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(140, 192, 255, .26); border-radius: var(--radius-sm);
  padding: .5rem .7rem; font: inherit; font-size: .92rem; font-weight: 600; color: #fff; cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }

.site-nav { display: flex; align-items: center; gap: .2rem; }

/* Plain text links only. Every rule here says :not(.btn): the buttons in the nav are links too, and a bare
   ".site-nav a:hover" outranks ".btn-primary" on specificity — it used to wipe the amber fill off "Request a
   demo" on hover and leave its dark label sitting on the dark header, invisible. */
.site-nav a:not(.btn) {
  position: relative; text-decoration: none; color: var(--on-dark); font-weight: 550; font-size: .97rem;
  padding: .5rem .8rem; border-radius: var(--radius-sm); transition: color .16s ease, background .16s ease;
}
.site-nav a:not(.btn):hover { background: rgba(255, 255, 255, .07); color: #fff; }
.site-nav a:not(.btn)[aria-current="page"] { color: #fff; font-weight: 700; }
.site-nav a:not(.btn)[aria-current="page"]::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .24rem; height: 2px; border-radius: 2px;
  background: var(--grad-amber);
}

/* The three header buttons — Request a demo, then Existing customers and Employees after it. All three carry
   .btn .btn-sm, so shape, padding, weight and size are identical by construction; only the fill differs.
   Amber stays the one primary action. The sign-ins are slate: plainly filled buttons, but quiet enough that
   the eye still lands on the demo first. Both sign-ins go to the same address — the app routes on the login. */
.site-nav .btn { margin-left: .4rem; white-space: nowrap; }
.site-nav .btn-primary { margin-left: .7rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px -8px rgba(245, 165, 36, .8); }
.site-nav .btn svg { width: 15px; height: 15px; flex: none; }
.site-nav .btn-sm { padding: .55rem 1rem; font-size: .92rem; }
.signin-label { display: none; }   /* shown only in the phone menu, where it heads the sign-in pair */

.btn-secondary {
  background: linear-gradient(135deg, #2f4a66 0%, #1f354d 100%); color: #eef4fa;
  border-color: rgba(140, 192, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 6px 16px -10px rgba(0, 0, 0, .8);
}
.btn-secondary:hover {
  color: #fff; background: linear-gradient(135deg, #3a5a7c 0%, #273f5a 100%);
  border-color: rgba(140, 192, 255, .4); transform: translateY(-2px);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2;
  padding: .85rem 1.5rem; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--grad-amber); color: #2a1c00; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -10px rgba(245, 165, 36, .85);
}
.btn-primary:hover { color: #2a1c00; filter: brightness(1.06); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 16px 30px -12px rgba(245, 165, 36, .95); }
.btn-dark {
  background: var(--grad-navy); color: #fff; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 24px -12px rgba(15, 42, 63, .9);
}
.btn-dark:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 30px -14px rgba(15, 42, 63, 1); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--navy-500); color: var(--ink); transform: translateY(-2px); }
/* On the dark bands a white button would shout as loudly as the primary one, so it turns into an outline. */
.hero .btn-ghost, .page-head .btn-ghost, .section--deep .btn-ghost, .cta-band .btn-ghost {
  background: rgba(255, 255, 255, .05); color: #fff; border-color: rgba(140, 192, 255, .32); box-shadow: none;
}
.hero .btn-ghost:hover, .page-head .btn-ghost:hover, .section--deep .btn-ghost:hover, .cta-band .btn-ghost:hover {
  border-color: var(--blue-400); background: rgba(79, 157, 255, .16); color: #fff;
}
.btn-sm { padding: .55rem .95rem; font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }
.center .btn-row { justify-content: center; }
.btn-note { font-size: .88rem; color: var(--muted); margin-top: 1rem; }

/* ---------- hero ---------- */
.hero .wrap { padding-top: clamp(3.2rem, 7vw, 5.5rem); padding-bottom: clamp(3.4rem, 7vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 3.75rem); align-items: center; }
.hero h1 { margin-bottom: .6rem; }
/* The promise, in brand colour. background-clip needs a paint source, so the plain colour is set first as the
   fallback for anything that does not support it. */
.hero h1 .hl {
  display: block;
  color: var(--blue-300);
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .lede { font-size: clamp(1.08rem, 1.8vw, 1.3rem); color: var(--on-dark); max-width: 54ch; }

.tagpill {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(140, 192, 255, .24);
  border-radius: 999px; padding: .35rem .95rem .35rem .4rem; font-size: .88rem; font-weight: 600;
  color: #dbe9f5; margin-bottom: 1.4rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tagpill b {
  background: var(--grad-amber); color: #2a1c00; border-radius: 999px; padding: .14rem .6rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}

/* The price card is the one white object in the hero, so it reads first. */
.hero-card {
  background: #fff; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .8), 0 0 0 1px rgba(140, 192, 255, .12);
  overflow: hidden;
}
.hero-card-top { background: var(--grad-navy); color: #fff; padding: 1.35rem 1.5rem 1.25rem; position: relative; }
.hero-card-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad-edge); }
.hero-card-top .price { font-size: 3rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.hero-card-top .per { font-size: .98rem; color: var(--blue-300); margin-left: .25rem; font-weight: 600; }
.hero-card-top .sub { font-size: .9rem; color: #9fbdd6; margin: .55rem 0 0; }
.hero-card ul { list-style: none; margin: 0; padding: 1.25rem 1.5rem 1.45rem; }
.hero-card li { display: flex; gap: .65rem; align-items: flex-start; font-size: .97rem; margin-bottom: .8rem; color: var(--body); }
.hero-card li:last-child { margin-bottom: 0; }
.tick { flex: none; width: 20px; height: 20px; margin-top: .14rem; color: var(--green); }
.cross { flex: none; width: 20px; height: 20px; margin-top: .14rem; color: #aebccb; }

/* The stats strip continues the dark hero and lifts a white card halfway out of it. */
.section--hero-foot { padding-top: 0; padding-bottom: clamp(2.6rem, 6vw, 4rem); border-bottom: 1px solid var(--line-soft); }
.section--hero-foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 55%; z-index: -1; background: var(--navy-950); }
.section--hero-foot::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; z-index: -2; background: var(--bg); }
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); padding: 1.5rem 1.6rem;
}
.stat { padding: .55rem .4rem; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: -.5rem; top: 12%; bottom: 12%; width: 1px; background: var(--line-soft); }
.stat b { display: block; font-size: clamp(1.7rem, 3.2vw, 2.15rem); color: var(--ink); letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat:first-child b, .stat:nth-child(3) b {
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat span { font-size: .92rem; color: var(--muted); display: block; margin-top: .15rem; }

/* ---------- page heads (every page except the home page) ---------- */
.page-head { padding: clamp(2.8rem, 6vw, 4.4rem) 0 clamp(2.8rem, 6vw, 4rem); }
.page-head .section-head { margin-bottom: 0; }
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }

/* ---------- cards ---------- */
.card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.35rem; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* A brand rule that draws itself in on hover — the only motion in the feature grids. */
.card::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad-edge);
  transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.22, .8, .3, 1);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #c8ddf0; }
.card:hover::after { transform: scaleX(1); }
.card h3 { margin-bottom: .45rem; }
.card p:last-child { margin-bottom: 0; }
.card .soon {
  display: inline-block; font-family: var(--mono); font-size: .76rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber-700); background: #fdf1dc; border: 1px solid #f4ddb2;
  border-radius: 999px; padding: .1rem .55rem; margin-left: .45rem; vertical-align: middle;
}
.card--soon { background: linear-gradient(180deg, #fbfdff 0%, #f3f8fc 100%); box-shadow: none; }
.card--soon::after { background: linear-gradient(90deg, var(--amber), rgba(245, 165, 36, .25)); }

.icon-box {
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(140deg, #e8f2fc 0%, #d6e8f8 100%);
  border: 1px solid #cadff2; color: var(--navy-600);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px rgba(29, 85, 128, .75);
  transition: transform .2s ease;
}
.icon-box svg { width: 22px; height: 22px; }
.card:hover .icon-box { transform: translateY(-2px) rotate(-3deg); }
/* Alternate the accent so a row of cards has a rhythm instead of six identical blue squares. */
.grid > .card:nth-child(even) .icon-box {
  background: linear-gradient(140deg, #fdf3e1 0%, #f9e6c4 100%);
  border-color: #f0dcb4; color: var(--amber-700);
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px rgba(154, 98, 6, .6);
}

.grid { display: grid; gap: 1.2rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Cards sitting on a dark band: glass, not paper. */
.section--deep .card { background: rgba(255, 255, 255, .055); border-color: rgba(140, 192, 255, .18); color: var(--on-dark); }
.section--deep .card:hover { border-color: rgba(140, 192, 255, .42); background: rgba(255, 255, 255, .08); }

/* ---------- stage rail ---------- */
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.4rem .8rem; counter-reset: stage; position: relative; }
.stage {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1.35rem 1rem 1rem; box-shadow: var(--shadow-sm); position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stage:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #c8ddf0; }
.stage b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: .2rem; font-weight: 700; }
.stage span { font-size: .87rem; color: var(--muted); line-height: 1.45; display: block; }
.stage::before {
  counter-increment: stage; content: counter(stage);
  position: absolute; top: -13px; left: 1rem;
  background: var(--grad-navy); color: #fff; font-family: var(--mono); font-size: .76rem; font-weight: 700;
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 6px 14px -6px rgba(15, 42, 63, .8);
}
.stage:last-child::before { background: var(--grad-amber); color: #2a1c00; }
/* One unbroken row only: at narrower widths the cards wrap and a connector would point at nothing. */
@media (min-width: 1024px) {
  .stages::before {
    content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 2px; border-radius: 2px;
    /* Same reason as --grad-edge: an extra warm stop keeps the blue-to-amber run out of the grey zone. */
    background: linear-gradient(90deg, transparent, var(--blue-300) 12%, var(--blue-400) 46%, #c98a2a 74%, var(--amber) 90%, transparent);
    opacity: .75;
  }
}

/* ---------- tables ---------- */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm);
}
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .96rem; }
caption { caption-side: bottom; text-align: left; font-size: .85rem; color: var(--muted); padding: .95rem 1.1rem 0; line-height: 1.55; }
th, td { padding: .88rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: #52657a; font-weight: 700;
  background: linear-gradient(180deg, #f4f8fc 0%, #e9f1f8 100%); border-bottom: 1px solid var(--line);
}
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: #f8fbfe; }
tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 650; color: var(--ink); }
/* Our own row, flagged by a solid amber edge rather than another background colour. */
.row-us { background: linear-gradient(90deg, #fff8ea 0%, #fffdf8 100%); }
.row-us:hover { background: linear-gradient(90deg, #fff4dd 0%, #fffcf4 100%); }
.row-us th { position: relative; }
.row-us th::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-amber); }
.row-us th, .row-us td { color: var(--ink); font-weight: 600; }
.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.yes { color: var(--green); font-weight: 650; }
.no  { color: #647485; }   /* was #9aa8b7 (2.4:1) — these cells carry real answers, not decoration */

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.4rem; align-items: start; }
.plan {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* The recommended plan: a gradient border (two backgrounds, one clipped to the padding box and one to the
   border box), a deeper shadow and a glow — so it wins without needing a different size. */
.plan--feature {
  position: relative; border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad-edge) border-box;
  box-shadow: var(--shadow-lift), var(--shadow-glow);
}
.plan--feature:hover { transform: translateY(-6px); }
.plan-flag {
  position: absolute; top: -14px; left: 1.8rem; background: var(--grad-amber); color: #2a1c00;
  font-family: var(--mono); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .8rem; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(245, 165, 36, .9);
}
.plan h3 { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; font-size: .76rem; }
.plan .price { font-size: 3.1rem; font-weight: 800; color: var(--ink); letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan--feature .price { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.plan .per { color: var(--muted); font-size: 1rem; font-weight: 600; }
.plan .save { color: var(--green); font-weight: 650; font-size: .93rem; margin-top: .5rem; }
.plan ul { list-style: none; padding: 0; margin: 1.3rem 0 1.5rem; }
.plan li { display: flex; gap: .65rem; font-size: .96rem; margin-bottom: .65rem; }
.plan .btn { width: 100%; }

/* ---------- quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.2rem; }
blockquote.quote {
  position: relative; margin: 0; background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(140, 192, 255, .18); border-radius: var(--radius);
  padding: 1.9rem 1.35rem 1.25rem; transition: border-color .2s ease, background .2s ease;
}
blockquote.quote::before {
  content: "\201C"; position: absolute; top: .2rem; left: 1.15rem;
  font-size: 3.2rem; line-height: 1; color: var(--amber); opacity: .65; font-family: Georgia, "Times New Roman", serif;
}
blockquote.quote:hover { border-color: rgba(140, 192, 255, .4); background: rgba(255, 255, 255, .08); }
blockquote.quote p { font-size: 1rem; color: #dce8f2; margin-bottom: .8rem; }
blockquote.quote cite { font-style: normal; font-size: .84rem; color: var(--on-dark-soft); }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; margin-bottom: .7rem; box-shadow: var(--shadow-sm); transition: border-color .18s ease; }
.faq details[open] { border-color: #c8ddf0; }
.faq details:hover { border-color: #c8ddf0; }
.faq summary {
  cursor: pointer; padding: 1rem 3rem 1rem 1.2rem; font-weight: 650; color: var(--ink);
  list-style: none; position: relative; font-size: 1.03rem; border-radius: var(--radius-sm);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%; width: 11px; height: 11px; margin-top: -6px;
  border-right: 2px solid var(--navy-600); border-bottom: 2px solid var(--navy-600);
  transform: rotate(45deg); transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > *:not(summary) { margin-bottom: 1rem; padding: 0 1.2rem; }
.faq details > *:not(summary):first-of-type { margin-top: -.2rem; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.05rem 1.15rem; }
.field { display: flex; flex-direction: column; gap: .38rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 650; font-size: .93rem; color: var(--ink); }
.field .hint { font-size: .84rem; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem .85rem; width: 100%;
  box-shadow: inset 0 1px 2px rgba(6, 18, 32, .04);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue-500); outline: none; box-shadow: 0 0 0 3px rgba(47, 128, 237, .16);
}
.req { color: var(--amber-700); }

.copy-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  background: linear-gradient(180deg, #f7fafd 0%, #eef4fa 100%);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .85rem;
}
.copy-line code { font-size: 1rem; font-family: var(--mono); color: var(--ink); }
.copy-line .btn { margin-left: auto; }
.copied { color: var(--green); font-size: .88rem; font-weight: 650; }

.notice {
  background: #fdf8ec; border: 1px solid #f0dfba; border-radius: var(--radius-sm);
  padding: .9rem 1.05rem; font-size: .93rem; color: #6b5316;
}
.notice p:last-child { margin-bottom: 0; }

/* ---------- call-to-action band ---------- */
.cta-band { border-bottom: 0; }

/* ---------- footer ---------- */
.site-footer { position: relative; background: #050f1b; color: #8ba3b7; padding: 3.2rem 0 2rem; font-size: .94rem; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--blue-500), var(--amber), transparent); opacity: .55; }
.site-footer a { color: #cfe0ec; text-decoration: none; transition: color .16s ease; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
/* Brand block on the left, the four link columns as their own grid on the right — as one auto-fit row they
   orphaned the last column under the brand at laptop widths. "Talk to us" gets the wider track because it holds
   the email addresses. */
.footer-grid { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 2.4fr); gap: 2rem; }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 1.6rem 1.5rem; }
/* Grid items default to min-content width, which lets a long address (support@logiccompass.co) push past the
   column and give the whole page a sideways scrollbar. Let the columns shrink and the address wrap instead. */
.footer-grid > div, .footer-links > div { min-width: 0; }
.footer-grid li, .footer-grid a { overflow-wrap: anywhere; }
.footer-grid h4 { color: #fff; font-family: var(--mono); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .9rem; font-weight: 700; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .5rem; }
.site-footer .brand { color: #fff; margin-bottom: .8rem; }
.site-footer .brand:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2.6rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .86rem; color: #75899b; }

/* ---------- reveal on scroll ----------
   Applied by site.js, and only to elements that start below the fold, so nothing above it can flash. Skipped
   entirely when the visitor has asked for reduced motion (both here and in the script). */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); }
  .reveal-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22, .8, .3, 1); }
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { max-width: 440px; }
  .footer-grid { grid-template-columns: 1fr; }
  .stat + .stat::before { display: none; }
}
/* ---------- phone menu ----------
   The desktop header is a single row holding three links and three buttons, so it switches to the menu button
   at 1100px. Measured, not guessed: the row needs 969px in Arial-metric fonts and 1066px in DejaVu Sans — one of
   the widest common UI fonts, wider than Segoe UI or SF — so 1100 fits it on any platform with room to spare. In the
   menu everything stacks: the links, then Request a demo, then a small "Sign in" heading and the two sign-ins
   directly below it. The noscript block in each page's <head> uses the same breakpoint. */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .header-wrap { position: relative; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: #081a2b; border-bottom: 1px solid rgba(140, 192, 255, .16);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .9);
    padding: .7rem 22px 1.2rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { padding: .7rem .6rem; font-size: 1.02rem; }
  .site-nav a:not(.btn)[aria-current="page"]::after { display: none; }
  /* All three buttons full width and the same tap-friendly size. */
  .site-nav .btn, .site-nav .btn-primary { margin: .5rem 0 0; }
  .site-nav .btn-sm { padding: .8rem 1rem; font-size: 1rem; }
  /* On a phone they fill the width; on a tablet or small laptop, a button stretched across the screen looks
     clumsy, so the column stops at a comfortable width. */
  .site-nav .btn, .signin-label { width: 100%; max-width: 460px; }
  .signin-label {
    display: block; margin: 1.05rem 0 0; padding: .95rem .1rem 0;
    border-top: 1px solid rgba(140, 192, 255, .14);
    font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--on-dark-soft);
  }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .copy-line .btn { margin-left: 0; width: 100%; }
  .stats { padding: 1.1rem 1.2rem; }
}
@media (max-width: 420px) {
  .footer-links { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
}

@media print {
  .site-header, .site-footer, .cta-band { display: none; }
  body { font-size: 12pt; color: #000; }
  .hero, .page-head, .section--deep, .section--hero-foot { background: #fff !important; color: #000; }
  .hero::before, .hero::after, .page-head::before, .page-head::after,
  .section--deep::before, .section--deep::after { display: none; }
  .hero h1, .page-head h1, .section--deep h2, .hero .lede, .page-head .lede { color: #000; }
  .hero h1 .hl, .plan--feature .price, .stat b { -webkit-text-fill-color: #000; color: #000; }
}