:root{--navy:#071a33;--navy2:#0d2b4b;--blue:#2f73df;--green:#52d273;--ink:#10233d;--muted:#68798d;--bg:#f5f8fc;--card:#fff;--line:#e1e9f2;--shadow:0 18px 50px rgba(8,31,58,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.55}.container{width:min(1180px,92%);margin:auto}
.nav{position:sticky;top:0;z-index:50;background:rgba(7,26,51,.97);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 28px #0002}.nav-inner{min-height:76px;display:flex;align-items:center;gap:25px}.logo{height:56px;width:auto}.nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}.nav-links a{color:#dbe7f5;text-decoration:none;font-weight:750;padding:10px 11px;border-radius:9px;white-space:nowrap}
/* nav-links a is white-space:nowrap because the row is a flex container
   with no wrapping of its own: when the items no longer fit, they shrink
   instead, and the browser breaks the multi-word labels in half. On
   2026-08-28 a ninth item ("Compliance") pushed the row from 1118px to
   ~1254px inside a 1180px container and the nav rendered as "Team /
   Pricing", "Sign / in", "Start / Free" on two lines.

   nowrap does not create room - it makes running out of room VISIBLE,
   as overflow, instead of silently mangling the labels. If a future
   link overflows the bar, the answer is to drop one, shorten one, or
   raise the hamburger breakpoint in the max-width:950px block below -
   not to let the text break. */
.nav-links a:hover{background:#ffffff10;color:#7de895}.nav-cta{background:var(--green)!important;color:#06172a!important;padding:11px 16px!important}.menu{display:none;color:#fff;font-size:25px;cursor:pointer}
.hero{background:radial-gradient(circle at 82% 15%,#1a527e 0,#0d2d4d 38%,#071a33 78%);color:#fff;padding:86px 0 76px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}.eyebrow{display:inline-block;color:#8af0a3;border:1px solid #52d27355;background:#52d27312;border-radius:999px;padding:7px 12px;font-weight:850;font-size:13px;letter-spacing:.7px;text-transform:uppercase}.hero h1{font-size:clamp(42px,6vw,78px);line-height:.98;letter-spacing:-3px;margin:20px 0 22px;font-weight:950}.hero h1 span{color:var(--green)}.hero p{font-size:19px;color:#cbd9e8;max-width:690px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}.btn{display:inline-block;text-decoration:none;border-radius:10px;padding:12px 18px;font-weight:850;border:1px solid transparent;cursor:pointer}.btn-green{background:var(--green);color:#071a33}.btn-blue{background:var(--blue);color:#fff}.btn-outline{border-color:#a9bfd7;color:#fff}.btn-light-outline{border-color:#9eb2c9;color:var(--ink)}.btn:hover{filter:brightness(1.06)}
.product{background:#f9fbff;border:7px solid #132e4e;border-radius:20px;box-shadow:0 28px 70px #0006;overflow:hidden}.window{height:34px;background:#e7eef6;display:flex;align-items:center;gap:7px;padding:0 13px}.dot{width:9px;height:9px;border-radius:50%;background:#9cb0c3}.product-body{display:grid;grid-template-columns:125px 1fr;min-height:340px;color:var(--ink)}.side{background:#0b2340;color:#dce9f7;padding:14px}.side b{font-size:12px}.side div{font-size:11px;padding:9px 6px;margin-top:5px;border-radius:6px}.side .sel{background:#52d27322;color:#83ee9a}.dash{padding:17px}.dash-top{display:flex;justify-content:space-between;font-weight:850;margin-bottom:12px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.metric{background:#fff;border:1px solid #dce5ef;border-radius:9px;padding:10px}.metric small{display:block;color:#73839a}.metric strong{font-size:20px}.chart{margin-top:9px;border:1px solid #dce5ef;border-radius:9px;padding:10px}.bars{height:110px;display:flex;gap:7px;align-items:end}.bar{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(#4c8dff,#9fc3ff)}.bar:nth-child(2n){background:linear-gradient(#52d273,#a4edb4)}
.section{padding:82px 0}.section.alt{background:#fff}.section.dark{background:var(--navy);color:#fff}.kicker{text-transform:uppercase;letter-spacing:1.6px;font-weight:900;color:#2d73dd;font-size:12px}.dark .kicker{color:#7de895}.section h2{font-size:clamp(30px,4vw,49px);letter-spacing:-1.5px;line-height:1.05;margin:10px 0 16px;font-weight:930}.lead{font-size:18px;color:var(--muted);max-width:780px}.dark .lead,.dark .muted{color:#b9cadc}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow)}.dark .card{background:#0d2745;border-color:#ffffff18;color:#fff;box-shadow:none}.card h3{margin:10px 0 8px;font-size:21px}.icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:#eaf8ee;color:#16883b;font-size:21px}.icon.blue{background:#eaf2ff;color:#2f73df}.pill{display:inline-block;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:850;background:#eaf8ee;color:#16883b}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}.four{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.page-hero{background:linear-gradient(120deg,#071a33,#123b63);color:#fff;padding:65px 0}.page-hero h1{font-size:clamp(35px,5vw,60px);letter-spacing:-2px;line-height:1.02;margin:10px 0}.page-hero p{color:#c8d8e8;max-width:820px;font-size:18px}.breadcrumb{font-size:13px;color:#9fb4ca}.breadcrumb a{color:#7de895;text-decoration:none}
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.price{position:relative}.price.featured{border:2px solid var(--green)}.price h3{font-size:21px}.amount{font-size:35px;font-weight:950;letter-spacing:-1px}.amount small{font-size:13px;color:var(--muted);font-weight:700}.price ul{padding-left:20px;color:var(--muted)}.price li{margin:7px 0}
.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px;border-bottom:1px solid var(--line)}th{background:#0b2747;color:#fff}td strong{color:#17873a}
.faq{display:grid;gap:10px}.faq details{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px 18px;box-shadow:0 8px 24px #08203a08}.faq summary{font-weight:850;cursor:pointer}.faq p{color:var(--muted);margin:12px 0 0}
.chapter{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}.num{width:54px;height:54px;border-radius:15px;background:#eaf2ff;color:var(--blue);display:grid;place-items:center;font-weight:950;font-size:18px}.chapter h3{margin:0 0 3px}.chapter p{margin:0;color:var(--muted)}
.screen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.screen{background:#fff;border:1px solid var(--line);border-radius:17px;overflow:hidden;box-shadow:var(--shadow)}.screen-preview{height:180px;background:linear-gradient(135deg,#0a2340,#154b74);padding:17px}.fake-ui{background:#f8fbff;border-radius:10px;height:100%;padding:10px;display:grid;grid-template-columns:45px 1fr;gap:8px}.fake-side{background:#0b2340;border-radius:7px}.fake-main{display:grid;gap:7px}.fake-card{background:#fff;border:1px solid #dce5ef;border-radius:6px}.screen-body{padding:17px}.screen-body h3{margin:0 0 5px}.screen-body p{margin:0;color:var(--muted)}
.cta{margin-top:20px;border-radius:24px;background:linear-gradient(120deg,#0a2442,#123b63);padding:42px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:25px}.cta h2{margin:0 0 7px;font-size:34px}.cta p{margin:0;color:#b9cadc}
.form{max-width:700px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow)}label{display:block;font-weight:800;margin:14px 0 6px}input,select{width:100%;padding:12px;border:1px solid #cfdbe7;border-radius:9px;font:inherit}
.footer{background:#061529;color:#aebfd1;padding:46px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}.footer img{height:58px;width:auto}.footer h4{color:#fff;margin:0 0 13px}.footer a{color:#dbe7f5;text-decoration:none;display:block;margin:7px 0}.footer a:hover{color:#7de895}.footer-bottom{border-top:1px solid #ffffff18;margin-top:30px;padding-top:18px;font-size:13px}
@media(max-width:950px){.nav-inner{flex-wrap:wrap}.menu{display:block;margin-left:auto}.nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:14px}.nav-links.open{display:flex}.nav-links a{display:block}.hero-grid,.two{grid-template-columns:1fr}.cards,.three,.screen-grid{grid-template-columns:1fr 1fr}.four,.prices{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.nav-inner{min-height:54px}.logo{height:38px}.hero{padding:20px 0 16px}.hero h1{letter-spacing:-2px;font-size:31px;margin:9px 0 9px}.hero p{font-size:15.5px}.actions{margin-top:11px}.hero-free{font-size:13px;line-height:1.4;margin-bottom:6px}.product-body{grid-template-columns:1fr}.side{display:none}.metrics{grid-template-columns:1fr}.cards,.three,.four,.prices,.screen-grid,.footer-grid{grid-template-columns:1fr}.chapter{grid-template-columns:60px 1fr}.chapter .btn{grid-column:2}.section{padding:60px 0}.cta{flex-direction:column;align-items:flex-start}}

.screen-body .screen-selling{font-weight:750;color:var(--ink);margin:0 0 10px}
.selling-points{list-style:none;padding:0;margin:0}
.selling-points li{position:relative;padding:5px 0 5px 21px;color:var(--muted);font-size:14px;line-height:1.4}
.selling-points li:before{content:"✓";position:absolute;left:0;top:5px;color:#16883b;font-weight:950}
.screen:hover{transform:translateY(-3px);box-shadow:0 22px 55px rgba(8,31,58,.14);transition:.18s ease}
.screen{transition:.18s ease}

.selling-headline{font-size:17px;font-weight:950;color:#0d2b4b;line-height:1.25;margin:0 0 7px}
.screen-body .screen-selling{font-weight:650;color:#445a70;margin:0 0 10px;line-height:1.45}
.selling-points{list-style:none;padding:0;margin:0}
.selling-points li{position:relative;padding:5px 0 5px 22px;color:#60748a;font-size:14px;line-height:1.4}
.selling-points li:before{content:"✓";position:absolute;left:0;top:5px;color:#16883b;font-weight:950}
.screen{transition:transform .18s ease,box-shadow .18s ease}
.screen:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(8,31,58,.16)}

.video-selling{margin-top:14px;padding:15px 16px;border-radius:14px;background:linear-gradient(135deg,#f5f9fd,#ffffff);border:1px solid #dce7f1}
.video-selling-headline{font-size:17px;font-weight:950;color:#0d2b4b;line-height:1.25;margin-bottom:6px}
.video-selling p{margin:0 0 9px;color:#52697f;font-weight:600;line-height:1.45}
.video-selling ul{list-style:none;margin:0;padding:0}
.video-selling li{position:relative;padding:4px 0 4px 21px;color:#60748a;font-size:14px;line-height:1.4}
.video-selling li:before{content:"✓";position:absolute;left:0;top:4px;color:#16883b;font-weight:950}

.subscription-sales{margin:34px 0 18px;padding:0 20px}
.subscription-sales-inner{max-width:1120px;margin:auto;padding:34px;border-radius:24px;background:linear-gradient(135deg,#0b2b4c,#123e67);color:#fff;box-shadow:0 20px 55px rgba(8,31,58,.18)}
.subscription-sales-kicker{font-size:12px;letter-spacing:.16em;font-weight:950;opacity:.82;margin-bottom:8px}
.subscription-sales h2,.subscription-cta h2{font-size:clamp(28px,4vw,46px);line-height:1.04;margin:0 0 14px;font-weight:950}
.subscription-sales-lead{font-size:18px;line-height:1.55;max-width:900px;margin:0 0 24px;opacity:.94}
.subscription-sales-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.subscription-sales-grid>div{padding:17px;border-radius:16px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14)}
.subscription-sales-grid strong{display:block;font-size:16px;margin-bottom:7px}
.subscription-sales-grid span{display:block;font-size:13px;line-height:1.45;opacity:.86}
.plan-selling{margin:10px 0 4px;padding:11px 13px;border-left:4px solid #16883b;background:#f5f9fd;border-radius:9px}
.plan-selling strong{display:block;color:#0d2b4b;font-weight:900}
.plan-selling p{margin:4px 0 0;color:#60748a;font-size:13px;line-height:1.42}
.subscription-cta{margin:34px 20px 10px}
.subscription-cta-inner{max-width:1120px;margin:auto;padding:34px;border-radius:24px;background:#f2f7fb;border:1px solid #dbe7f0;text-align:center}
.subscription-cta p{max-width:780px;margin:0 auto 18px;color:#52697f;font-size:17px;line-height:1.5}
.subscription-cta-points{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.subscription-cta-points span{padding:9px 13px;border-radius:999px;background:#fff;border:1px solid #dbe7f0;color:#34526d;font-weight:800;font-size:13px}
@media(max-width:850px){.subscription-sales-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.subscription-sales-grid{grid-template-columns:1fr}.subscription-sales-inner,.subscription-cta-inner{padding:24px}.subscription-sales{padding:0 10px}.subscription-cta{margin-left:10px;margin-right:10px}}

.team-pricing-hero .team-hero-kicker,.team-sales-panel .kicker,.team-value .kicker{font-size:12px;letter-spacing:.16em;font-weight:950;color:#16883b;margin-bottom:9px}
.team-hero-lead{max-width:880px;font-size:19px!important;line-height:1.55!important}
.hero-selling-points{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.hero-selling-points span{padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid rgba(13,43,75,.12);color:#244863;font-size:13px;font-weight:850}
.team-sales-intro{padding-top:10px}
.team-sales-panel{padding:36px;border-radius:25px;background:linear-gradient(135deg,#0b2b4c,#123e67);color:#fff;box-shadow:0 22px 60px rgba(8,31,58,.17)}
.team-sales-panel .kicker{color:#8de39e}
.team-sales-panel h2{font-size:clamp(29px,4vw,46px);line-height:1.05;margin:0 0 14px;font-weight:950}
.team-sales-panel>p{max-width:900px;font-size:17px;line-height:1.55;opacity:.9}
.team-sales-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.team-sales-grid>div{padding:17px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.08)}
.team-sales-grid strong{display:block;font-size:16px;margin-bottom:6px}
.team-sales-grid span{display:block;font-size:13px;line-height:1.45;opacity:.84}
.price-selling{margin:10px 0 8px;padding:11px 13px;border-radius:10px;background:#f0f8f3;border-left:4px solid #16883b}
.price-selling strong{display:block;color:#0d2b4b;font-size:14px}
.price-selling span{display:block;color:#60748a;font-size:13px;line-height:1.4;margin-top:3px}
.team-value{padding-top:18px}
.team-value h2{margin-top:0}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.value-grid .card{padding:22px}
.value-grid strong{display:block;font-size:22px;color:#0d2b4b}
.value-grid span{display:block;font-size:18px;font-weight:900;color:#16883b;margin:7px 0}
.value-grid small{display:block;color:#60748a;line-height:1.45}
.pricing-note{margin:13px 0 0;color:#73869a;font-size:12px}
.team-final-panel{padding:38px;border-radius:25px;text-align:center;background:#f1f7fb;border:1px solid #dbe7f0}
.team-final-panel h2{font-size:clamp(29px,4vw,46px);line-height:1.05;margin:7px auto 12px;max-width:850px}
.team-final-panel p{max-width:780px;margin:0 auto;color:#52697f;font-size:17px;line-height:1.55}
.team-final-panel .hero-selling-points{justify-content:center;margin-bottom:22px}
@media(max-width:900px){.team-sales-grid,.value-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.team-sales-grid,.value-grid{grid-template-columns:1fr}.team-sales-panel,.team-final-panel{padding:24px}}

/* ATS Engine V7 — benefit-led sales layer */
.sales-kicker{font-size:12px;letter-spacing:.16em;font-weight:950;color:#16883b;margin-bottom:9px}
.sales-strip{margin:28px 0 0;padding:25px 28px;border-radius:20px;background:linear-gradient(135deg,#0b2b4c,#123e67);color:#fff;box-shadow:0 18px 48px rgba(8,31,58,.14)}
.sales-strip h3{margin:0 0 7px;color:#fff;font-size:24px;line-height:1.15}
.sales-strip p{margin:0;max-width:900px;color:#c6d7e8;line-height:1.55}
.sales-strip .sales-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}
.sales-strip .sales-actions a{display:inline-block;padding:10px 15px;border-radius:999px;background:#16883b;color:#fff!important;text-decoration:none;font-weight:900;font-size:13px}
.benefit-card{position:relative}
.benefit-card .benefit-line{display:block;margin:8px 0 6px;color:#16883b;font-weight:900;font-size:14px}
.outcome-list{margin:13px 0 0;padding:0;list-style:none}
.outcome-list li{margin:7px 0;color:#52697f}
.outcome-list li:before{content:"✓";display:inline-block;margin-right:7px;color:#16883b;font-weight:950}
.route-sales{padding:30px;border-radius:22px;background:#f2f7fb;border:1px solid #dbe7f0}
.route-sales h2{margin-top:0}
.route-sales p{color:#52697f;line-height:1.55}
.sales-mini{font-size:13px;color:#60748a;line-height:1.45}
@media(max-width:650px){.sales-strip{padding:22px}.sales-strip h3{font-size:21px}}

/* ---------------------------------------------------------------------
   Checkout: plan choice + PayPal (register.html)

   The .plan-choice class and the data-plan attribute are NOT cosmetic -
   the checkout script binds to both. Rename either and plan selection
   stops working while the page still looks perfectly fine, which is the
   worst kind of breakage. Everything else here is presentation.
   --------------------------------------------------------------------- */
.plan-choice {
  position: relative;
  cursor: pointer;
  border: 2px solid #e3ebf3;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.plan-choice:hover {
  border-color: #1f6feb;
  transform: translateY(-2px);
}

/* The radio itself is hidden but must stay in the DOM and focusable -
   it is what the script reads, and removing it would break keyboard
   selection as well. */
.plan-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-choice:focus-within,
.plan-choice[aria-checked="true"] {
  border-color: #16883b;
  box-shadow: 0 0 0 4px rgba(22, 136, 59, .12);
}

.plan-price {
  font-size: 30px;
  font-weight: 950;
  color: #0d2b4b;
  margin: 6px 0 10px;
}

.plan-price span {
  font-size: 14px;
  font-weight: 700;
  color: #60748a;
}

/* PayPal renders its own iframe in here and sizes itself; the cap stops
   the button stretching the full width of a wide container, which looks
   broken rather than generous. */
#paypal-button-container {
  max-width: 420px;
  margin: 18px auto 0;
  min-height: 52px;
}

/* Sign in sits beside Start Free: existing customers need a way back in
   that is not the same button as "create an account". */
.nav-signin {
  font-weight: 800;
  color: #0d2b4b;
  margin-right: 4px;
}

.nav-signin:hover { color: #1f6feb; }

/* Demo credentials are meant to be read and typed, so they get monospace
   and enough contrast to copy accurately. */
.card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  background: #f2f6fa;
  border: 1px solid #e3ebf3;
  border-radius: 6px;
  padding: 2px 6px;
  color: #0d2b4b;
}

/* Chapter videos sit in the third column of the .chapter grid. */
.chapter-video {
  width: 360px;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid #e3ebf3;
  background: #000;
  display: block;
}

/* Real screenshots replacing the wireframe placeholders.

   .screen-preview was built for the .fake-ui wireframes it used to
   hold: a fixed 180px box with 17px of padding and a gradient behind
   it. A photograph of the actual product needs none of that - the
   padding inset it from the card edges like a framed print, and the
   fixed height meant the image was either cropped or floating on the
   gradient with a gap beneath it. --shot drops all three.

   No border-radius on the image: .screen already has overflow:hidden
   and a 17px radius, so it does the clipping. Rounding the image too
   just draws a second, tighter curve inside the first. */
.screen-preview--shot {
  height: auto;
  padding: 0;
  background: #0a2340;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

/* These are FULL-PAGE captures, not viewport shots, and their heights
   are all over the place - sign-in is 1440x900, candidate-profile is
   1440x14763. At width:100%;height:auto that last one renders about
   3,900px tall inside a card, which is what broke this page.

   A fixed 16:10 window with object-position:top shows each screen the
   way you would actually first see it - the header and the top of the
   content - and every card ends up the same height. */
.screen-shot {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid #e3ebf3;
}

@media (max-width: 900px) {
  .chapter { grid-template-columns: 56px 1fr; }
  .chapter-video { width: 100%; grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   Checkout: selection summary + PayPal box (register.html)

   These exist because the checkout script WRITES into them by id:
   summaryPlan, summaryPrice, summaryBlurb, summaryTrial, checkoutPlan,
   checkoutPrice, checkoutTrial, checkoutNotConfigured, formStatus.

   V6 shipped the plan cards but none of these. selectPlan() does
   $("#summaryPlan").textContent on its first line, so with them absent
   it threw on every click and the page did nothing at all - no
   selection, no scroll, no PayPal button. Worse, setStatus() writes to
   #formStatus, so the post-payment success handler died too: someone
   could pay and never be redirected to account setup.

   If you restyle this, keep every id.
   --------------------------------------------------------------------- */
.summary-band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }

.selection-summary {
  display: flex; flex-wrap: wrap; gap: 22px;
  align-items: center; justify-content: space-between;
  padding: 24px 28px; border-radius: 18px;
  background: linear-gradient(120deg, #0b2b4c, #123e67);
  color: #fff; box-shadow: 0 18px 46px rgba(8, 31, 58, .16);
}
.selection-summary-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 900; opacity: .8; }
.sel-plan  { font-size: 27px; font-weight: 950; letter-spacing: -.6px; margin-top: 4px; }
.sel-blurb { font-size: 14px; opacity: .85; max-width: 46ch; margin-top: 4px; line-height: 1.45; }
.selection-summary-side { text-align: right; margin-left: auto; }
.sel-price { font-size: 32px; font-weight: 950; letter-spacing: -1px; }
.sel-price small { font-size: 13px; font-weight: 700; opacity: .8; }
.selection-summary-side .btn { margin-top: 10px; }

/* Free-trial line. Appears in two places - on the navy summary bar and
   in the white checkout box - so it cannot hardcode a text colour. */
.trial-note {
  margin: 9px 0; padding: 9px 13px; border-radius: 10px;
  background: rgba(82, 210, 115, .14); border: 1px solid rgba(82, 210, 115, .38);
  font-size: 13.5px; font-weight: 700; line-height: 1.45;
}
.checkout-box .trial-note { background: #eefaf1; border-color: #bfe6cb; color: #16552c; }

.checkout-box {
  max-width: 640px; background: #fff; color: var(--ink);
  border-radius: 18px; padding: 26px; margin: 4px auto 20px;
  text-align: left;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.checkout-recap { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.checkout-recap-label { font-size: 13px; color: var(--muted); }
.checkout-plan { font-size: 20px; font-weight: 900; color: var(--navy2); }
.checkout-change { font-size: 13px; color: var(--blue); }
.checkout-recap-price { text-align: right; }
.checkout-price { font-size: 24px; font-weight: 950; letter-spacing: -.5px; }
.checkout-per { font-size: 12px; color: var(--muted); }

.checkout-alert { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: #fff6e6; border: 1px solid #f0d9a8; color: #6b4c11; font-size: 14px; line-height: 1.5; }
.checkout-alert strong { display: block; margin-bottom: 3px; }

/* setStatus() sets: class="form-status show is-error|is-success".
   Hidden until then - an empty bordered box under the PayPal button
   looks like something failed to load. */
.form-status { display: none; }
.form-status.show { display: block; margin-top: 16px; padding: 15px 17px; border-radius: 12px; font-size: 14.5px; line-height: 1.55; }
.form-status.is-success { background: #eefaf1; border: 1px solid #bfe6cb; color: #16552c; }
.form-status.is-error   { background: #fdecec; border: 1px solid #f2c2c2; color: #8a2020; }
.form-status .btn { margin-top: 12px; }

@media (max-width: 650px) {
  .selection-summary { flex-direction: column; align-items: stretch; }
  .selection-summary-side { text-align: left; margin-left: 0; }
  .checkout-recap-price { text-align: left; }
}

/* Step 2 is the last thing on the page and the only thing on the site
   that takes money. Centring the column puts the PayPal button in the
   middle of the screen rather than hard against the left margin with
   half the viewport empty beside it.

   .checkout-box resets text-align because its recap row is a two-column
   flex - centring the labels inside it would undo the alignment the
   price column depends on. */
#account { text-align: center; }
#account .lead { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------
   Screens pages: two columns, and click a shot to read it properly.

   Three columns made each preview 380px wide, which is too small to
   make out anything in a screenshot of a dense application. Two gives
   roughly 570px - about the width the sign-in card was already showing
   at, which is the one that read correctly.

   The window stays a 16:10 crop of the top of each capture whatever the
   column count: these are full-page shots and one is 14,763px tall, so
   there is no card size that shows them whole. The lightbox is where
   you actually read one.

   The min-width guard matters: the base .screen-grid rule is overridden
   inside two media queries earlier in this file, and an unguarded rule
   down here would beat both and force two columns onto phones.
   --------------------------------------------------------------------- */
@media (min-width: 951px) {
  .screen-grid--wide { grid-template-columns: repeat(2, 1fr); }
}

/* The preview is a <button> now, so the UA's button styling has to go. */
.screen-zoom {
  display: block;
  width: 100%;
  border: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  position: relative;
  text-align: left;
}

.screen-zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(7, 26, 51, .82);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events: none;
}
.screen-zoom:hover .screen-zoom-hint,
.screen-zoom:focus-visible .screen-zoom-hint { opacity: 1; }
.screen-zoom:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }

/* Touch devices have no hover, so the hint would never appear. Show it
   permanently there instead of leaving the affordance invisible. */
@media (hover: none) {
  .screen-zoom-hint { opacity: 1; }
}

/* --- the lightbox --------------------------------------------------- */
.shot-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4, 15, 30, .92);
  display: flex;
  flex-direction: column;
}
.shot-lightbox[hidden] { display: none; }

.shot-lightbox-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: rgba(7, 26, 51, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.shot-lightbox-title { color: #fff; font-weight: 900; font-size: 16px; }
.shot-lightbox-close {
  border: 0;
  background: transparent;
  color: #dbe7f5;
  font-size: 30px;
  line-height: 1;
  padding: 2px 10px;
  border-radius: 9px;
  cursor: pointer;
}
.shot-lightbox-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* The scroller is the point: a 14,000px screenshot has to be readable
   top to bottom, so the image goes in at full width and this scrolls. */
.shot-lightbox-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 22px;
  overscroll-behavior: contain;
}
.shot-lightbox-img {
  display: block;
  width: min(1280px, 100%);
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  background: #0a2340;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

@media (max-width: 650px) {
  .shot-lightbox-scroll { padding: 10px; }
  .shot-lightbox-title { font-size: 14px; }
}

/* One line under each demo account saying which side of the product it
   opens. The two cards used to differ only by the words "Job seeker" and
   "Recruiter" above two near-identical email addresses, and the order
   was not even consistent across the site - ats-engine and subscriptions
   led with the recruiter, both walkthrough pages led with the job
   seeker. Dennis grabbed the wrong one and spent a while looking for a
   job-seeker-only menu item on a recruiter account.

   Order is now job seeker first everywhere, and this line means you do
   not have to rely on the order at all. */
.demo-what {
  margin: 6px 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.dark .demo-what { color: #b9cadc; }

/* ---------------------------------------------------------------------
   Screen gallery: two journeys, tabbed.

   The gallery, ats-engine-screens and ats-engine-allscreens all showed
   the SAME twelve job-seeker screens. A recruiter had to scroll past all
   of them to find nothing of their own. Tabs mean each visitor sees only
   the product they came for, and the screens sit in journey order rather
   than alphabetically - somebody asking "what is it like to use" wants a
   sequence, not an index.
   --------------------------------------------------------------------- */
.journey-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin: 22px 0 8px;
  background: #eaf0f7;
  border-radius: 999px;
}
.journey-tab {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  font-size: 15px;
  color: #52697f;
  background: transparent;
  padding: 11px 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.journey-tab span { font-size: 12px; font-weight: 750; opacity: .7; }
.journey-tab:hover { color: var(--navy2); }
.journey-tab.is-active {
  background: #fff;
  color: var(--navy2);
  box-shadow: 0 3px 10px rgba(8, 31, 58, .13);
}
.journey-tab:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.journey-panel[hidden] { display: none; }

.journey-stage { margin-top: 44px; }
.journey-stage-head { margin-bottom: 18px; }
.journey-stage-head h3 {
  margin: 0;
  font-size: clamp(21px, 2.4vw, 27px);
  letter-spacing: -.6px;
  font-weight: 950;
  color: var(--navy2);
}
.journey-stage-head p { margin: 5px 0 0; color: var(--muted); font-size: 16px; }

/* The stage heading is the anchor here, so the cards under it do not
   each need a hard-sell paragraph - one honest line describing what is
   actually visible in the shot. */
.screen-body .screen-selling { margin: 0; }

@media (max-width: 650px) {
  .journey-tabs { display: flex; width: 100%; }
  .journey-tab { flex: 1; justify-content: center; padding: 11px 12px; }
  .journey-tab span { display: none; }
}

/* The v2 captures are 1552x672 - the app at a real desktop width, which
   is wider than the 16:10 the older full-page PNGs were cropped to. Give
   their window the ratio they actually are, or object-fit:cover crops
   the right-hand side off every screen and the top bar loses its
   account and plan chips mid-word.

   1552x672 rather than the 1568x674 that came out of the browser: the
   captures included Chrome's own scrollbar down the right edge, which
   is furniture, not product. Cropped with jpegtran at MCU boundaries so
   it is lossless - re-encoding 37 JPEGs to remove 14 pixels would have
   cost more quality than the pixels were worth. */
.screen-preview--v2 { aspect-ratio: 1552 / 672; }

/* Gallery cards carry two lines: the sell, then what the picture shows.
   The descriptive line is deliberately quieter - it is there to keep the
   claim above it honest, not to compete with it. */
.screen-body .selling-headline { margin: 0 0 6px; }
.screen-body .screen-selling { margin: 0; font-weight: 600; color: #6b7f93; font-size: 14px; }

/* ---------------------------------------------------------------------
   Jobster - the site assistant. Jobbie for short.

   Bottom-right on every marketing page, deliberately echoing the
   Assistant button inside the product so the two read as the same thing
   rather than as a bolted-on marketing widget.
   --------------------------------------------------------------------- */
.jb-root { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

.jb-launcher {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; cursor: pointer; font: inherit; font-weight: 900; font-size: 15px;
  color: #06172a; background: var(--green);
  padding: 13px 20px; border-radius: 999px;
  box-shadow: 0 14px 34px rgba(8, 31, 58, .28);
  transition: transform .16s ease, box-shadow .16s ease;
}
.jb-launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(8, 31, 58, .34); }
.jb-launcher:focus-visible { outline: 3px solid var(--navy2); outline-offset: 3px; }
.jb-launcher-dot { width: 9px; height: 9px; border-radius: 50%; background: #06172a; }
.jb-root.is-open .jb-launcher-label::after { content: ' \00d7'; }

.jb-panel {
  width: min(400px, calc(100vw - 40px));
  height: min(560px, calc(100vh - 130px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(8, 31, 58, .3);
}
.jb-panel[hidden] { display: none; }

.jb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; background: linear-gradient(120deg, #0b2b4c, #123e67); color: #fff; }
.jb-name { font-weight: 950; font-size: 17px; letter-spacing: -.3px; }
.jb-sub { font-size: 12.5px; opacity: .85; margin-top: 2px; }
.jb-close { border: 0; background: transparent; color: #dbe7f5; font-size: 25px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 8px; }
.jb-close:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.jb-log { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #f7fafd; }
.jb-msg { max-width: 88%; padding: 12px 15px; border-radius: 15px; font-size: 14.5px; line-height: 1.55; }
.jb-msg p { margin: 0 0 9px; }
.jb-msg p:last-child { margin-bottom: 0; }
.jb-msg ul { margin: 0 0 9px; padding-left: 19px; }
.jb-msg li { margin: 5px 0; }
.jb-msg code { background: #eef3f9; border: 1px solid #dbe6f0; border-radius: 5px; padding: 1px 6px; font-size: 13px; }
.jb-you { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 5px; }
.jb-bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.jb-bot .jb-muted { color: var(--muted); font-size: 13px; }

/* Three dots while it looks something up. It is instant, but a reply
   that appears before the question has finished rendering reads as
   canned rather than as an answer. */
.jb-thinking { display: flex; gap: 5px; padding: 15px; }
.jb-thinking span { width: 7px; height: 7px; border-radius: 50%; background: #9db2c7; animation: jb-bounce 1.1s infinite; }
.jb-thinking span:nth-child(2) { animation-delay: .16s; }
.jb-thinking span:nth-child(3) { animation-delay: .32s; }
@keyframes jb-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-5px); opacity: 1; } }

.jb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.jb-chip { border: 1px solid #cfdce9; background: #fff; color: #34526d; font: inherit; font-size: 13px; font-weight: 750; padding: 8px 13px; border-radius: 999px; cursor: pointer; }
.jb-chip:hover { border-color: var(--blue); color: var(--blue); }

.jb-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.jb-input { flex: 1 1 auto; width: auto; padding: 11px 13px; border: 1px solid #cfdbe7; border-radius: 10px; font: inherit; font-size: 14.5px; }
.jb-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 115, 223, .16); }
.jb-send { border: 0; background: var(--blue); color: #fff; font: inherit; font-weight: 850; padding: 11px 17px; border-radius: 10px; cursor: pointer; }
.jb-send:hover { filter: brightness(1.07); }

@media (max-width: 650px) {
  .jb-root { right: 12px; bottom: 12px; }
  .jb-panel { height: min(70vh, calc(100vh - 110px)); }
  .jb-launcher-label { display: none; }
  .jb-launcher { padding: 15px; }
}

/* ---------------------------------------------------------------------
   The demo-account section, on every page that carries it.

   Centred, because it is the one block on these pages whose whole job is
   "stop reading and go and use it" - a left-aligned pair of cards with
   half the row empty beside them reads like a footnote.

   The two cards are colour-coded and badged rather than left as two
   identical white boxes differing only by a heading. Dennis signed in to
   the wrong one; they were indistinguishable at a glance, and the order
   was not even the same from page to page.
   --------------------------------------------------------------------- */
#demo { text-align: center; }
#demo .lead { margin-left: auto; margin-right: auto; }
#demo .cards {
  grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: center;
  gap: 20px;
  margin-top: 26px;
}
#demo .actions { justify-content: center; }

.demo-card {
  position: relative;
  overflow: hidden;
  padding: 30px 26px 26px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fafe 100%);
  transition: transform .18s ease, box-shadow .18s ease;
}
.demo-card:hover { transform: translateY(-3px); box-shadow: 0 24px 58px rgba(8, 31, 58, .15); }

/* The accent bar is the fastest way to tell the two apart from across
   the room, which is roughly the attention this section gets. */
.demo-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.demo-card--seeker::before { background: linear-gradient(90deg, #2f73df, #6ba4ff); }
.demo-card--recruiter::before { background: linear-gradient(90deg, #16883b, #52d273); }

.demo-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.demo-badge--seeker { background: #eaf2ff; color: #2f73df; }
.demo-badge--recruiter { background: #eaf8ee; color: #16883b; }

.demo-card h3 { margin: 0 0 8px; font-size: 20px; }
.demo-card .demo-what { margin: 0 auto 16px; max-width: 30ch; }

/* Credentials read as fields, not as prose with something monospaced in
   the middle of it. */
.demo-card p { margin: 8px 0; font-size: 13px; color: var(--muted); }
.demo-card code {
  display: block;
  margin-top: 4px;
  padding: 9px 12px;
  background: #f1f6fb;
  border: 1px solid #dde8f2;
  border-radius: 9px;
  color: var(--navy2);
  font-size: 13.5px;
  font-weight: 700;
  word-break: break-all;
  user-select: all;
}

@media (max-width: 700px) {
  #demo .cards { grid-template-columns: minmax(0, 340px); }
}

/* ---- Jobster: voice controls ---------------------------------------
   Both are feature-detected in jobster.js and simply do not render where
   the browser lacks the API - recognition is Chrome and Edge only. */
.jb-tools { display: flex; align-items: center; gap: 4px; }

.jb-speak {
  border: 0; background: transparent; color: #8fa9c4; cursor: pointer;
  padding: 6px; border-radius: 9px; line-height: 0;
}
.jb-speak:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.jb-speak.is-on { color: var(--green); }
/* The two arcs are the "sound is on" signal - hidden, the icon reads as
   muted without needing a second icon or a strike-through. */
.jb-speak .jb-wave { opacity: 0; transition: opacity .16s ease; }
.jb-speak.is-on .jb-wave { opacity: 1; }

.jb-mic {
  border: 1px solid #cfdbe7; background: #fff; color: #52697f; cursor: pointer;
  padding: 0 12px; border-radius: 10px; line-height: 0; flex: 0 0 auto;
}
.jb-mic:hover { border-color: var(--blue); color: var(--blue); }
.jb-mic.is-listening {
  border-color: #d9534f; color: #fff; background: #d9534f;
  animation: jb-pulse 1.3s ease-in-out infinite;
}
@keyframes jb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 83, 79, .45); }
  50% { box-shadow: 0 0 0 7px rgba(217, 83, 79, 0); }
}
.jb-mic:focus-visible, .jb-speak:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* The tagline earns two lines on a narrow panel - do not clip it. */
.jb-sub { max-width: 27ch; line-height: 1.35; }

/* Gallery cards now carry four things: the screenshot, the sell, what is
   in the picture, and three outcomes. Ranked by weight in that order, so
   the eye lands on the claim and the description reads as the footnote
   it is rather than competing with it. */
.screen-body .selling-headline { margin: 0 0 7px; font-size: 16.5px; }
.screen-body .screen-selling { margin: 0 0 13px; font-weight: 600; color: #6b7f93; font-size: 13.5px; }
.screen-body .selling-points li { font-size: 13.5px; padding-left: 22px; }

/* Hero mockup: the numbers in it are the demo account's real figures, so
   the chart labels are worth the room - an unlabelled bar chart in a
   marketing mockup is decoration, a labelled one is a claim. */
.bar-labels { display: flex; gap: 7px; margin-top: 6px; }
.bar-labels span { flex: 1; text-align: center; font-size: 9px; color: #7b8ea3; letter-spacing: .02em; }
.product-note { margin: 12px 0 0; font-size: 13px; color: #b9cadc; }
.product-note a { color: #7de895; }

/* The panel's top line carries both names - "'Jobster' aka 'Jobbie'" -
   because the launcher says Jobbie and the assistant introduces itself
   as Jobster, and nobody should have to work out that those are the
   same thing. Slightly smaller than a one-word name would be, so it
   still fits the panel on a phone. */
.jb-name { font-size: 16px; letter-spacing: -.2px; }

/* The full-length film gets its own centred block on both walkthrough
   pages. It is one video under one heading - left-aligned in a 1180px
   container it sat in the top-left corner of a very empty row, which
   read as an afterthought rather than as the main event. */
#full-film { text-align: center; }
#full-film .lead { margin-left: auto; margin-right: auto; }
#full-film .chapter-video,
#full-film video {
  display: block;
  margin: 24px auto 0;
  width: min(760px, 100%);
  height: auto;
  border-radius: 14px;
  box-shadow: 0 22px 55px rgba(8, 31, 58, .18);
}

/* The company line under the footer's contact row. Deliberately quieter
   than the line above it: it is a legal statement of who owns the
   product, not a message to the reader, and it should not compete with
   the email address somebody is actually looking for. */
.footer-legal { margin-top: 8px; font-size: 12px; color: #8fa4bb; line-height: 1.5; }
.footer-legal strong { color: #c7d6e6; font-weight: 650; }

/* .footer a is display:block for the link columns above, which was
   dropping the contact address onto its own line and leaving the rest of
   the row orphaned beneath it. In the bottom row it is a sentence, not a
   column. */
.footer-bottom a { display: inline; margin: 0; }

/* The free-plan line under each hero. Sits between the sub-heading and
   the buttons, so it is read before anybody decides which button to
   press. Deliberately specific - "one CV, ten open applications and a
   full job analysis" rather than just "free" - because a vague free is
   what every trial calls itself, and being concrete is what makes it
   believable. */
.hero-free {
  /* .actions is a wrapping flex row. Without an explicit full-width
     basis the buttons will ride up beside this paragraph on any hero
     wide enough to fit them, which reads as a caption on a button
     rather than a line of its own. */
  flex: 0 0 100%;
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #cfe0f2;
  max-width: 640px;
}
.hero-free a {
  color: #7de895;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-free a:hover { color: #a5f4b6; }

/* The free route on the checkout page. /register is a PayPal flow, so
   Free cannot be one of the plan radios - there is no plan_id behind
   it. It gets a line of its own above the cards instead, so the one
   page people reach to sign up does not quietly hide the tier the rest
   of the site leads with. */
.free-note {
  border-left: 3px solid var(--green);
  padding: 2px 0 2px 14px;
  margin-top: 14px;
  font-size: 16px;
}
.free-note a { color: #1f7a44; font-weight: 700; }