/* ==========================================================================
   Safeline Capital — safeline.css

   Safe + Line. The lifeline.
   Porcelain-white ground, one azure line running through every section, deep
   ink-navy used sparingly as the contrast anchor. Instrument-grade restraint:
   hairlines instead of glows, crisp edges instead of haze, and colour spent
   only on the line itself.
   ========================================================================== */

/* Self-hosted Outfit (variable, latin) — replaces the Google Fonts CDN load */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/outfit-var-latin.woff2') format('woff2');
}

:root {
  --azure: #0e6fff;
  --azureInk: #0a53d6;        /* text/buttons on white: 6.5:1 */
  --azureDim: #073fa8;
  --azureHalo: rgba(14, 111, 255, 0.12);
  --night: #061631;
  --nightHi: #0a2450;
  --ink: #0a1a30;
  --inkSoft: #4a5b74;         /* on white: 6.9:1 */
  --paper: #ffffff;
  --paperTint: #f4f7fc;
  --glass: rgba(255, 255, 255, 0.82);
  --glassEdge: rgba(14, 111, 255, 0.14);
  --hairline: rgba(10, 26, 48, 0.10);
  --hairlineHi: rgba(10, 26, 48, 0.16);
  --nightText: #dfe9fb;
  --nightSoft: #9cb0d2;
  --r2xl: 22px;
  --rPill: 999px;
  --softShadow: 0 1px 2px rgba(10, 26, 48, 0.04), 0 18px 38px -26px rgba(10, 26, 48, 0.28);
  --bigShadow: 0 1px 2px rgba(10, 26, 48, 0.05), 0 34px 64px -30px rgba(10, 26, 48, 0.36);
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --easeOut: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* film grain over everything — kills the flat-render look */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

img, svg, canvas { max-width: 100%; display: block; }

a { color: var(--azureInk); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--azure);
  outline-offset: 2px;
  border-radius: 6px;
}

strong, b { font-weight: 700; }

h1, h2, h3 { font-weight: 300; line-height: 1.1; letter-spacing: -0.022em; }
h1, h2 { text-wrap: balance; }
.lede { text-wrap: pretty; }
h1 { font-size: clamp(2.5rem, 6vw, 4.3rem); }
h2 { font-size: clamp(1.95rem, 3.7vw, 3.05rem); letter-spacing: -0.028em; }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.01em; }

.skipLink {
  position: absolute; left: -9999px; top: 0;
  background: var(--night); color: #fff; padding: 10px 18px;
  border-radius: 0 0 12px 0; z-index: 200;
}
.skipLink:focus { left: 0; }

/* ------------------------------------------------------------------ layout */

.shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }

.band { padding: 92px 0; position: relative; }
.band {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
}
.bandTint {
  background:
    radial-gradient(1200px 620px at 88% 4%, rgba(14, 111, 255, 0.055), transparent 62%),
    linear-gradient(180deg, #f4f8fd, #eaf1fa);
}
.bandNight {
  background:
    radial-gradient(1000px 520px at 82% -8%, rgba(14, 111, 255, 0.30), transparent 64%),
    radial-gradient(760px 460px at -4% 108%, rgba(47, 125, 255, 0.16), transparent 60%),
    linear-gradient(180deg, var(--nightHi), var(--night) 62%, #04101f 100%);
  color: var(--nightText);
}
.bandNight h2 { color: #fff; }

/* the line motif, section by section: every band opens on one azure seam
   that fades out at both margins */
.band::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(14, 111, 255, 0) 0%, rgba(14, 111, 255, 0.30) 26%,
    rgba(14, 111, 255, 0.30) 74%, rgba(14, 111, 255, 0) 100%);
}
.bandNight::before {
  background: linear-gradient(90deg,
    rgba(122, 175, 255, 0) 0%, rgba(122, 175, 255, 0.45) 26%,
    rgba(122, 175, 255, 0.45) 74%, rgba(122, 175, 255, 0) 100%);
}

/* eyebrow + its own drawn hairline — the smallest instance of the motif */
.kicker {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--azureInk);
  margin-bottom: 20px;
}
.kicker::after {
  content: '';
  display: block; height: 1px; width: clamp(38px, 7vw, 92px);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--azure), rgba(14, 111, 255, 0));
}
.bandNight .kicker { color: #86b4ff; }
.bandNight .kicker::after { background: linear-gradient(90deg, #6ba5ff, rgba(107, 165, 255, 0)); }

.lede { max-width: 620px; color: var(--inkSoft); font-size: 1.1rem; margin-top: 18px; }
.bandNight .lede { color: var(--nightSoft); }

/* ------------------------------------------------------------------ header */

.topBar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}
.topBar.isScrolled {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(14, 111, 255, 0.16);
  box-shadow: 0 12px 30px -24px rgba(10, 26, 48, 0.4);
}
.topBarRow {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: 24px;
}

.brandLock { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.brandLock:hover { text-decoration: none; }
.brandLock svg { width: 40px; height: 40px; flex: none; }
.brandWord { font-size: 1.02rem; letter-spacing: 0.16em; white-space: nowrap; }
.brandWord b { font-weight: 700; }
.brandWord span { font-weight: 300; color: var(--inkSoft); }

.navLinks { display: flex; align-items: center; gap: 30px; list-style: none; }
.navLinks a { color: var(--ink); font-weight: 300; font-size: 0.98rem; }
.navLinks a:hover { color: var(--azureInk); text-decoration: none; }
/* nav links carry the motif too: a hairline draws under them on hover */
.navLinks li:not(:last-child) a { position: relative; padding-bottom: 3px; }
.navLinks li:not(:last-child) a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--azure);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.4s var(--easeOut);
}
.navLinks li:not(:last-child) a:hover::after { transform: scaleX(1); }

.menuBtn {
  display: none;
  background: none; border: 1px solid var(--hairline); border-radius: 12px;
  width: 46px; height: 46px; cursor: pointer; color: var(--ink);
  align-items: center; justify-content: center;
}

/* ------------------------------------------------------------------ buttons */

.pillBtn, .pillGhost, .pillNight {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--rPill);
  padding: 15px 30px;
  font-family: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer; border: 0; line-height: 1;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.pillBtn {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, #1275ff, var(--azureInk));
  color: #fff;
  box-shadow: 0 1px 1px rgba(7, 63, 168, 0.4), 0 16px 30px -16px rgba(10, 83, 214, 0.75);
}
/* a light travels the button on hover — the line, again */
.pillBtn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.32) 50%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--easeOut);
  pointer-events: none;
}
.pillBtn:hover::after { transform: translateX(120%); }
.pillBtn:hover { box-shadow: 0 1px 1px rgba(7, 63, 168, 0.4), 0 22px 40px -16px rgba(10, 83, 214, 0.8); text-decoration: none; }
.pillGhost {
  background: rgba(255, 255, 255, 0.72);
  color: var(--azureInk);
  border: 1px solid rgba(14, 111, 255, 0.34);
}
.pillGhost:hover { background: #fff; border-color: rgba(14, 111, 255, 0.6); text-decoration: none; }
.pillNight {
  background: #fff; color: var(--azureDim);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}
.pillNight:hover { text-decoration: none; box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.65); }
.pillSlim { padding: 12px 24px; font-size: 0.94rem; }

/* ------------------------------------------------------------------ hero */

.heroZone {
  position: relative;
  min-height: min(94vh, 960px);
  display: flex; align-items: center;
  padding: 72px 0 84px;
  /* fallback ground when WebGL is unavailable — the canvas paints over it */
  background:
    radial-gradient(900px 620px at 78% 44%, rgba(14, 111, 255, 0.10), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f7fafe 62%, #eef4fc 100%);
  overflow: hidden;
}
/* the seam where the hero hands off to the page */
.heroZone::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 92%);
}
#lifeline {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.heroInner { position: relative; z-index: 2; }
.heroCopy { max-width: 660px; position: relative; }
/* legibility scrim: a soft white pool that guarantees the copy never sits on
   the art, whatever the line is doing behind it */
