@import url("./brand-tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sx-font-body);
  font-size: var(--sx-size-body);
  line-height: var(--sx-leading);
  color: var(--sx-body);
  background: #fff;
}
h1, h2, h3 { font-family: var(--sx-font-head); color: var(--sx-ink); line-height: 1.25; font-weight: 600; }
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin: 0 0 1rem; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .85rem; }
h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
p { margin: 0 0 1.1rem; }
a { color: var(--sx-teal-deep); }
strong { color: var(--sx-ink); }

.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 44rem); margin-inline: auto; }
.section { padding: 3.5rem 0; }
.section + .section { border-top: 1px solid var(--sx-teal-mist); }
.tint { background: var(--sx-teal-wash); }
.muted { color: var(--sx-muted); }
.small { font-size: .875rem; line-height: 1.6; }

.btn {
  display: inline-block; font: inherit; font-weight: 600;
  background: var(--sx-teal-deep); color: #fff; border: 0;
  padding: .9rem 1.9rem; border-radius: var(--sx-radius);
  text-decoration: none; cursor: pointer; transition: background .15s ease;
}
.btn:hover { background: var(--sx-teal-living); }
.btn:focus-visible { outline: 3px solid var(--sx-amber); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: #d7dbd9; color: #7b807e; cursor: not-allowed; opacity: .85;
}
.btn-wide { width: 100%; text-align: center; }

/* =========================================================================
   TRUST PAGE. Rebuilt 8 September 2026 against the approved Claude Design
   mockup (artifact fd568ccd). Everything below "Funnel" is untouched: the
   whole point of a shorter landing page is that it hands off into the same
   funnel, not a different looking one.
   ========================================================================= */

/* Headings only. Body stays on the system font, which costs nothing and is
   already good on every platform this audience uses. 39KB, latin, weight 600,
   subset from the variable font. swap so text is never invisible while it
   loads: on a slow phone, blank headings are worse than Georgia headings. */
