/* =========================================================
   Skillshub landing page
   Flat (no shadows). Colour used to GUIDE the eye, not decorate.
   Blue #1188FF dominant · magenta #b7297d = action · amber #ff9700 = highlight
   ========================================================= */

:root {
  --blue:        #1188ff;
  --blue-600:    #0d6fe0;
  --blue-700:    #0959b8;
  --blue-tint:   #eaf3ff;
  --blue-tint-2: #f4f9ff;
  --magenta:     #b7297d;
  --magenta-600: #a02069;
  --magenta-tint:#fbeaf3;
  --amber:       #ff9700;
  --amber-ink:   #b96f00;
  --amber-tint:  #fff3df;

  --ink:    #16202e;
  --body:   #4a5568;
  --muted:  #7a8699;
  --line:   #e7ebf1;
  --line-2: #f1f4f8;
  --line-strong: #d4dae3;
  --bg:     #ffffff;
  --bg-alt: #f7f9fc;

  --r:    12px;
  --r-sm: 8px;
  --r-lg: 20px;

  --font: "Plus Jakarta Sans", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --shell: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--body); background: var(--bg);
  line-height: 1.62; font-size: 17px; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
h1, h2, h3 { color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; margin: 0; font-weight: 700; }
p { margin: 0; }
a { color: var(--blue-600); text-decoration: none; }
img { max-width: 100%; display: block; }
section[id] { scroll-margin-top: 92px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

svg { fill: currentColor; }
.i-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-fill { fill: currentColor; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: inherit; font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 14px 24px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-sm { padding: 10px 16px; font-size: .92rem; }
.btn-lg { padding: 16px 28px; font-size: 1.05rem; }
.btn-block { width: 100%; padding-block: 15px; }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn-cta { background: var(--magenta); color: #fff; }
.btn-cta:hover { background: var(--magenta-600); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-600); }

/* ---------- Section intro ---------- */
.kicker { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.sec-intro { max-width: 62ch; margin-bottom: clamp(36px, 4vw, 56px); }
.sec-intro.center { margin-inline: auto; text-align: center; }
.sec-intro h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); margin-bottom: 14px; }
.lede { font-size: clamp(1.04rem, 1.4vw, 1.18rem); color: var(--body); }
.section { padding: clamp(58px, 7vw, 100px) 0; }
.section.alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 30px; height: 76px; }
.logo img { height: 48px; width: auto; }
.main-nav { display: flex; gap: 28px; margin-left: 6px; }
.main-nav a { color: var(--body); font-weight: 500; font-size: .95rem; }
.main-nav a:hover { color: var(--ink); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.phone-link { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; font-size: .95rem; }
.phone-link svg { width: 16px; height: 16px; color: var(--blue); }
.phone-link:hover { color: var(--blue-600); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 10px clamp(20px,5vw,40px) 20px; border-bottom: 1px solid var(--line); }
.mobile-nav a { padding: 13px 2px; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line-2); }
.mobile-nav .btn { margin-top: 14px; }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding: clamp(44px, 5.5vw, 80px) 0; }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
.hero-title { font-size: clamp(2rem, 3.8vw, 2.9rem); letter-spacing: -.03em; margin-bottom: 20px; max-width: 19ch; }
.hero-title .hl { color: var(--blue); }
.hero-sub { font-size: clamp(1.05rem, 1.45vw, 1.2rem); color: var(--body); max-width: 46ch; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .94rem; color: var(--body); }
.hero-trust strong { color: var(--ink); }
.rating { display: inline-flex; align-items: center; gap: 7px; }
.rating .star { width: 18px; height: 18px; color: var(--amber); }
.trust-cpd { display: inline-flex; align-items: center; gap: 8px; }
.trust-cpd img { height: 18px; width: auto; }
.trust-sep { width: 1px; height: 18px; background: var(--line-strong); }

.hero-visual { position: relative; }
.hero-visual-panel { background: var(--blue-tint); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 36px); display: grid; place-items: center; }
.hero-visual-panel img { width: 100%; height: auto; }
.hero-chip { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 15px; }
.hero-chip-a { bottom: 16px; left: 0; display: flex; flex-direction: column; }
.chip-num { font-size: 1.3rem; font-weight: 800; color: var(--blue); line-height: 1; letter-spacing: -.02em; }
.chip-label { font-size: .76rem; color: var(--muted); margin-top: 3px; }
.hero-chip-b { top: 18px; right: 0; display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--ink); }
.hero-chip-b svg { width: 16px; height: 16px; color: var(--magenta); }

