/* LeadSuccesses video interview: candidate pages (apply.html, index.html), design v2.
   Layout, decor and motion follow Marketing DESIGN_SPEC_v2.md; values are copied from v2/REFERENCE_iv2.css
   (the leadsuccesses.com served CSS). Never uses the site theme's --muted/--card/--border as text colours.
   v1 --ls-* tokens kept below for reference and reuse. */
:root {
  /* Brand */
  --ls-purple: #7517F3;
  --ls-pink: #FF4CED;
  --ls-blue: #472CF0;
  --ls-eyebrow: #E7A0F7;                 /* site .eyebrow rgb(231,160,247) */
  --ls-lilac: oklch(78% .18 320);        /* accents, focus ring (#E98DFE) */
  --ls-gradient: linear-gradient(120deg, #FF4CED 0%, #7517F3 55%, #472CF0 100%);
  --ls-gradient-line: linear-gradient(90deg, #7517F3, #FF4CED);

  /* Canvas */
  --ls-bg: #07030D;
  --ls-canvas: linear-gradient(180deg, #12051C 0%, #07030D 42%, #090410 100%);
  --ls-glow: radial-gradient(ellipse at 8% -3%, rgb(255 76 237 / .14), transparent 34%),
             radial-gradient(ellipse at 98% 24%, rgb(117 23 243 / .16), transparent 38%),
             radial-gradient(ellipse at 44% 96%, rgb(71 44 240 / .07), transparent 44%);

  /* Text (never use a surface token as a text colour) */
  --ls-text: oklch(98.5% .009 305);      /* #FBF9FF headings, labels, input text */
  --ls-text-body: rgb(237 221 242 / .72);/* site .type-body lead copy */
  --ls-text-muted: oklch(77.5% .038 304);/* #BBB0CA hints, captions, breadcrumbs */
  --ls-text-nav: rgb(234 216 239 / .76); /* header context label (site nav items) */
  --ls-success: #34D399;
  --ls-error: #FB7185;

  /* Surfaces */
  --ls-panel: rgb(19 8 29 / .85);        /* site .public-functional-surface (form card) */
  --ls-panel-border: rgb(250 245 255 / .20);
  --ls-panel-shadow: 0 30px 90px -65px rgb(117 23 243 / .55);
  --ls-tile: rgb(255 255 255 / .035);    /* inner tiles (facts, tips) */
  --ls-tile-border: rgb(235 214 241 / .14);
  --ls-rule: rgb(235 214 241 / .14);
  --ls-input-bg: rgb(7 3 13 / .70);
  --ls-input-border: rgb(225 183 255 / .14);
  --ls-input-border-focus: oklch(72.33% .2687 332.4); /* brand pink ring */

  /* Type */
  --ls-font-sans: "General Sans", Inter, system-ui, sans-serif;
  --ls-font-display: "Fraunces Variable", Georgia, serif;
  --ls-fs-hero: clamp(2.75rem, 6.1vw, 5.5rem);       /* 44 -> 88px, site h1 */
  --ls-fs-section: clamp(2rem, 3.9vw, 3.5rem);       /* 32 -> 56px, site h2 */
  --ls-fs-title: clamp(1.75rem, 2.8vw, 2.5rem);      /* 28 -> 40px, card titles */
  --ls-fs-question: clamp(1.375rem, 2.1vw, 1.875rem);/* 22 -> 30px, question text */
  --ls-fs-lead: clamp(1rem, 1.2vw, 1.08rem);         /* 16 -> 17.28px, site .type-body */
  --ls-fs-body: 15px;
  --ls-fs-ui: 14px;                                  /* buttons, labels, inputs (site) */
  --ls-fs-small: 13px;
  --ls-fs-eyebrow: 12px;
  --ls-lh-display: .98;
  --ls-lh-title: 1.08;
  --ls-lh-question: 1.22;
  --ls-lh-body: 1.72;
  --ls-ls-hero: -.045em;
  --ls-ls-section: -.035em;
  --ls-ls-eyebrow: .18em;

  /* Layout */
  --ls-w-header: 1152px;   /* site header pill, max-w-6xl */
  --ls-w-wide: 928px;      /* site .section-intro max-w-5xl: landing panels, camera, question screens */
  --ls-w-narrow: 736px;    /* site contact form card: status screens */
  --ls-w-copy: 688px;      /* site lead paragraph max-w-2xl */
  --ls-gutter: 24px;       /* page side padding (site container-page px-6) */

  /* Spacing scale (4px base, matches site Tailwind spacing) */
  --ls-s-1: 4px; --ls-s-2: 8px; --ls-s-3: 12px; --ls-s-4: 16px; --ls-s-5: 24px;
  --ls-s-6: 32px; --ls-s-7: 48px; --ls-s-8: 64px; --ls-s-9: 96px;

  /* Radius */
  --ls-r-panel: 28px;      /* desktop card; 17px on mobile (site) */
  --ls-r-input: 18px;
  --ls-r-tile: 20px;
  --ls-r-media: 18px;
  --ls-r-pill: 999px;

  /* Controls */
  --ls-btn-h: 48px;
  --ls-btn-pad: 14px 24px;
  --ls-btn-primary-bg: linear-gradient(rgb(14 8 33 / .36), rgb(14 8 33 / .36)), var(--ls-gradient);
  --ls-btn-primary-shadow: 0 10px 32px -14px rgb(117 23 243 / .65);
  --ls-btn-secondary-bg: rgb(84 47 108 / .22);
  --ls-btn-secondary-border: rgb(185 139 205 / .44);
  --ls-btn-secondary-text: rgb(233 220 239);
  --ls-input-h: 52px;
  --ls-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Fraunces weights used by the site (550 to 660) mapped to the two files we serve, as in v2/REFERENCE_iv2.css. */
@font-face { font-family: "Fraunces Variable"; src: url("/fonts/fraunces/fraunces-latin-500-normal.woff2") format("woff2"); font-weight: 501 550; font-display: swap; }
@font-face { font-family: "Fraunces Variable"; src: url("/fonts/fraunces/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 551 700; font-display: swap; }

/* v2 tokens (values from the site's served CSS) */
:root {
  --font-display: "Fraunces Variable", Georgia, serif; --font-sans: "General Sans", Inter, system-ui, sans-serif;
  --fg: oklch(98.5% .009 305); --copy: #eee0f2b8; --iv-muted: oklch(72% .05 300);
  --section-space: clamp(5.5rem, 8vw, 8rem);
  --gradient-brand: linear-gradient(#0e08215c, #0e08215c), linear-gradient(120deg, #ff4ced 0%, #7517f3 55%, #472cf0 100%);
  --reveal-ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body.ls-interview {
  min-height: 100svh; display: flex; flex-direction: column; position: relative; isolation: isolate;
  background: #07030d; color: var(--fg); font: 400 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* Site .ambient-backdrop, fixed behind the page */
.ambient-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 8% -3%, #ff4ced24, transparent 34%), radial-gradient(ellipse at 98% 24%, #7517f329, transparent 38%), radial-gradient(ellipse at 44% 96%, #472cf012, transparent 44%), linear-gradient(180deg, #12051c 0%, #07030d 42%, #090410 100%); }

/* Header pill (unchanged from v1) */
.ls-header { position: sticky; top: 0; z-index: 50; padding: 12px 16px 0; }
.ls-header__bar { max-width: 1152px; margin: 0 auto; height: 56px; padding: 0 20px; display: flex; align-items: center; justify-content: flex-start;
  border: 1px solid rgb(255 255 255 / .2); border-radius: 999px;
  background: radial-gradient(circle at 18% -35%, rgb(255 255 255 / .13), transparent 42%), linear-gradient(145deg, #0B0513, #180822);
  box-shadow: 0 14px 40px rgb(3 1 8 / .46), inset 0 1px 0 rgb(255 255 255 / .24), inset 0 -1px 0 rgb(255 255 255 / .06);
  backdrop-filter: blur(24px) saturate(1.55); }
.ls-header__bar a { display: block; line-height: 0; }
.ls-header__logo { display: block; width: 176px; height: auto; }

.ls-main { flex: 1 0 auto; width: 100%; }
.ls-interview .ls-universal-footer { flex-shrink: 0; }
.wrap { width: 100%; max-width: 76rem; margin: 0 auto; padding-inline: 1.5rem; }

/* ---------- Hero (site .home-hero + .hero-fx) ---------- */
.iv-hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-block: clamp(4.5rem, 7vw, 6.5rem) clamp(4rem, 6vw, 5.5rem);
  background: radial-gradient(ellipse at 80% 10%, color-mix(in oklab, oklch(51.34% .276 291.78) 12%, transparent), transparent 37%), linear-gradient(180deg, color-mix(in oklab, oklch(17% .05 290) 58%, transparent), transparent 88%); }
.iv-hero__title { font: 500 clamp(3.15rem, 7vw, 6.25rem)/.96 var(--font-display); letter-spacing: -.025em; text-wrap: balance; max-width: 14ch; margin: 0 auto; }
.iv-hero__title > span { display: block; }
.iv-hero__title > span:last-child { margin-top: .75rem; font-size: .5em; color: #eeddf3c2; letter-spacing: -.02em; }
.iv-hero__title::after { content: ""; display: block; width: clamp(4rem, 7vw, 6rem); height: .34rem; border-radius: 999px; margin: .36em auto 0; background: linear-gradient(90deg, #0000, #ff4ced 28%, #8c24df 72%, #0000); }
.iv-hero--root .iv-hero__title { font-size: clamp(2.75rem, 6vw, 5rem); }
.iv-lead { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.72; color: var(--copy); max-width: 43rem; margin: 2.5rem auto 0; text-wrap: balance; }
.iv-lead a, .iv-sub a { color: var(--fg); text-underline-offset: 3px; }
.iv-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2.5rem; }
.iv-hero .ls-alert:empty { display: none; }

/* Buttons (site hero CTA). Class names are not .ls-btn, so the site theme's .ls-site-theme .ls-btn gradient never applies. */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: 14px 24px; border-radius: 999px; border: 0;
  font: 500 14px/20px var(--font-sans); color: #fff; text-decoration: none; cursor: pointer;
  transition: transform .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1); }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .15s cubic-bezier(.4, 0, .2, 1); }
.btn--primary { background-color: #7517f3; background-image: var(--gradient-brand); box-shadow: 0 10px 32px -14px #7517f3a6; }
.btn--primary:hover:not(:disabled) { transform: scale(1.03); }
.btn--primary:hover:not(:disabled) svg { transform: translateX(2px); }
.btn--primary .glint { position: absolute; inset-block: 0; left: -33.333%; width: 33.333%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .22), rgba(219, 137, 253, .1), transparent); animation: pill-glint 6s ease-in-out 1.2s both; pointer-events: none; }
.btn--secondary { background: rgb(84 47 108 / .22); border: 1px solid rgb(185 139 205 / .44); color: rgb(233 220 239); padding: 14px 20px; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.btn--secondary:hover:not(:disabled) { background: rgb(84 47 108 / .36); border-color: rgb(185 139 205 / .7); }
.btn--text { background: none; color: #bbb0ca; padding: 14px 8px; text-decoration: underline; text-underline-offset: 3px; }
.btn--text:hover { color: var(--fg); }
.btn:focus-visible { outline: 2px solid oklch(78% .18 320); outline-offset: 3px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled .glint { display: none; }
.btn--block { width: 100%; }
@keyframes pill-glint { 0% { transform: translate(-120%) skew(-18deg); } 22% { transform: translate(560%) skew(-18deg); } to { transform: translate(560%) skew(-18deg); } }

/* ---------- Facts as hero art (site PipelineSignalArt) ---------- */
.iv-art { position: relative; isolation: isolate; max-width: 64rem; margin: clamp(3rem, 5vw, 4.5rem) auto 0; }
.iv-art::before { content: ""; position: absolute; inset: 8% 5% 18%; z-index: -1; filter: blur(36px); background: radial-gradient(#7517f326, #0000 68%); border-radius: 42%; }
.iv-art__frame { border: 1px solid #efdcf429; border-radius: 28px; background: linear-gradient(105deg, #24112F, #0F0716 48%, #180921); filter: drop-shadow(0 30px 38px #02010561); overflow: hidden; }
.iv-art__labels { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #d3b7df36; padding: 14px 12px; }
.iv-art__labels span { font: 500 16px/1 var(--font-display); color: #f9f1faf0; }
.iv-art__labels span i { font: 500 12px/1 var(--font-sans); font-style: normal; color: #ff4ced; letter-spacing: .05em; margin-right: 6px; }
.iv-art__stages { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 20px 18px 22px; margin: 0; list-style: none; }
.iv-art__stage { position: relative; border: 1px solid #e3cbeb24; border-radius: 16px; background: linear-gradient(135deg, #281432, #0B0610); padding: 20px 12px 18px; text-align: center; }
.iv-art__stage::before { content: ""; position: absolute; inset: -5px; border: 1px solid #ff4ceda8; border-radius: 20px; opacity: .08; animation: stage-pulse 9s ease-in-out infinite; }
.iv-art__stage:nth-child(2)::before { animation-delay: 1.65s; } .iv-art__stage:nth-child(3)::before { animation-delay: 3.3s; } .iv-art__stage:nth-child(4)::before { animation-delay: 4.95s; }
.iv-art__stage:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: 100%; width: 28px; height: 1px; background: repeating-linear-gradient(90deg, #cf9def80 0 4px, transparent 4px 9px); background-size: 36px 1px; animation: connector-flow 9s linear infinite; }
.iv-art__icon { width: 40px; height: 40px; margin: 0 auto 12px; display: block; color: #d79bf1; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.iv-art__value { font: 500 1.375rem/1.15 var(--font-display); letter-spacing: -.02em; color: #f8effae8; }
.iv-art__detail { margin-top: 6px; font-size: .8125rem; line-height: 1.45; color: #e7d5ecd1; }
@keyframes stage-pulse { 0%, 12%, 36%, to { opacity: .08; transform: scale(1); } 19%, 29% { opacity: .72; transform: scale(.985); } }
@keyframes connector-flow { to { background-position: -36px 0; } }

/* ---------- Section rhythm (site .public-chapter) ---------- */
.iv-section { position: relative; padding-block: var(--section-space); text-align: center; }
.iv-section::before { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%); width: min(68rem, 100% - 3rem); height: 1px; pointer-events: none; filter: drop-shadow(0 0 5px #7517f34d);
  background: linear-gradient(90deg, #0000, #ff4ced 30%, #8d25df 70%, #0000) 50%/min(18rem, 56%) 1px no-repeat, linear-gradient(#ebd6f124, #ebd6f124); }
.iv-h2 { font: 500 clamp(2rem, 4vw, 3.5rem)/1.04 var(--font-display); letter-spacing: -.035em; text-wrap: balance; max-width: 14ch; margin: 0 auto; }
.iv-sub { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.72; color: var(--copy); max-width: 42rem; margin: 1.75rem auto 0; text-wrap: balance; }

/* How it works = site .home-system card + rail */
.iv-system { position: relative; overflow: hidden; max-width: 61rem; margin: clamp(3rem, 5vw, 4.5rem) auto 0; border: 1px solid #ebd6f126; border-radius: 1.75rem; background: radial-gradient(circle at 50% 0, #7517f31a, #0000 35%), #0e061580; box-shadow: 0 32px 90px -64px #000000eb; }
.iv-system::before, .iv-card::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translate(-50%); width: min(18rem, 44%); height: 1px; background: linear-gradient(90deg, #0000, #ff4ced 32%, #7a22ee 68%, #0000); }
.iv-system__head { max-width: 48rem; margin-inline: auto; padding: clamp(2rem, 4vw, 3.25rem) 1.5rem clamp(1.7rem, 3vw, 2.4rem); }
.iv-system__head h3 { margin: 0; color: #faf2fbf2; font: 560 clamp(1.35rem, 2.6vw, 2.05rem)/1.1 var(--font-display); letter-spacing: -.035em; }
.iv-rail { position: relative; display: grid; max-width: 54rem; margin: 0 auto; padding: 0 1.5rem 1.5rem; list-style: none; }
.iv-rail::before { content: ""; position: absolute; top: 1.9rem; bottom: 3.4rem; left: 50%; width: 1px; transform: translate(-50%); background: linear-gradient(#ff4ced8a, #7517f34d 52%, #6f59f494); box-shadow: 0 0 20px #7517f33d; }
.iv-rail::after { content: ""; position: absolute; top: 1.65rem; left: calc(50% - .25rem); width: .5rem; height: .5rem; border-radius: 999px; background: #ff4ced; box-shadow: 0 0 18px #ff4ceda6; animation: rail-dot 8.4s ease-in-out infinite; }
.iv-rail > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr); align-items: center; min-height: 7.4rem; }
.iv-rail__node { grid-area: 1/2; display: grid; place-items: center; z-index: 2; }
.iv-rail__node span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; background: #12071a; border: 1px solid #efadf74d; color: #f6d0fad1; font: 660 .62rem/1 var(--font-display); letter-spacing: .1em; box-shadow: 0 0 0 6px #0e0615f0; animation: rail-node 8.4s ease-in-out infinite; }
.iv-rail > li:nth-child(2) .iv-rail__node span { animation-delay: 2.25s; } .iv-rail > li:nth-child(3) .iv-rail__node span { animation-delay: 4.5s; } .iv-rail > li:nth-child(4) .iv-rail__node span { animation-delay: 6.75s; }
.iv-rail__card { grid-area: 1/3; position: relative; display: grid; justify-items: center; align-content: center; min-height: 6.2rem; padding: 1rem 1.15rem; text-align: center; border: 1px solid #ebd6f11f; border-radius: 1rem; background: #ffffff05; }
.iv-rail__card::before { content: ""; position: absolute; top: 50%; right: 100%; width: 2.25rem; height: 1px; background: #e5c1ed2e; }
.iv-rail > li:nth-child(2n) .iv-rail__card { grid-column: 1; }
.iv-rail > li:nth-child(2n) .iv-rail__card::before { left: 100%; right: auto; }
.iv-rail > li:last-child .iv-rail__card { background: linear-gradient(135deg, #ff4ced14, #472cf012); border-color: #ed96f645; }
.iv-rail__card h4 { margin: 0; color: #f9f1faf0; font: 590 1.125rem/23.4px var(--font-display); letter-spacing: -.02em; }
.iv-rail__card p { margin: .45rem 0 0; color: #ebdbefab; font-size: 1rem; line-height: 1.6; max-width: 30ch; }
.iv-system__foot { display: flex; justify-content: center; align-items: center; gap: .7rem; max-width: 42rem; margin: 0 auto; padding: 1.2rem 1.5rem 1.45rem; border-top: 1px solid #ebd6f11f; color: #ebdcefa8; font-size: .75rem; line-height: 1.5; }
.iv-system__foot i { flex: none; width: .45rem; height: .45rem; border-radius: 999px; background: #cf45ed; animation: pulse-dot 2.8s ease-out infinite; }
@keyframes rail-dot { 0%, 8% { opacity: 0; top: 1.65rem; } 15% { opacity: 1; } 88% { opacity: 1; } 96%, to { opacity: 0; top: calc(100% - 3.6rem); } }
@keyframes rail-node { 0%, 10%, 34%, to { background: #12071a; border-color: #efadf74d; box-shadow: 0 0 0 6px #0e0615f0; } 18%, 28% { background: #25102f; border-color: #ff4cedb8; box-shadow: 0 0 0 6px #0e0615f0, 0 0 24px #ff4ced3d; } }
@keyframes pulse-dot { 0% { box-shadow: 0 0 #cf45ed4d; } 75%, to { box-shadow: 0 0 0 .5rem #cf45ed00; } }

/* Good to know = site .home-fit__column */
.iv-know { max-width: 54rem; margin: 2rem auto 0; text-align: center; border: 1px solid #ebd6f121; border-radius: 1.35rem; padding: clamp(1.75rem, 3.5vw, 3rem); background: radial-gradient(circle at 50% 0, #7517f31a, #0000 58%), #10061775; box-shadow: 0 30px 70px -54px #7517f3b3, inset 0 1px #ffffff09; }
.iv-know__head { display: flex; justify-content: center; align-items: center; gap: .7rem; margin-bottom: 1.25rem; }
.iv-know__head svg { width: 1.25rem; height: 1.25rem; padding: .2rem; border-radius: 999px; color: #e7a0f7; background: #b14de826; box-sizing: content-box; }
.iv-know__head h3 { margin: 0; color: #f8ebfaf0; font: 500 clamp(1.25rem, 2vw, 1.5rem)/1.18 var(--font-display); letter-spacing: -.02em; }
.iv-know ul { list-style: none; margin: 0; padding: 0; }
.iv-know li { display: flex; justify-content: center; align-items: baseline; gap: .7rem; padding-block: 1rem; border-top: 1px solid #ebd6f11c; }
.iv-know li svg { flex: none; width: .9rem; height: .9rem; opacity: .72; color: #e7a0f7; transform: translateY(.12rem); }
.iv-know li p { margin: 0; color: #eee0f2b8; font-size: clamp(1rem, 1.2vw, 1.0625rem); line-height: 1.6; max-width: 44ch; text-wrap: balance; text-align: center; }

/* ---------- Task screens ---------- */
.iv-task { padding: clamp(2rem, 4vw, 3.25rem) 1.5rem 6rem; text-align: center; }
.eyebrow { margin: 0; font-size: .75rem; line-height: 18px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #e7a0f7; }
.eyebrow-animated { display: inline-flex; align-items: center; gap: .6rem; }
.eyebrow-animated::before, .eyebrow-animated::after { content: ""; width: 1.75rem; height: 1px; background: linear-gradient(90deg, oklch(62% .24 305/.9), oklch(72% .2 340/.6)); transform-origin: 0; animation: eyebrow-rule-draw .4s ease-out both; }
.eyebrow-animated::after { transform-origin: 100%; background: linear-gradient(270deg, oklch(62% .24 305/.9), oklch(72% .2 340/.6)); }
.eyebrow-animated > span { animation: eyebrow-fade-in .4s ease-out .3s both; }
@keyframes eyebrow-rule-draw { 0% { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes eyebrow-fade-in { 0% { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.iv-title { font: 500 clamp(2rem, 4vw, 3.5rem)/1.04 var(--font-display); letter-spacing: -.035em; margin: 1rem auto 0; max-width: 16ch; text-wrap: balance; }
.iv-title em { font-style: italic; color: #ff4ced; }
.iv-title--sm { font-size: clamp(1.75rem, 3vw, 2.5rem); max-width: 20ch; }
.iv-card { position: relative; overflow: hidden; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; border: 1px solid #ebd6f126; border-radius: 1.75rem; background: radial-gradient(circle at 50% 0, #7517f31a, #0000 35%), #0e061580; box-shadow: 0 32px 90px -64px #000000eb; padding: clamp(1.25rem, 3vw, 2.25rem); }
.iv-card--wide { max-width: 61rem; } .iv-card--narrow { max-width: 44rem; padding: clamp(1.5rem, 4vw, 2.75rem); }
.iv-card--narrow > .eyebrow:first-child, .iv-card--narrow > .iv-steps:first-child { margin-top: 0; }
.iv-card .iv-sub { margin-top: 1rem; }
.iv-card .iv-actions { margin-top: 2rem; }

/* Camera check */
.iv-setup { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.25rem; align-items: start; text-align: left; }
.iv-media { position: relative; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; border: 1px solid #ebd6f121; background: radial-gradient(ellipse at 50% 40%, #3B2A4F 0 13%, transparent 14%), radial-gradient(ellipse at 50% 102%, #3B2A4F 0 30%, transparent 31%), linear-gradient(160deg, #1D1029, #0E0717); }
.iv-media video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0E0717; }
.iv-media video.preview { transform: scaleX(-1); }
.iv-media video.playback { object-fit: contain; background: #000; }
.iv-media--rec { border-color: #ff4cedb3; box-shadow: 0 0 0 3px #ff4ced29, 0 0 40px -10px #ff4ced80; }
.iv-badge { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgb(7 3 13 / .72); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.iv-badge i { width: 8px; height: 8px; border-radius: 999px; background: #ff4ced; animation: pulse-dot 2.8s ease-out infinite; }
.iv-device { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 12px; font-size: 13px; color: #bbb0ca; }
.iv-meter { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.iv-meter b { width: 96px; height: 6px; border-radius: 6px; background: rgb(255 255 255 / .1); overflow: hidden; display: block; }
.iv-meter b i { display: block; width: 4%; height: 100%; background: linear-gradient(90deg, #7517F3, #FF4CED); transition: width 80ms linear; }
.iv-link { background: none; border: 0; padding: 0; color: var(--fg); font: 500 13px var(--font-sans); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
.iv-help { font-size: 13px; line-height: 1.55; color: #bbb0ca; margin: 12px auto 0; max-width: 40rem; }
.iv-setup .iv-help { margin: 12px 0 0; }
.iv-help--mob { display: none; text-align: center; }
.field { display: grid; gap: 8px; margin-top: 16px; }
.field:first-child { margin-top: 0; }
.field label { font-size: 14px; font-weight: 500; color: var(--fg); }
.field label small { font-size: 13px; font-weight: 400; color: #bbb0ca; }
.field input { width: 100%; height: 52px; padding: 0 16px; border-radius: 18px; border: 1px solid rgb(225 183 255 / .14); background: rgb(7 3 13 / .7); color: var(--fg); font: 400 15px var(--font-sans); outline: none; }
.field input::placeholder { color: rgb(187 176 202 / .7); }
.field input:focus { border-color: oklch(72.33% .2687 332.4); box-shadow: 0 0 0 3px rgb(255 76 237 / .18); }
.field input[aria-invalid="true"] { border-color: #FB7185; }
.field input[readonly] { opacity: .7; }
.iv-setup__go { margin-top: 20px; display: flex; justify-content: center; }

/* Alerts: block centered, text left */
.ls-alert { display: block; max-width: 32rem; margin: 1rem auto 0; padding: 12px 14px; border-radius: 14px; border: 1px solid rgb(251 113 133 / .35); background: rgb(251 113 133 / .08); color: #FECDD3; font-size: 13px; line-height: 1.55; text-align: left; }
.ls-alert:empty { display: none; }
.ls-alert a { color: #fff; }
.iv-setup .ls-alert { max-width: none; margin-top: 16px; }

/* Steps, question, stage */
.iv-steps { display: flex; justify-content: center; align-items: center; gap: 6px; }
.iv-steps b { width: 28px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .14); }
.iv-steps b.done { background: #7517F3; } .iv-steps b.now { background: linear-gradient(90deg, #7517F3, #FF4CED); }
.iv-steps + .iv-steps__label { margin-top: .9rem; }
.iv-q { font: 500 clamp(1.375rem, 2.4vw, 2rem)/1.22 var(--font-display); letter-spacing: -.02em; max-width: 30ch; margin: 1rem auto 0; text-wrap: balance; }
.iv-stage { max-width: 46rem; margin: 1.75rem auto 0; }
.iv-task--q .iv-actions { margin-top: 1.5rem; }
.iv-task--q .iv-help { margin-top: .75rem; }
.iv-task--q .iv-title { margin-top: .75rem; }
.iv-task--q .iv-sub { margin-top: .75rem; }
.iv-task--q .iv-stage { margin-top: 1.5rem; }

/* Upload progress */
.ls-progress { height: 8px; border-radius: 8px; background: rgb(255 255 255 / .08); overflow: hidden; margin-top: 1.5rem; }
.ls-progress i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #7517F3, #FF4CED); transition: width 200ms ease; }
.ls-progress--active i { background: linear-gradient(90deg, #7517F3, #FF4CED, #DB89FD, #FF4CED, #7517F3); background-size: 200% 100%; animation: shimmer 2s linear infinite; }
@keyframes shimmer { 0% { background-position: -200% 0; } to { background-position: 200% 0; } }
.ls-status { margin: .75rem 0 0; color: #bbb0ca; font-size: 13px; }

/* All done */
.iv-task--done { padding-top: clamp(3rem, 6vw, 5rem); }
.iv-success { width: 64px; height: 64px; margin: 0 auto; border-radius: 999px; display: grid; place-items: center; border: 1px solid #68cc9166; background: radial-gradient(circle, #54bb7e26, #0000 70%); color: #80d8a5; animation: success-ring 2.8s ease-out infinite; }
.iv-success svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.iv-task--done .eyebrow { margin-top: 1.5rem; }
@keyframes success-ring { 0% { box-shadow: 0 0 #54bb7e4d; } 75%, to { box-shadow: 0 0 0 .75rem #54bb7e00; } }
.iv-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 36rem; margin: 2rem auto 0; }
.iv-tiles > div { position: relative; overflow: hidden; border: 1px solid #ebd6f124; border-radius: 1.25rem; padding: 1.5rem 1rem; background: radial-gradient(circle at 50% 0, #7517f31a, #0000 58%), #10061775; box-shadow: 0 30px 70px -54px #7517f3b3, inset 0 1px #ffffff09; }
.iv-tiles svg { width: 28px; height: 28px; color: #d79bf1; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.iv-tiles b { display: block; margin-top: 10px; font: 500 1.125rem/1.2 var(--font-display); color: #fcf4fcfa; }
.iv-tiles span { display: block; margin-top: 6px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: #eedef2b8; }
.iv-task--done .iv-help { margin-top: 1.5rem; }

/* Motion: site Reveal (hidden only once JS has marked <html class="js">) and screen changes */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-shown { animation: reveal-up .9s var(--reveal-ease) both; }
@keyframes reveal-up { 0% { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.screen-in { animation: reveal-up .9s var(--reveal-ease) both; }

@media (width <= 900px) {
  .iv-setup { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .iv-help--desk { display: none; }
  .iv-help--mob { display: block; }
  .iv-art__labels { display: none; }
  .iv-art__stages { grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
  .iv-art__stage::after { display: none; }
}
@media (width <= 720px) {
  .iv-rail { padding: 0 .5rem 1rem; }
  .iv-rail::before { top: 1rem; bottom: 2rem; left: 1.5rem; }
  .iv-rail::after { left: calc(1.5rem - .25rem); }
  .iv-rail > li, .iv-rail > li:nth-child(2n) { grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; min-height: 0; padding-block: .375rem; }
  .iv-rail__node { grid-area: 1/1; }
  .iv-rail__node span { width: 1.75rem; height: 1.75rem; font-size: .625rem; }
  .iv-rail__card, .iv-rail > li:nth-child(2n) .iv-rail__card { grid-area: 1/2; min-height: 0; padding: .75rem; }
  .iv-rail__card::before, .iv-rail > li:nth-child(2n) .iv-rail__card::before { width: 1rem; right: 100%; left: auto; }
  .iv-system { margin-inline: 0; }
  .iv-system__foot { font-size: .8125rem; padding: 1rem; }
}
@media (width <= 639px) {
  .ls-header { padding: 12px 12px 0; } .ls-header__bar { padding: 0 16px; } .ls-header__logo { width: 160px; }
  .wrap { padding-inline: 1.5rem; } /* 24px, site section-x */
  .iv-hero { padding-block: 3.5rem 4.75rem; } /* 56px 76px */
  .iv-hero__title { max-width: 10ch; font-size: clamp(2.6rem, 12vw, 4rem); line-height: .98; }
  .iv-hero--root .iv-hero__title { font-size: clamp(2.6rem, 11vw, 3.5rem); max-width: 12ch; }
  .iv-actions { flex-direction: column; align-items: center; width: min(100%, 22rem); margin-inline: auto; }
  .iv-actions--stack .btn { width: 100%; }
  .iv-art__stage { padding: 14px 8px 12px; } .iv-art__icon { width: 28px; height: 28px; margin-bottom: 8px; } .iv-art__value { font-size: 1.125rem; } .iv-art__detail { font-size: .75rem; }
  .iv-know { padding: 1.5rem 1.25rem; } .iv-know li { padding-block: .85rem; } .iv-know li p { font-size: 1rem; }
  .iv-task { padding: 1.25rem 1rem 5rem; }
  .iv-task--setup .iv-title { font-size: 1.75rem; margin-top: .5rem; }
  .iv-task--setup .iv-card { margin-top: 1rem; padding: 12px; border-radius: 1.1rem; }
  .iv-task--setup .field input { height: 48px; }
  .iv-task--setup .field { margin-top: 12px; gap: 6px; }
  .iv-task--setup .field:first-child { margin-top: 0; }
  .iv-task--setup .ls-ts--interactive { margin-top: 12px; }
  .iv-card--narrow { padding: 1.5rem 1.25rem; border-radius: 1.25rem; }
  .iv-tiles { grid-template-columns: 1fr; }
}

/* ---------- Visual notes from Marketing (04:15): icons, hero diagram, hover, section intros ---------- */
/* Section intro: eyebrow, title, short body, centered (site process/home pattern) */
.iv-intro .eyebrow { margin-bottom: 1rem; }
/* Understated line icons in brand violet (site process step cards), never filled */
.iv-art__icon { width: 24px; height: 24px; margin-bottom: 10px; stroke-width: 1.5; opacity: .92; }
.iv-know li { align-items: center; }
.iv-know li svg.iv-know__icon { width: 1.05rem; height: 1.05rem; opacity: .85; color: #d79bf1; stroke-width: 1.5; transform: none; }
/* Hero diagram: thin line through four nodes, a pink signal travels it, nodes light in step with the stage outlines */
.iv-art__track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); height: 20px; margin: 16px 18px 0; }
.iv-art__track::before { content: ""; position: absolute; top: 50%; left: 12.5%; right: 12.5%; height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, #0000, #ff4ced, #ff4ced, #0000) no-repeat, repeating-linear-gradient(90deg, #cf9def80 0 4px, transparent 4px 9px);
  background-size: 22% 1px, 100% 1px; background-position: -30% 0, 0 0; animation: track-signal 9s linear infinite; filter: drop-shadow(0 0 4px #ff4ced80); }
.iv-art__track b { position: relative; justify-self: center; align-self: center; width: 9px; height: 9px; border-radius: 999px; background: #12071a; border: 1px solid #efadf780; box-shadow: 0 0 0 4px #0f0716; animation: track-node 9s ease-in-out infinite; }
.iv-art__track b:nth-child(2) { animation-delay: 1.65s; } .iv-art__track b:nth-child(3) { animation-delay: 3.3s; } .iv-art__track b:nth-child(4) { animation-delay: 4.95s; }
.iv-art__track + .iv-art__stages { padding-top: 12px; }
@keyframes track-signal { 0% { background-position: -30% 0, 0 0; } 70%, to { background-position: 130% 0, 0 0; } }
@keyframes track-node { 0%, 12%, 36%, to { background: #12071a; border-color: #efadf780; box-shadow: 0 0 0 4px #0f0716; } 19%, 29% { background: #ff4ced; border-color: #ff4ced; box-shadow: 0 0 0 4px #0f0716, 0 0 14px #ff4cedb3; } }
.iv-art__stage:not(:last-child)::after { background: repeating-linear-gradient(90deg, #cf9defb3 0 4px, transparent 4px 9px); background-size: 36px 1px; }
@media (width <= 900px) { .iv-art__track { margin: 12px 12px 0; } }
/* Hover (desktop pointers only), values from the site CSS:
   CTA a.bg-gradient-brand:hover scale(1.03) + 0 12px 36px -12px #7517f3b3; cards .public-card--interactive border #edb2f84d, shadow, .18s */
.iv-art__stage, .iv-rail__card, .iv-tiles > div, .iv-know, .iv-system { transition: border-color .18s, background-color .18s, box-shadow .18s; }
@media (hover: hover) {
  .btn--primary:hover:not(:disabled) { box-shadow: 0 12px 36px -12px #7517f3b3; }
  .iv-art__stage:hover, .iv-rail__card:hover, .iv-tiles > div:hover { border-color: #edb2f84d; box-shadow: 0 30px 80px -58px #7517f38c; }
  .iv-rail > li:last-child .iv-rail__card:hover { border-color: #ed96f680; }
  .iv-know:hover, .iv-system:hover { border-color: #edb2f840; }
}
@media (prefers-reduced-motion: reduce) {
  .iv-art__track::before, .iv-art__track b { animation: none !important; }
  .iv-art__track::before { background-position: -30% 0, 0 0; background-size: 0 0, 100% 1px; }
}

/* Reduced motion: the site's global rule plus static, visible end states. Nothing moves, nothing is hidden. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  [data-reveal], .js [data-reveal], .screen-in { opacity: 1 !important; animation: none !important; transform: none !important; }
  .iv-rail::after, .btn--primary .glint { display: none; }
  .iv-art__stage::before, .iv-art__stage::after, .iv-rail__node span, .iv-system__foot i, .iv-badge i, .iv-success, .ls-progress--active i { animation: none !important; }
  .eyebrow-animated::before, .eyebrow-animated::after, .eyebrow-animated > span { opacity: 1 !important; animation: none !important; transform: none !important; }
  .btn--primary:hover:not(:disabled), .btn--primary:hover:not(:disabled) svg { transform: none; }
}

/* ===== v3 overrides: measured from the live site on 12 Nov 2026 ===== */
/* Body fills the viewport so short pages sit like the site 404 (content centered, footer at the bottom). */
html,body{min-height:100vh;height:auto}
body{display:flex;flex-direction:column}
main{flex:1 0 auto;display:flex;flex-direction:column;min-height:calc(100svh - 68px)}
main.iv-main--fill{justify-content:center}

/* Header ice layers (site .site-header-ice), measured on home 1440. */
.ls-header__bar{position:relative;overflow:visible}
.ls-header__ice{pointer-events:none;position:absolute;inset:0;border-radius:999px;overflow:hidden}
.ls-header__ice-a{background:linear-gradient(oklab(0.999994 0.0000455678 0.0000200868 / 0.16) 0%, oklab(0.999994 0.0000455678 0.0000200868 / 0.03) 50%, transparent 100%)}
.ls-header__ice-b{background:linear-gradient(115deg, transparent 14%, rgba(255,255,255,.16) 30%, rgba(255,255,255,.02) 44%, transparent 52%, rgba(255,255,255,.08) 70%, transparent 86%)}
.ls-header__ice-c{padding:1.5px;background:conic-gradient(from 200deg, rgba(255,255,255,.55), rgba(219,137,253,.4) 22%, rgba(255,255,255,.1) 40%, rgba(117,23,243,.35) 58%, rgba(255,255,255,.45) 82%, rgba(255,255,255,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.ls-header__bar > a{position:relative;z-index:1}

/* Hero title: site .home-hero-title is 115.2px at 1440 (clamp(4.2rem, 8vw, 7.3rem), lh .96, ls -.025em). */
.iv-hero__title{font:500 clamp(4.2rem,8vw,7.3rem)/.96 var(--font-display);letter-spacing:-.025em;text-wrap:balance;max-width:11ch;width:auto;margin-inline:auto;padding:.06em .04em .12em 0}
.iv-hero__title>span:last-child{margin-top:.34em;font-size:.49em;line-height:1.06;letter-spacing:-.025em;color:rgba(238,221,243,.76);padding:0}
.iv-hero__title::after{width:clamp(4rem,7vw,6rem);height:.34rem;margin-top:.24em;margin-inline:auto}
.iv-hero{padding-block:clamp(5.5rem,8vw,7.2rem) clamp(3.5rem,5vw,5rem)}
/* Ambient backdrop must stay one continuous wash. The hero's own gradient was painted only on the .iv-hero box, so short pages (root, hero centered in main) showed a hard horizontal seam at the box top (~y=225 at 1440x900). Role landings had the same edge under the header. */
.iv-hero{background:none}
.iv-hero--root .iv-hero__title{font-size:clamp(4.2rem,8vw,7.3rem)}

/* Hero art: wider, 40px icons, mini illustrated scenes inside each stage (site PipelineSignalArt density). */
.iv-art{max-width:72rem}
.iv-art__stage{padding:22px 14px 20px;min-height:11.5rem;display:grid;justify-items:center;align-content:start}
.iv-art__icon{width:40px;height:40px;margin:0 auto 10px}
.iv-art__scene{width:100%;height:72px;margin:0 0 12px;border-radius:12px;border:1px solid #e3cbeb24;background:linear-gradient(180deg,#1a0d24,#0c0712);overflow:hidden;position:relative}
.iv-art__value{font:500 1.375rem/1.15 var(--font-display)}
@media (width<=639px){
  .iv-art__scene{height:52px;margin-bottom:8px}
  .iv-art__stage{min-height:0;padding:14px 8px 12px}
  .iv-art__icon{width:32px;height:32px}
}

/* How it works: site system card has an eyebrow + large multi-line inner title. */
.iv-system__head .eyebrow{margin:0 0 .85rem;display:block}
.iv-system__head h3{font:500 clamp(1.65rem,3.2vw,2.55rem)/1.12 var(--font-display);letter-spacing:-.035em;max-width:22ch;margin:0 auto;text-wrap:balance;color:#faf2fbf2}
.iv-rail__card .iv-rail__viz{display:flex;justify-content:center;align-items:center;gap:.55rem;margin-bottom:.55rem;color:#d79bf1}
.iv-rail__card .iv-rail__viz svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.iv-rail__card .iv-rail__viz span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#e7d5ecd1;font-weight:500}

/* Good to know: site fit items put the icon above the text, with more vertical rhythm. Title stays in the card. */
.iv-know{padding:clamp(2.25rem,4vw,3.5rem) clamp(1.75rem,4vw,3.5rem);margin-top:clamp(3rem,5vw,5rem)}
.iv-know__head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;margin-bottom:1.5rem;text-align:center}
.iv-know__head h3{margin:0 auto;font:500 2rem/1.04 var(--font-display);letter-spacing:-.035em;color:oklch(0.985 0.009 305)}
.iv-know li{flex-direction:column;align-items:center;justify-content:center;gap:.55rem;padding-block:1.35rem;text-align:center}
.iv-know li svg.iv-know__icon{width:1.15rem;height:1.15rem;opacity:.9;color:#d79bf1;transform:none;margin:0}
.iv-know li p{font-size:clamp(1rem,1.2vw,1.0625rem);line-height:1.65;max-width:38ch;color:#eee0f2b8}

/* Inputs: site contact form, measured. Height 56, radius 18, font 14, placeholder oklab(~.775 /.7), bg .7. */
.field input,.field textarea{
  width:100%;height:56px;padding:0 16px;border-radius:18px;
  border:1px solid oklab(0.84 0.0707 -0.0843 / 0.112);
  background:oklab(0.095 0.0148 -0.0237 / 0.7);
  color:oklch(0.985 0.009 305);
  font:400 14px var(--font-sans);outline:none;
}
.field input::placeholder{color:oklab(0.775 0.0212 -0.0315 / 0.7)}
.field input:focus{border-color:oklch(72.33% .2687 332.4);box-shadow:0 0 0 3px rgb(255 76 237 / .18)}
.field label{font-size:14px;font-weight:500;color:oklch(0.985 0.009 305)}
/* Camera-check primary: site contact uses a compact 52-ish centered pill, not a full-width bar. */
.iv-setup__go,.iv-setup form .btn--primary{width:auto;min-width:14rem;margin-inline:auto}
.iv-setup form{text-align:left}
.iv-setup form .iv-setup__go{margin-top:20px}
@media (width<=639px){
  .iv-task--setup .field input{height:56px} /* keep site input height; don't shrink to 48 */
  .iv-setup form .btn--primary{width:100%}
}

/* Status / error / warmup / recover / fatal: site 404 treatment.
   Title 96px / 400 / lh 1 / ls -.035em at 1440 (text-8xl), 72px on mobile (text-7xl).
   No card. Vertically centered in the main. Eyebrow 12/500 ls 2.16px #e7a0f7. Lead 18px muted. */
.iv-status{text-align:center;padding:clamp(3rem,8vw,6rem) 1.5rem;max-width:46rem;margin:0 auto;width:100%}
.iv-status .eyebrow{margin:0 auto 1rem;font-size:12px;font-weight:500;letter-spacing:2.16px;color:#e7a0f7;text-transform:uppercase}
.iv-status__title{font:400 clamp(4.5rem,8vw,6rem)/1 var(--font-display);letter-spacing:-.035em;text-wrap:balance;margin:0 auto;color:oklch(0.985 0.009 305);padding-bottom:.12em}
.iv-status__title em{font-style:italic}
.iv-status__lead{margin:1.25rem auto 0;font-size:1.125rem;line-height:1.55;color:oklch(0.775 0.038 304);max-width:36rem;text-wrap:balance}
.iv-status .iv-actions{margin-top:2rem}
.iv-status .ls-alert{margin:1.5rem auto 0;text-align:left}
@media (width<=639px){
  .iv-status__title{font-size:clamp(2.75rem,16vw,4.5rem)}
}

/* All done: keep tiles, but sit them in a filled main; title a bit closer to 404 presence. */
.iv-task--done{padding-top:clamp(3.5rem,7vw,6rem);padding-bottom:4rem}

/* Question / review / recording already centered; give the question a little more presence. */
.iv-q{font:500 clamp(1.5rem,2.8vw,2.25rem)/1.2 var(--font-display)}

/* ===== Site directory footer — exact website recipe (1091 desktop / 1408 mobile). ===== */
.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}
.site-footer--directory{
  --foreground: oklch(0.985 0.009 305);
  --muted-foreground: oklch(0.775 0.038 304);
  --border: oklch(0.84 0.11 310 / 0.16);
  --brand-lilac: #e7a0f7;
  --brand-pink: #ff4ced;
  --background: oklab(0.10004 0.015536 -0.0255579);
  --surface: oklab(0.14 0.02 -0.03);
  flex-shrink:0;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  font-size:16px;
  padding:0;
}
.site-closing-container{box-sizing:border-box;width:100%;max-width:76rem;margin-inline:auto;padding-inline:1.5rem}
.site-footer--directory .footer-directory{max-width:76rem;padding-block:clamp(3rem,6vw,5rem) 1.5rem}
.site-footer--directory .footer-directory__brand .site-logo__image{width:12rem;height:auto;display:block}
.site-footer--directory a:hover{color:var(--brand-lilac)}
.footer-contact{border-top:1px solid var(--border);font-family:var(--font-sans);margin-top:2rem;padding-block:2rem 1.75rem}
.footer-contact__methods{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:2.5rem;display:grid}
.footer-contact__email{min-width:0;color:var(--muted-foreground);font-size:.875rem;line-height:1.5}
.footer-contact__email p{margin:0}
.footer-contact__email a{letter-spacing:-.02em;min-height:2.75rem;color:var(--foreground);overflow-wrap:anywhere;align-items:center;margin-top:.5rem;font-size:1.1875rem;line-height:1.5;display:inline-flex;text-decoration:none}
.site-footer--directory .footer-directory__socials{align-items:center;gap:.5rem;width:max-content;max-width:100%;display:flex}
.site-footer--directory .footer-contact__methods .footer-directory__socials{justify-self:end;margin-top:0}
.site-footer--directory .footer-directory__socials a,
.site-footer--directory .footer-directory__whatsapp{
  width:2.75rem;min-height:2.75rem;color:var(--muted-foreground);border-radius:50%;flex:none;
  justify-content:center;align-items:center;display:inline-flex;text-decoration:none;
}
.site-footer--directory .footer-directory__socials svg{flex:none;width:1.5rem;height:1.5rem}
.site-footer--directory .footer-directory__socials a[data-social-platform="linkedin"]{color:#0a66c2}
.site-footer--directory .footer-directory__socials a[data-social-platform="facebook"]{color:#1877f2}
.site-footer--directory .footer-directory__socials a[data-social-platform="instagram"]{color:#e4405f}
.site-footer--directory .footer-directory__socials a[data-social-platform="youtube"]{color:red}
.site-footer--directory .footer-directory__socials a[data-social-platform="x"]{color:#fff}
.contact-numbers{width:100%;min-width:0;max-width:32rem;font-family:var(--font-sans)}
.contact-numbers--footer{max-width:none}
.contact-numbers--footer .contact-numbers__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem;margin-top:1.75rem;display:grid}
.contact-numbers__row{text-align:left;grid-template-columns:minmax(0,1fr);align-content:start;min-width:0;display:grid}
.contact-numbers__label{min-width:0;min-height:2.625rem;color:var(--muted-foreground);align-items:center;gap:.5rem;font-size:.875rem;line-height:1.5;display:flex}
.contact-numbers__label svg{flex:none;width:1.5rem;height:1rem;overflow:hidden;border-radius:.25rem}
.contact-numbers__phone{letter-spacing:-.01em;min-height:2.75rem;color:var(--foreground);align-items:center;font-size:1rem;line-height:1.5;display:inline-flex;text-decoration:none}
.site-footer--directory .footer-directory__bottom{border-top:1px solid var(--border);color:var(--muted-foreground);justify-content:space-between;align-items:center;gap:1rem;margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.25rem;font-size:.75rem;line-height:18px;display:flex}
.site-footer--directory .footer-contact + .footer-directory__bottom{margin-top:0}
.site-footer--directory .footer-directory__bottom p{margin:0}
.site-footer--directory .footer-directory__bottom a{color:inherit;font-size:inherit;line-height:inherit;text-decoration:none}
@media (width>=1100px){
  .contact-numbers--footer .contact-numbers__list{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.5rem}
}
@media (width>=1024px){
  .site-closing-container{padding-inline:2rem}
}
@media (width>=1100px){
  /* already 6-col phones */
}
@media (width<=699px){
  .footer-contact{margin-top:1.75rem;padding-block:1.5rem 1.75rem}
  .footer-contact__methods{grid-template-columns:minmax(0,1fr);gap:1rem}
  .site-footer--directory .footer-contact__methods .footer-directory__socials{justify-self:start}
  .contact-numbers--footer .contact-numbers__list{margin-top:1.5rem}
  .contact-numbers__phone{font-size:.9375rem}
  .site-footer--directory .footer-directory__brand .site-logo__image{width:11.5rem}
  .site-footer--directory .footer-directory__bottom{padding-bottom:calc(5rem + env(safe-area-inset-bottom,0px));flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .site-footer--directory .footer-directory__socials a{transition:none}
}

.iv-lead a,.iv-sub a,.iv-status__lead a,.iv-help a,.ls-alert a{color:oklch(0.985 0.009 305);text-underline-offset:3px;text-decoration-color:oklch(0.985 0.009 305 / .5)}

/* Extra v3 audit items not fully in the mockup override block */
.iv-know{border-radius:1.75rem}
.iv-h2{padding-bottom:.12em}
.iv-tiles>div{padding:1.75rem 1.25rem}
/* Contact-form surface on the camera-check card (audit 21) */
.iv-task--setup .iv-card{
  background:rgba(19,8,29,.85);
  border:1px solid oklab(0.985 0.005 -0.007 / .2);
  border-radius:28px;
  padding:43.2px;
}
@media (width<=639px){
  .iv-task--setup .iv-card{padding:16px;border-radius:1.25rem;margin-top:1rem}
  .iv-task--setup .field input{height:56px}
}
/* Viewport fill */
html,body{min-height:100vh;height:auto}
body.ls-interview{min-height:100vh;height:auto;display:flex;flex-direction:column}
.ls-main{flex:1 0 auto;display:flex;flex-direction:column;min-height:calc(100svh - 68px);width:100%}
.ls-main.iv-main--fill{justify-content:center}
/* Chat launcher: hide on the landing (desktop and mobile) so it does not sit on the illustrated panel */
body.ls-interview--landing .ls-isolated-chat{display:none!important}
@media (width<=639px){
  .iv-hero{padding-block:3.5rem 4.75rem} /* 56px 76px, site .home-hero */
  body.ls-interview--landing .iv-hero{padding-bottom:4.75rem}
}
/* Status screens: compact pills, never stretched */
.iv-status .iv-actions{width:auto;max-width:100%;flex-direction:row;flex-wrap:wrap}
.iv-status .btn{width:auto}
@media (width<=639px){
  .iv-status .iv-actions{flex-direction:column;align-items:center;width:auto}
  .iv-status .btn{width:auto;min-width:14rem;max-width:22rem}
}
/* Reduced motion: new decorative layers stay visible and still */
@media (prefers-reduced-motion:reduce){
  .iv-art__scene, .iv-art__track, .ls-header__ice{animation:none!important}
}

/* 3. Mobile setup errors: when an alert is showing, tighten so #start stays fully in view with space under it */
@media (width<=639px){
  .iv-task--setup:has(.ls-alert:not(:empty)){padding-top:.35rem;padding-bottom:1.5rem}
  .iv-task--setup:has(.ls-alert:not(:empty)) .iv-title{font-size:1.5rem;margin-top:.15rem;margin-bottom:.35rem}
  .iv-task--setup:has(.ls-alert:not(:empty)) .iv-card{padding:12px;margin-top:.4rem}
  .iv-task--setup:has(.ls-alert:not(:empty)) .iv-media,
  .iv-task--setup:has(.ls-alert:not(:empty)) .iv-media video,
  .iv-task--setup:has(.ls-alert:not(:empty)) .preview{max-height:132px}
  .iv-task--setup:has(.ls-alert:not(:empty)) .field{margin-top:8px;gap:4px}
  .iv-task--setup:has(.ls-alert:not(:empty)) .ls-ts--interactive{margin-top:8px}
  .iv-task--setup:has(.ls-alert:not(:empty)) .ls-alert{margin-top:8px;padding:8px 10px;font-size:12px;line-height:1.45}
  .iv-task--setup:has(.ls-alert:not(:empty)) .iv-setup__go{margin-top:.75rem;margin-bottom:.75rem}
  .iv-task--setup:has(.ls-alert:not(:empty)) .iv-help--mob{display:none}
  .iv-task--setup:has(.ls-alert:not(:empty)) .iv-device{margin-top:.25rem}
}

/* v4.1 mobile: How it works inner title 21.6px / 560 (site system heading).
   Lead / sub leading 1.65, matching site .type-body. */
@media (width<=639px){
  .iv-system__head h3{font:560 1.35rem/1.1 var(--font-display);letter-spacing:-.035em;color:rgba(250,242,251,.95)}
  .iv-lead,.iv-sub{font-size:16px;line-height:1.65}
}

/* v4 mobile: art inset 8px (24px wrap - 16px) */
@media (width<=639px){
  .iv-art{margin-inline:-16px}
}

/* Setup uses the same centered page container as the landing screens. */
.iv-task--setup { padding-inline: 0; }
.iv-task--setup .field label,
.iv-task--setup .field input { text-align: center; }

/* Interaction-only Turnstile: no well or placeholder while it runs in the background. */
.ls-ts, .turnstile {
  display: flex; justify-content: center; max-width: 100%; overflow: hidden;
  container-type: inline-size;
}
.ls-ts > div { flex-shrink: 0; }
.ls-ts--interactive { margin-top: 16px; }
.ls-ts:not(.ls-ts--interactive) { height: 0; }

/* v6 hero heading: role label above the site home display title. Preview only. */
.iv-hero__heading {
  font: 500 clamp(4.2rem, 8vw, 7.3rem)/0.96 var(--font-display);
}

.iv-hero__title,
.iv-hero--root .iv-hero__title {
  font: inherit;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 11ch;
  width: auto;
  margin-inline: auto;
  padding: 0.06em 0.04em 0.12em 0;
}

.iv-hero__kicker {
  margin: 0 0 0.34em;
  font-size: 0.49em;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: rgba(238, 221, 243, 0.76);
  text-align: center;
}

.iv-hero__title::after {
  width: clamp(4rem, 7vw, 6rem);
  height: 0.34rem;
  margin-top: 0.24em;
  margin-inline: auto;
}

@media (width <= 620px) {
  .iv-hero__heading {
    font-size: clamp(3.15rem, 15vw, 4.5rem);
    line-height: 0.98;
  }
  .iv-hero__title,
  .iv-hero--root .iv-hero__title {
    max-width: min(10ch, 100%);
  }
  .iv-hero__kicker {
    margin-bottom: 0.3em;
    font-size: 0.54em;
  }
}

/* Visibly prefilled application email (readonly, not looking disabled). */
.field input[readonly] {
  color: var(--fg);
  background: rgb(7 3 13 / .7);
  cursor: default;
}

/* Shared interview link at /start: three-role picker. */
.ls-main:has(.iv-hero--root) { justify-content: flex-start; }
body.ls-interview--landing .iv-hero--root { padding-bottom: 2.5rem; }
.iv-hero--root .iv-art { margin-top: 2rem; }

.iv-role-card {
  border: 1px solid #ebd6f126;
  border-radius: 1.75rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 76, 237, 0.10), transparent 58%),
    rgba(16, 8, 23, 0.72);
  box-shadow:
    0 32px 90px -64px #000000eb,
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
/* Keep the live 300px widget inside the camera-check form on narrow phones. */
@container (width < 300px) {
  .ls-ts > div { transform: scale(0.85); transform-origin: center center; }
}

.iv-role-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 64rem;
  margin: 2.5rem auto 0;
  text-align: left;
}
.iv-role-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
  min-height: 11rem;
  padding: 1.5rem 1.5rem 1.25rem;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.15s ease, background-color 0.16s ease;
}
.iv-role-card:hover,
.iv-role-card:focus-visible {
  border-color: rgb(185 139 205 / 0.55);
  transform: translateY(-2px);
}
.iv-role-card:focus-visible { outline: 2px solid #e7a0f7; outline-offset: 3px; }
.iv-role-card h3 {
  margin: 0;
  font: 500 1.5rem/1.15 var(--font-display);
  letter-spacing: -0.02em;
  color: oklch(0.985 0.009 305);
  text-wrap: balance;
}
.iv-role-card__go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  font: 500 14px/20px var(--font-sans);
  color: #e7a0f7;
}
.iv-role-card__go svg { width: 16px; height: 16px; }

@media (width <= 720px) {
  body.ls-interview--landing .iv-hero--root { padding-bottom: 2rem; }
  .iv-hero--root .iv-art { margin-top: 1.75rem; }
  .iv-role-cards {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-top: 2rem;
  }
  .iv-role-card { min-height: 0; padding: 1.25rem 1.25rem 1.1rem; }
  .iv-role-card h3 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .iv-role-card { transition: none; }
  .iv-role-card:hover,
  .iv-role-card:focus-visible { transform: none; }
}