/* ============================================================
   Inspectra v2 — homepage + profession pages
   ------------------------------------------------------------
   Loaded AFTER styles.css, and only by the pages rebuilt in the
   2026-09 redesign (index.html and the profession pages written
   by build-pages.js). Every class here is prefixed ix- so nothing
   collides with the ~560 blog / glossary / legal pages that share
   styles.css. Header, footer, buttons, the sticky CTA and the
   accessibility panel still come from styles.css.

   One idea carries the look: the page is marked up the way an
   inspector marks a defect photo — a red hand-drawn circle or
   arrow on the one thing that matters, everything else quiet.
   ============================================================ */

:root{
  --ix-ink:#0B1530;
  --ix-ink-2:#2C3852;
  --ix-muted:#5A6479;
  --ix-navy:#0F1B3E;
  --ix-navy-2:#0A1330;
  --ix-blue:#2563EB;
  --ix-blue-600:#1D4ED8;
  --ix-blue-50:#EEF3FF;
  --ix-blue-100:#DCE7FF;
  --ix-paper:#FFFFFF;
  --ix-mist:#F4F7FB;
  --ix-line:#E3E8F0;
  --ix-line-2:#D5DCE7;
  --ix-mark:#E0342F;           /* the inspector's red pen */
  --ix-ok:#15803D;   --ix-ok-soft:#DCFCE7;
  --ix-warn:#B45309; --ix-warn-soft:#FEF3C7;
  --ix-fail:#B91C1C; --ix-fail-soft:#FEE2E2;
  --ix-wa:#DCF8C6;   --ix-wa-bg:#EFEAE2;
  --ix-hand:"Playpen Sans Hebrew","Heebo",cursive;
  --ix-r:16px; --ix-r-lg:24px; --ix-r-xl:32px;
  --ix-sh-1:0 1px 2px rgba(11,21,48,.06),0 4px 14px -6px rgba(11,21,48,.10);
  --ix-sh-2:0 2px 6px -2px rgba(11,21,48,.10),0 24px 48px -24px rgba(11,21,48,.30);
  --ix-sh-phone:0 2px 4px rgba(11,21,48,.18),0 30px 60px -20px rgba(11,21,48,.45),0 60px 120px -40px rgba(37,99,235,.30);
  --ix-wrap:1160px;
}

body.ix{background:var(--ix-paper);color:var(--ix-ink)}
.ix-wrap{width:100%;max-width:var(--ix-wrap);margin-inline:auto;padding-inline:24px}
@media (max-width:640px){.ix-wrap{padding-inline:18px}}
.ix-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.ix-h1{font-size:clamp(38px,5.1vw,64px);line-height:1.07;font-weight:900;letter-spacing:-.015em;text-wrap:balance}
.ix-h2{font-size:clamp(30px,3.5vw,46px);line-height:1.14;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.ix-h3{font-size:clamp(24px,2.5vw,32px);line-height:1.22;font-weight:800;letter-spacing:-.008em;text-wrap:balance}
.ix-lead{font-size:clamp(17.5px,1.5vw,19.5px);line-height:1.72;color:var(--ix-ink-2);max-width:36em}
.ix-p{font-size:18px;line-height:1.72;color:var(--ix-ink-2)}
.ix-for{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;font-weight:700;color:var(--ix-blue-600);margin-bottom:18px}
.ix-for i{width:8px;height:8px;border-radius:50%;background:var(--ix-mark);box-shadow:0 0 0 4px rgba(224,52,47,.14);flex:none}
.ix-crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--ix-muted);margin-bottom:22px}
.ix-crumbs a:hover{color:var(--ix-blue)}
.ix-crumbs span[aria-hidden]{opacity:.6}

/* The red pen. A loose loop around a phrase; draws once on load. */
.ix-circled{position:relative;display:inline-block;white-space:nowrap;z-index:0}
.ix-circled svg{position:absolute;inset:-20% -8% -24% -8%;width:116%;height:144%;z-index:-1;overflow:visible;pointer-events:none}
.ix-circled path{fill:none;stroke:var(--ix-mark);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:ix-draw 1s .45s cubic-bezier(.6,.1,.3,1) forwards}
.ix-under{position:relative;white-space:nowrap}
.ix-under svg{position:absolute;inset-inline:-2%;bottom:-.2em;width:104%;height:.42em;overflow:visible;pointer-events:none}
.ix-under path{fill:none;stroke:var(--ix-mark);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:ix-draw .8s .3s cubic-bezier(.6,.1,.3,1) forwards}
@keyframes ix-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ix-circled path,.ix-under path{animation:none;stroke-dashoffset:0}}