/* =========================================================
   TRUSTED BY  (real client logos + figures, one band)
   ========================================================= */
.proofband { padding: clamp(36px, 5vw, 60px) 0; border-top: 1px solid var(--line); }
.proofband-label { text-align: center; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 26px; }
.logo-wall { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(26px, 5vw, 56px); }
.logo-wall img { height: 34px; width: auto; max-width: 148px; object-fit: contain; filter: grayscale(1); opacity: .55; transition: opacity .2s ease, filter .2s ease; }
.logo-wall img:hover { filter: none; opacity: 1; }
.proofband-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(34px, 4vw, 48px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.stat { text-align: center; padding: 4px 12px; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 8%; height: 84%; width: 1px; background: var(--line); }
.stat-num { display: block; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -.02em; color: var(--blue); line-height: 1; }
.stat-label { display: block; margin-top: 10px; font-size: .84rem; color: var(--muted); }

/* =========================================================
   HOW IT WORKS  (numerals carry the sequence)
   ========================================================= */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.step { padding-top: 22px; border-top: 1px solid var(--line); }
.step-num { display: block; font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 16px; color: var(--blue); }
.step:nth-child(2) .step-num { color: var(--magenta); }
.step:nth-child(3) .step-num { color: var(--amber-ink); }
.step h3 { font-size: 1.22rem; margin-bottom: 10px; }
.step p { font-size: .98rem; color: var(--body); }

/* =========================================================
   WHAT YOU GET
   ========================================================= */
.lib-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); margin-bottom: clamp(34px, 4vw, 52px); }
.block-title { font-size: 1.1rem; margin-bottom: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.format-list { list-style: none; margin: 0; padding: 0; }
.format-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.format-list li:last-child { border-bottom: none; }
.fmt-text { display: flex; flex-direction: column; gap: 2px; }
.fmt-name { font-weight: 600; color: var(--ink); }
.fmt-meta { font-size: .88rem; color: var(--muted); }
.fmt-dur { flex: 0 0 auto; font-size: .76rem; font-weight: 600; color: var(--blue-700); background: var(--blue-tint); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.check-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 13px; }
.check-list li { position: relative; padding-left: 30px; color: var(--body); }
.includes-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.pill-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--ink); padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; }
.pill-badge svg { width: 15px; height: 15px; color: var(--blue); }

.topics-panel { margin-top: clamp(34px, 4vw, 48px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: clamp(26px, 3vw, 40px); }
.topics-head { margin-bottom: 20px; }
.topics-head h3 { font-size: 1.2rem; margin-bottom: 6px; }
.topics-head p { font-size: .92rem; color: var(--muted); }
.topic-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 32px; }
.topic-cols li { position: relative; padding: 9px 0 9px 18px; color: var(--body); font-size: .96rem; }
.topic-cols li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }

/* =========================================================
   WHY IT WORKS  (colour signals good vs typical)
   ========================================================= */
.why-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(30px, 4vw, 56px); align-items: center; }
.compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 26px; }
.compare-col { padding: clamp(22px, 3vw, 30px); }
.neg-col { background: #fafbfc; }
.pos-col { background: var(--blue-tint); }
.compare-head { font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.compare-head.accent { color: var(--blue); }
.compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; font-size: .98rem; }
.compare-list li { position: relative; padding-left: 28px; }
.compare-list.neg li { color: var(--muted); }
.compare-list.neg li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 11px; height: 2px; background: var(--line-strong); }
.compare-list.pos li { color: var(--ink); }
.why-figure { margin: 0; }
.why-figure img { width: 100%; height: auto; border-radius: var(--r); }

/* shared blue check (CSS-drawn) */
.check-list li::before,
.compare-list.pos li::before,
.demo-assure li::before {
  content: ""; position: absolute; left: 5px; top: .34em;
  width: 6px; height: 11px; border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* =========================================================
   PROOF
   ========================================================= */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-bottom: clamp(34px, 4vw, 52px); }
.case { padding-top: 20px; border-top: 2px solid var(--blue); }
.case-num { display: block; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800; color: var(--blue); letter-spacing: -.03em; line-height: 1; }
.case p { margin-top: 12px; font-size: .98rem; color: var(--body); }
.case p strong, .quote strong { color: var(--ink); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 26px 22px; display: flex; flex-direction: column; }
.quote p { color: var(--ink); font-size: 1.02rem; line-height: 1.55; }
.quote footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.quote footer strong { font-size: .95rem; color: var(--ink); }
.quote footer > span { font-size: .85rem; color: var(--muted); }
/* feature quote: certification badge beside a stacked name + title */
.feature-quote { border-color: var(--blue); background: var(--blue-tint-2); }
.feature-quote footer { flex-direction: row; align-items: center; gap: 13px; }
.feature-quote footer img { height: 30px; width: auto; flex: 0 0 auto; }
.feature-quote footer > span { display: flex; flex-direction: column; gap: 2px; }
.feature-quote footer > span strong { font-size: .95rem; color: var(--ink); }
.feature-quote footer > span > span { font-size: .85rem; color: var(--muted); font-weight: 400; }