.heroCopy::before {
  content: '';
  position: absolute; inset: -16% -30% -22% -36%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(58% 54% at 36% 46%,
    rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.74) 46%, rgba(255, 255, 255, 0) 76%);
}
.heroCopy h1 {
  color: var(--ink);
  font-size: clamp(2.9rem, 5.6vw, 4.9rem);
  line-height: 0.98;
  letter-spacing: -0.038em;
}
.heroCopy h1 strong {
  color: var(--azureDim);
  background: linear-gradient(112deg, #073fa8 0%, #1470ff 52%, #0a53d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.heroSub {
  margin-top: 26px; max-width: 540px;
  font-size: 1.14rem; color: var(--inkSoft);
}
.heroCtas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.heroFine {
  margin-top: 22px; font-size: 0.88rem; color: var(--inkSoft);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.heroFine svg { width: 16px; height: 16px; color: var(--azureInk); flex: none; }

/* readouts, not glass blobs: each one hangs off its own azure tick */
.heroChips {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 58px;
  position: relative;
}
.chipGlass {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 4px 34px 2px 20px;
  min-width: 0;
}
.chipGlass::before {
  content: '';
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px;
  background: linear-gradient(180deg, var(--azure), rgba(14, 111, 255, 0.12));
}
.chipGlass .chipNum {
  font-size: 1.62rem; font-weight: 700; color: var(--ink);
  line-height: 1.15; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.chipGlass .chipLbl { font-size: 0.79rem; color: var(--inkSoft); letter-spacing: 0.01em; }

/* ------------------------------------------------------------ lucide icons */

.lci {
  width: 28px; height: 28px;
  display: block; flex: none;
  stroke-width: 2px;
  color: var(--azureInk);
  margin: 0 0 14px;
}

/* ------------------------------------------------------------------ products */

.productGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}
.productCard {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r2xl);
  padding: 32px 28px 28px;
  box-shadow: var(--softShadow);
  transition: transform 0.4s var(--easeOut), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  transform-style: preserve-3d;
  display: flex; flex-direction: column;
}
/* the card's own segment of the line, drawn along its top edge on hover */
.productCard::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: var(--r2xl) var(--r2xl) 0 0;
  background: linear-gradient(90deg, var(--azure), rgba(14, 111, 255, 0.05));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.55s var(--easeOut);
  z-index: 3;
}
.productCard:hover::before { transform: scaleX(1); }
.productCard:hover { box-shadow: var(--bigShadow); border-color: rgba(14, 111, 255, 0.24); }
.productCard h3 { margin-bottom: 14px; }
.flagCard {
  grid-column: span 3;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center;
  background:
    radial-gradient(720px 360px at 88% 0%, rgba(14, 111, 255, 0.07), transparent 62%),
    #fff;
  border: 1px solid rgba(14, 111, 255, 0.2);
}
.flagCard h3 { font-size: 1.7rem; font-weight: 700; }
.flagBadge {
  display: inline-block;
  background: var(--azureHalo); color: var(--azureDim);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: var(--rPill); padding: 6px 14px; margin-bottom: 16px;
}
.numRow { display: flex; gap: 26px; margin: 14px 0 16px; }
.numRow div b { display: block; font-size: 1.28rem; font-weight: 700; color: var(--azureInk); }
.numRow div span { font-size: 0.8rem; color: var(--inkSoft); letter-spacing: 0.04em; }
.productCard p { color: var(--inkSoft); font-size: 0.98rem; flex: 1; }
.cardGo {
  margin-top: 20px; font-weight: 700; font-size: 0.95rem;
  display: inline-flex; align-items: center; gap: 8px;
}
.cardGo::after { content: '\2192'; transition: transform 0.25s var(--ease); }
.productCard:hover .cardGo::after { transform: translateX(5px); }