/* ---------- buttons (extend styles.css .btn) ---------- */
body.ix .btn{border-radius:12px}
.ix-btn-lg{min-height:56px;padding:0 28px;font-size:17px}
.ix-btn-line{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border-radius:12px;background:#fff;color:var(--ix-ink);font-weight:700;font-size:17px;box-shadow:inset 0 0 0 1.5px var(--ix-line-2);transition:box-shadow .15s,color .15s;cursor:pointer;border:0;font-family:inherit}
.ix-btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--ix-ink)}
.ix-btn-line:focus-visible,.ix-play:focus-visible{outline:3px solid var(--ix-blue);outline-offset:3px}
.ix-play{width:28px;height:28px;border-radius:50%;background:var(--ix-ink);display:grid;place-items:center;flex:none}
.ix-play svg{width:10px;height:10px;fill:#fff;transform:scaleX(-1)}
.ix-btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border-radius:12px;background:#1FAF55;color:#fff;font-weight:700;font-size:17px}
.ix-btn-wa:hover{background:#17964A}
.ix-btn-wa svg{width:22px;height:22px}

/* ---------- hero ---------- */
.ix-hero{position:relative;overflow:hidden;padding-block:44px 76px;background:radial-gradient(880px 520px at 16% 36%,#E8F0FF 0%,rgba(232,240,255,0) 70%),var(--ix-paper)}
.ix-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.ix-hero .ix-lead{margin-top:22px}
.ix-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ix-fine{margin-top:18px;font-size:15px;color:var(--ix-muted);display:flex;flex-wrap:wrap;gap:6px 18px}
.ix-fine span{display:inline-flex;align-items:center;gap:6px}
.ix-fine svg{width:16px;height:16px;stroke:var(--ix-ok);fill:none;stroke-width:2.8;flex:none}

/* stage: phone + the report sheet it produced + one status toast */
.ix-stage{position:relative;display:grid;place-items:center;min-height:590px}
.ix-phone{position:relative;width:286px;aspect-ratio:9/19.4;border-radius:46px;background:#0B0F19;padding:10px;box-shadow:var(--ix-sh-phone);flex:none}
.ix-phone::after{content:"";position:absolute;inset:0;border-radius:46px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08);pointer-events:none}
.ix-phone__screen{position:relative;width:100%;height:100%;border-radius:37px;overflow:hidden;background:#F7F9FC}
.ix-phone__screen>img,.ix-phone__screen>video{width:100%;height:100%;object-fit:cover;object-position:top}
.ix-phone--sm{width:240px}
.ix-phone--xs{width:200px;border-radius:38px;padding:8px}
.ix-phone--xs .ix-phone__screen{border-radius:31px}
.ix-phone--xs::after{border-radius:38px}
/* the footer (ixFooter): the brand and four link lists on a wide screen;
   styles.css folds it to two columns, then one, on smaller ones */
@media (min-width:1001px){.footer__in--4{grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:32px}}
@media (min-width:761px) and (max-width:1000px){.footer__in--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}.footer__in--4 .footer__brand{grid-column:1/-1}}
.ix-vidbtn{position:absolute;inset-inline-start:14px;bottom:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(11,21,48,.72);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px)}
.ix-vidbtn svg{width:14px;height:14px;fill:#fff}
.ix-vidbtn:focus-visible{outline:3px solid #fff;outline-offset:2px}

.ix-sheet{position:absolute;width:248px;background:#fff;border-radius:6px;box-shadow:var(--ix-sh-2);padding:16px 16px 12px;font-size:11px;line-height:1.5;color:var(--ix-ink-2);transform:rotate(-5deg);inset-inline-end:-18px;top:96px}
.ix-sheet__hd{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:2px solid var(--ix-navy);padding-bottom:8px;margin-bottom:6px}
.ix-sheet__hd b{font-size:12.5px;color:var(--ix-ink);line-height:1.3}
.ix-code{font-family:var(--mono);font-size:10px;background:var(--ix-mist);padding:2px 6px;border-radius:5px;direction:ltr;white-space:nowrap}
.ix-sheet__row{display:flex;gap:8px;padding:6px 0;border-bottom:1px dashed var(--ix-line)}
.ix-sheet__n{flex:none;width:18px;height:18px;border-radius:5px;background:var(--ix-fail-soft);color:var(--ix-fail);font-weight:800;font-size:10px;display:grid;place-items:center}
.ix-sheet__img{position:relative;height:84px;border-radius:4px;margin-top:8px;background:#c9ced6 center/cover}
.ix-sheet__img::after{content:"";position:absolute;width:34px;height:34px;border:2px solid var(--ix-mark);border-radius:50%;inset-inline-start:42%;top:26%}
.ix-sheet__ft{display:flex;justify-content:space-between;margin-top:8px;font-size:9.5px;color:var(--ix-muted)}

.ix-toast{position:absolute;z-index:4;display:flex;align-items:center;gap:11px;background:#fff;border-radius:14px;box-shadow:var(--ix-sh-2);padding:12px 16px 12px 18px;font-size:14px;line-height:1.35;inset-inline-start:-6px;bottom:110px;max-width:270px}
.ix-toast__ic{width:36px;height:36px;border-radius:10px;background:var(--ix-ok-soft);display:grid;place-items:center;flex:none}
.ix-toast__ic svg{width:18px;height:18px;stroke:var(--ix-ok);fill:none;stroke-width:2.8}
.ix-toast__ic--warn{background:var(--ix-warn-soft)}
.ix-toast__ic--warn svg{stroke:var(--ix-warn)}
.ix-toast b{display:block;font-size:14.5px;color:var(--ix-ink)}
.ix-toast small{display:block;color:var(--ix-muted);font-size:12.5px}

/* handwritten note + arrow, the way it would be scribbled on a photo */
.ix-note{position:absolute;z-index:4;font-family:var(--ix-hand);color:var(--ix-mark);font-size:18px;line-height:1.25;font-weight:500;white-space:nowrap}
.ix-note{right:-38px;top:46%}
.ix-note svg{position:absolute;overflow:visible;right:100%;top:8px;margin-right:4px}
.ix-note path{fill:none;stroke:var(--ix-mark);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:1000px){
  .ix-hero__grid{grid-template-columns:1fr;gap:36px}
  .ix-stage{min-height:0;padding-block:8px 12px}
  .ix-sheet{display:none}
}
@media (max-width:640px){
  .ix-hero{padding-block:26px 44px}
  .ix-hero__cta>*{width:100%}
  .ix-phone{width:248px}
  .ix-note{display:none}
  .ix-toast{inset-inline-start:0;bottom:56px;max-width:250px}
}

/* ---------- facts strip ---------- */
.ix-facts{border-block:1px solid var(--ix-line);background:#fff}
.ix-facts__in{display:grid;grid-template-columns:repeat(4,1fr)}
.ix-fact{padding:26px 24px;border-inline-start:1px solid var(--ix-line)}
.ix-fact:first-child{border-inline-start:0}
.ix-fact b{display:block;font-size:30px;line-height:1.2;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ix-fact span{display:block;margin-top:4px;font-size:15.5px;line-height:1.45;color:var(--ix-muted)}
@media (max-width:760px){
  .ix-facts__in{grid-template-columns:1fr 1fr}
  .ix-fact{padding:20px 16px}
  .ix-fact:nth-child(3){border-inline-start:0}
  .ix-fact:nth-child(n+3){border-top:1px solid var(--ix-line)}
  .ix-fact b{font-size:24px}
}

/* ---------- sections ---------- */
.ix-sec{padding-block:104px}
.ix-sec--mist{background:var(--ix-mist)}
.ix-sec--navy{background:var(--ix-navy);color:#fff}
.ix-sec--navy .ix-p,.ix-sec--navy .ix-lead{color:#C8D3EA}
.ix-head{max-width:740px;margin-bottom:56px}
.ix-head .ix-p,.ix-head .ix-lead{margin-top:16px}
.ix-head--center{margin-inline:auto;text-align:center}
.ix-head--center .ix-lead{margin-inline:auto}
@media (max-width:640px){.ix-sec{padding-block:64px}.ix-head{margin-bottom:34px}}

/* ---------- before / after ---------- */
.ix-ba{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.ix-ba__card{border-radius:var(--ix-r-lg);padding:28px;background:#fff;border:1px solid var(--ix-line)}
.ix-ba__card--old{background:var(--ix-wa-bg);border-color:#E2DACC}
.ix-ba__label{font-size:14.5px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.ix-ba__card--old .ix-ba__label{color:#6B5E4B}
.ix-ba__card--new .ix-ba__label{color:var(--ix-blue-600)}
.ix-ba__label svg{width:18px;height:18px}
.ix-ba__note{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--ix-muted)}
.ix-ba__card--old .ix-ba__note{color:#7D6E57;font-style:italic}
.ix-wa{display:grid;gap:8px}
.ix-wa p{justify-self:start;max-width:90%;background:var(--ix-wa);border-radius:10px 10px 10px 3px;padding:9px 12px;font-size:15.5px;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.08);white-space:pre-line;color:#1f2a1c}
.ix-wa p.them{justify-self:end;background:#fff;border-radius:10px 10px 3px 10px}
.ix-xls{border:1px solid #CBD5C4;border-radius:6px;overflow:hidden;background:#fff;font-size:13.5px}
.ix-xls__bar{background:#1D6F42;color:#fff;font-size:12.5px;font-weight:700;padding:6px 10px}
.ix-xls table{width:100%;border-collapse:collapse}
.ix-xls td,.ix-xls th{border:1px solid #DDE3D8;padding:6px 8px;text-align:start;vertical-align:top;line-height:1.4}
.ix-xls th{background:#F2F5EF;font-weight:700;font-size:12.5px;color:#4A5A44}
.ix-dcard{border:1px solid var(--ix-line);border-radius:14px;overflow:hidden;background:#fff}
.ix-dcard__hd{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--ix-navy);color:#fff;padding:12px 16px;font-size:15px;font-weight:700}
.ix-dcard__hd .ix-code{background:rgba(255,255,255,.14);color:#fff;font-size:11.5px}
.ix-drow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--ix-line);font-size:15.5px;line-height:1.4}
.ix-drow__loc{color:var(--ix-muted);font-size:13.5px;margin-top:2px}
.ix-chip{margin-inline-start:auto;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;flex:none}
.ix-chip--open{background:var(--ix-fail-soft);color:var(--ix-fail)}
.ix-chip--fix{background:var(--ix-warn-soft);color:var(--ix-warn)}
.ix-chip--ok{background:var(--ix-ok-soft);color:var(--ix-ok)}
.ix-chip--na{background:#E9EDF3;color:#475569}
@media (max-width:860px){.ix-ba{grid-template-columns:1fr}.ix-ba__card{padding:20px}}

/* ---------- steps (a real sequence, so it is numbered) ---------- */
.ix-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:ixstep;list-style:none}
.ix-steps--3{grid-template-columns:repeat(3,1fr)}
.ix-step{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ix-line);border-radius:var(--ix-r-lg);overflow:hidden}
.ix-step__shot{display:grid;place-items:end center;height:300px;padding-top:26px;background:linear-gradient(170deg,var(--ix-blue-50),#F8FAFD);overflow:hidden}
.ix-step__shot .ix-phone{width:196px;border-radius:34px 34px 0 0;padding:8px 8px 0;aspect-ratio:auto;height:290px}
.ix-step__shot .ix-phone::after{border-radius:34px 34px 0 0}
.ix-step__shot .ix-phone__screen{border-radius:27px 27px 0 0}
.ix-step__txt{padding:20px 22px 24px}
.ix-step__txt h3{font-size:19px;line-height:1.35;font-weight:800;display:flex;gap:10px;align-items:baseline}
.ix-step__txt h3::before{counter-increment:ixstep;content:counter(ixstep);flex:none;width:28px;height:28px;border-radius:8px;background:var(--ix-navy);color:#fff;font-size:15px;display:grid;place-items:center;transform:translateY(4px)}
.ix-step__txt p{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--ix-ink-2)}
@media (max-width:1000px){.ix-steps,.ix-steps--3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .ix-steps,.ix-steps--3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-18px;padding-inline:18px;padding-bottom:6px;scrollbar-width:none}
  .ix-steps::-webkit-scrollbar{display:none}
  .ix-step{flex:0 0 82%;scroll-snap-align:center}
  .ix-step__shot{height:260px}
  .ix-step__shot .ix-phone{width:176px;height:250px}
}

/* ---------- feature rows ---------- */
.ix-frow{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.ix-frow+.ix-frow{margin-top:112px}
.ix-frow--flip .ix-frow__media{order:-1}
.ix-frow__txt .ix-p{margin-top:16px}
.ix-ticks{margin-top:22px;display:grid;gap:11px;list-style:none}
.ix-ticks li{display:flex;gap:11px;font-size:17px;line-height:1.55;color:var(--ix-ink)}
.ix-ticks svg{flex:none;width:22px;height:22px;margin-top:2px;stroke:var(--ix-blue);fill:none;stroke-width:2.5}
.ix-frow__media{position:relative;display:grid;place-items:center;padding:48px 24px;border-radius:var(--ix-r-xl);background:linear-gradient(160deg,var(--ix-blue-50),#F7F9FD);min-height:420px}
.ix-frow__media .ix-phone{width:258px}
.ix-frow__media--photo{padding:0;overflow:hidden;background:#dfe5ee}
.ix-frow__media--photo>img{width:100%;height:100%;object-fit:cover}
.ix-new{display:inline-block;font-size:12px;font-weight:800;color:#fff;background:var(--ix-mark);padding:2px 8px 3px;border-radius:6px;letter-spacing:.02em;vertical-align:2px;margin-inline-start:6px;white-space:nowrap}
@media (max-width:900px){
  .ix-frow{grid-template-columns:1fr;gap:34px}
  .ix-frow--flip .ix-frow__media{order:0}
  .ix-frow+.ix-frow{margin-top:72px}
  .ix-frow__media{min-height:0;padding:36px 16px}
  .ix-frow__media .ix-phone{width:232px}
}

/* ---------- annotated screenshot callouts ---------- */
.ix-callout{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:8px 12px;font-size:13.5px;font-weight:700;box-shadow:var(--ix-sh-1);white-space:nowrap}
.ix-callout i{width:9px;height:9px;border-radius:50%;background:var(--ix-mark);flex:none}
@media (max-width:640px){.ix-callout{display:none}}

/* ---------- report showcase ---------- */
.ix-report{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}
.ix-report__pages{position:relative;height:560px}
.ix-report__page{position:absolute;width:62%;background:#fff;border-radius:4px;box-shadow:var(--ix-sh-2);overflow:hidden}
.ix-report__page img{width:100%;height:auto}
.ix-report__page:nth-child(1){inset-inline-end:0;top:0;transform:rotate(3deg)}
.ix-report__page:nth-child(2){inset-inline-start:0;top:60px;transform:rotate(-3deg);z-index:2}
.ix-report__pages--3 .ix-report__page{width:56%}
.ix-report__pages--3 .ix-report__page:nth-child(1){inset-inline-start:0;inset-inline-end:auto;top:0;transform:rotate(4deg)}
.ix-report__pages--3 .ix-report__page:nth-child(2){inset-inline-start:22%;top:34px;transform:rotate(-1deg);z-index:2}
.ix-report__pages--3 .ix-report__page:nth-child(3){inset-inline-start:auto;inset-inline-end:0;top:78px;transform:rotate(-5deg);z-index:3}
.ix-report__dl{display:inline-flex;align-items:center;gap:10px}
.ix-report__dl svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2}
.ix-report__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ix-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ix-line-2);border-radius:999px;padding:7px 14px;font-size:14.5px;font-weight:600;background:#fff}
.ix-pill svg{width:16px;height:16px;stroke:var(--ix-blue);fill:none;stroke-width:2.2}
@media (max-width:900px){.ix-report{grid-template-columns:1fr;gap:36px}.ix-report__pages{height:440px;max-width:520px;margin-inline:auto;width:100%}}
@media (max-width:520px){.ix-report__pages{height:360px}}

/* ---------- professions grid (homepage) ---------- */
.ix-pros{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ix-pro{position:relative;display:flex;flex-direction:column;border-radius:var(--ix-r-lg);overflow:hidden;background:#fff;border:1px solid var(--ix-line);transition:border-color .15s,box-shadow .15s,transform .15s}
.ix-pro:hover{border-color:var(--ix-line-2);box-shadow:var(--ix-sh-2);transform:translateY(-2px)}
.ix-pro:focus-visible{outline:3px solid var(--ix-blue);outline-offset:3px}
.ix-pro__img{aspect-ratio:16/10;background:#dfe5ee center/cover}
.ix-pro__txt{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.ix-pro__txt b{font-size:19px;font-weight:800;line-height:1.3}
.ix-pro__txt span{font-size:15.5px;line-height:1.55;color:var(--ix-ink-2)}
.ix-pro__go{margin-top:auto;padding-top:10px;font-size:15px;font-weight:700;color:var(--ix-blue-600);display:inline-flex;align-items:center;gap:6px}
.ix-pro__go svg{width:16px;height:16px;transform:scaleX(-1)}
.ix-pros--compact{grid-template-columns:repeat(4,1fr)}
.ix-pros--compact .ix-pro__img{display:none}
@media (max-width:1000px){.ix-pros,.ix-pros--compact{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ix-pros,.ix-pros--compact{grid-template-columns:1fr}.ix-pro__img{aspect-ratio:16/8}}

/* ---------- what's new ---------- */
.ix-news{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ix-news__item{background:#fff;border:1px solid var(--ix-line);border-radius:var(--ix-r-lg);padding:24px}
.ix-news__item h3{font-size:18.5px;line-height:1.35;font-weight:800}
.ix-news__item p{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--ix-ink-2)}
.ix-news__when{display:block;font-size:13px;font-weight:700;color:var(--ix-mark);margin-bottom:10px;letter-spacing:.01em}
.ix-sec--navy .ix-news__item{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.ix-sec--navy .ix-news__item p{color:#C8D3EA}
.ix-sec--navy .ix-news__when{color:#FF8A80}
@media (max-width:1000px){.ix-news{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.ix-news{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.ix-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.ix-faq__list{border-top:1px solid var(--ix-line)}
.ix-faq details{border-bottom:1px solid var(--ix-line)}
.ix-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 0;font-size:18.5px;font-weight:700;line-height:1.45}
.ix-faq summary::-webkit-details-marker{display:none}
.ix-faq summary::after{content:"";flex:none;width:22px;height:22px;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;color:var(--ix-blue);transition:transform .2s}
.ix-faq details[open] summary::after{transform:rotate(45deg)}
.ix-faq summary:focus-visible{outline:3px solid var(--ix-blue);outline-offset:4px;border-radius:6px}
.ix-faq__a{padding:0 0 22px;font-size:17px;line-height:1.72;color:var(--ix-ink-2);max-width:62ch}
@media (max-width:900px){.ix-faq{grid-template-columns:1fr;gap:24px}}

/* ---------- lead / final CTA ---------- */
.ix-final{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ix-final__contact{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ix-final__phone{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:17px;color:#fff;direction:ltr}
.ix-final .leadwrap{margin:0}
.ix-sec--navy .ix-h2{color:#fff}
.ix-sec--navy .store__btn{background:#fff}
@media (max-width:900px){.ix-final{grid-template-columns:1fr;gap:36px}}

/* ---------- related professions ---------- */
.ix-related{display:flex;flex-wrap:wrap;gap:10px}
.ix-related a{border:1px solid var(--ix-line-2);border-radius:999px;padding:9px 16px;font-size:15.5px;font-weight:600;background:#fff;transition:border-color .15s,color .15s}
.ix-related a:hover{border-color:var(--ix-blue);color:var(--ix-blue)}
.ix-related a[aria-current="page"]{background:var(--ix-navy);border-color:var(--ix-navy);color:#fff}

/* ---------- video dialog ---------- */
.ix-dialog{border:0;padding:0;background:transparent;max-width:min(92vw,420px);width:100%;margin:auto;overflow:visible}
.ix-dialog::backdrop{background:rgba(6,10,24,.78);backdrop-filter:blur(4px)}
.ix-dialog video{width:100%;max-height:86vh;border-radius:22px;background:#000;display:block}
.ix-dialog__x{position:absolute;top:-46px;inset-inline-start:0;width:38px;height:38px;border-radius:50%;border:0;background:#fff;color:var(--ix-ink);font-size:20px;cursor:pointer}
.ix-dialog--wide{max-width:min(94vw,1100px)}
.ix-dialog--square{max-width:min(92vw,80vh,720px)}
.ix-dialog--square video{aspect-ratio:1/1;max-height:none;background:#EBE8E3}

/* ---------- pen draws when a section heading scrolls in (v2.js adds .ix-pen) ---------- */
.ix-pen .ix-sec .ix-circled path,.ix-pen .ix-sec .ix-under path{animation-play-state:paused}
.ix-pen .ix-sec .ix-inview path{animation-play-state:running}

/* ---------- lead form inside the navy band ---------- */
.ix-final__formtitle{font-size:18px;font-weight:800;color:#fff;margin-bottom:4px}
.ix-final .leadform{margin-top:12px;border:0;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.ix-final .lf__actions .btn{width:100%}
.ix-final .ix-fine{color:#C8D3EA}
.ix-final .ix-fine svg{stroke:#6EE7A0}
.ix-final .store__btn{min-width:0}

/* ---------- sticky bar on phones: one CTA + WhatsApp ---------- */
body.ix .stickycta{gap:10px;padding-inline:14px}
body.ix .stickycta__btn{max-width:none}
.stickycta__wa{flex:none;width:50px;height:50px;border-radius:12px;background:#1FAF55;display:grid;place-items:center}
.stickycta__wa svg{width:26px;height:26px}

/* ---------- who answers the phone ---------- */
.ix-team{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;border:1px solid var(--ix-line);border-radius:var(--ix-r-xl);padding:40px 44px;background:linear-gradient(170deg,#fff,var(--ix-mist))}
.ix-team__txt .ix-p{margin-top:12px;max-width:60ch}
.ix-team__card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:230px}
.ix-team__card b{font-size:20px;font-weight:800}
.ix-team__card span{font-size:15px;color:var(--ix-muted);margin-bottom:12px}
@media (max-width:760px){.ix-team{grid-template-columns:1fr;gap:22px;padding:26px 22px}}
@media (max-width:760px){.ix-fact b{font-size:22px;white-space:nowrap}}

/* ---------- homepage: ten professions in one row-pair ---------- */
.ix-pros--5{grid-template-columns:repeat(5,1fr);gap:16px}
.ix-pros--5 .ix-pro__txt{padding:14px 16px 18px}
.ix-pros--5 .ix-pro__txt b{font-size:17px}
.ix-pros--5 .ix-pro__txt span{font-size:14.5px;line-height:1.5}
@media (max-width:1100px){.ix-pros--5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.ix-pros--5{grid-template-columns:1fr 1fr;gap:12px}.ix-pros--5 .ix-pro__img{aspect-ratio:16/10}.ix-pros--5 .ix-pro__txt span{display:none}.ix-pros--5 .ix-pro__txt{padding:10px 12px 12px}.ix-pros--5 .ix-pro__txt b{font-size:15.5px}}

/* ---------- homepage: prices on the page ---------- */
.ix-price{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ix-plans{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ix-plan{border:1px solid var(--ix-line);border-radius:var(--ix-r);padding:20px 22px;background:#fff}
.ix-plan b{display:block;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ix-plan span{font-size:15px;color:var(--ix-muted)}
.ix-plan--pop{border-color:var(--ix-blue);box-shadow:0 0 0 3px var(--ix-blue-100)}
@media (max-width:900px){.ix-price{grid-template-columns:1fr;gap:28px}}

/* ---------- homepage: guides ---------- */
.ix-guides{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ix-guide{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ix-line);border-radius:var(--ix-r-lg);overflow:hidden;transition:box-shadow .15s,transform .15s}
.ix-guide:hover{box-shadow:var(--ix-sh-2);transform:translateY(-2px)}
.ix-guide img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#dfe5ee}
.ix-guide span{display:flex;flex-direction:column;gap:6px;padding:18px 20px 22px}
.ix-guide b{font-size:18px;line-height:1.35}
.ix-guide small{font-size:15px;line-height:1.55;color:var(--ix-ink-2)}
@media (max-width:900px){.ix-guides{grid-template-columns:1fr}}

/* homepage hero: the headline carries the product category, so it runs longer */
.ix-hero--home .ix-hero__grid{grid-template-columns:1.1fr .9fr}
.ix-hero--home .ix-h1{font-size:clamp(34px,4.1vw,54px);line-height:1.1}
@media (max-width:1000px){.ix-hero--home .ix-hero__grid{grid-template-columns:1fr}}

/* ---------- floating controls: one brand colour, smaller, out of the copy's way ---------- */
body.ix .a11y-fab{background:var(--ix-navy);width:46px;height:46px;box-shadow:0 8px 20px -8px rgba(11,21,48,.55),0 2px 6px rgba(11,21,48,.2)}
body.ix .a11y-fab svg{width:24px;height:24px}
body.ix .wafab{width:52px;height:52px}
@media (max-width:760px){
  body.ix .wafab{display:none}
  body.ix.stickyvis .a11y-fab{bottom:96px}
}

/* profession heroes: the question carries the job title, so give the
   words more of the row and keep the longest titles to three lines */
.ix-hero:not(.ix-hero--home) .ix-hero__grid{grid-template-columns:1.16fr .84fr;gap:40px}
.ix-hero:not(.ix-hero--home) .ix-h1{font-size:clamp(34px,4.3vw,58px);line-height:1.08}
@media (max-width:1000px){.ix-hero:not(.ix-hero--home) .ix-hero__grid{grid-template-columns:1fr}}
.ix-nowrap{white-space:nowrap}

/* ---------- hero loop: the square motion piece (tools/hero-animation) ----------
   Rendered on the same warm grey it was drawn on, so the card and the video
   are one surface; the pause button is the one the phone videos use. */
.ix-stage:has(.ix-loop){min-height:0}
.ix-loop{position:relative;margin:0;width:min(100%,540px);aspect-ratio:1/1;border-radius:32px;overflow:hidden;background:#EBE8E3;box-shadow:0 1px 2px rgba(40,30,15,.06),0 28px 60px -32px rgba(40,30,15,.38)}
.ix-loop video{display:block;width:100%;height:100%;object-fit:cover}
.ix-loop .ix-vidbtn{background:rgba(13,13,14,.5)}
@media (max-width:1000px){.ix-loop{width:min(100%,520px);margin-inline:auto}}
@media (max-width:640px){.ix-loop{border-radius:24px}}

/* =====================================================================
   Interactive sections (homepage, 2026-09-29): who the app is for, the
   contractor cycle, the capabilities explorer, the live-link band, the
   dark demo, sixteen reasons and the viewfinder CTA. v2.js drives them;
   without JS every part is visible and static. The automatic parts play
   like the videos, and the accessibility menu's "צמצום אנימציות" stops them.
   ===================================================================== */
.ix-eyebrow{font-size:14.5px;font-weight:800;letter-spacing:.02em;color:var(--ix-blue-600);margin-bottom:12px}
.ix-ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* scroll reveal: v2.js puts .ix-rv on <html>, then .ix-in on each element as it comes in */
.ix-rv [data-ix-rv]{opacity:0;translate:0 24px;transition:opacity .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 80ms),translate .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 80ms)}
.ix-rv [data-ix-rv].ix-in{opacity:1;translate:none}

/* ---------- who it's for: tall photo cards ---------- */
.ix-who__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ix-wcard{position:relative;display:block;aspect-ratio:3/4.2;border-radius:22px;overflow:hidden;isolation:isolate;background:var(--ix-navy);color:#fff;box-shadow:var(--ix-sh-1);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.ix-wcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ix-wcard__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,21,48,0) 30%,rgba(11,21,48,.45) 56%,rgba(12,22,52,.95) 100%)}
.ix-wcard__body{position:absolute;inset-inline:18px;bottom:18px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.ix-wcard__ic{display:grid;place-items:center;width:52px;height:52px;padding:10px;border-radius:16px;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);box-shadow:0 12px 26px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);transition:background .35s,border-color .35s,transform .5s cubic-bezier(.2,.7,.2,1)}
.ix-wcard__ic svg{width:100%;height:100%;display:block;overflow:visible}
.ix-wcard__ic svg *{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ix-wcard__ic svg .d{fill:currentColor;fill-opacity:.24;stroke:none}
.ix-wcard__ic svg .bar{stroke-width:3.2}
.ix-wcard:hover .ix-wcard__ic,.ix-wcard:focus-visible .ix-wcard__ic{background:var(--ix-blue);border-color:transparent;transform:translateY(-2px) rotate(-4deg)}
.ix-wcard b{font-size:20px;font-weight:800;line-height:1.2;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.ix-wcard__bar{width:26px;height:3px;border-radius:2px;background:var(--ix-mark);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.ix-wcard__more{max-height:0;overflow:hidden;opacity:0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.88);transition:max-height .55s cubic-bezier(.2,.7,.2,1),opacity .4s}
.ix-wcard:hover,.ix-wcard:focus-visible{transform:translateY(-6px);box-shadow:var(--ix-sh-2)}
.ix-wcard:hover .ix-wcard__img,.ix-wcard:focus-visible .ix-wcard__img{transform:scale(1.07)}
.ix-wcard:hover .ix-wcard__bar,.ix-wcard:focus-visible .ix-wcard__bar{width:60px}
.ix-wcard:hover .ix-wcard__more,.ix-wcard:focus-visible .ix-wcard__more{max-height:7em;opacity:1}
.ix-wcard:focus-visible{outline:3px solid var(--ix-blue);outline-offset:3px}
@media (hover:none){.ix-wcard__more{max-height:none;opacity:1}}
@media (max-width:1100px){
  .ix-who__grid{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:12px;margin-inline:-24px;padding:6px 24px 20px;scrollbar-width:none}
  .ix-who__grid::-webkit-scrollbar{display:none}
  .ix-wcard{flex:0 0 min(62vw,250px);scroll-snap-align:start}
}
@media (max-width:640px){.ix-who__grid{margin-inline:-18px;padding-inline:18px}}

/* ---------- the contractor cycle: a phone that steps through the loop ---------- */
.ix-cyc__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ix-cyc__stage{display:flex;flex-direction:column;align-items:center}
.ix-cyc__ph{position:relative}
.ix-cyc__ph .ix-phone{width:280px}
.ix-cyc__shot,.ix-exp__shot{position:absolute;inset:0;opacity:0;transform:scale(1.025);transition:opacity .55s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.ix-phone__screen>.ix-cyc__shot,.ix-phone__screen>.ix-exp__shot{position:absolute}
.ix-cyc__shot.is-on,.ix-exp__shot.is-on{opacity:1;transform:none}
.ix-cyc__status{position:absolute;top:17%;left:-104px;display:grid;justify-items:end}
.ix-cyc__status .ix-chip{grid-area:1/1;margin:0;font-size:15px;padding:9px 15px;box-shadow:0 16px 34px -16px rgba(11,21,48,.4),0 2px 6px rgba(11,21,48,.08);opacity:0;translate:0 10px;transition:opacity .4s,translate .55s cubic-bezier(.2,.7,.2,1)}
.ix-cyc__status .ix-chip.is-on{opacity:1;translate:none}
.ix-cyc__steps{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.ix-cyc__step{position:relative;display:flex;align-items:center;gap:9px;padding:10px 15px 12px;border-radius:14px;border:1px solid var(--ix-line);background:#fff;font:inherit;font-size:15px;font-weight:700;color:var(--ix-ink-2);cursor:pointer;overflow:hidden;transition:border-color .3s,box-shadow .3s,color .3s}
.ix-cyc__n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ix-blue-50);color:var(--ix-blue-600);font-size:13px;font-weight:800;transition:background .3s,color .3s}
.ix-cyc__step i{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--ix-blue);transform:scaleX(var(--p,0));transform-origin:right}
.ix-cyc__step.is-on{border-color:var(--ix-blue);color:var(--ix-ink);box-shadow:0 0 0 3px var(--ix-blue-100)}
.ix-cyc__step.is-on .ix-cyc__n{background:var(--ix-blue);color:#fff}
.ix-cyc__step:focus-visible{outline:3px solid var(--ix-blue);outline-offset:3px}
@media (max-width:900px){.ix-cyc__grid{grid-template-columns:1fr;gap:40px}.ix-cyc__ph .ix-phone{width:250px}.ix-cyc__status{left:-60px}}
@media (max-width:640px){.ix-cyc__steps{flex-direction:column;align-items:stretch;width:100%;max-width:330px}.ix-cyc__step{width:100%}}
@media (max-width:420px){.ix-cyc__status{left:-22px;top:9%}.ix-cyc__status .ix-chip{font-size:13.5px;padding:7px 12px}}

/* ---------- capabilities explorer ---------- */
.ix-exp__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.ix-exp__list{display:flex;flex-direction:column;border-top:1px solid var(--ix-line)}
.ix-exp__tab{position:relative;display:block;width:100%;text-align:start;padding:18px 22px;border:0;border-bottom:1px solid var(--ix-line);background:transparent;font:inherit;color:var(--ix-ink);cursor:pointer;transition:background .35s}
.ix-exp__row{display:flex;align-items:center;gap:13px;transition:margin .45s cubic-bezier(.2,.7,.2,1)}
.ix-exp__row .ix-ic{color:var(--ix-muted);transition:color .3s}
.ix-exp__row b{font-size:19px;font-weight:700;line-height:1.35}
.ix-exp__desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.ix-exp__desc>span{min-height:0;overflow:hidden;padding-inline-start:37px;font-size:16.5px;line-height:1.65;color:var(--ix-ink-2);opacity:0;transition:opacity .35s}
.ix-exp__tab.is-on{background:var(--ix-blue-50)}
.ix-exp__tab.is-on::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--ix-blue)}
.ix-exp__tab.is-on .ix-exp__row{margin-bottom:6px}
.ix-exp__tab.is-on .ix-exp__row .ix-ic{color:var(--ix-blue)}
.ix-exp__tab.is-on .ix-exp__row b{font-weight:800}
.ix-exp__tab.is-on .ix-exp__desc{grid-template-rows:1fr}
.ix-exp__tab.is-on .ix-exp__desc>span{opacity:1;transition-delay:.1s}
.ix-exp__tab:not(.is-on):hover{background:var(--ix-mist)}
.ix-exp__tab:focus-visible{outline:3px solid var(--ix-blue);outline-offset:-3px;border-radius:8px}
.ix-exp__prog{position:absolute;inset-inline:0;bottom:-1px;height:2px;overflow:hidden;opacity:0;transition:opacity .3s}
.ix-exp__prog i{display:block;height:100%;background:var(--ix-blue);transform:scaleX(var(--p,0));transform-origin:right}
.ix-exp__tab.is-on .ix-exp__prog{opacity:1}
[data-ix-held] .ix-exp__prog{opacity:0!important}
.ix-exp{overflow:hidden}
.ix-exp__stage{position:relative;display:flex;justify-content:center;isolation:isolate}
.ix-exp__stage::before{content:"";position:absolute;inset:4% -6%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--ix-blue-100),rgba(220,231,255,0))}
.ix-exp__stage .ix-phone{width:300px}
@media (max-width:900px){.ix-exp__grid{grid-template-columns:1fr;gap:34px}.ix-exp__stage{order:-1}.ix-exp__stage .ix-phone{width:236px}.ix-exp__tab{padding:15px 16px}.ix-exp__row b{font-size:17.5px}.ix-exp__desc>span{font-size:15.5px}}

/* ---------- the live-link band: product on a photo ---------- */
.ix-band{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;min-height:600px;padding:64px 64px 0;border-radius:36px;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 80% at 18% 30%,#DCE7FF 0%,rgba(220,231,255,0) 70%),linear-gradient(160deg,#F7F9FF 0%,#EAF0FC 100%)}
.ix-band--photo{background:#EAF0FC}
.ix-band__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:left center}
.ix-band--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(247,249,255,.97) 0%,rgba(247,249,255,.9) 40%,rgba(247,249,255,.25) 68%,rgba(247,249,255,0) 100%)}
.ix-band__txt{align-self:center;padding-bottom:64px}
.ix-band__vis{align-self:end;display:flex;justify-content:center}
.ix-band__ph{position:relative}
.ix-band__ph .ix-phone{width:300px;height:520px;aspect-ratio:auto;border-radius:46px 46px 0 0;padding:10px 10px 0}
.ix-band__ph .ix-phone::after{border-radius:46px 46px 0 0}
.ix-band__ph .ix-phone__screen{border-radius:37px 37px 0 0}
.ix-float{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:11px 18px 11px 14px;border-radius:18px;background:#fff;box-shadow:0 18px 40px -18px rgba(11,21,48,.4),0 2px 6px rgba(11,21,48,.08);white-space:nowrap;animation:ix-bob 6s ease-in-out infinite}
.ix-float__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ix-blue-50);color:var(--ix-blue)}
.ix-float b{display:block;font-size:15.5px;font-weight:800;color:var(--ix-ink);line-height:1.3}
.ix-float small{display:block;font-size:13.5px;color:var(--ix-muted);line-height:1.35}
.ix-float--0{top:16%;right:-96px}
.ix-float--1{top:52%;left:-112px;animation-delay:-3s}
@keyframes ix-bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (max-width:1100px){.ix-float--0{right:-40px}.ix-float--1{left:-56px}}
@media (max-width:900px){.ix-band{grid-template-columns:1fr;gap:30px;padding:40px 24px 0;border-radius:28px;min-height:0}.ix-band__txt{padding-bottom:0}.ix-band__ph .ix-phone{width:250px;height:430px}.ix-band--photo::before{background:linear-gradient(180deg,rgba(247,249,255,.97) 0%,rgba(247,249,255,.9) 55%,rgba(247,249,255,.3) 100%)}}
@media (max-width:520px){.ix-float{padding:9px 13px 9px 11px;gap:9px}.ix-float__ic{width:34px;height:34px}.ix-float b{font-size:14px}.ix-float small{font-size:12.5px}.ix-float--0{right:-18px}.ix-float--1{left:-22px}}

/* ---------- dark band with the demo video ---------- */
.ix-demo{position:relative;overflow:hidden;isolation:isolate;background:var(--ix-navy-2);color:#fff}
.ix-demo::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 90% at 85% 0%,rgba(37,99,235,.38),rgba(37,99,235,0) 60%),radial-gradient(50% 70% at 10% 100%,rgba(37,99,235,.18),rgba(37,99,235,0) 70%)}
.ix-demo__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:left center}
.ix-demo--photo::before{background:linear-gradient(270deg,rgba(10,19,48,.95) 0%,rgba(10,19,48,.8) 45%,rgba(10,19,48,.5) 100%)}
.ix-demo .ix-h2{color:#fff}
.ix-demo .ix-lead{color:#C8D3EA}
.ix-demo .ix-eyebrow{color:#9DB7FF}
.ix-demo__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.ix-demo__card{position:relative;justify-self:center;display:block;width:min(100%,280px);aspect-ratio:540/1304;padding:0;border:0;border-radius:30px;overflow:hidden;cursor:pointer;background:#000;box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.12);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.ix-demo__card img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 50%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .5s}
.ix-demo__play{position:absolute;inset:0;margin:auto;width:82px;height:82px;border-radius:50%;background:rgba(255,255,255,.96);display:grid;place-items:center;box-shadow:0 14px 30px -8px rgba(0,0,0,.55);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.ix-demo__play::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:ix-ping 2.6s cubic-bezier(.2,.7,.2,1) infinite}
.ix-demo__play svg{width:32px;height:32px;fill:var(--ix-navy);margin-inline-start:4px}
.ix-demo__time{position:absolute;bottom:14px;inset-inline-start:14px;padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.62);font-size:13.5px;font-weight:700;color:#fff;direction:ltr}
.ix-demo__card:hover{transform:translateY(-6px) rotate(-1.2deg)}
.ix-demo__card:hover img{transform:scale(1.04);filter:brightness(.88)}
.ix-demo__card:hover .ix-demo__play{transform:scale(1.08)}
.ix-demo__card:focus-visible{outline:3px solid #9DB7FF;outline-offset:5px}
@keyframes ix-ping{0%{transform:scale(.85);opacity:.9}70%,100%{transform:scale(1.35);opacity:0}}
/* the square film: its own warm grey, the play button in the film's black */
.ix-demo__card--square{width:min(100%,440px);aspect-ratio:1/1;border-radius:28px;background:#EBE8E3}
.ix-demo__card--square img{object-position:50% 50%}
.ix-demo__card--square .ix-demo__play{background:#0D0D0E}
.ix-demo__card--square .ix-demo__play svg{fill:#fff}
.ix-demo__card--square .ix-demo__play::after{border-color:rgba(13,13,14,.35)}
.ix-demo__tag{position:absolute;bottom:14px;right:14px;display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;border-radius:999px;background:rgba(0,0,0,.62);font-size:13.5px;font-weight:700;color:#fff}
.ix-demo__tag svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the film playing in the card by itself, muted; the pill brings the sound in,
   in the film's own black pills */
.ix-demo__card--live{cursor:default;margin:0}
.ix-demo__card--live:hover{transform:none}
.ix-demo__card--live video{display:block;width:100%;height:100%;object-fit:cover;background:#EBE8E3}
.ix-demo__card--live .ix-vidbtn{background:rgba(13,13,14,.5)}
.ix-demo__sound{position:absolute;z-index:3;bottom:14px;inset-inline-end:14px;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border:0;border-radius:999px;background:#0D0D0E;color:#fff;font:700 15px/1 Heebo,system-ui,sans-serif;cursor:pointer;box-shadow:0 12px 26px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1);transition:background .2s,transform .2s}
.ix-demo__sound:hover{background:#26262A;transform:translateY(-1px)}
.ix-demo__sound:focus-visible{outline:3px solid #9DB7FF;outline-offset:3px}
.ix-demo__sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ix-demo__sound[aria-pressed="true"] .ix-demo__off,.ix-demo__sound[aria-pressed="false"] .ix-demo__on{display:none}
/* muted, the pill calls softly: a ring that breathes out of it */
.ix-demo__sound[aria-pressed="false"]::after{content:"";position:absolute;inset:-5px;border-radius:inherit;border:2px solid rgba(13,13,14,.3);animation:ix-ping 2.6s cubic-bezier(.2,.7,.2,1) infinite;pointer-events:none}
@media (max-width:900px){.ix-demo__grid{grid-template-columns:1fr;gap:36px}.ix-demo__card{width:min(74%,270px)}.ix-demo__card--square{width:min(100%,420px)}}

/* ---------- twelve reasons ---------- */
.ix-reasons__grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ix-line);border:1px solid var(--ix-line);border-radius:28px;overflow:hidden}
.ix-reason{padding:26px 24px 30px;background:#fff;transition:background .3s}
.ix-reason:hover{background:#FAFBFE}
.ix-reason__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--ix-blue-50);color:var(--ix-blue);margin-bottom:16px;transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s,color .3s}
.ix-reason:hover .ix-reason__ic{transform:translateY(-3px) rotate(-6deg);background:var(--ix-blue);color:#fff}
.ix-reason h3{font-size:18.5px;font-weight:800;line-height:1.3}
.ix-reason p{margin-top:6px;font-size:15.5px;line-height:1.62;color:var(--ix-ink-2)}
/* the grid comes in cell by cell (the grid lines stay put) */
.ix-rv .ix-reasons__grid[data-ix-rv]{opacity:1;translate:none}
.ix-rv .ix-reasons__grid .ix-reason>*{opacity:0;translate:0 14px;transition:opacity .6s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 55ms),translate .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 55ms)}
.ix-rv .ix-reasons__grid.ix-in .ix-reason>*{opacity:1;translate:none}
@media (max-width:1100px){.ix-reasons__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ix-reasons__grid{grid-template-columns:1fr;border-radius:22px}.ix-reason{padding:22px 20px 24px}}

/* ---------- the viewfinder CTA (last band before the footer) ---------- */
.ix-shot{position:relative;overflow:hidden;isolation:isolate;padding-block:124px;color:#fff;
  background:radial-gradient(70% 90% at 22% 30%,#1C2E6B 0%,rgba(28,46,107,0) 62%),linear-gradient(160deg,#0F1B3E 0%,#0A1330 100%)}
.ix-shot--photo{background:#0A1330}
.ix-shot__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:left center}
.ix-shot--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(10,19,48,.95) 0%,rgba(10,19,48,.8) 42%,rgba(10,19,48,.35) 75%,rgba(10,19,48,.2) 100%)}
.ix-shot__thirds{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;
  background:linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(255,255,255,.07) 0 calc(33.333% + .5px),transparent 0 calc(66.666% - .5px),rgba(255,255,255,.07) 0 calc(66.666% + .5px),transparent 0),
             linear-gradient(0deg,transparent calc(33.333% - .5px),rgba(255,255,255,.07) 0 calc(33.333% + .5px),transparent 0 calc(66.666% - .5px),rgba(255,255,255,.07) 0 calc(66.666% + .5px),transparent 0)}
.ix-shot__corner{position:absolute;width:34px;height:34px;border:2.5px solid rgba(255,255,255,.8);pointer-events:none}
.ix-shot__corner--tr{top:28px;right:28px;border-left:0;border-bottom:0;border-top-right-radius:6px}
.ix-shot__corner--tl{top:28px;left:28px;border-right:0;border-bottom:0;border-top-left-radius:6px}
.ix-shot__corner--br{bottom:28px;right:28px;border-left:0;border-top:0;border-bottom-right-radius:6px}
.ix-shot__corner--bl{bottom:28px;left:28px;border-right:0;border-top:0;border-bottom-left-radius:6px}
.ix-shot__focus{position:absolute;z-index:-1;border:2px solid rgba(255,255,255,.92);border-radius:10px;animation:ix-focus 4.2s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes ix-focus{0%{transform:scale(1.14);opacity:0}10%{opacity:1}24%,84%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
.ix-shot__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.ix-shot .ix-h2{color:#fff;font-size:clamp(34px,4.3vw,58px);line-height:1.1}
.ix-shot .ix-lead{color:#D5DEF0}
.ix-rec{display:inline-flex;align-items:center;gap:16px;margin-top:30px;font-size:19px;font-weight:800;color:#fff}
.ix-rec__ring{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;border:4px solid #fff;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ix-rec__ring i{width:54px;height:54px;border-radius:50%;background:var(--ix-mark);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-radius .35s}
.ix-rec:hover .ix-rec__ring{transform:scale(1.06)}
.ix-rec:hover .ix-rec__ring i{transform:scale(.6);border-radius:9px}
.ix-rec:focus-visible{outline:3px solid #9DB7FF;outline-offset:6px;border-radius:999px}
.ix-shot .store__btn{background:#fff;min-width:0}
.ix-shot .ix-final__formtitle{color:#fff}
.ix-shot .leadform{margin-top:12px;border:0;box-shadow:0 30px 60px -30px rgba(0,0,0,.65)}
.ix-shot .lf__actions .btn{width:100%}
.ix-shot .leadwrap{margin:0}
@media (max-width:900px){.ix-shot{padding-block:88px}.ix-shot__grid{grid-template-columns:1fr;gap:40px}.ix-shot__corner{width:24px;height:24px}.ix-shot__corner--tr,.ix-shot__corner--tl{top:18px}.ix-shot__corner--br,.ix-shot__corner--bl{bottom:18px}.ix-shot__corner--tr,.ix-shot__corner--br{right:18px}.ix-shot__corner--tl,.ix-shot__corner--bl{left:18px}}

@media (prefers-reduced-motion:reduce){
  .ix-float,.ix-demo__play::after,.ix-shot__focus{animation:none}
  .ix-wcard,.ix-wcard__img,.ix-demo__card,.ix-demo__card img{transition:none}
}

/* ---------- photo hero: a field photo, the brand gradient under the words ----------
   The photo's subject sits on the left; from the right a navy -> Inspectra-blue
   field carries the white headline. The square loop (or the phone) sits over the
   photo like a window. Phones get the small file and a top-down gradient. */
.ix-hero--photo{color:#fff;background:#0B1530;isolation:isolate;padding-block:64px 92px}
.ix-hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:left center}
.ix-hero--photo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(270deg,rgba(9,18,46,.96) 0%,rgba(10,22,58,.9) 30%,rgba(14,34,92,.62) 52%,rgba(14,34,92,.18) 74%,rgba(14,34,92,.05) 100%),
             linear-gradient(0deg,rgba(9,18,46,.55) 0%,rgba(9,18,46,0) 30%)}
.ix-hero--photo .ix-h1{color:#fff;text-shadow:0 2px 24px rgba(4,10,30,.35)}
.ix-hero--photo .ix-lead{color:#D8E1F3}
.ix-hero--photo .ix-for{color:#A9C2FF}
.ix-hero--photo .ix-for i{box-shadow:0 0 0 4px rgba(224,52,47,.25)}
.ix-hero--photo .ix-crumbs{color:#B6C3DD}
.ix-hero--photo .ix-crumbs a:hover{color:#fff}
.ix-hero--photo .ix-fine{color:#C8D3EA}
.ix-hero--photo .ix-fine svg{stroke:#6EE7A0}
.ix-hero--photo .ix-btn-line{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);backdrop-filter:blur(6px)}
.ix-hero--photo .ix-btn-line:hover{box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.14)}
.ix-hero--photo .ix-play{background:#fff}
.ix-hero--photo .ix-play svg{fill:var(--ix-navy)}
.ix-hero--photo .ix-note{color:#fff}
.ix-hero--photo .ix-note path{stroke:#fff}
.ix-hero--photo .ix-loop{box-shadow:0 2px 6px rgba(0,0,0,.25),0 40px 90px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12)}
@media (max-width:1000px){
  .ix-hero__bg{height:560px;bottom:auto;object-position:28% top}
  .ix-hero--photo::before{background:linear-gradient(180deg,rgba(9,18,46,.25) 0%,rgba(9,18,46,.72) 240px,rgba(9,18,46,.94) 420px,#0B1530 560px)}
}

/* ---------- live screens (screens.js + screens.css) ----------
   The app screens drawn as markup, in the hero video's language: a 340 x 764
   canvas scaled to the width of whatever phone holds it, playing its entrance
   when v2.js says so. v2.js measures the scale into --k; until it does, CSS
   works it out from container units, except in WebKit (every iPhone browser),
   which gets that sum wrong: there the screen waits for the measured --k. */
.ix-live{position:absolute;inset:0;overflow:hidden;background:#EBE8E3;container-type:inline-size}
.ix-live__fit{position:absolute;top:0;left:0;width:340px;height:764px;transform-origin:0 0;scale:var(--k,tan(atan2(100cqw,340px)))}
@supports (font:-apple-system-body){.ix-live:not([style*="--k"])>.ix-live__fit{visibility:hidden}}
.ix-phone--live .ix-phone__screen,.ix-phone__screen:has(>.ix-live){background:#EBE8E3}
/* the hero sequence: each screen pushes in from the left, the way a new screen
   enters in a right-to-left app, and the one before it steps aside */
.ix-seq{position:absolute;inset:0}
.ix-seq>.ix-live{opacity:0;translate:-14% 0;transition:opacity .4s ease,translate .65s cubic-bezier(.2,.7,.2,1)}
.ix-seq>.ix-live.is-on{opacity:1;translate:none;z-index:1}
.ix-seq>.ix-live.is-out{opacity:0;translate:9% 0}
.ix-phone--live .ix-vidbtn{background:rgba(13,13,14,.55)}
/* the hero notification, as the video's island draws one: it drops in over the
   phone now and then, stays a few seconds and goes, like a real one */
.ix-toast{background:#0D0D0E;border-radius:26px;padding:12px 18px 12px 14px;box-shadow:0 24px 48px -20px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.07);pointer-events:none;animation:ix-toast-cycle 13s cubic-bezier(.2,.7,.2,1) 1.6s infinite both}
.ix-toast__ic,.ix-toast__ic--warn{width:38px;height:38px;border-radius:19px;background:#2A2A2D}
.ix-toast__ic svg{stroke:#4ADE80}
.ix-toast__ic--warn svg{stroke:#FBBF24}
.ix-toast b{color:#fff}
.ix-toast small{color:#A8A39B}
@keyframes ix-toast-cycle{0%{opacity:0;translate:0 14px;scale:.94}4%,34%{opacity:1;translate:none;scale:1}38%,100%{opacity:0;translate:0 -8px;scale:.97}}
@media (prefers-reduced-motion:reduce){
  .ix-toast{animation:none}
  .ix-demo__sound::after{animation:none;opacity:0}
}