@font-face {
  font-family: "Source Serif 4";
  src: url("./source-serif-4-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Site header, trust page only */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sx-teal-mist); padding: 1rem 0;
}
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
/* 51px, up 50% from the 34px it launched at. Coenie's call, 8 September 2026.

   The nudge is not decoration. solexilla-logo-primary.svg carries uneven
   whitespace inside its 64 unit viewBox: the ink runs from 19.25 to 52.75, so
   its optical centre sits 4 units BELOW the box centre. Flexbox centres the
   box, not the ink, so the logo renders low against the nav text, and the
   bigger the logo the more it shows. 4/64 is 6.25% of the rendered height, so
   a percentage translate corrects it at any size and needs no maintenance if
   the height changes again. Measured, not guessed: see the header alignment
   note in 01-brand-identity.md. */
.site-head img { height: 51px; width: auto; display: block; transform: translateY(-6.25%); }
.site-logo { display: block; line-height: 0; }
.site-logo:focus-visible { outline: 3px solid var(--sx-amber); outline-offset: 4px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.site-nav a { text-decoration: none; font-weight: 500; color: var(--sx-body); }
.site-nav a:hover { color: var(--sx-teal-deep); }
.site-nav a.btn { color: #fff; }

/* Hero */
.hero {
  position: relative; overflow: hidden;
  background: var(--sx-teal-wash);
  border-bottom: 1px solid var(--sx-teal-mist);
  padding: 4.5rem 0 5rem;
}
/* The Radiating Arches, biased hard to the bottom right and bleeding off the
   edge, so the headline and lede always sit on flat wash. Placement is the
   first line of defence on contrast; the file's own opacities are the second. */
.hero::after {
  content: ""; position: absolute; right: -6%; bottom: -18%;
  width: min(46rem, 68%); aspect-ratio: 8 / 5;
  background: url("./solexilla-illustration-radiating-arches.svg") no-repeat center / contain;
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 3.5rem; align-items: center; }
.hero-grid.has-video { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.hero-copy { min-width: 0; max-width: 40rem; }

.badge {
  display: inline-flex; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid var(--sx-teal-mist); border-radius: var(--sx-radius);
  padding: .5rem .9rem; margin: 0 0 1.4rem;
  font-size: .95rem; font-weight: 600; color: var(--sx-teal-deep); letter-spacing: .02em;
}
.badge-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--sx-teal-living); flex: 0 0 auto; }

.h1-accent { color: var(--sx-teal-deep); }
.hero h1 { letter-spacing: -0.02em; text-wrap: pretty; }
.lede { font-size: 1.2rem; color: var(--sx-muted); margin-bottom: 2rem; max-width: 34em; }
.note { color: var(--sx-muted); font-style: italic; margin: .9rem 0 0; }
.under-btn { margin-top: .9rem; }

.btn-lg { font-size: 1.1rem; padding: 1.05rem 1.9rem; box-shadow: 0 10px 24px rgba(15, 110, 86, .2); }
.btn-arrow { margin-left: .5rem; }
.btn-invert { background: #fff; color: var(--sx-teal-deep); box-shadow: none; }
.btn-invert:hover { background: var(--sx-amber-light); color: var(--sx-ink); }

/* Hero video. Not live yet: see the comment in index.html. Kept here so that
   turning it on is a markup change only. */
.hero-video { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.hero-video-frame {
  position: relative; border-radius: var(--sx-radius); overflow: hidden;
  background: var(--sx-ink); border: 1px solid var(--sx-teal-mist);
  box-shadow: 0 24px 60px rgba(4, 52, 44, .18); aspect-ratio: 4 / 3;
}
.hero-video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video-sound {
  position: absolute; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .95rem; font-weight: 600;
  background: #fff; color: var(--sx-ink); border: 1px solid var(--sx-teal-mist);
  border-radius: var(--sx-radius); padding: .6rem .85rem; cursor: pointer;
}
.hero-video-sound:hover { border-color: var(--sx-amber); color: var(--sx-teal-deep); }
.hero-video-sound:focus-visible { outline: 3px solid var(--sx-amber); outline-offset: 2px; }
.hero-video figcaption { margin-top: .85rem; }

/* How it works */
.rule { width: 3.5rem; height: 3px; background: var(--sx-amber); border-radius: var(--sx-radius); margin: 1.25rem 0 2.5rem; }
.card { background: var(--sx-teal-wash); border: 1px solid var(--sx-teal-mist); border-radius: var(--sx-radius); padding: 1.75rem 1.6rem; }
.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.step-n {
  font-family: var(--sx-font-head); color: var(--sx-teal-deep); font-size: 1.15rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; margin-bottom: .9rem;
  background: #fff; border: 1px solid var(--sx-teal-mist); border-radius: var(--sx-radius);
}
.card h3 { font-size: 1.35rem; margin-bottom: .55rem; }
.card p:last-child { margin-bottom: 0; }

/* Final CTA band */
.cta-band { position: relative; overflow: hidden; background: var(--sx-teal-deep); padding: 4.5rem 0; }
/* Second placement of the illustration, agreed 8 September 2026. This is a
   change from the hero-only scope in 03-illustration-system.md, which has been
   updated to match rather than left disagreeing. */
.cta-band::before {
  content: ""; position: absolute; left: -14%; top: -46%;
  width: min(38rem, 60%); aspect-ratio: 8 / 5;
  background: url("./solexilla-illustration-radiating-arches-reversed.svg") no-repeat center / contain;
  pointer-events: none;
}
.cta-inner { position: relative; max-width: 48rem; text-align: center; }
.cta-band h2 { color: #fff; letter-spacing: -0.015em; text-wrap: pretty; }
.cta-lede { font-size: 1.2rem; color: var(--sx-teal-mist); margin: 1.25rem auto 2rem; max-width: 32em; }
.cta-note { color: var(--sx-teal-mist); }

/* Common questions, one level of disclosure */
.disclosure {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--sx-teal-wash); border: 1px solid var(--sx-teal-mist); border-radius: var(--sx-radius);
  padding: 1.15rem 1.35rem; cursor: pointer; text-align: left;
  font-family: var(--sx-font-head); font-size: 1.3rem; font-weight: 600; color: var(--sx-ink);
}
.disclosure:hover { border-color: var(--sx-amber); }
.disclosure:focus-visible { outline: 3px solid var(--sx-amber); outline-offset: 2px; }
.disclosure-state { font-family: var(--sx-font-body); font-size: 1rem; font-weight: 600; color: var(--sx-teal-deep); }
.disclosure-panel { margin-top: 1.5rem; }

.qa { border-top: 1px solid var(--sx-teal-mist); padding: 1.3rem 0; }
.qa:last-of-type { border-bottom: 1px solid var(--sx-teal-mist); }
.qa h3 { color: var(--sx-ink); }
.qa p:last-child { margin-bottom: 0; }

/* Footer */
.site-foot { background: var(--sx-ink); color: var(--sx-teal-mist); padding: 3.5rem 0 0; margin-top: 0; }
.site-foot a { color: var(--sx-teal-mist); }
.site-foot a:hover { color: var(--sx-amber-light); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.5rem; padding-bottom: 3rem; }
.foot-logo { height: 30px; width: auto; display: block; margin-bottom: 1.1rem; }
.foot-head {
  /* 0.875rem, matching .small. This audience skews 50+; the mockup's smaller
     label size is not worth the legibility. */
  font-size: .875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sx-teal-on-dark); font-weight: 600; margin: 0 0 .9rem;
}
.foot-links { display: flex; flex-direction: column; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.site-foot .disclaimer { color: var(--sx-muted-on-dark); margin: 0; }
.foot-bar { border-top: 1px solid rgba(225, 245, 238, .18); padding: 1.15rem 0; }
.foot-bar p { margin: 0; color: var(--sx-muted-on-dark); }

/* Below this, the hero illustration moves out from behind the text and sits
   under the button as plain decoration, so contrast can never be in question
   on the screen size most of the ad traffic arrives on.

   52rem, not the 48rem used by .field-row. Measured, not guessed: ink coverage
   under the hero text is zero at 1024px and 1280px, but at 800px the outermost
   arc grazes the disclaimer line at 8% alpha. Harmless in contrast terms and
   still worth removing, because 03-illustration-system.md is explicit that
   placement, not opacity, is the first line of defence. */
@media (max-width: 52rem) {
  /* The header stacked to three lines on a phone and stood 220px tall, sticky,
     on a 812px screen. That predates the bigger logo: at 375px the logo, two
     anchor links and the button need about 465px of nav on a 335px line, so
     they were never going to share one. Shrinking the link text to force it is
     the one fix not available here, because this audience skews 50+ and the
     18px floor is deliberate.

     So on a phone the header keeps the two things that earn their place, the
     brand and the call to action, and the anchor links step aside. Nothing
     becomes unreachable: both point at sections a short scroll down this same
     page. Header height goes 220px to 72px. */
  .site-head img { height: 40px; }
  .site-nav a:not(.btn) { display: none; }

  .hero { padding: 3rem 0 0; }
  .hero::after {
    position: static; display: block; margin: 2.5rem auto 0;
    /* Capped rather than full width. At 800px, full width puts a 500px tall
       arch under the copy and the hero stops being a hero. */
    width: min(100%, 26rem); right: auto; bottom: auto; opacity: .85;
  }
  .hero-copy { max-width: none; }
  .cta-band::before { left: -30%; top: -30%; width: 90%; }
}

/* Funnel */
.funnel-head { padding: 1.25rem 0; border-bottom: 1px solid var(--sx-teal-mist); }
.funnel-head img { height: 30px; width: auto; display: block; margin-inline: auto; }
.trust-strip {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; justify-content: center;
  color: var(--sx-muted); font-size: .9rem; margin: 1.25rem 0 0; padding: 0; list-style: none;
}
.trust-strip li + li::before { content: "·"; margin-right: 1.1rem; color: var(--sx-teal-living); }
.centered { text-align: center; }

.progress-wrap { margin: 0 0 2rem; }
.progress-label { font-size: .85rem; color: var(--sx-muted); margin-bottom: .45rem; }
.progress-track { height: 6px; background: var(--sx-teal-mist); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0%; background: var(--sx-teal-living); border-radius: 999px; transition: width .3s ease; }

.opts { display: grid; gap: .7rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.opt {
  display: block; width: 100%; text-align: left; font: inherit;
  background: #fff; border: 2px solid var(--sx-teal-mist); border-radius: var(--sx-radius);
  padding: 1rem 1.15rem; cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.opt:hover { border-color: var(--sx-teal-living); background: var(--sx-teal-wash); }
.opt:focus-visible { outline: 3px solid var(--sx-amber); outline-offset: 2px; }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; color: var(--sx-ink); }
.field input {
  width: 100%; font: inherit; padding: .8rem .9rem;
  border: 2px solid var(--sx-teal-mist); border-radius: var(--sx-radius); background: #fff; color: var(--sx-body);
}
.field input:focus { outline: 0; border-color: var(--sx-teal-living); }
.field-row { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 34rem) { .field-row { grid-template-columns: 1fr; } }

/* Field types added 15 September 2026 for the workers' comp and personal injury
   verticals. Same tokens, same focus treatment as the inputs above, so a new
   screen type cannot quietly introduce a second visual language. */
.field-hint { margin: -.1rem 0 .5rem; }

.field textarea {
  width: 100%; padding: .85rem .95rem; font: inherit;
  border: 2px solid var(--sx-teal-mist); border-radius: var(--sx-radius); background: #fff; color: var(--sx-body);
  resize: vertical; min-height: 7rem;
}
.field textarea:focus { outline: 0; border-color: var(--sx-teal-living); }

.checks { border: 0; padding: 0; margin: 0; }
.checks legend {
  display: block; font-weight: 600; font-size: .95rem;
  margin-bottom: .35rem; color: var(--sx-ink); padding: 0;
}
/* Overrides the block label rule above: a checkbox and its text belong on one
   line, and the whole row is the hit target, which matters on a phone. */
.field .checks label.check {
  display: flex; align-items: flex-start; gap: .7rem;
  font-weight: 400; font-size: .95rem; line-height: 1.5;
  background: #fff; border: 2px solid var(--sx-teal-mist); border-radius: var(--sx-radius);
  padding: .75rem .9rem; margin-bottom: .5rem; cursor: pointer;
}
.field .checks label.check:hover { border-color: var(--sx-teal-living); background: var(--sx-teal-wash); }
.checks label.check input {
  width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: .15rem;
  accent-color: var(--sx-teal-deep);
}
.checks label.check:focus-within { outline: 3px solid var(--sx-amber); outline-offset: 2px; }
.other-text {
  width: 100%; padding: .75rem .9rem; font: inherit;
  border: 2px solid var(--sx-teal-mist); border-radius: var(--sx-radius); background: #fff; color: var(--sx-body);
  margin-top: -.1rem;
}
.other-text:focus { outline: 0; border-color: var(--sx-teal-living); }

.consent {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--sx-teal-wash); border: 1px solid var(--sx-teal-mist);
  border-radius: var(--sx-radius); padding: 1.1rem 1.2rem; margin: 1.5rem 0 1.25rem;
}
.consent input { margin-top: .35rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--sx-teal-deep); }
.consent label { font-size: .9rem; line-height: 1.6; }

/* Turnstile widget slot. Reserves its height so the layout does not jump when
   the iframe lands, which on a slow phone connection would otherwise move the
   submit button under the visitor's thumb mid-tap. */
.turnstile { min-height: 65px; margin: 0 0 1.1rem; }

.why-free { border-left: 3px solid var(--sx-amber); padding-left: 1.1rem; margin: 1.75rem 0; }
.why-free h3 { margin-bottom: .3rem; }

.err { color: #a3231b; font-size: .9rem; margin: .5rem 0 0; }
.back {
  background: none; border: 0; font: inherit; color: var(--sx-muted);
  cursor: pointer; padding: .4rem 0; text-decoration: underline;
}
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

main { flex: 1 0 auto; }
.site-foot, body > footer { flex-shrink: 0; }