/* =========================================================
   OPTIONS
   ========================================================= */
.option-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.option { border: 1px solid var(--line); border-radius: var(--r); padding: 28px 24px; background: #fff; transition: border-color .2s ease; }
.option:hover { border-color: var(--blue); }
.option h3 { font-size: 1.08rem; margin-bottom: 9px; }
.option p { font-size: .93rem; color: var(--body); }

/* =========================================================
   FAQ
   ========================================================= */
.faq-shell { max-width: 800px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--blue); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.faq-icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-icon::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-body { padding: 0 4px 24px; max-width: 66ch; }
.faq-body p { color: var(--body); }

/* =========================================================
   DEMO  (tinted card = conversion focal zone)
   ========================================================= */
.demo-card { background: var(--blue-tint); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 54px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 60px); align-items: center; }
.demo-copy h2 { font-size: clamp(1.6rem, 2.8vw, 2.15rem); margin-bottom: 14px; }
.demo-assure { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 13px; }
.demo-assure li { position: relative; padding-left: 30px; color: var(--ink); font-weight: 500; }
.demo-call { display: flex; align-items: center; gap: 9px; color: var(--body); font-size: .96rem; }
.demo-call svg { width: 17px; height: 17px; color: var(--blue); flex: 0 0 auto; }
.demo-call a { font-weight: 700; }
.demo-alt { margin-top: 14px; font-size: .92rem; color: var(--muted); }
.demo-alt a { font-weight: 600; }
.demo-form { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3vw, 32px); }
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
input, select, textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #aab2c0; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8699' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #d44e7d; }

/* Textarea and number input. Added when the form moved to Skillshub's own
   field set (their live forms use a free-text number for user count and a
   message box), so both need to match the other controls. */
textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.err { display: block; font-size: .78rem; color: #c83567; margin-top: 5px; font-weight: 500; }
.demo-form .btn-cta { margin-top: 4px; }
.form-success { text-align: center; padding: 14px 4px; }
.success-tick { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); }
.success-tick svg { width: 28px; height: 28px; stroke-width: 2.5; }
.form-success h3 { font-size: 1.32rem; margin-bottom: 12px; }
.form-success p { color: var(--body); margin-bottom: 8px; }
.success-call { font-weight: 500; color: var(--ink); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { border-top: 1px solid var(--line); padding-top: 40px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 28px; }
.footer-brand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-brand img { height: 44px; width: auto; }
.footer-brand p { color: var(--muted); font-size: .92rem; max-width: 32ch; }
.footer-contact { display: flex; align-items: center; gap: 18px; }
.footer-contact > a:first-child { font-weight: 700; color: var(--ink); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 18px 0 28px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }

/* =========================================================
   CONTENT PACK PAGE  (nurture variant)
   ========================================================= */
.pack-panel { max-width: 900px; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-alt); padding: clamp(28px, 4vw, 44px); }
.pack-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.pack-list li { position: relative; padding-left: 32px; color: var(--body); line-height: 1.5; }
.pack-list li strong { color: var(--ink); font-weight: 600; }
.opt { color: var(--muted); font-weight: 400; }
.form-foot { margin-top: 14px; font-size: .8rem; color: var(--muted); text-align: center; line-height: 1.5; }