.flagFigure { position: relative; min-height: 220px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(150deg, var(--nightHi), var(--night)); }
.flagFigure svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ------------------------------------------------------------------ steps */

.stepsWrap { position: relative; margin-top: 68px; }
.stepsLine {
  position: absolute; left: 0; right: 0; top: -8px;
  height: 72px; width: 100%;
  pointer-events: none;
}
.stepsLine path {
  fill: none;
  stroke: url(#lineGrad);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(96, 165, 255, 0.55));
}
.stepsGrid {
  position: relative;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
}
.stepCell { text-align: center; padding: 0 6px; }
.stepDot {
  width: 56px; height: 56px; margin: 0 auto 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #dcebff);
  color: var(--azureDim);
  font-weight: 700; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px rgba(14, 111, 255, 0.22), 0 14px 30px -10px rgba(0, 0, 0, 0.5);
  position: relative; z-index: 2;
}
.stepCell h3 { color: #fff; margin-bottom: 10px; font-size: 1.12rem; }
.stepCell p { color: var(--nightSoft); font-size: 0.94rem; }

/* ------------------------------------------------------------------ why */

.whyGrid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  margin-top: 48px;
}
.statTile {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--softShadow);
  padding: 26px 24px;
  transition: transform 0.4s var(--easeOut), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.statTile::before {
  content: '';
  position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--azure), rgba(14, 111, 255, 0));
}
.statTile:hover { border-color: rgba(14, 111, 255, 0.24); box-shadow: var(--bigShadow); }
.statTile b {
  display: block; font-size: 2.05rem; font-weight: 700; color: var(--ink);
  line-height: 1.12; letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.statTile span { color: var(--inkSoft); font-size: 0.9rem; }

.whyPoints {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 34px;
}
.whyPoint {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline); border-radius: var(--r2xl);
  padding: 30px 28px; box-shadow: var(--softShadow);
  transition: transform 0.4s var(--easeOut), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.whyPoint:hover { border-color: rgba(14, 111, 255, 0.24); box-shadow: var(--bigShadow); }
.whyPoint svg { width: 40px; height: 40px; color: var(--azureInk); margin-bottom: 18px; }
.whyPoint h3 { margin-bottom: 10px; }
.whyPoint p { color: var(--inkSoft); font-size: 0.97rem; }

/* ------------------------------------------------------------------ industries */

.indGrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 48px;
}
.indCard {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 18px; padding: 26px 24px;
  box-shadow: var(--softShadow);
  transition: transform 0.4s var(--easeOut), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.indCard:hover { border-color: rgba(14, 111, 255, 0.3); box-shadow: var(--bigShadow); }
.indCard svg { width: 34px; height: 34px; color: var(--azureInk); margin-bottom: 16px; }
.indCard h3 { font-size: 1.02rem; margin-bottom: 6px; }
.indCard p { color: var(--inkSoft); font-size: 0.88rem; }
.indGridTrio { grid-template-columns: repeat(3, 1fr); }

/* ------------------------------------------------------------------ photo band
   Azure duotone: grayscale photo + brand-blue screen overlay keeps the
   imagery bright and inside the palette instead of sitting on top of it. */

.photoBand {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #eaf1fa;
  border-top: 1px solid rgba(14, 111, 255, 0.16);
  border-bottom: 1px solid rgba(14, 111, 255, 0.16);
  isolation: isolate;
}
/* the lifeline carries straight across the photographs */
.photoBand::after {
  content: '';
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M-10 214 C 180 214, 300 96, 500 118 S 820 236, 1210 78' fill='none' stroke='%23bcd8ff' stroke-width='2.2' stroke-linecap='round' opacity='0.85'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.9;
}
.photoDuo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  height: clamp(220px, 24vw, 340px);
  background: var(--nightHi);
}
.photoDuo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  filter: grayscale(1) contrast(1.12) brightness(0.9);
  will-change: transform;
}
/* shadows -> azure.
   Screen-blending is additive in the highlights: out = a + k(1-a)b. Pushing a
   brightened grayscale under a near-full-blue layer at high opacity drove
   every mid-to-high tone to the same flat blue, so the two well-lit panels
   (bakery, barber) rendered as solid colour blocks with no image left in
   them. The photograph now goes in slightly darker with more contrast and
   the blue is carried at roughly half strength, which keeps the duotone
   while leaving the full tonal range of the picture visible. */
.photoDuo::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, #0d4fbe, #2f7dff);
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
}
/* gentle brand wash + edge shading so panels melt into the light bands */
.photoDuo::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(236, 243, 255, 0.42), rgba(14, 111, 255, 0.05) 34%, rgba(8, 28, 66, 0.13) 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 62%, rgba(8, 28, 66, 0.12) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* CTA band — same duotone world, dimmed under a night scrim */
.ctaZone { position: relative; overflow: hidden; }
.ctaZone::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: url('assets/img/owner-garage.webp') center 42% / cover no-repeat;
  filter: grayscale(1) brightness(0.85) contrast(1.05);
  opacity: 0.20;
}
.ctaZone::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(14, 111, 255, 0.30), transparent 62%),
    linear-gradient(180deg, rgba(8, 28, 66, 0.66), rgba(5, 18, 48, 0.78));
}
.ctaZone .shell { position: relative; z-index: 2; }

/* ------------------------------------------------------------------ faq */

.faqList { margin-top: 46px; max-width: 820px; }
.faqItem {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px; margin-bottom: 12px;
  box-shadow: var(--softShadow);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.faqItem:hover, .faqItem[open] { border-color: rgba(14, 111, 255, 0.26); }
.faqItem summary {
  list-style: none; cursor: pointer;
  padding: 22px 60px 22px 26px;
  font-weight: 700; font-size: 1.05rem;
  position: relative;
}
.faqItem summary::-webkit-details-marker { display: none; }
.faqItem summary::after {
  content: '';
  position: absolute; right: 24px; top: 50%;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--azureInk);
  border-bottom: 2.5px solid var(--azureInk);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.faqItem[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faqItem div { padding: 0 26px 24px; color: var(--inkSoft); font-size: 0.98rem; }

/* ------------------------------------------------------------------ CTA band */

.ctaZone { text-align: center; padding: 110px 0; }
.ctaZone h2 { max-width: 720px; margin: 0 auto; }
.ctaZone p { color: var(--nightSoft); margin-top: 18px; }
.ctaRow { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.ctaPhone { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 2px; }
.ctaPhone:hover { text-decoration: none; border-bottom-color: #fff; }

/* ------------------------------------------------------------------ footer */

.siteFoot {
  position: relative;
  background: linear-gradient(180deg, #f6f9fd, #eef3fa);
  border-top: 1px solid var(--hairline);
  padding: 72px 0 44px;
  font-size: 0.93rem;
}
.siteFoot::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(14, 111, 255, 0) 0%, rgba(14, 111, 255, 0.3) 26%,
    rgba(14, 111, 255, 0.3) 74%, rgba(14, 111, 255, 0) 100%);
}
.footCols {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px;
}
.footCols h4 {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--inkSoft); margin-bottom: 16px;
}
.footCols ul { list-style: none; }
.footCols li { margin-bottom: 10px; }
.footCols a { color: var(--ink); }
.footCols a:hover { color: var(--azureInk); }
.footBrand p { color: var(--inkSoft); margin-top: 14px; max-width: 300px; }
.footContact li { color: var(--inkSoft); }
.disclosureNote {
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--hairline);
  color: var(--inkSoft); font-size: 0.85rem; max-width: 880px;
}
.copyLine { margin-top: 22px; color: var(--inkSoft); font-size: 0.85rem; }

/* ------------------------------------------------------------------ apply page */

.applyZone {
  position: relative;
  padding: 70px 0 100px;
  background:
    radial-gradient(1000px 560px at 86% -6%, rgba(14, 111, 255, 0.10), transparent 62%),
    linear-gradient(180deg, #ffffff, #f5f8fd 46%, #eef3fb 100%);
}
.applyZone::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(14, 111, 255, 0) 0%, rgba(14, 111, 255, 0.3) 26%,
    rgba(14, 111, 255, 0.3) 74%, rgba(14, 111, 255, 0) 100%);
}
.applySplit { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: start; }
.applyPitch { position: sticky; top: 110px; }
.applyPitch h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.applyPitch h1 strong { color: var(--azureInk); }
.nextSteps { margin-top: 44px; display: grid; gap: 20px; }
.nextStep { display: flex; gap: 18px; align-items: flex-start; }
.nextStep i {
  font-style: normal; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--azureHalo); color: var(--azureDim);
  font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.nextStep b { display: block; font-weight: 700; }
.nextStep span { color: var(--inkSoft); font-size: 0.95rem; }