/* =========================================================
   MOTION
   ========================================================= */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 940px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-actions .btn-sm { display: none; }
  .mobile-nav { display: flex; }
  .mobile-nav[hidden] { display: none; }

  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: 2; max-width: 560px; margin-inline: auto; width: 100%; }
  .lib-grid, .why-grid, .demo-card { grid-template-columns: 1fr; }
  .why-figure { max-width: 560px; margin-inline: auto; }
  .steps, .cases { grid-template-columns: 1fr 1fr; gap: 30px; }
  .topic-cols { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; }
  .option-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .proofband-stats { grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .stat:nth-child(odd)::before { display: none; }
  .steps, .cases, .option-grid, .topic-cols, .pack-list { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .hero-chip-a { left: 8px; }
  .hero-chip-b { right: 8px; }
}

/* =========================================================
   CONTACT FORM 7 COMPATIBILITY
   ---------------------------------------------------------
   CF7 renders its own wrappers around each control. These rules make that
   markup inherit the design above, so the live WordPress page looks
   identical to the static preview. Nothing here affects the preview.
   ========================================================= */

/* Attribution inputs. Hidden from view but still submitted, which is what
   carries msclkid / gclid through to the CRM. Also covers the case where
   CF7 renders them as plain text tags rather than true hidden fields. */
.attr-fields { display: none; }

/* CF7 wraps every control in an inline span; make it behave like our markup */
.wpcf7-form-control-wrap { display: block; }

/* CF7 owns the form element on the live page */
.demo-form .wpcf7 { margin: 0; }
.demo-form .wpcf7-form p { margin: 0; }

/* Validation messages, matched to .err */
.wpcf7-not-valid-tip {
  display: block; font-size: .78rem; color: #c83567;
  margin-top: 5px; font-weight: 500;
}
.wpcf7-form-control.wpcf7-not-valid { border-color: #d44e7d; }

/* CF7's message box. On success it shows briefly before the redirect to the thank-you page */
.wpcf7-response-output {
  margin: 16px 0 0; padding: 12px 14px; font-size: .85rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--blue); color: var(--blue-700); background: #fff; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: #d44e7d; color: #c83567; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-color: #d44e7d; color: #c83567; }

/* Submit button + spinner */
.wpcf7-form .wpcf7-submit { width: 100%; padding-block: 15px; margin-top: 4px; }
.wpcf7-spinner { margin: 12px auto 0; display: block; }

/* =========================================================
   V2 ADDITIONS (Sep 2026): specs, routing cards, features,
   plans, second exit, Turnstile
   ========================================================= */

/* Three checkable specs in the hero */
.spec-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; max-width: 50ch; }
.spec-list li { position: relative; padding-left: 30px; color: var(--body); font-size: 1rem; }
.spec-list li strong { color: var(--ink); }
.spec-list li::before {
  content: ""; position: absolute; left: 5px; top: .34em;
  width: 6px; height: 11px; border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Routing cards. Three cards: 3 across, then stacked. Never 2 + 1. */
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.route-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; display: flex; flex-direction: column; }
.route-tag { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); margin-bottom: 10px; }
.route-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.route-card p:not(.route-tag) { color: var(--body); font-size: .96rem; margin-bottom: 20px; }
.route-link { margin-top: auto; font-weight: 700; color: var(--blue-600); }
.route-link::after { content: " \2192"; }

/* Features: six cards, 3 / 2 / 1 across, so rows are always even */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { border-top: 2px solid var(--blue); padding-top: 18px; }
.feature h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature p { color: var(--body); font-size: .96rem; }

/* Plans: three cards */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; }
.plan-mid { border-color: var(--blue); }
.plan h3 { font-size: 1.2rem; margin-bottom: 10px; }
.plan p { color: var(--body); font-size: .96rem; }

/* Second exit: for people not ready to fill in a form */
.exit-strip { margin-top: clamp(30px, 4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 22px 26px; border: 1px dashed var(--line-strong); border-radius: var(--r); background: #fff; }
.exit-strip p { color: var(--body); max-width: 60ch; }
.exit-strip strong { color: var(--ink); }

.why-title { font-size: clamp(1.65rem, 3vw, 2.35rem); margin-bottom: 26px; }
.quotes-2 { grid-template-columns: repeat(2, 1fr); }

/* Cloudflare Turnstile: CF7 inserts it at the top of the form automatically.
   Flex order moves it down to sit just above the submit button. */
.demo-form .wpcf7-form { display: flex; flex-direction: column; }
.demo-form .wpcf7-form > * { order: 1; }
.demo-form .wpcf7-turnstile { order: 2; margin: 4px 0 12px; }
.demo-form .wpcf7-form > p,
.demo-form .wpcf7-response-output { order: 3; }

/* The Turnstile widget is a fixed 300px wide, which overflowed the padded
   card on phones and made the page scroll sideways. On small screens the
   outer card goes flat so the form panel gets the full width. */
@media (max-width: 940px) { .demo-card { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .demo-card { padding: 0; background: none; border: 0; border-radius: 0; }
  .demo-form { padding: 22px 16px; }
}

@media (max-width: 940px) {
  .route-grid, .plan-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .quotes-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .exit-strip .btn { width: 100%; }
}

/* CF7 auto-paragraphs the Form tab, adding <br> between a label and its
   control. Hide them rather than turn autop off site-wide. */
.demo-form .wpcf7-form br { display: none; }