.formCard {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r2xl);
  box-shadow: var(--bigShadow);
  padding: 42px 40px;
}
.formCard::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: var(--r2xl) var(--r2xl) 0 0;
  background: linear-gradient(90deg, var(--azure), rgba(14, 111, 255, 0.06));
}
.formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fieldWrap { display: flex; flex-direction: column; }
.fieldWrap.fullSpan { grid-column: 1 / -1; }
.fieldWrap label { font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; }
.fieldWrap label em { font-style: normal; font-weight: 300; color: var(--inkSoft); }
.fieldWrap input, .fieldWrap select, .fieldWrap textarea {
  font-family: inherit; font-size: 1rem; font-weight: 300;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  width: 100%;
}
.fieldWrap textarea { min-height: 110px; resize: vertical; }
.fieldWrap input:focus, .fieldWrap select:focus, .fieldWrap textarea:focus {
  border-color: var(--azure);
  box-shadow: 0 0 0 4px var(--azureHalo);
  outline: none;
}
.fieldWrap input[aria-invalid="true"], .fieldWrap select[aria-invalid="true"] {
  border-color: #d5343e;
}
.fieldNote { color: #b3262f; font-size: 0.85rem; margin-top: 7px; }
.fieldNote[hidden] { display: none; }
.formFoot { grid-column: 1 / -1; margin-top: 6px; }
.formFoot .pillBtn { width: 100%; padding: 17px 30px; font-size: 1.05rem; }
.formFine { margin-top: 14px; font-size: 0.83rem; color: var(--inkSoft); text-align: center; }

/* honeypot — keep off-screen for humans */
.fieldTrap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.doneCard { text-align: center; padding: 30px 10px; }
.doneCard svg { width: 72px; height: 72px; margin: 0 auto 22px; color: var(--azureInk); }
.doneCard h2 { font-weight: 700; font-size: 1.6rem; }
.doneCard p { color: var(--inkSoft); margin-top: 12px; }

/* --------------------------------------------------- five-step application */

.appProgress { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
#progText { font-weight: 700; font-size: 1.02rem; }
#progPct { color: var(--inkSoft); font-size: 0.88rem; }
.progTrack {
  height: 6px; border-radius: var(--rPill);
  background: rgba(14, 111, 255, 0.12);
  overflow: hidden; margin-bottom: 30px;
}
#progFill {
  height: 100%; width: 20%; border-radius: var(--rPill);
  background: linear-gradient(90deg, var(--azure), #5ea2ff);
  box-shadow: 0 0 12px rgba(14, 111, 255, 0.6);
  transition: width 0.45s var(--ease);
}
.step { border: 0; min-width: 0; }
.step[hidden] { display: none; }
.stepTitle { font-size: 1.35rem; font-weight: 700; margin-bottom: 6px; outline: none; }
.stepNote { color: var(--inkSoft); font-size: 0.95rem; margin-bottom: 24px; }
.stepGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.stepGrid .fullSpan { grid-column: 1 / -1; }
.fieldHint { color: var(--inkSoft); font-size: 0.82rem; margin-top: 7px; }

.seg { display: inline-flex; gap: 10px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 82px; min-height: 46px; padding: 10px 24px;
  border-radius: var(--rPill);
  border: 1.5px solid var(--hairline);
  background: #fff; font-weight: 700; font-size: 0.95rem;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.seg label:hover span { border-color: rgba(14, 111, 255, 0.45); }
.seg input:checked + span {
  background: linear-gradient(140deg, var(--azure), var(--azureInk));
  color: #fff; border-color: transparent;
  box-shadow: 0 10px 22px -10px rgba(10, 92, 224, 0.6);
}
.seg input:focus-visible + span { outline: 3px solid var(--azure); outline-offset: 2px; }
.seg[aria-invalid="true"] span { border-color: #d5343e; }

.checkRow { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 0.92rem; color: var(--inkSoft); }
.checkRow input { width: 18px; height: 18px; accent-color: var(--azure); }

.dropZone {
  border: 1.5px dashed rgba(14, 111, 255, 0.4);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
  padding: 28px 22px; text-align: center;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.dropZone.isOver { border-color: var(--azure); background: rgba(14, 111, 255, 0.06); }
.dropZone p { margin-bottom: 4px; }
.dropZone small { color: var(--inkSoft); font-size: 0.82rem; }
.browseBtn {
  background: none; border: 0; padding: 0;
  color: var(--azureInk); font-family: inherit; font-size: 1rem; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}
.chipList { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.chip {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 12px;
  padding: 8px 12px; font-size: 0.9rem;
}
.chip span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip i { font-style: normal; color: var(--inkSoft); font-size: 0.8rem; flex: none; }
.chip button {
  border: 0; background: none; cursor: pointer;
  color: var(--inkSoft); font-size: 1.15rem; line-height: 1;
  min-width: 34px; min-height: 34px; border-radius: 8px; flex: none;
}
.chip button:hover { color: #b3262f; background: rgba(213, 52, 62, 0.08); }

.reviewList { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; margin: 4px 0 24px; }
.reviewList > div { border-bottom: 1px solid var(--hairline); padding-bottom: 8px; min-width: 0; }
.reviewList dt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inkSoft); }
.reviewList dd { font-weight: 700; font-size: 0.95rem; margin: 2px 0 0; overflow-wrap: anywhere; }
.consentLine {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(14, 111, 255, 0.06);
  border: 1px solid rgba(14, 111, 255, 0.18);
  border-radius: 14px; padding: 14px 16px;
  font-size: 0.92rem; color: var(--inkSoft);
  margin-bottom: 22px;
}
.consentLine svg { width: 20px; height: 20px; flex: none; color: var(--azureInk); margin-top: 2px; }

.sigWrap {
  border: 1.5px solid var(--hairline); border-radius: 16px;
  background: #fff; position: relative; overflow: hidden;
}
.sigWrap[aria-invalid="true"] { border-color: #d5343e; }
#sigPad { width: 100%; height: 170px; display: block; touch-action: none; cursor: crosshair; }
.sigBase {
  position: absolute; left: 18px; right: 18px; bottom: 34px;
  border-bottom: 1.5px dashed rgba(13, 33, 68, 0.25);
  pointer-events: none;
}
.sigRow { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.sigRow small { color: var(--inkSoft); font-size: 0.85rem; }
.sigClear {
  background: none; border: 1.5px solid var(--hairline); border-radius: var(--rPill);
  padding: 9px 20px; font-family: inherit; font-weight: 700; font-size: 0.88rem;
  color: var(--ink); cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.sigClear:hover { border-color: var(--azure); color: var(--azureInk); }

.appNav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 32px; }
.backBtn {
  background: none; border: 1.5px solid var(--hairline); border-radius: var(--rPill);
  padding: 14px 28px; font-family: inherit; font-size: 0.98rem; font-weight: 700;
  color: var(--ink); cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.backBtn:hover { border-color: var(--azure); color: var(--azureInk); }
.appNav .pillBtn { margin-left: auto; min-width: 190px; }
.submitErr {
  background: rgba(213, 52, 62, 0.08); border: 1px solid rgba(213, 52, 62, 0.3);
  color: #b3262f; border-radius: 12px; padding: 12px 16px;
  font-size: 0.92rem; margin-top: 16px;
}

@media (max-width: 768px) {
  .stepGrid { grid-template-columns: 1fr; }
  .reviewList { grid-template-columns: 1fr; }
  .appNav { flex-wrap: wrap; }
  .appNav .pillBtn { flex: 1; }
}

/* ------------------------------------------------------------------ threadline
   The layout DNA: one azure line draws through the whole page, connecting
   sections — joints between bands, an alternating rail, a diagonal cascade,
   and a horizontal service rail. Same palette, same glass, same glow. */

.threadJoint {
  width: 1px; height: 84px;
  margin: -30px auto 44px;
  position: relative;
  background: linear-gradient(180deg, rgba(14, 111, 255, 0), rgba(14, 111, 255, 0.42) 45%, rgba(14, 111, 255, 0.7));
}
.threadJoint::after {
  content: '';
  position: absolute; left: 50%; bottom: -4px;
  width: 9px; height: 9px; border-radius: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1.5px solid var(--azure);
  box-shadow: 0 0 0 4px rgba(14, 111, 255, 0.1);
}

/* alternating rail — Why Safeline */
.threadRail {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 96px;
  margin-top: 56px;
  padding: 20px 0 10px;
}
.threadRail::before {
  content: '';
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(14, 111, 255, 0) 0%, rgba(14, 111, 255, 0.5) 12%,
    rgba(14, 111, 255, 0.6) 55%, rgba(14, 111, 255, 0.45) 88%,
    rgba(14, 111, 255, 0) 100%);
}
.railItem {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline); border-radius: var(--r2xl);
  padding: 30px 28px; box-shadow: var(--softShadow);
  max-width: 470px; width: 100%;
  transition: transform 0.4s var(--easeOut), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.railItem:hover { border-color: rgba(14, 111, 255, 0.24); box-shadow: var(--bigShadow); }
.railItem .lci { width: 40px; height: 40px; margin-bottom: 18px; }
.railItem h3 { margin-bottom: 10px; }
.railItem p { color: var(--inkSoft); font-size: 0.97rem; }
.railLeft { grid-column: 1; justify-self: end; }
.railRight { grid-column: 2; justify-self: start; margin-top: 110px; }
/* connector stub + node dot on the line */
.railItem::before {
  content: '';
  position: absolute; top: 46px; width: 48px; height: 2px;
}
.railLeft::before { right: -48px; background: linear-gradient(90deg, rgba(14, 111, 255, 0.12), rgba(14, 111, 255, 0.6)); }
.railRight::before { left: -48px; background: linear-gradient(90deg, rgba(14, 111, 255, 0.6), rgba(14, 111, 255, 0.12)); }
.railItem::after {
  content: '';
  position: absolute; top: 41px; width: 11px; height: 11px; border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--azure);
  box-shadow: 0 0 0 4px rgba(14, 111, 255, 0.1);
}
.railLeft::after { right: -56px; }
.railRight::after { left: -56px; }

/* diagonal cascade — Industries */
.indCascade { position: relative; margin-top: 48px; padding-bottom: 56px; }
.indCascade .indGrid { margin-top: 0; position: relative; z-index: 1; }
.bandLine {
  position: absolute; left: -60px; right: -60px; top: -44px; bottom: -20px;
  width: calc(100% + 120px); height: calc(100% + 64px);
  pointer-events: none; z-index: 0;
}
.bandLine path {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(96, 165, 255, 0.45));
}
.bandLine path.selfDraw { transition: stroke-dashoffset 2.6s var(--ease) 0.2s; }
.indGridTrio .indCard { position: relative; }
.indGridTrio .indCard:nth-child(3n+2) { top: 26px; }
.indGridTrio .indCard:nth-child(3n) { top: 52px; }

/* horizontal service rail — Business services */
.svcRail {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin-top: 64px; text-align: center;
}
.svcRail::before {
  content: '';
  position: absolute; left: 4%; right: 4%; top: 33px; height: 1px;
  background: linear-gradient(90deg,
    rgba(14, 111, 255, 0) 0%, rgba(14, 111, 255, 0.45) 12%,
    rgba(14, 111, 255, 0.6) 50%, rgba(14, 111, 255, 0.45) 88%,
    rgba(14, 111, 255, 0) 100%);
}
.svcCell { position: relative; padding: 0 10px; }
.svcDot {
  width: 66px; height: 66px; margin: 0 auto 20px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(14, 111, 255, 0.28);
  box-shadow: 0 0 0 5px rgba(14, 111, 255, 0.07), 0 16px 28px -18px rgba(10, 26, 48, 0.4);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.svcDot .lci { margin: 0; width: 30px; height: 30px; }
.svcCell h3 { font-size: 1.05rem; margin-bottom: 8px; }
.svcCell p { color: var(--inkSoft); font-size: 0.92rem; max-width: 250px; margin: 0 auto; }

@media (max-width: 1024px) {
  .bandLine { display: none; }
  .indGridTrio .indCard:nth-child(3n+2), .indGridTrio .indCard:nth-child(3n) { top: 0; }
  .indCascade { padding-bottom: 0; }
}
@media (max-width: 768px) {
  .threadJoint { height: 56px; margin: -14px auto 32px; }
  .threadRail { grid-template-columns: 1fr; column-gap: 0; padding: 0 0 0 40px; }
  .threadRail::before { left: 10px; transform: none; }
  .railLeft, .railRight { grid-column: 1; justify-self: stretch; margin-top: 0; max-width: none; }
  .railItem + .railItem { margin-top: 22px; }
  .railLeft::before, .railRight::before { left: -30px; right: auto; width: 30px;
    background: linear-gradient(90deg, rgba(14, 111, 255, 0.6), rgba(14, 111, 255, 0.12)); }
  .railLeft::after, .railRight::after { left: -36px; right: auto; }
  .svcRail { grid-template-columns: 1fr; gap: 0; text-align: left; margin-top: 44px; }
  .svcRail::before {
    left: 33px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto;
    background: linear-gradient(180deg, rgba(14, 111, 255, 0.55), rgba(14, 111, 255, 0.08));
  }
  .svcCell { display: grid; grid-template-columns: 68px 1fr; gap: 0 20px; padding: 0 0 32px; }
  .svcDot { margin: 0; grid-row: span 2; }
  .svcCell h3 { align-self: end; }
  .svcCell p { margin: 0; max-width: none; }
}

/* ------------------------------------------------------------------ legal + utility pages */

.legalZone {
  padding: 80px 0 100px;
  background:
    radial-gradient(900px 480px at 92% 0%, rgba(14, 111, 255, 0.06), transparent 62%),
    linear-gradient(180deg, #ffffff, #f7fafd 44%, #f1f5fb 100%);
}
.legalZone article { max-width: 760px; }
.legalZone h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 8px; }
.legalStamp { color: var(--inkSoft); font-size: 0.9rem; margin-bottom: 40px; }
.legalZone h2 { font-size: 1.3rem; font-weight: 700; margin: 38px 0 12px; }
.legalZone p, .legalZone li { color: var(--inkSoft); margin-bottom: 14px; }
.legalZone ul { padding-left: 22px; margin-bottom: 14px; }

.lostZone {
  min-height: 78vh; display: flex; align-items: center; text-align: center;
  position: relative; overflow: hidden;
  background:
    radial-gradient(1000px 580px at 50% -12%, rgba(14, 111, 255, 0.11), transparent 62%),
    linear-gradient(180deg, #ffffff, #f6f9fd 55%, #eef3fb 100%);
}
.lostZone .shell { position: relative; z-index: 2; }
.lostCode { font-size: clamp(5rem, 16vw, 9rem); font-weight: 700; color: var(--azureInk); line-height: 1; letter-spacing: -0.04em; }
.lostZone h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-top: 10px; }
.lostZone p { color: var(--inkSoft); margin-top: 14px; }
.lostRow { display: flex; justify-content: center; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.lostPath { position: absolute; inset: auto 0 12%; width: 100%; height: 160px; opacity: 0.5; }

.slimZone {
  padding: 90px 0 110px;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(14, 111, 255, 0.10), transparent 62%),
    linear-gradient(180deg, #ffffff, #f6f9fd 55%, #eef3fb 100%);
}
.slimCard {
  position: relative;
  max-width: 520px; margin: 0 auto;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r2xl); box-shadow: var(--bigShadow);
  padding: 46px 42px; text-align: center;
}
.slimCard::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: var(--r2xl) var(--r2xl) 0 0;
  background: linear-gradient(90deg, var(--azure), rgba(14, 111, 255, 0.06));
}
.slimCard h1 { font-size: 1.8rem; font-weight: 700; }
.slimCard p { color: var(--inkSoft); margin-top: 12px; }
.slimCard form { margin-top: 28px; display: grid; gap: 14px; text-align: left; }

/* ==========================================================================
   motion layer — "the line arrives first"

   Contract: every animated state is opt-in behind .js (set by site.js) or
   .sl-motion (set only when prefers-reduced-motion is NOT reduce). With JS
   off, or under reduced motion, every rule below collapses to the final
   visible state — nothing can be trapped in a hidden start position.

   Signature: things DRAW rather than fade. Section eyebrows draw their
   hairline, the step connector and the industries thread draw themselves,
   and a lifeline rail draws down the right margin as you scroll.
   ========================================================================== */

/* ---- scroll reveal ---- */
.js .riseIn {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.95s var(--easeOut);
}
.js .riseIn.isIn { opacity: 1; transform: none; }

/* ---- the eyebrow hairline draws in with its section ---- */
.js.sl-motion .riseIn.kicker::after {
  transform: scaleX(0);
  transition: transform 0.9s var(--easeOut) 0.18s;
}
.js.sl-motion .riseIn.kicker.isIn::after { transform: none; }

/* ---- self-drawing SVG threads ---- */
.stepsLine path.selfDraw { transition: stroke-dashoffset 2s var(--ease) 0.15s; }

/* ---- hero intro: pure CSS animation, no observer, so it can never stall ---- */
@keyframes slLift {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes slDrawX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.js.sl-motion .heroCopy > *,
.js.sl-motion .heroChips > * {
  animation: slLift 1s var(--easeOut) both;
}
.js.sl-motion .heroCopy > *:nth-child(1) { animation-delay: 0.10s; }
.js.sl-motion .heroCopy > *:nth-child(2) { animation-delay: 0.18s; }
.js.sl-motion .heroCopy > *:nth-child(3) { animation-delay: 0.28s; }
.js.sl-motion .heroCopy > *:nth-child(4) { animation-delay: 0.38s; }
.js.sl-motion .heroCopy > *:nth-child(5) { animation-delay: 0.46s; }
.js.sl-motion .heroChips > *:nth-child(1) { animation-delay: 0.56s; }
.js.sl-motion .heroChips > *:nth-child(2) { animation-delay: 0.64s; }
.js.sl-motion .heroChips > *:nth-child(3) { animation-delay: 0.72s; }
.js.sl-motion .heroCopy .kicker::after { animation: slDrawX 1s var(--easeOut) 0.34s both; }
.js.sl-motion .heroChips .chipGlass::before { animation: slLift 0.9s var(--easeOut) both; }

/* ---- scroll rail: the lifeline drawn down the right margin, with a node
        riding the current position. Desktop only; decorative. ---- */
.slRail {
  position: fixed; right: 20px; top: 21vh; bottom: 21vh;
  width: 1px; z-index: 80; pointer-events: none;
  background: rgba(10, 26, 48, 0.1);
  /* At rest the fill is scaleY(0), so the node would sit alone at the top of
     a bare hairline and read as a stray dot. The rail is the lifeline
     CONTINUING past the fold — it has nothing to say until you descend, so
     it fades in with the first scroll instead. */
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.slRail i {
  position: absolute; inset: 0;
  display: block;
  background: linear-gradient(180deg, rgba(14, 111, 255, 0.15), var(--azure));
  transform: scaleY(0); transform-origin: 50% 0;
}
.slRail b {
  position: absolute; left: 50%; top: 0;
  width: 7px; height: 7px; margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--azure);
  box-shadow: 0 0 0 3px rgba(14, 111, 255, 0.12);
}
@media (max-width: 1180px) { .slRail { display: none; } }

/* ---- pointer micro-interactions ----
   A pointer-tracked transform must NOT inherit the reveal's near-second
   transform transition (.js .riseIn, 0-2-0) or the card rubber-bands a full
   beat behind the cursor and reads as broken. JS adds the -Live class the
   first time an element is actually tracked — after its reveal has run — and
   these rules (0-4-0) then win over both the reveal and the card rules. */
.js.sl-motion .slMag { transition: transform 0.45s var(--easeOut), box-shadow 0.3s var(--ease); }
.js.sl-motion .slMag.slMagLive {
  transition: transform 0.16s var(--easeOut), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.js.sl-motion .slTilt { transform-style: preserve-3d; }
.js.sl-motion .slTilt.slTiltLive {
  transition: transform 0.14s var(--easeOut), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* pointer-tracked sheen — the card knows where the cursor is */
.js.sl-motion .slTilt::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 2;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(14, 111, 255, 0.07), transparent 62%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.js.sl-motion .slTilt:hover::after { opacity: 1; }

/* ---- reduced motion: a composed, fully visible, entirely still page ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js .riseIn { opacity: 1 !important; transform: none !important; }
  .kicker::after { transform: none !important; }
  .slRail { display: none; }
  .productCard, .pillBtn, .pillGhost, .pillNight, .indCard,
  .statTile, .whyPoint, .railItem, .photoDuo img, .heroCopy, .heroChips {
    transform: none !important;
  }
  .photoDuo img { transform: scale(1.12) !important; }
  .js.sl-motion .slTilt::after { display: none; }
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
  .productGrid { grid-template-columns: repeat(2, 1fr); }
  .flagCard { grid-column: span 2; grid-template-columns: 1fr; }
  .flagFigure { min-height: 170px; }
  .whyGrid, .indGrid { grid-template-columns: repeat(2, 1fr); }
  .whyPoints { grid-template-columns: 1fr; }
  .footCols { grid-template-columns: 1fr 1fr; }
  .applySplit { grid-template-columns: 1fr; }
  .applyPitch { position: static; }
  .stepsGrid { grid-template-columns: 1fr; gap: 0; }
  .stepsLine { display: none; }
  .stepCell {
    text-align: left; display: grid; grid-template-columns: 56px 1fr;
    gap: 0 20px; padding: 0 0 34px; position: relative;
  }
  .stepCell:not(:last-child)::before {
    content: ''; position: absolute; left: 27px; top: 60px; bottom: 4px;
    width: 2px; background: linear-gradient(180deg, rgba(96,165,255,0.8), rgba(96,165,255,0.15));
  }
  .stepCell .stepDot { margin: 0; grid-row: span 2; }
}

@media (max-width: 768px) {
  .band { padding: 68px 0; }
  .heroZone { min-height: 0; padding: 40px 0 80px; }
  /* On phones the copy stacks over the full width and the hero grows tall,
     so the art is confined to the lower band and faded in at its top edge.
     The line can then never reach the headline or the body copy. */
  #lifeline {
    inset: auto 0 0 0;
    height: min(58%, 520px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
  }
  .navLinks {
    position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(251, 253, 255, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
    display: none; padding: 8px 24px 20px;
  }
  .navLinks.isOpen { display: flex; }
  .navLinks li { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
  .navLinks li:last-child { border-bottom: 0; padding-top: 18px; }
  .menuBtn { display: inline-flex; }
  .navApplyPill { width: 100%; }
  .productGrid { grid-template-columns: 1fr; }
  .flagCard { grid-column: span 1; }
  .whyGrid, .indGrid { grid-template-columns: 1fr 1fr; }
  .formGrid { grid-template-columns: 1fr; }
  .formCard { padding: 32px 24px; }
  .footCols { grid-template-columns: 1fr; gap: 32px; }
  .numRow { flex-wrap: wrap; gap: 16px; }
  .brandWord span { display: none; }
  .photoBand { grid-template-columns: 1fr; }
  .photoDuo { height: 200px; }
  .photoDuo:nth-child(3) { display: none; } /* keep the band short on phones */
}

@media (max-width: 640px) {
  /* the eyebrow wraps on narrow screens and the trailing rule would strand
     itself at the end of the last line — drop the rule, keep the word */
  .kicker { letter-spacing: 0.18em; gap: 0; }
  .kicker::after { display: none; }
}

@media (max-width: 480px) {
  .whyGrid, .indGrid { grid-template-columns: 1fr; }
  .heroChips { gap: 10px 0; }
  .chipGlass { min-width: calc(50% - 6px); padding: 4px 16px 2px 16px; }
  .chipGlass .chipNum { font-size: 1.42rem; }
}

/* ----------------------------------------- secure application link additions
   Trust panel, TCPA consent row, and the save-and-resume note. Uses only the
   existing token set — no new fonts, colours, or shadows. */

.secPanel {
  border: 1px solid var(--glassEdge);
  background: linear-gradient(180deg, rgba(14, 111, 255, 0.05), rgba(14, 111, 255, 0));
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 26px;
}
.secTitle {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.94rem; font-weight: 700;
  color: var(--azureInk);
  letter-spacing: 0.01em;
}
.secTitle svg { width: 19px; height: 19px; flex: none; }
.secList {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--inkSoft);
}
.secList li { position: relative; padding-left: 15px; }
.secList li::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--azure); opacity: 0.5;
}
.secList a { color: var(--azureInk); text-decoration: underline; text-underline-offset: 2px; }

/* Deliberately NOT a .fieldWrap: that rule set gives every descendant input a
   14px padding, a 1.5px border and a white background, which mangles a native
   checkbox. .checkRow above sidesteps it the same way. */
.consentRow { grid-column: 1 / -1; }
.consentRow label {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 0.83rem; font-weight: 300; line-height: 1.55;
  color: var(--inkSoft);
  cursor: pointer;
}
.consentRow input[type="checkbox"] {
  width: 18px; height: 18px; flex: none;
  margin: 1px 0 0;
  accent-color: var(--azure);
  cursor: pointer;
}
.consentRow strong { font-weight: 700; color: var(--ink); }
.consentRow a { color: var(--azureInk); text-decoration: underline; text-underline-offset: 2px; }

.resumeNote {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--glassEdge);
  background: var(--paperTint);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: 0.84rem; font-weight: 300;
  color: var(--inkSoft);
}
.resumeNote p { margin: 0; flex: 1; }
.resumeNote button {
  font-family: inherit; font-size: 0.84rem; font-weight: 700;
  color: var(--azureInk);
  background: none; border: 0; padding: 0;
  cursor: pointer; flex: none;
  text-decoration: underline; text-underline-offset: 2px;
}
.resumeNote button:focus-visible {
  outline: 2px solid var(--azure); outline-offset: 3px; border-radius: 4px;
}

@media (max-width: 560px) {
  .secPanel { padding: 16px 16px; margin-bottom: 22px; }
}