:root {--navy: #021726;
  --navy-800: #082a42;
  --navy-700: #0e3a58;
  --cyan: #01e6ed;
  --white: #ffffff;
  --mist: #e6f2f5;
  --ink: #021726;
  --ink-soft: #35505f;
  --on-navy-soft: #a4bdcc;
  --line-light: rgba(2, 23, 38, 0.16);
  --line-dark: rgba(255, 255, 255, 0.18);

  --font-display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.75rem, 1.2rem + 5.4vw, 5.75rem);

  --pad: clamp(20px, 5vw, 64px);
  --measure: 1240px;
  --radius: 14px;
  --radius-tile: 18px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --focus-on-light: var(--navy);
  --focus-on-dark: var(--cyan);
  --nav-h: 72px;
  --v: 56px;}
*, *::before, *::after {box-sizing: border-box;}
html {overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%;}
body {margin: 0; overflow-x: clip; background: var(--white); color: var(--ink);
  font-family: var(--font-text); font-size: var(--step-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
img, svg {display: block; max-width: 100%;}
h1, h2, h3, p, ul, ol, figure, dl, dd {margin: 0;}
ul, ol {padding: 0; list-style: none;}
a {color: inherit;}
::selection {background: var(--cyan); color: var(--navy);}
button {font: inherit; color: inherit;}
h1, h2, h3 {font-family: var(--font-display); font-weight: 600; letter-spacing: -0.028em; line-height: 1.04;
  overflow-wrap: break-word; min-width: 0; text-wrap: balance;}
.num {font-variant-numeric: tabular-nums;}
.wrap {max-width: var(--measure); margin-inline: auto; padding-inline: var(--pad);}
.on-dark {background: var(--navy); color: var(--white); --focus: var(--focus-on-dark);}
.on-light {background: var(--white); color: var(--ink); --focus: var(--focus-on-light);}
.on-mist {background: var(--mist); color: var(--ink); --focus: var(--focus-on-light);}
.soft {color: var(--ink-soft);}
.on-dark .soft {color: var(--on-navy-soft);}
:focus-visible {outline: 3px solid var(--focus, var(--focus-on-light)); outline-offset: 3px; transition: none;}
.btn {display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--radius); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);}
.btn:active {transform: scale(0.97);}
.btn--cyan {background: var(--cyan); color: var(--navy);}
.btn--cyan:hover {background: var(--white);}
.btn--ink {background: var(--navy); color: var(--white);}
.btn--ink:hover {background: var(--navy-700);}
.btn--line {background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor;}
.btn--line:hover {background: var(--navy); color: var(--white); box-shadow: inset 0 0 0 2px var(--navy);}
.on-dark .btn--line:hover {background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 2px var(--white);}
.link {font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px; text-decoration-color: currentColor;}
.link:hover {text-decoration-color: var(--cyan);}
.on-light .link:hover, .on-mist .link:hover {text-decoration-color: var(--navy-700);}
.flap-bullet {display: inline-block; width: 1.05em; height: 0.64em; flex: none; background: var(--cyan);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 100%, 0 40%); margin-top: 0.42em;}
.on-light .flap-bullet, .on-mist .flap-bullet {background: var(--navy);}
.points {display: grid; gap: 14px;}
.points li {display: flex; gap: 14px; align-items: flex-start;}
.nav {position: sticky; top: 0; z-index: 50; background: var(--navy); color: var(--white); --focus: var(--focus-on-dark);}
.nav__in {display: flex; align-items: center; gap: 28px; height: var(--nav-h);}
.nav__logo {display: block; flex: none;}
.nav__logo img {height: 22px; width: auto;}
.nav__links {display: flex; gap: 6px; margin-left: 20px;}
.nav__links a {padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 500; font-size: 1rem; color: var(--on-navy-soft);
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);}
.nav__links a:hover {color: var(--white); background: var(--navy-800);}
.nav__links a[aria-current="page"] {color: var(--white); box-shadow: inset 0 -3px 0 var(--cyan); border-radius: 0;}
.nav__right {margin-left: auto; display: flex; align-items: center; gap: 10px;}
.nav__login {padding: 10px 14px; text-decoration: none; font-weight: 500; color: var(--on-navy-soft); border-radius: 10px;}
.nav__login:hover {color: var(--white);}
.nav .btn {min-height: 44px; padding: 0 20px; font-size: 1rem;}
.nav__toggle {display: none; margin-left: auto; width: 48px; height: 48px; border: 0; background: transparent; border-radius: 12px; cursor: pointer;}
.nav__toggle span {display: block; width: 22px; height: 2px; background: var(--white); margin: 5px auto; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);}
.nav[data-open="true"] .nav__toggle span:nth-child(1) {transform: translateY(7px) rotate(45deg);}
.nav[data-open="true"] .nav__toggle span:nth-child(2) {opacity: 0;}
.nav[data-open="true"] .nav__toggle span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}
.nav__panel {display: none;}
.hero {position: relative; background: var(--navy); color: var(--white); overflow: clip; --focus: var(--focus-on-dark);
  min-height: min(calc(100svh - var(--nav-h)), 860px); display: flex; align-items: center;
  padding-bottom: var(--v);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--v)), 50% 100%, 0 calc(100% - var(--v))); z-index: 2;}
.hero__copy {position: relative; z-index: 1; width: 100%;}
.hero h1 {font-size: clamp(2.9rem, 1rem + 5.6vw, 6.1rem); font-weight: 700; letter-spacing: -0.022em; line-height: 0.98; max-width: 9.5em;}
.hero .lead {margin-top: 28px; font-size: var(--step-lead); line-height: 1.4; max-width: 17em; color: var(--on-navy-soft);}
.hero__actions {margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;}
@keyframes flap-close { from { transform: translateY(-22px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sec {padding-block: clamp(72px, 10vw, 140px);}
.sec--tight {padding-block: clamp(56px, 7vw, 96px);}
.sec h2 {font-size: var(--step-head); max-width: 14em;}
.sec .intro {margin-top: 18px; font-size: var(--step-lead); line-height: 1.4; max-width: 28em;}
.cipher {font-family: var(--font-mono); font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem); line-height: 1.6; word-break: break-all; color: var(--cyan);}
.cipher small {display: block; font-family: var(--font-text); font-size: var(--step-small); color: var(--on-navy-soft); margin-bottom: 12px; word-break: normal;}
.where {display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start;}
.faq-sec {padding-block: clamp(72px, 10vw, 140px) clamp(96px, 12vw, 160px);}
.faq-sec h2 {font-size: var(--step-head);}
.cards {max-width: 920px; margin: 56px auto 0; --tab-w: 200px; --tab-h: 40px; --step: 120px;}
.card {position: relative; margin-top: -24px; padding-top: var(--tab-h); color: var(--navy); --tx: calc(var(--i) * var(--step) * 0.6);
  clip-path: polygon(0 var(--tab-h), var(--tx) var(--tab-h), calc(var(--tx) + 8px) 0, calc(var(--tx) + var(--tab-w) - 8px) 0, calc(var(--tx) + var(--tab-w)) var(--tab-h), 100% var(--tab-h), 100% 100%, 0 100%);
  border-radius: 0; transition: none;}
.card:first-child {margin-top: 0;}
.card--c1 {background: var(--mist); --focus: var(--focus-on-light);}
.card--c2 {background: var(--mist); --focus: var(--focus-on-light); border-top: 0;}
.card--c3 {background: var(--navy-700); color: var(--white); --focus: var(--focus-on-dark);}
.card--c4 {background: var(--navy); color: var(--white); --focus: var(--focus-on-dark);}
.card__topic {position: absolute; top: 0; height: var(--tab-h); left: calc(var(--tx) + 12px); width: calc(var(--tab-w) - 24px); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 1rem; pointer-events: none;}
.card__q {display: block; width: 100%; min-height: 96px; padding: 0 28px; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1.25; display: flex; align-items: flex-start; padding-top: 22px; outline-offset: -6px; padding-bottom: 24px;}
.card__a {display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--ease-out);}
.card[data-open="true"] .card__a {grid-template-rows: 1fr;}
.card__a > div {overflow: hidden;}
.card__a p {padding: 0 28px 34px; max-width: 54ch; font-size: 1.0625rem; line-height: 1.55;}
.card[data-open="true"] {padding-bottom: 0;}
.cta {padding-block: clamp(80px, 12vw, 180px);}
.cta__line {font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; font-size: clamp(2rem, 1rem + 4.4vw, 5.25rem); max-width: 12em;}
.cta__line form {display: inline;}
.cta__line {position: relative;}
.cta__in {font: inherit; letter-spacing: inherit; display: inline-block; width: 6.4em; height: 1.1em; padding: 0 0.3em; vertical-align: -0.1em; background: var(--navy-800); border: 0; border-radius: 0.18em; color: var(--white); outline-offset: 4px;}
.cta__in::placeholder {color: var(--on-navy-soft); opacity: 1;}
.cta__go {font: inherit; letter-spacing: inherit; display: inline-block; height: 1.1em; padding: 0 0.35em; vertical-align: -0.1em; border: 0; border-radius: 0.18em; background: var(--cyan); color: var(--navy); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);}
.cta__go:hover {background: var(--white);}
.cta__go:active {transform: scale(0.97);}
.cta__after {margin-top: 28px; font-size: 1rem; color: var(--on-navy-soft); max-width: 46ch;}
.foot {position: relative; background: var(--navy-800); color: var(--white); padding-top: clamp(64px, 8vw, 110px); --focus: var(--focus-on-dark); clip-path: none;}
.foot__logo {display: block; width: 177px; height: auto;}
.foot__grid {display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 32px; margin-top: 56px;}
.foot h3 {font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-bottom: 14px; color: var(--white);}
.foot ul {display: grid; gap: 8px;}
.foot a {color: var(--on-navy-soft); text-decoration: none; font-size: 0.9375rem;}
.foot a:hover {color: var(--white); text-decoration: underline; text-underline-offset: 0.25em;}
.foot__contact p {color: var(--on-navy-soft); font-size: 0.9375rem;}
.foot__legal {margin-top: 56px; padding-block: 28px 36px; border-top: 1px solid var(--line-dark); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: var(--on-navy-soft); font-size: 0.875rem; line-height: 1.5;}
.foot__legal p {max-width: 62ch;}
.phero {position: relative; background: var(--navy); color: var(--white); overflow: clip; padding-block: clamp(64px, 9vw, 130px) clamp(80px, 10vw, 150px); --focus: var(--focus-on-dark);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--v)), 50% 100%, 0 calc(100% - var(--v))); z-index: 2;}
.phero__mark {position: absolute; right: max(var(--pad, 24px), calc((100vw - 1240px) / 2 + var(--pad, 24px))); top: 50%; width: clamp(140px, 17vw, 260px); transform: translateY(-50%); pointer-events: none;}
.phero__mark path {fill: var(--navy-700);}
.phero__copy {position: relative; z-index: 1;}
.phero h1 {font-size: clamp(2.6rem, 1rem + 5vw, 5.5rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1; max-width: 9em;}
.phero .lead {margin-top: 24px; font-size: var(--step-lead); line-height: 1.4; max-width: 24em; color: var(--on-navy-soft);}
.after-phero {margin-top: calc(var(--v) * -1); padding-top: var(--v); position: relative; z-index: 1;}
.facts {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 6vw, 96px);}
.fact {padding-block: 30px; border-top: 2px solid var(--navy);}
.on-dark .fact {border-top-color: var(--cyan);}
.fact h3 {font-size: 1.5rem; margin-bottom: 10px;}
.fact p {color: var(--ink-soft); max-width: 36em;}
.on-dark .fact p {color: var(--on-navy-soft);}
.seg {display: inline-flex; background: var(--navy-800); border-radius: 12px; padding: 4px;}
.seg button {border: 0; background: transparent; color: var(--on-navy-soft); padding: 10px 20px; border-radius: 9px; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1rem; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);}
.seg button[aria-pressed="true"] {background: var(--cyan); color: var(--navy);}
.seg button:not([aria-pressed="true"]):hover {color: var(--white);}
.compare {width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 1rem;}
.compare th, .compare td {text-align: left; padding: 16px 22px 16px 0; border-top: 1px solid var(--line-light); vertical-align: top;}
.compare thead th {font-family: var(--font-display); font-size: 1.0625rem; border-top: 2px solid var(--navy);}
.compare tbody th {font-weight: 500; width: 24%; color: var(--ink);}
.compare td {color: var(--ink-soft);}
.compare td.y {color: var(--ink); font-weight: 600;}
.contact-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 4vw, 64px);}
.contact-grid > div {padding-block: 26px; border-top: 2px solid var(--navy);}
.contact-grid h3 {font-size: 1.375rem; margin-bottom: 8px;}
.contact-grid p {color: var(--ink-soft); margin-bottom: 10px;}
@media (max-width: 1080px) {
  .foot__grid {grid-template-columns: repeat(2, 1fr);}
  .compare-wrap {overflow-x: auto;}
  .compare {min-width: 760px;}
}
@media (max-width: 880px) {
  :root {--nav-h: 64px; --v: 36px;}
  .nav__links, .nav__right {display: none;}
  .nav__toggle {display: block;}
  .nav[data-open="true"] .nav__panel {display: grid; gap: 4px; padding: 8px var(--pad) 28px; background: var(--navy);}
  .nav__panel a {padding: 14px 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; text-decoration: none; color: var(--white); border-top: 1px solid var(--line-dark);}
  .nav__panel .btn {margin-top: 16px; border-top: 0; font-size: 1.0625rem;}
  .hero {min-height: 0; align-items: flex-start; padding-top: 48px; padding-bottom: calc(260px + var(--v));}
  .hero h1 {font-size: 11.5vw;}
  .hero .lead {font-size: 1.1875rem;}
  .where {grid-template-columns: 1fr;}
  .cards {--tab-w: 120px; --step: 80px;}
  .card__q {min-height: 88px; font-size: 1.125rem; padding: 18px 20px 20px;}
  .card__a p {padding: 0 20px 28px;}
  .card__topic {font-size: 0.875rem;}
  .cta__line {font-size: 10vw;}
  .cta__line form {display: block;}
  .cta__in {display: block; width: 100%; margin: 8px 0;}
  .cta__go {margin-top: 4px;}
  .foot__grid {grid-template-columns: repeat(2, 1fr);}
  .facts, .contact-grid {grid-template-columns: 1fr;}
  .phero__mark {right: var(--pad, 20px); width: 120px; top: auto; bottom: calc(var(--v) + 20px); transform: none; opacity: 0.9;}
  .phero {padding-bottom: calc(110px + var(--v));}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  *, *::before, *::after {animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;}
}
.ic {width: 24px; height: 24px; flex: none;}
.hero--app {min-height: 0; align-items: stretch; padding-block: clamp(48px, 6vw, 96px) calc(var(--v) + 8px); background: radial-gradient(900px 520px at 78% 38%, rgba(1, 230, 237, 0.13), transparent 70%), var(--navy);}
.hero__grid {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: center; position: relative; z-index: 1;}
.hero--app h1 {font-size: clamp(2.75rem, 1rem + 4.6vw, 5.25rem);}
.hero--app .lead {max-width: 20em;}
.hero__facts {margin-top: 40px; display: grid; gap: 12px; color: var(--on-navy-soft); font-size: 1rem;}
.hero__facts li {display: flex; align-items: center; gap: 12px;}
.hero__facts .ic {width: 20px; height: 20px; color: var(--cyan);}
.hero__stage {position: relative; min-width: 0;}
.av {width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--cyan); color: var(--navy); font: 700 0.75rem var(--font-display);}
.av--b {background: var(--navy-700); color: var(--white);}
.av--c {background: var(--white); color: var(--navy);}
.seal {display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; background: rgba(1,230,237,0.14); color: var(--cyan); font-size: 0.75rem; white-space: nowrap;}
.seal .ic {width: 13px; height: 13px;}
.ai {padding-block: clamp(72px, 9vw, 130px);}
.ai__head {max-width: 46rem; margin-bottom: clamp(48px, 6vw, 88px);}
.ai__head h2 {font-size: var(--step-head);}
.ai__head p {margin-top: 20px; font-size: var(--step-lead); line-height: 1.4; color: var(--ink-soft); max-width: 30em;}
.feat {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(32px, 4vw, 56px);}
.feat--rev {grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);}
.feat--rev .feat__text {order: 2;}
.feat__text h3 {font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);}
.feat__text > p {margin-top: 16px; font-size: 1.1875rem; line-height: 1.5; color: var(--ink-soft); max-width: 28em;}
.feat__pts {margin-top: 24px; display: grid; gap: 12px;}
.feat__pts li {display: flex; gap: 12px; align-items: flex-start;}
.feat__pts .ic {width: 20px; height: 20px; margin-top: 2px; color: var(--navy);}
.win {background: var(--white); border-radius: 18px; box-shadow: 0 0 0 1px rgba(2,23,38,0.08), 0 30px 70px -28px rgba(2,23,38,0.35); overflow: hidden; min-width: 0;}
.win__bar {display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; background: var(--navy); color: var(--white); font: 600 0.9375rem var(--font-display);}
.win__bar span {display: inline-flex; align-items: center; gap: 8px;}
.win__bar .ic {width: 17px; height: 17px; color: var(--cyan);}
.win__bar em {font: 500 0.8125rem var(--font-text); font-style: normal; color: var(--on-navy-soft);}
.win__bar em.risk {background: #ffd9d4; color: #7a1308; padding: 3px 10px; border-radius: 99px; font-weight: 600;}
.win__body {padding: 22px; display: grid; gap: 14px;}
.bub {padding: 12px 16px; border-radius: 14px; max-width: 88%; line-height: 1.45;}
.bub--me {justify-self: end; background: var(--navy); color: var(--white);}
.bub--ai {background: var(--mist);}
.bub--ai b {display: block; font: 600 0.8125rem var(--font-display); color: var(--navy-700); margin-bottom: 4px;}
.bub--ai small {display: block; margin-top: 8px; color: var(--ink-soft); font-size: 0.8125rem;}
.win__in {margin-top: 6px; padding: 12px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgba(2,23,38,0.18); color: #5a7280;}
.sum {display: grid; gap: 10px; list-style: disc; padding-left: 22px; font-size: 1.125rem;}
.tl {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 18px; border-top: 1px solid rgba(2,23,38,0.12);}
.tl > div {display: grid; gap: 2px; position: relative; padding-top: 18px;}
.tl i {position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--mist); box-shadow: inset 0 0 0 2px var(--navy);}
.tl .on i {background: var(--cyan);}
.tl b {font: 600 0.9375rem var(--font-display);}
.tl span {color: var(--ink-soft); font-size: 0.875rem;}
.comp {font-size: 1.1875rem; line-height: 1.6;}
.ghost {color: #7a909c;}
.chips2 {display: flex; flex-wrap: wrap; gap: 8px;}
.chips2 .c {padding: 7px 14px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px rgba(2,23,38,0.18); font-size: 0.9375rem;}
.chips2 .c.on {background: var(--navy); color: var(--white); box-shadow: none;}
.sig {display: grid; gap: 4px;}
.sig li {display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid rgba(2,23,38,0.1);}
.sig li:first-child {border-top: 0;}
.sig .ic {color: #b3261e; margin-top: 2px;}
.sig b {display: block;}
.sig span {color: var(--ink-soft); font-size: 0.9375rem;}
.control {margin-top: clamp(40px, 5vw, 72px); display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding: clamp(28px, 4vw, 48px); border-radius: 22px; background: var(--navy); color: var(--white);}
.control h3 {font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);}
.control p {margin-top: 12px; max-width: 34em; color: var(--on-navy-soft); font-size: 1.125rem;}
.control__sw {display: flex; align-items: center; gap: 16px; font: 600 1.125rem var(--font-display);}
.toggle2 {width: 64px; height: 36px; border-radius: 99px; background: var(--cyan); position: relative; flex: none;}
.toggle2 b {position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--navy);}
.small {padding-block: clamp(64px, 8vw, 112px);}
.small h2 {font-size: var(--step-head); max-width: 12em;}
.small__grid {margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(20px, 3vw, 40px);}
.small__grid li {display: grid; gap: 6px; align-content: start;}
.small__grid .ic {width: 28px; height: 28px; color: var(--navy); margin-bottom: 8px;}
.small__grid h3 {font-size: 1.25rem; letter-spacing: -0.02em;}
.small__grid p {color: var(--ink-soft); font-size: 1rem; line-height: 1.45;}
.phero--pricing {padding-bottom: clamp(88px, 10vw, 140px);}
.seg__save {margin-left: 8px; font: 500 0.8125rem var(--font-text); opacity: 0.8;}
.pcards {padding-block: 0 clamp(56px, 7vw, 96px); margin-top: -64px; position: relative; z-index: 2; background: transparent;}
.pcards .wrap {position: relative;}
.pcards__grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch;}
.pc {position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px 24px; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px rgba(2,23,38,0.1), 0 24px 60px -30px rgba(2,23,38,0.3); min-width: 0;}
.pc h3 {font-size: 1.5rem;}
.pc__for {color: var(--ink-soft); font-size: 0.9375rem; min-height: 2.9em;}
.pc__price {margin-top: 14px; font: 700 clamp(2.5rem, 1.8rem + 1.6vw, 3.5rem)/1 var(--font-display); letter-spacing: -0.04em;}
.pc__per {color: var(--ink-soft); font-size: 0.9375rem; margin-bottom: 16px;}
.pc .btn {min-height: 48px; font-size: 1rem; padding: 0 16px;}
.pc__list {margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(2,23,38,0.12); display: grid; gap: 12px; font-size: 0.9375rem;}
.pc__list li {display: flex; gap: 10px; align-items: flex-start;}
.pc__list .ic {width: 18px; height: 18px; margin-top: 2px; color: var(--navy-700);}
.pc--pick {background: var(--navy); color: var(--white); box-shadow: 0 0 0 2px var(--cyan), 0 36px 80px -24px rgba(1,230,237,0.35); margin-block: -14px; padding-block: 42px 34px; --focus: var(--focus-on-dark);}
.pc--pick .pc__for, .pc--pick .pc__per {color: var(--on-navy-soft);}
.pc--pick .pc__list {border-top-color: rgba(255,255,255,0.2);}
.pc--pick .pc__list .ic {color: var(--cyan);}
.pc__tag {position: absolute; top: 16px; right: 16px; padding: 4px 12px; border-radius: 99px; background: var(--cyan); color: var(--navy); font: 600 0.8125rem var(--font-display);}
.ent {margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 24px 28px; border-radius: 18px; background: var(--mist);}
.ent h3 {font-size: 1.375rem;}
.ent p {color: var(--ink-soft); margin-top: 4px;}
.pc__note {margin-top: 24px; color: var(--ink-soft);}
.every {padding-block: clamp(64px, 8vw, 112px);}
.every h2 {font-size: var(--step-head); max-width: 12em;}
.every__grid {margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px);}
.every__grid li {display: grid; gap: 8px; align-content: start;}
.every__grid .ic {width: 30px; height: 30px; color: var(--cyan); margin-bottom: 6px;}
.every__grid h3 {font-size: 1.25rem;}
.every__grid p {color: var(--on-navy-soft); font-size: 1rem; line-height: 1.45;}
.compare .grp th {padding-top: 28px; font: 600 0.9375rem var(--font-display); color: var(--navy-700); border-top: 1px solid var(--line-light);}
.packs {margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;}
.pack {display: grid; gap: 2px; padding: 24px; border-radius: 18px; background: var(--white); box-shadow: 0 0 0 1px rgba(2,23,38,0.08);}
.pack b {font: 700 2.25rem/1 var(--font-display); letter-spacing: -0.03em;}
.pack span {color: var(--ink-soft);}
.pack strong {margin-top: 14px; font: 600 1.375rem var(--font-display);}
@media (max-width: 1080px) {
  .hero__grid {grid-template-columns: 1fr;}
  .pcards__grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .pc--pick {margin-block: 0;}
  .small__grid, .every__grid, .packs {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 880px) {
  .feat, .feat--rev {grid-template-columns: 1fr; gap: 28px;}
  .feat--rev .feat__text {order: 0;}
  .hero--app {padding-bottom: calc(var(--v) + 8px);}
}
@media (max-width: 560px) {
  .pcards__grid, .small__grid, .every__grid, .packs {grid-template-columns: 1fr;}
  .tl {grid-template-columns: 1fr; gap: 6px;}
  .hero__actions .btn {width: 100%;}
}
@media (min-width: 1081px) {
  .hero__grid {grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);}
}
.hero--app h1 {font-size: clamp(2.75rem, 1rem + 4vw, 4.5rem);}
.hero--app .hero__actions .btn {padding: 0 22px;}
.phero--pricing {padding-block-start: clamp(48px, 6vw, 88px);}
.teaser {padding-block: clamp(64px, 8vw, 112px);}
.teaser__head {display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;}
.teaser__head h2 {font-size: var(--step-head); max-width: 12em;}
.teaser__grid {margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 880px;}
.pc--flat {margin-block: 0; padding-block: 28px;}
@media (max-width: 720px) {
  .teaser__grid {grid-template-columns: 1fr;}
}
.fstack {position: relative; min-height: 520px;}
.fc {position: absolute; background: var(--navy-800); border-radius: 20px; padding: 22px 24px; box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 36px 80px -24px rgba(0,0,0,0.7);}
.fc--msg {top: 0; left: 6%; width: 74%; background: var(--white); color: var(--ink); box-shadow: 0 40px 90px -24px rgba(0,0,0,0.7); display: grid; gap: 14px;}
.fc--msg h3 {font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); letter-spacing: -0.025em;}
.fc--msg p {color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.5;}
.fc--msg .seal {justify-self: start; background: var(--mist); color: var(--navy-700); font-size: 0.875rem; padding: 6px 12px;}
.fc--msg .seal .ic {width: 15px; height: 15px;}
.fc__from {display: flex; align-items: center; gap: 12px;}
.fc__from .av {width: 40px; height: 40px; background: var(--navy); color: var(--white);}
.fc__from b, .fc__from em {display: block; font-style: normal; line-height: 1.25;}
.fc__from b {color: var(--ink); font-weight: 600;}
.fc__from em {font-size: 0.875rem; color: var(--ink-soft);}
.fc--ai {left: 0; bottom: 4%; width: 62%; background: linear-gradient(180deg, #0b3b57, #0a2f48); box-shadow: inset 0 0 0 1.5px rgba(1,230,237,0.55), 0 36px 80px -24px rgba(0,0,0,0.7);}
.fc__h {display: flex; align-items: center; gap: 8px; color: var(--cyan); font: 600 0.9375rem var(--font-display); margin-bottom: 10px;}
.fc__h .ic {width: 18px; height: 18px;}
.fc--ai ul {display: grid; gap: 7px; list-style: disc; padding-left: 20px; font-size: 1.0625rem;}
.fc--priv {right: 0; top: 46%; width: 44%; display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; font: 600 1.0625rem var(--font-display);}
.fc--priv small {grid-column: 1 / -1; font: 400 0.875rem var(--font-text); color: var(--on-navy-soft);}
.fc--trk {right: 4%; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px;}
.fc--trk .ic {color: var(--cyan);}
.fc--trk b, .fc--trk em {display: block; font-style: normal; line-height: 1.3;}
.fc--trk b {font-weight: 600;}
.fc--trk em {font-size: 0.8125rem; color: var(--on-navy-soft);}
@media (max-width: 880px) {
  .fstack {min-height: 0; display: grid; gap: 14px;}
  .fc {position: static; width: auto !important;}
}
.fc--priv {top: 58%; right: 0; width: 40%;}
.fc--ai {width: 58%; bottom: 8%;}
.fc--trk {bottom: -4%; right: 2%;}
.fstack {min-height: 540px;}
.seal-sec {padding-block: clamp(72px, 9vw, 130px); background: radial-gradient(900px 480px at 50% 40%, rgba(1,230,237,0.09), transparent 70%), var(--navy);}
.seal-sec__head {max-width: 46rem;}
.seal-sec__head h2 {font-size: var(--step-head); font-weight: 700;}
.seal-sec__head p {margin-top: 20px; font-size: var(--step-lead); line-height: 1.4; color: var(--on-navy-soft); max-width: 30em;}
.flow2 {margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 0;}
.node {position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; min-width: 0;}
.node--read {background: var(--white); color: var(--ink); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7);}
.node--cipher {background: var(--navy-800); box-shadow: inset 0 0 0 1.5px rgba(1,230,237,0.5), 0 30px 70px -30px rgba(0,0,0,0.7);}
.node__label {display: inline-flex; align-items: center; gap: 8px; font: 600 0.9375rem var(--font-display); color: var(--navy-700);}
.node--cipher .node__label {color: var(--cyan);}
.node__label .ic {width: 18px; height: 18px;}
.node__from {font-size: 0.875rem; color: var(--ink-soft);}
.node__from b {color: var(--ink);}
.node h3 {font-size: 1.5rem; letter-spacing: -0.02em;}
.node--read > p:not(.node__label):not(.node__from) {color: var(--ink-soft); line-height: 1.5;}
.node__tag {margin-top: auto; align-self: flex-start; padding: 5px 12px; border-radius: 99px; background: var(--mist); color: var(--navy-700); font: 600 0.8125rem var(--font-display);}
.node__tag--c {background: rgba(1,230,237,0.14); color: var(--cyan);}
.cipher2 {font-family: var(--font-mono); font-size: 0.9375rem; line-height: 1.6; color: var(--cyan); word-break: break-all; opacity: 0.95;}
.link2 {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding-inline: 14px; color: var(--on-navy-soft); font-size: 0.8125rem;}
.link2 i {width: 2px; flex: 1; background: linear-gradient(var(--cyan), transparent); opacity: 0.6; min-height: 24px;}
.link2 i:last-child {background: linear-gradient(transparent, var(--cyan));}
.link2 span {display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: rgba(1,230,237,0.14); color: var(--cyan); font-weight: 600; white-space: nowrap;}
.link2 .ic {width: 14px; height: 14px;}
.specs {margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); border-top: 1px solid var(--line-dark); padding-top: clamp(28px, 3vw, 40px);}
.specs b {display: block; font: 700 clamp(2.5rem, 1.6rem + 3vw, 4.5rem)/1 var(--font-display); letter-spacing: -0.04em; color: var(--white);}
.specs span {display: block; margin-top: 10px; color: var(--on-navy-soft); font-size: 1.0625rem; max-width: 16em;}
.seal-sec__more {margin-top: clamp(32px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 14px;}
@media (max-width: 1080px) {
  .flow2 {grid-template-columns: 1fr;}
  .link2 {flex-direction: row; padding: 14px 0;}
  .link2 i {width: auto; height: 2px; min-height: 0; min-width: 24px; background: linear-gradient(90deg, var(--cyan), transparent);}
  .link2 i:last-child {background: linear-gradient(90deg, transparent, var(--cyan));}
  .specs {grid-template-columns: 1fr;}
}
.foot {background: var(--navy); border-top: 1px solid var(--line-dark);}
.card--c1, .card--c3 {background: var(--white); color: var(--navy); --focus: var(--focus-on-light);}
.card--c2, .card--c4 {background: #d3e8ee; color: var(--navy); --focus: var(--focus-on-light); border-top: 0;}
.card--c3 .card__topic, .card--c4 .card__topic {color: var(--navy);}
.seal-sec {background: var(--mist);}
.seal-sec__head h2 {color: var(--navy);}
.seal-sec__head p, .specs span {color: var(--ink-soft);}
.specs {border-top-color: rgba(2,23,38,0.18);}
.specs b {color: var(--navy);}
.node--read {box-shadow: 0 0 0 1px rgba(2,23,38,0.08), 0 30px 60px -34px rgba(2,23,38,0.35);}
.node--cipher {background: var(--navy); color: var(--white); box-shadow: 0 30px 60px -30px rgba(2,23,38,0.5);}
.link2 {color: var(--ink-soft);}
.link2 i {background: linear-gradient(var(--navy-700), transparent); opacity: 0.5;}
.link2 i:last-child {background: linear-gradient(transparent, var(--navy-700));}
.link2 span {background: var(--white); color: var(--navy-700); box-shadow: 0 0 0 1px rgba(2,23,38,0.1);}
.seal-sec .btn--line:hover {background: var(--navy); color: var(--white); box-shadow: inset 0 0 0 2px var(--navy);}
@media (max-width: 1080px) {
  .link2 i {background: linear-gradient(90deg, var(--navy-700), transparent);}
  .link2 i:last-child {background: linear-gradient(90deg, transparent, var(--navy-700));}
}
.every h2 {color: var(--navy);}
.every__grid .ic {color: var(--navy);}
.every__grid p {color: var(--ink-soft);}
.seam {position: relative;}
.seam::before {content: ""; position: absolute; top: -1px; left: 50%; width: 132px; height: 30px; transform: translateX(-50%); background: var(--from, var(--white)); clip-path: polygon(0 0, 100% 0, 50% 100%); z-index: 3;}
.seam--w {--from: var(--white);}
.seam--m {--from: var(--mist);}
.seal-sec__top {display: flex; justify-content: space-between; align-items: center; gap: clamp(24px, 5vw, 80px);}
.sealgfx {width: clamp(120px, 16vw, 220px); height: auto; flex: none;}
.sg-slab {fill: var(--navy-700);}
.sg-flap {fill: var(--navy);}
@media (max-width: 720px) {
  .sealgfx {display: none;}
}
.cards {max-width: none; margin: 40px 0 0; display: grid; gap: 10px;}
.cards .card {clip-path: none; margin: 0; padding: 0; border-radius: 18px; background: var(--white); color: var(--navy); border: 0; box-shadow: 0 0 0 1px rgba(2,23,38,0.08);}
.cards .card .card__topic {display: none;}
.cards .card__q {position: relative; min-height: 76px; padding-right: 72px;}
.cards .card__q::after {content: ""; position: absolute; right: 28px; top: 50%; width: 14px; height: 14px; margin-top: -9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 260ms var(--ease-out);}
.cards .card[data-open="true"] .card__q::after {transform: rotate(-135deg); margin-top: -3px;}
.cards .card__a p {padding: 0 28px 28px;}
.ai__head h2, .small h2, .teaser__head h2, .seal-sec__head h2, .faq-sec h2, .every h2 {font-size: var(--step-head); font-weight: 700; letter-spacing: -0.03em;}
.faq-sec h2 {max-width: 12em;}
.feat__text h3, .control h3 {font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); letter-spacing: -0.02em;}
.small__lead {margin-top: 16px; font-size: var(--step-lead); line-height: 1.4; color: var(--ink-soft); max-width: 30em;}
.undo {display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--navy); color: var(--white); font-size: 0.9375rem;}
.undo b {color: var(--cyan); font-weight: 600;}
.rows {display: grid;}
.rows li {display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid rgba(2,23,38,0.1);}
.rows li:first-child {border-top: 0;}
.rows .av {width: 38px; height: 38px;}
.rows b {display: block; font-weight: 600;}
.rows span:not(.av) {display: block; color: var(--ink-soft); font-size: 0.9375rem;}
.rows time {color: var(--ink-soft); font-size: 0.875rem;}
.fact .ic {width: 28px; height: 28px; color: var(--navy); margin-bottom: 14px;}
.on-dark .fact .ic {color: var(--cyan);}
.ghost {color: #566e7c;}
.bub--ai small, .tl span, .node__from {font-size: 0.875rem;}
.small__grid {grid-template-columns: repeat(4, minmax(0, 1fr));}
@media (max-width: 1080px) {
  .small__grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 560px) {
  .small__grid {grid-template-columns: 1fr;}
}
.vh {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.fc__title {font: 600 clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem)/1.1 var(--font-display); letter-spacing: -0.025em; color: var(--ink);}
.feat__text h2 {font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); letter-spacing: -0.02em;}

/* Hero V-cut: the next section's own colour fills the notch (no white gap) */
.hero, .phero {margin-bottom: calc(-1 * var(--v));}
.hero + *, .phero + * {border-top: var(--v) solid transparent;}
.phero--pricing {margin-bottom: 0;}
.phero--pricing + * {border-top: 0;}

/* Proton-inspired feature highlighting */
.hero__facts {display: flex; flex-wrap: wrap; gap: 12px 28px;}
.diff {padding-block: clamp(72px, 9vw, 130px);}
.diff h2 {font-size: var(--step-head); font-weight: 700; letter-spacing: -0.03em; max-width: 14em;}
.diff__lead {margin-top: 16px; color: var(--ink-soft); font-size: var(--step-lead); max-width: 32em; line-height: 1.45;}
.diff__grid {margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;}
.diff__col {padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: var(--mist); color: var(--navy);}
.diff__col--us {background: var(--navy); color: var(--white); box-shadow: 0 0 0 2px var(--cyan);}
.diff__col h3 {font-size: 1.5rem; letter-spacing: -0.02em;}
.diff__col ul {margin-top: 24px; display: grid; gap: 22px;}
.diff__col li {display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start;}
.diff__col .ic {width: 22px; height: 22px; margin-top: 2px; color: var(--ink-soft);}
.diff__col--us .ic {color: var(--cyan);}
.diff__col li span {display: grid; gap: 2px; line-height: 1.45; color: var(--ink-soft);}
.diff__col--us li span {color: var(--on-navy-soft);}
.diff__col li b {color: var(--navy); font-weight: 600; font-size: 1.0625rem;}
.diff__col--us li b {color: var(--white);}
.pc__badge {display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 99px; background: rgba(1,230,237,0.18); color: var(--cyan); font: 600 0.8125rem var(--font-display);}
.steps {padding-block: clamp(72px, 9vw, 130px);}
.steps h2 {font-size: var(--step-head); font-weight: 700; letter-spacing: -0.03em; max-width: 14em;}
.steps__list {margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: st;}
.steps__list li {display: grid; gap: 8px; align-content: start; counter-increment: st;}
.steps__list h3 {margin-top: 16px; font-size: 1.25rem; letter-spacing: -0.02em;}
.steps__list h3::before {content: counter(st) ". ";}
.steps__list p {color: var(--ink-soft); line-height: 1.45;}
.win--sm {min-height: 168px;}
.win--sm .win__bar {padding: 12px 16px; background: var(--navy); color: var(--white); font: 600 0.8125rem var(--font-display);}
.win--sm .win__body {padding: 18px 16px; display: grid; gap: 10px; font-size: 0.9375rem;}
.mini-l {color: var(--ink-soft); font-size: 0.8125rem;}
.mini-f {color: var(--navy); font-weight: 600;}
.mini-b {justify-self: start; padding: 6px 14px; border-radius: 99px; background: var(--navy); color: var(--white); font-size: 0.875rem;}
.mini-c {display: flex; align-items: center; gap: 8px; color: var(--ink-soft);}
.mini-c .ic {width: 18px; height: 18px; color: var(--navy);}
.mini-c.on {color: var(--navy); font-weight: 500;}
.mini-bar {display: block; height: 8px; border-radius: 99px; background: var(--mist); overflow: hidden;}
.mini-bar b {display: block; width: 100%; height: 100%; background: var(--navy); transform: scaleX(0.62); transform-origin: left center;}
.carsec {padding-block: clamp(72px, 9vw, 130px) clamp(56px, 7vw, 100px);}
.carsec h2 {font-size: var(--step-head); font-weight: 700; letter-spacing: -0.03em;}
.car {margin-top: clamp(32px, 4vw, 56px); display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(24px, calc((100vw - 1240px) / 2 + 24px)); padding: 8px max(24px, calc((100vw - 1240px) / 2 + 24px)) 24px; scrollbar-width: none;}
.car::-webkit-scrollbar {display: none;}
.car:focus-visible {outline: 3px solid var(--navy); outline-offset: -3px;}
.car__card {flex: 0 0 min(300px, 78vw); scroll-snap-align: start; padding: 20px 20px 28px; border-radius: 22px; background: var(--mist); display: grid; gap: 6px; align-content: start;}
.car__vis {height: 168px; border-radius: 14px; background: var(--white); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 0 0 1px rgba(2,23,38,0.06);}
.car__card h3 {font-size: 1.25rem; letter-spacing: -0.02em;}
.car__card p {color: var(--ink-soft); line-height: 1.45;}
.chip-toast {display: inline-flex; align-items: center; gap: 16px; padding: 12px 18px; border-radius: 12px; background: var(--navy); color: var(--white); font-size: 0.9375rem;}
.chip-toast b {color: var(--cyan); font-weight: 600;}
.chip-pill, .chip-trk {display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: var(--mist); color: var(--navy); font-weight: 600; font-size: 0.9375rem;}
.chip-pill .ic, .chip-trk .ic {width: 18px; height: 18px;}
.kbd {display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--white); color: var(--navy); font: 700 1.5rem var(--font-display); box-shadow: 0 0 0 1px rgba(2,23,38,0.2), 0 4px 0 rgba(2,23,38,0.2);}
.car__nav {display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px;}
.car__nav button {width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--navy); color: var(--white); font-size: 1.25rem; cursor: pointer; transition: transform 160ms cubic-bezier(0.23,1,0.32,1), background-color 160ms;}
.car__nav button:hover {background: var(--navy-700);}
.car__nav button:active {transform: scale(0.97);}
.car__nav button:focus-visible {outline: 3px solid var(--navy); outline-offset: 3px;}
@media (max-width: 860px) {
  .diff__grid, .steps__list {grid-template-columns: 1fr;}
}
.win--sm .win__body .mini-b {color: var(--white); background: var(--navy); opacity: 1;}
.hero__facts {gap: 10px 24px;}

/* App screens: phone and browser */
.phone {width: 272px; flex: none; border-radius: 44px; padding: 9px; background: #0a1a27; box-shadow: 0 0 0 2px #1d3a50, 0 40px 80px -30px rgba(2,23,38,0.6);}
.phone__s {position: relative; height: 560px; border-radius: 36px; background: #fff; color: var(--navy); overflow: hidden; font-size: 12.5px; line-height: 1.35; display: flex; flex-direction: column;}
.phone__n {position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 99px; background: #0a1a27; z-index: 3;}
.phone__time {padding: 12px 22px 0; font-size: 12px; height: 34px; flex: none;}
.ph-head {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px 8px; flex: none;}
.ph-head b {font: 700 1.5rem var(--font-display); letter-spacing: -0.02em;}
.ph-head--r b {font-size: 0.9375rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ph-head .ic {flex: none;}
.ph-chips {display: flex; gap: 8px; padding: 0 18px 8px; flex: none;}
.ph-chips span {padding: 5px 12px; border-radius: 99px; background: var(--mist); color: var(--ink-soft); font-weight: 600; font-size: 0.75rem;}
.ph-chips .on {background: var(--navy); color: var(--white);}
.phl {list-style: none; margin: 0; padding: 0; overflow: hidden; flex: 1;}
.phl__lab {padding: 10px 18px 4px; font-size: 0.6875rem; color: var(--ink-soft); font-weight: 600;}
.phr {display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 9px 18px; align-items: start;}
.phr__av {display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mist); color: var(--navy); font: 700 0.6875rem var(--font-display); flex: none;}
.phr:nth-child(2) .phr__av {background: var(--cyan);}
.phr__t {display: grid; gap: 1px; min-width: 0;}
.phr__top {display: flex; justify-content: space-between; gap: 8px;}
.phr__top b {font-weight: 600; font-size: 0.8125rem;}
.phr__top em {font-style: normal; color: var(--ink-soft); font-size: 0.6875rem;}
.phr__s {font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.phr__p {color: var(--ink-soft); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.phr--un .phr__s, .phr--un .phr__top b {font-weight: 700;}
.phr__pill {justify-self: start; margin-top: 3px; padding: 2px 10px; border-radius: 99px; background: rgba(1,230,237,0.2); color: #035b61; font-weight: 600; font-size: 0.6875rem;}
.ph-bar {position: absolute; left: 12px; right: 12px; bottom: 14px; height: 54px; border-radius: 99px; background: rgba(255,255,255,0.92); box-shadow: 0 0 0 1px rgba(2,23,38,0.08), 0 10px 30px -10px rgba(2,23,38,0.35); display: flex; align-items: center; gap: 6px; padding: 6px;}
.ph-bar span {display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-soft);}
.ph-bar span.on {background: var(--mist); color: var(--navy);}
.ph-bar b {margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 99px; background: var(--cyan); color: var(--navy); font: 700 0.8125rem var(--font-display);}
.ph-ai {display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; flex: none;}
.ph-ai span {display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; font-weight: 600; font-size: 0.6875rem;}
.ph-ai .a {background: #efe9fd; color: #6d3fd6;}
.ph-ai .b {background: #e8f1fb; color: #1d5fb5;}
.ph-ai .c {background: #e7f4f7; color: #0a6d77;}
.ph-msg {display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 6px 18px; align-items: center;}
.ph-msg b {display: block; font-weight: 600;}
.ph-msg em {font-style: normal; color: var(--ink-soft); font-size: 0.6875rem;}
.ph-seal {display: inline-flex; align-items: center; gap: 5px; margin: 4px 18px; padding: 3px 10px; border-radius: 99px; background: var(--mist); font-size: 0.6875rem; font-weight: 600; width: fit-content;}
.ph-body {padding: 6px 18px 0; color: #223c4b;}
.ph-sum {display: grid; grid-template-columns: 16px 1fr; gap: 8px; margin: 14px 14px 0; padding: 10px 12px; border-radius: 14px; background: #f3effd; color: #4a2b9a; font-size: 0.75rem;}
.ph-sum b {display: block; margin-bottom: 2px;}
.ph-act {position: absolute; left: 12px; right: 12px; bottom: 14px; height: 50px; border-radius: 99px; background: rgba(255,255,255,0.92); box-shadow: 0 0 0 1px rgba(2,23,38,0.08), 0 10px 30px -10px rgba(2,23,38,0.35); display: flex; align-items: center; justify-content: space-around; color: var(--navy);}
.ph-acts {list-style: none; margin: 0; padding: 4px 14px; display: grid; gap: 8px;}
.ph-acts li {display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--mist);}
.ph-acts b {display: block; font-weight: 600;}
.ph-acts span {color: var(--ink-soft); font-size: 0.75rem;}
.ph-acts b {color: var(--navy); font-size: 0.8125rem;}
.ph-priv {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 14px 0; padding: 12px 14px; border-radius: 16px; background: var(--navy); color: var(--white);}
.ph-priv span {color: var(--on-navy-soft); font-size: 0.75rem;}
.ph-priv b {display: block; color: var(--white); font-weight: 600; font-size: 0.8125rem;}
.ph-priv .toggle2 {width: 44px; height: 26px;}
.ph-priv .toggle2 b {top: 3px; right: 3px; width: 20px; height: 20px; display: block;}
.phero__dev {position: absolute; right: max(var(--pad, 24px), calc((100vw - 1240px) / 2 + var(--pad, 24px))); top: clamp(48px, 5vw, 72px); z-index: 1; pointer-events: none;}
.phero__dev .phone {transform: rotate(3deg);}
.phero--pricing .phero__dev {top: clamp(40px, 4vw, 60px);}
@media (max-width: 960px) {.phero__dev {display: none;}}
.browser {border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(2,23,38,0.1), 0 40px 90px -36px rgba(2,23,38,0.5); overflow: hidden; color: var(--navy); font-size: 0.8125rem; line-height: 1.4;}
.br-bar {display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #eaf0f3;}
.br-bar i {width: 10px; height: 10px; border-radius: 50%; background: #c3d1d9;}
.br-bar span {margin-left: 12px; flex: 0 1 320px; padding: 4px 14px; border-radius: 99px; background: #fff; color: var(--ink-soft); font-size: 0.75rem;}
.br-app {display: grid; grid-template-columns: 176px 288px minmax(0, 1fr); height: 440px;}
.br-side {padding: 18px 14px; background: var(--mist); display: grid; gap: 16px; align-content: start;}
.br-comp {display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border-radius: 99px; background: var(--navy); color: var(--white); font: 600 0.8125rem var(--font-display);}
.br-side ul {list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;}
.br-side li {display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink-soft); font-weight: 500;}
.br-side li em {margin-left: auto; font-style: normal; font-size: 0.6875rem; font-weight: 600;}
.br-side li.on {background: #fff; color: var(--navy); font-weight: 600;}
.br-list {list-style: none; margin: 0; padding: 6px 0; border-inline: 1px solid rgba(2,23,38,0.08); overflow: hidden;}
.br-pane {padding: 22px 26px; overflow: hidden;}
.br-pane h4 {font: 700 1.25rem var(--font-display); letter-spacing: -0.02em;}
.br-from {display: flex; align-items: center; gap: 10px; margin-top: 12px;}
.br-seal {margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: var(--mist); font-style: normal; font-size: 0.6875rem; font-weight: 600;}
.br-sum {margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: #f3effd; color: #4a2b9a;}
.br-sum p {display: flex; align-items: center; gap: 6px; font-weight: 700; margin-bottom: 6px;}
.br-sum ul {margin: 0; padding-left: 18px; list-style: disc;}
.br-body {margin-top: 16px; color: #223c4b;}
.br-btns {margin-top: 18px; display: flex; gap: 10px;}
.br-btns b, .br-btns span {display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: 99px; font-weight: 600;}
.br-btns b {background: var(--navy); color: var(--white);}
.br-btns span {background: var(--mist); color: var(--navy);}
.devs {padding-block: clamp(72px, 9vw, 130px);}
.devs h2 {font-size: var(--step-head); font-weight: 700; letter-spacing: -0.03em; max-width: 14em;}
.devs__stage {position: relative; margin-top: clamp(36px, 4vw, 64px);}
.devs__small {margin-top: clamp(48px, 5vw, 80px);}
@media (max-width: 1080px) {.br-app {grid-template-columns: 150px minmax(0, 1fr);} .br-list {display: none;}}
@media (max-width: 760px) {
  .br-app {grid-template-columns: minmax(0, 1fr); height: auto;} .br-side {display: none;}
}
.diff__grid--3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.diff__col h3 {font-size: 1.375rem;}
@media (max-width: 960px) {.diff__grid--3 {grid-template-columns: 1fr;}}

/* Feature cards in page heroes */
.pfs {position: relative; width: 420px; height: 330px;}
.pf {position: absolute; display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; font-size: 0.875rem; line-height: 1.35; box-shadow: 0 30px 70px -26px rgba(0,0,0,0.65);}
.pf b {font: 600 1rem var(--font-display); letter-spacing: -0.01em;}
.pf--w {background: var(--white); color: var(--ink-soft);}
.pf--w b {color: var(--navy);}
.pf--d {background: var(--navy-800); color: var(--on-navy-soft); box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 30px 70px -26px rgba(0,0,0,0.7);}
.pf--d b {color: var(--white);}
.pf--c {background: linear-gradient(180deg, #0b3b57, #0a2f48); color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(1,230,237,0.55), 0 30px 70px -26px rgba(0,0,0,0.7);}
.pf--c p {display: flex; align-items: center; gap: 8px; color: var(--cyan); font: 600 0.9375rem var(--font-display);}
.pf--c ul {margin: 6px 0 0; padding-left: 18px; list-style: disc; display: grid; gap: 4px;}
.pf--row {grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 18px;}
.pf--row span b {display: block;}
.pf--ic {grid-template-columns: auto minmax(0, 1fr); gap: 14px;}
.pf--ic .ic {width: 22px; height: 22px; color: var(--cyan);}
.pf--w.pf--ic .ic {color: var(--navy);}
.pf__tag {display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 10px; border-radius: 99px; background: var(--mist); color: var(--navy-700); font-weight: 600; font-size: 0.75rem;}
.pf__btn {font-style: normal; font-weight: 600; color: var(--cyan);}
.pf .mini-bar {background: rgba(255,255,255,0.14);} .pf .mini-bar b {background: var(--cyan); font: inherit;}
.pf .toggle2 {width: 48px; height: 28px;} .pf .toggle2 b {top: 3px; right: 3px; width: 22px; height: 22px; display: block;}
.pfs .pf:nth-child(1) {top: 0; left: 6%; width: 78%;}
.pfs .pf:nth-child(2) {top: 40%; right: 0; width: 70%;}
.pfs .pf:nth-child(3) {bottom: 0; left: 0; width: 66%;}
.phero__dev {top: clamp(48px, 5vw, 80px);}
.phero__dev .phone {transform: none;}
/* App feature screens row (animation hooks: data-anim) */
.shots {padding-block: clamp(72px, 9vw, 130px);}
.shots h2 {font-size: var(--step-head); font-weight: 700; letter-spacing: -0.03em; max-width: 14em;}
.shots__row {margin-top: clamp(36px, 4vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; justify-items: center;}
.shots__row > li {display: grid; gap: 6px; justify-items: start; width: 272px; max-width: 100%;}
.shots__row > li:nth-child(even) {margin-top: 56px;}
.shots__row .phone {margin-bottom: 18px;}
.shots__row h3 {font-size: 1.25rem; letter-spacing: -0.02em;}
.shots__row p {color: var(--ink-soft); line-height: 1.45;}
@media (max-width: 1180px) {.shots__row {grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px;} .shots__row > li:nth-child(even) {margin-top: 0;}}
@media (max-width: 640px) {.shots__row {display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; margin-inline: calc(-1 * var(--pad, 20px)); padding: 0 var(--pad, 20px) 8px;} .shots__row > li {flex: none; scroll-snap-align: start;}}
.ph-send {padding: 5px 14px; border-radius: 99px; background: var(--cyan); color: var(--navy); font: 700 0.75rem var(--font-display);}
.ph-field {display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-bottom: 1px solid rgba(2,23,38,0.08);}
.ph-field em {font-style: normal; color: var(--ink-soft); width: 46px; font-size: 0.75rem;}
.ph-field b {font-weight: 600;}
.ph-tok {padding: 3px 10px; border-radius: 99px; background: var(--mist); font-weight: 600; font-size: 0.75rem;}
.ph-body--c {padding-top: 12px;}
.ph-body .ghost {color: #8aa0ad;}
.ph-opts {display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px 0;}
.ph-opts span {display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 99px; background: var(--mist); font-weight: 600; font-size: 0.6875rem; color: var(--navy);}
.ph-opts span.on {background: var(--navy); color: var(--white);}
.ph-tone {margin: 14px 16px 0; padding: 12px 14px; border-radius: 14px; background: #f3effd; color: #4a2b9a; font-size: 0.75rem;}
.ph-tone b {display: block; margin-bottom: 2px;}

/* One phone, pinned. Its screen changes as each step reaches the middle of the screen. Nothing is tied to scroll position, so iOS Safari has nothing to jitter. */
.stage {margin-top: clamp(36px, 4vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: clamp(32px, 8vw, 120px); align-items: start; justify-content: space-between;}
.stage__steps {list-style: none; margin: 0; padding: 0;}
.stage__steps li {min-height: 420px; display: grid; align-content: center; gap: 10px; max-width: 26em; opacity: 0.35; transition: opacity 350ms ease; cursor: pointer;}
.stage__steps li.is-active {opacity: 1;}
.stage__steps h3 {font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); letter-spacing: -0.025em;}
.stage__steps p {color: var(--ink-soft); font-size: var(--step-lead); line-height: 1.45;}
.stage__phone {position: sticky; top: 12vh; justify-self: end;}
.phone--stage {position: relative;}
.phone--stage > .phone__n {position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 99px; background: #0a1a27; z-index: 3;}
.phone__stack {position: relative; height: 560px; border-radius: 36px; overflow: hidden; background: #fff;}
.phone__stack .phone__s {position: absolute; inset: 0; height: auto; border-radius: 0; opacity: 0; transform: translateY(22px) scale(0.98); transition: opacity 180ms ease, transform 180ms ease; pointer-events: none;}
.phone__stack .phone__s.is-past {transform: translateY(-22px) scale(0.98);}
.phone__stack .phone__s.is-active {opacity: 1; transform: none; transition-duration: 420ms; transition-delay: 160ms;}
@media (prefers-reduced-motion: reduce) {.phone__stack .phone__s, .stage__steps li {transition: none;}}
@media (max-width: 860px) {
  .stage {grid-template-columns: minmax(0, 1fr) 168px; gap: 14px;}
  .stage__phone {top: calc(50svh - 170px); width: 168px;}
  .stage__phone .phone--stage {zoom: 0.575; width: 292px;}
  .stage__steps li {min-height: 62svh; max-width: none;}
  .stage__steps h3 {font-size: 1.375rem;}
  .stage__steps p {font-size: 1rem;}
}

/* import + connected accounts */
.imp__chips {display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 3vw, 36px);}
.imp__facts {margin-top: clamp(40px, 5vw, 72px);}
.steps .imp__facts + .seal-sec__more {margin-top: clamp(36px, 4vw, 56px);}
.imp .small__grid {margin-top: clamp(28px, 3vw, 44px);}

/* v0-inspired: import card, link expiry card, can/can't read table */
.imptop {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(32px, 4vw, 56px);}
.imptop--home {margin-top: 0; align-items: center;}
.imp__ol {list-style: none; counter-reset: s; display: grid; gap: 28px;}
.imp__ol li {counter-increment: s; display: grid; gap: 6px; padding-left: 56px; position: relative;}
.imp__ol li::before {content: counter(s); position: absolute; left: 0; top: -2px; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: var(--cyan); display: grid; place-items: center; font: 700 1.125rem/1 var(--font-head, inherit);}
.imp__ol h3 {font-size: 1.375rem; letter-spacing: -0.02em;}
.imp__ol p {color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.5; max-width: 34em;}
.impcard, .xp__card {margin: 0;}
.impcard figcaption, .xp__card figcaption {margin-top: 12px; font-size: 0.8125rem; color: var(--ink-soft); text-align: center;}
.impcard__box, .xp__card > div {background: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 24px 60px -24px rgba(2,23,38,.28), 0 0 0 1px rgba(2,23,38,.06); display: grid; gap: 12px;}
.impcard__h {display: flex; justify-content: space-between; align-items: center;}
.impcard__h b {font-size: 1.0625rem;}
.impcard__h span {background: var(--mist); color: var(--navy); font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 99px;}
.impcard__acct {display: flex; gap: 12px; align-items: center; background: var(--mist); border-radius: 14px; padding: 12px 14px;}
.impcard__acct .ic {width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--navy); color: var(--cyan); flex: none;}
.impcard__acct b {display: block; font-size: .9375rem;}
.impcard__acct span {font-size: .8125rem; color: var(--ink-soft);}
.impcard__l {font-size: .8125rem; font-weight: 600; color: var(--ink-soft); margin-top: 6px;}
.impcard__f {list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.impcard__f li {display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid rgba(2,23,38,.14); color: var(--ink-soft); font-size: .9375rem;}
.impcard__f li.on {border-color: var(--navy); color: var(--navy); font-weight: 600;}
.impcard__f .ic {width: 16px; height: 16px; color: var(--navy);}
.impcard__seg {display: grid; grid-template-columns: 1fr 1fr; background: var(--mist); border-radius: 99px; padding: 4px; font-size: .875rem; font-weight: 600;}
.impcard__seg span {text-align: center; padding: 9px 8px; border-radius: 99px; color: var(--ink-soft);}
.impcard__seg span.on {background: var(--navy); color: #fff;}
.impcard__seg small {font-weight: 500; opacity: .8;}
.impcard__n {font-size: .8125rem; color: var(--ink-soft);}
.xp__grid {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 5vw, 80px); align-items: center;}
.xp__pills {display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;}
.xp__pills span {text-align: center; padding: 10px 6px; border-radius: 12px; border: 1.5px solid rgba(2,23,38,.14); font-weight: 600; font-size: .9375rem;}
.xp__pills span.on {background: var(--navy); border-color: var(--navy); color: #fff;}
.xp__opts {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px;}
.xp__opts > div {display: grid; gap: 4px; padding: 14px; border-radius: 14px; border: 1.5px solid rgba(2,23,38,.14); font-size: .875rem; color: var(--ink-soft);}
.xp__opts > div.on {background: var(--navy); border-color: var(--navy); color: var(--on-navy-soft);}
.xp__opts > div.on b {color: #fff;}
.xp__opts b {color: var(--navy); font-size: .9375rem;}
.xp__opts .ic {width: 18px; height: 18px; color: var(--cyan);}
.xp__opts > div:not(.on) .ic {color: var(--navy);}
.canread__wrap {margin-top: clamp(28px, 3vw, 44px); background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px rgba(2,23,38,.06); overflow-x: auto;}
.canread__t {width: 100%; border-collapse: collapse; min-width: 640px;}
.canread__t th, .canread__t td {text-align: left; padding: 20px 24px; border-top: 1px solid rgba(2,23,38,.08); vertical-align: middle;}
.canread__t thead th {border-top: 0; background: var(--navy); color: #fff; font-size: .875rem; font-weight: 600;}
.canread__t tbody th {font-weight: 600; font-size: 1.0625rem; display: flex; gap: 12px; align-items: flex-start; border-top: 0;}
.canread__t tbody tr {border-top: 1px solid rgba(2,23,38,.08);}
.canread__t tbody th .ic {width: 20px; height: 20px; flex: none; margin-top: 2px;}
.canread__t td {color: var(--ink-soft); font-size: 1rem;}
.cr {display: inline-block; white-space: nowrap; padding: 6px 14px; border-radius: 99px; font-weight: 700; font-size: .875rem;}
.cr--no {background: var(--cyan); color: var(--navy);}
.cr--yes {border: 1.5px solid var(--navy); color: var(--navy);}
@media (max-width: 860px) {
  .imptop, .xp__grid {grid-template-columns: 1fr;}
  .xp__opts {grid-template-columns: 1fr;}
  .canread__t th, .canread__t td {padding: 16px;}
}

/* Motion start states. mo-boot.js adds .mo only when motion is allowed; motion.js
   (tools/motion/entry.js) then animates these in. Keep in step with its lists. */
@media (prefers-reduced-motion: no-preference) {
  html.mo .hero__copy > *, html.mo .phero__copy > *, html.mo .phero__dev, html.mo .hero .fc,
  html.mo .small__grid > li, html.mo .diff__grid > .diff__col, html.mo .imp__ol > li,
  html.mo .facts > .fact, html.mo .travel__nodes > .tn, html.mo .pcards__grid > *, html.mo .packs > .pack,
  html.mo .impcard, html.mo .xp__card, html.mo .canread__wrap {opacity: 0;}
  html.mo .mini-bar b {transform: scaleX(0);}
}

/* Headline words (split by motion.js so they can rise in turn) */
.w {display: inline-block;}

/* Compare table hint (phones only) and sticky plan names */
.compare-hint {display: none; color: var(--ink-soft); font-size: 0.9375rem; margin-top: 20px;}

/* Phones */
@media (max-width: 720px) {
  /* the notch at the top of a section must not cover its heading */
  section.seam {padding-top: 76px;}
  /* "What we can and can't read": one card per type of mail */
  .canread__wrap {overflow: visible; background: transparent; box-shadow: none;}
  .canread__t {min-width: 0; display: block;}
  .canread__t thead {display: none;}
  .canread__t tbody {display: grid; gap: 12px;}
  .canread__t tbody tr {display: grid; gap: 10px; background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 0 0 1px rgba(2,23,38,.08);}
  .canread__t th, .canread__t td {padding: 0; border: 0;}
  .canread__t td:nth-of-type(1)::before {content: "How it is protected"; display: block; font-size: 0.8125rem; color: var(--ink-soft); margin-bottom: 2px;}
  .canread__t td:nth-of-type(2)::before {content: "Can SipherMail read it?"; margin-right: 8px; font-size: 0.8125rem; color: var(--ink-soft);}
  /* plan comparison: swipe, with the row names kept in view */
  .compare-hint {display: block;}
  .compare tbody tr:not(.grp) th, .compare thead th:first-child {position: sticky; left: 0; z-index: 1; background: var(--white); padding-right: 12px; min-width: 130px;}
  .on-mist .compare tbody tr:not(.grp) th, .on-mist .compare thead th:first-child {background: var(--mist);}
  /* last call to action */
  .cta__line {font-size: clamp(1.75rem, 8.5vw, 2.5rem);}
}
/* bigger touch targets for text links */
@media (pointer: coarse) {
  a.link {display: inline-block; padding-block: 10px; margin-block: -10px;}
  .nav__logo {display: inline-flex; align-items: center; min-height: 44px;}
}
@media (max-width: 720px) {
  .cta__in, .cta__go {min-height: 44px;}
}

/* How a message travels (Security) */
.travel {position: relative; --g: clamp(20px, 3vw, 44px); margin-top: clamp(32px, 4vw, 56px);}
.travel__nodes {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); position: relative; z-index: 1;}
.tn > h3 {font-size: 1.5rem; margin: 28px 0 8px;}
.tn > p {color: var(--ink-soft); max-width: 24em;}
.tn__card {position: relative; height: 232px; padding: 22px 24px; border-radius: 24px; color: #fff; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  background: radial-gradient(260px circle at var(--mx, 75%) var(--my, 0%), rgba(1, 230, 237, 0.2), transparent 62%), linear-gradient(180deg, var(--navy-800), var(--navy));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 70px -34px rgba(2, 23, 38, 0.7);}
.tn__card--srv {box-shadow: inset 0 0 0 1px rgba(1, 230, 237, 0.45), 0 40px 70px -34px rgba(2, 23, 38, 0.7);}
.tn__tag {display: flex; align-items: center; gap: 8px; color: var(--cyan); font-size: 0.875rem; font-weight: 600;}
.tn__tag .ic, .tn__chip .ic {width: 16px; height: 16px;}
.tn__subj {font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: #fff; margin-top: 6px;}
.tn__text {color: var(--on-navy-soft); font-size: 0.9375rem; line-height: 1.5;}
.tn__text--c, .tn__text.is-c {font-family: var(--font-mono); color: var(--cyan); font-size: 0.875rem; line-height: 1.5; word-break: break-all;}
.tn__chip {margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 99px; background: rgba(1, 230, 237, 0.16); color: var(--cyan); font-size: 0.8125rem; font-weight: 600; transition: opacity 300ms var(--ease-out), background-color 300ms var(--ease-out);}
.tn__chip.is-dim {opacity: 0.3;}
.travel__track {position: absolute; top: 116px; left: calc((100% - 2 * var(--g)) / 6); right: calc((100% - 2 * var(--g)) / 6); height: 2px; background: repeating-linear-gradient(90deg, rgba(2, 23, 38, 0.35) 0 8px, transparent 8px 16px);}
.travel__packet {position: absolute; left: -57px; top: -18px; z-index: 3; display: none; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; white-space: nowrap; background: var(--navy); color: var(--cyan); font: 600 0.8125rem var(--font-mono); box-shadow: 0 0 0 1px rgba(1, 230, 237, 0.55), 0 0 26px rgba(1, 230, 237, 0.5);}
.travel__packet .ic {width: 16px; height: 16px;}
.travel__packet i {font-style: normal;}
.travel__foot {display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 32px; color: var(--ink-soft); font-size: 0.875rem;}
.travel__replay {display: none; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1.5px solid var(--navy); background: transparent; color: var(--navy); font: 600 0.9375rem var(--font-display); cursor: pointer; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);}
.travel__replay:hover {background: var(--navy); color: #fff;}
html.mo .travel__replay {display: inline-flex; align-items: center;}
@media (max-width: 860px) {
  .travel__nodes {grid-template-columns: 1fr; gap: 40px;}
  .tn__card {height: auto; min-height: 210px;}
}

/* React Bits islands */
.hero__stage {transform-style: preserve-3d;}
.hero .fc {translate: 0 0 24px;}
.pc-slot {display: flex; flex-direction: column;}
.pc-slot > .pc {flex: 1;}
.pc__in {display: contents;}
.pc.spotlight-card {padding: 28px 24px; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px rgba(2,23,38,0.1), 0 24px 60px -30px rgba(2,23,38,0.3);}
.pc--pick.spotlight-card {background: var(--navy); box-shadow: 0 0 0 2px var(--cyan), 0 36px 80px -24px rgba(1,230,237,0.35); padding-block: 42px 34px;}
.pc--flat.spotlight-card {padding-block: 28px;}
@media (max-width: 860px) {.pc--pick.spotlight-card {padding-block: 28px;}}

/* Home: AI cards. Plain list without JS, 3D Card Swap with it. */
.aiswap {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center;}
.aiswap__cards {display: grid; gap: 14px;}
.aiswap__cards.is-live {display: block;}
.aiswap__stage {position: relative; height: 400px;}
.aicard {display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: 20px; background: linear-gradient(180deg, var(--navy-800), var(--navy)); color: #fff; box-shadow: inset 0 0 0 1px rgba(1,230,237,0.28);}
.aicard__in {display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px 24px; box-sizing: border-box; color: #fff;}
.aicard__in .aicard__tag {margin: 0;}
.aicard__tag {display: flex; align-items: center; gap: 8px; color: var(--cyan); font-size: 0.875rem; font-weight: 600;}
.aicard__tag .ic {width: 18px; height: 18px;}
.aicard h3, .aicard__in h3 {font-size: 1.1875rem; line-height: 1.3; color: #fff; max-width: 20em;}
.aicard__list, .aicard__flags {list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--on-navy-soft); font-size: 0.9375rem;}
.aicard__list li {padding-left: 16px; position: relative;}
.aicard__list li::before {content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);}
.aicard__flags li {padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.07);}
.aicard__q {align-self: flex-end; margin: 4px 0 0; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: rgba(1, 230, 237, 0.16); color: #fff; font-size: 0.9375rem;}
.aicard__a {margin: 0; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, 0.08); color: var(--on-navy-soft); font-size: 0.9375rem;}
.aicard__toggle {display: flex; align-items: center; justify-content: space-between; margin: 6px 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); font-weight: 600;}
.aicard__toggle i {position: relative; width: 52px; height: 30px; border-radius: 99px; background: var(--cyan);}
.aicard__toggle i::after {content: ""; position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--navy);}
@media (max-width: 860px) {
  .aiswap {grid-template-columns: 1fr;}
  .aiswap__stage {height: 330px;}
}
.pc-slot--pick {margin-block: -14px;}
.pc-slot .pc--pick {margin-block: 0;}
@media (max-width: 860px) {.pc-slot--pick {margin-block: 0;}}

/* Hero feature tiles */
.f3s {list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; perspective: 900px;}
.f3 {position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 16px; border-radius: 18px; transform-style: preserve-3d; overflow: hidden;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, -20%), rgba(1, 230, 237, 0.2), transparent 70%), rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 40px -28px rgba(0, 0, 0, 0.8);}
.f3__stage {position: relative; height: 72px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; perspective: 260px; transform: translateZ(26px); background: rgba(2, 23, 38, 0.5); box-shadow: inset 0 0 0 1px rgba(1, 230, 237, 0.14); color: var(--cyan);}
.f3 p {margin: 0; display: grid; gap: 3px; line-height: 1.3; transform: translateZ(10px);}
.f3 p b {color: #fff; font-size: 0.875rem; font-weight: 600;}
.f3 p span {color: var(--on-navy-soft); font-size: 0.75rem;}
/* Encryption: the lock closes and the words scramble */
.f3__lock {width: 30px; height: 30px; flex: none;}
.f3__shackle {transform-box: fill-box;}
.f3__txt {position: relative; display: inline-grid; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: #fff;}
.f3__txt > span {grid-area: 1 / 1;}
.f3__plain {opacity: 0;}
.f3__cipher {color: var(--cyan); letter-spacing: 0.08em;}
/* AI switch: sparkle dims as the switch turns off */
.f3__spark {width: 26px; height: 26px; flex: none; opacity: 0.35; transform: scale(0.85);}
.f3__tg {position: relative; display: block; width: 52px; height: 28px; border-radius: 99px; background: rgba(255, 255, 255, 0.18);}
.f3__tg::before {content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--cyan); opacity: 0;}
.f3__tg b {position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;}
/* Password link: a key turns and the password fills in */
.f3__key {width: 30px; height: 30px; flex: none;}
.f3__dots {display: inline-flex; gap: 5px;}
.f3__dots i {width: 7px; height: 7px; border-radius: 50%; background: #fff;}
@media (prefers-reduced-motion: no-preference) {
  .f3__shackle {animation: f3-lock 5s ease-in-out infinite;}
  .f3__plain {animation: f3-plain 5s ease-in-out infinite;}
  .f3__cipher {animation: f3-cipher 5s ease-in-out infinite;}
  .f3__tg b {animation: f3-knob 5s ease-in-out infinite;}
  .f3__tg::before {animation: f3-on 5s ease-in-out infinite;}
  .f3__spark {animation: f3-spark 5s ease-in-out infinite;}
  .f3__key {animation: f3-key 5s ease-in-out infinite;}
  .f3__dots i {animation: f3-dot 5s ease-in-out infinite;}
  .f3__dots i:nth-child(2) {animation-delay: 0.15s;} .f3__dots i:nth-child(3) {animation-delay: 0.3s;}
  .f3__dots i:nth-child(4) {animation-delay: 0.45s;} .f3__dots i:nth-child(5) {animation-delay: 0.6s;}
  .f3--ai .f3__stage {animation: f3-bob 5s ease-in-out infinite;}
}
@keyframes f3-lock {0%, 30% {transform: translateY(-3.5px);} 42%, 100% {transform: translateY(0);}}
@keyframes f3-plain {0%, 30% {opacity: 1; transform: translateY(0);} 40%, 92% {opacity: 0; transform: translateY(-5px);} 100% {opacity: 1; transform: translateY(0);}}
@keyframes f3-cipher {0%, 30% {opacity: 0; transform: translateY(5px);} 40%, 92% {opacity: 1; transform: translateY(0);} 100% {opacity: 0; transform: translateY(5px);}}
@keyframes f3-knob {0%, 30% {transform: translateX(24px);} 42%, 88% {transform: translateX(0);} 100% {transform: translateX(24px);}}
@keyframes f3-on {0%, 30% {opacity: 1;} 42%, 88% {opacity: 0;} 100% {opacity: 1;}}
@keyframes f3-spark {0%, 30% {opacity: 1; transform: scale(1) rotate(0);} 42%, 88% {opacity: 0.3; transform: scale(0.8) rotate(-25deg);} 100% {opacity: 1; transform: scale(1) rotate(0);}}
@keyframes f3-key {0%, 8% {transform: rotateY(0) rotateZ(0);} 40% {transform: rotateY(360deg) rotateZ(0);} 55%, 92% {transform: rotateY(360deg) rotateZ(-18deg);} 100% {transform: rotateY(360deg) rotateZ(0);}}
@keyframes f3-dot {0%, 30% {opacity: 0.18; transform: scale(0.7);} 45%, 90% {opacity: 1; transform: scale(1);} 100% {opacity: 0.18; transform: scale(0.7);}}
@keyframes f3-bob {0%, 100% {transform: translateZ(26px);} 50% {transform: translateZ(34px);}}
/* The same tiles now sit at the top of the "Three ways" columns, as picture only. */
.diff__col {perspective: 900px;}
.diff__col > .f3 {margin-bottom: 22px; padding: 10px; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, -20%), rgba(1, 230, 237, 0.22), transparent 70%), var(--navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 30px -22px rgba(2, 23, 38, 0.7);}
.diff__col > .f3 .f3__stage {height: 88px;}
.diff__col > .f3 p {display: none;}
.diff__col--us > .f3 {box-shadow: inset 0 0 0 1px rgba(1, 230, 237, 0.3);}

/* How a message travels, phones: stacked cards with a dashed rail and a packet that slides down it */
@media (max-width: 860px) {
  .travel__nodes {padding-left: 34px; gap: 36px;}
  .tn {position: relative;}
  .tn::before {content: ""; position: absolute; left: -29px; top: var(--cy, 105px); width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--mist, #e8f1f5); box-shadow: inset 0 0 0 3px var(--navy); z-index: 2;}
  .travel__track {display: block; left: 11px; right: auto; top: 0; width: 2px; height: 0; background: repeating-linear-gradient(180deg, rgba(2, 23, 38, 0.4) 0 8px, transparent 8px 16px); z-index: 0;}
  .travel__packet {left: -17px; top: 0; width: 36px; height: 36px; padding: 0; justify-content: center; margin-top: -18px;}
  .travel__packet i {display: none;}
  .travel__foot {justify-content: space-between;}
}

/* Legal pages (Privacy, Terms) */
.legal {padding-block: clamp(56px, 8vw, 110px);}
.legal__grid {display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start;}
.legal__toc {position: sticky; top: calc(var(--nav-h) + 24px); max-height: calc(100svh - var(--nav-h) - 48px); overflow: auto; padding-right: 8px;}
.legal__toc p {font-family: var(--font-display); font-weight: 600; font-size: var(--step-small); letter-spacing: -0.01em; color: var(--ink-soft); margin-bottom: 12px;}
.legal__toc ol {display: grid; gap: 2px; border-left: 2px solid var(--line-light);}
.legal__toc a {display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: var(--step-small); line-height: 1.35; text-decoration: none; color: var(--ink-soft); transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);}
.legal__toc a:hover, .legal__toc a:focus-visible {color: var(--navy); border-left-color: var(--cyan);}
.legal__body {max-width: 46rem; min-width: 0;}
.legal__meta {font-size: var(--step-small); color: var(--ink-soft); margin-bottom: 20px;}
.legal__intro {font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); line-height: 1.5; margin-bottom: clamp(32px, 5vw, 56px); text-wrap: pretty;}
.legal__body .lg {padding-top: clamp(28px, 4vw, 44px); margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line-light); scroll-margin-top: calc(var(--nav-h) + 16px);}
.legal__body .lg:first-of-type {margin-top: 0;}
.legal__body h2 {font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); max-width: none; margin-bottom: 16px;}
.legal__body h3 {font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem); letter-spacing: -0.02em; margin: 28px 0 10px;}
.legal__body p + p, .legal__body p + ul, .legal__body ul + p {margin-top: 14px;}
.legal__body ul {display: grid; gap: 12px; margin-top: 14px; padding-left: 0;}
.legal__body li {position: relative; padding-left: 22px;}
.legal__body li::before {content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 2px; background: var(--navy);}
.legal__body strong {font-weight: 600;}
.legal__body a.link {text-decoration-color: var(--cyan);}
@media (max-width: 860px) {
  .legal__grid {grid-template-columns: minmax(0, 1fr); gap: 28px;}
  .legal__toc {display: none;}
}

/* ---------- Text effects (Scroll Float headings, Scroll Reveal leads, Decrypted hero) ---------- */
.tx-r {display: inline-block;}
@media (prefers-reduced-motion: no-preference) {
}

/* ---------- Frame border: a light runs around the edge of web screenshots ---------- */
@property --fb-a {syntax: "<angle>"; inherits: false; initial-value: 0deg;}
.fb {position: relative; isolation: isolate; transition: box-shadow 400ms var(--ease-out);}
.fb::before {content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--fb-a), rgba(1,230,237,0) 0 52%, rgba(1,230,237,0.55) 68%, #01e6ed 84%, #ffffff 92%, rgba(1,230,237,0) 100%);
  -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 exclude, linear-gradient(#000 0 0);
  animation: fb-spin 9s linear infinite;}
.fb:hover::before {animation-duration: 4s;}
.fb:hover {box-shadow: 0 0 0 1px rgba(1,230,237,0.35), 0 40px 90px -36px rgba(2,23,38,0.5), 0 0 46px -10px rgba(1,230,237,0.45);}
.fb.is-pulse {animation: fb-pulse 800ms var(--ease-out);}
@keyframes fb-spin {to {--fb-a: 360deg;}}
@keyframes fb-pulse {0% {box-shadow: 0 0 0 1px rgba(1,230,237,0.9), 0 0 0 0 rgba(1,230,237,0.5);} 100% {box-shadow: 0 0 0 1px rgba(1,230,237,0), 0 0 0 26px rgba(1,230,237,0);}}
html.mo .fb::before {clip-path: inset(0 0 100% 0);}
html.mo .fb.is-in::before {clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-out);}
@media (prefers-reduced-motion: reduce) {.fb::before {animation: none;}}

/* ---------- Device: studio-lit 3D phone for the app stage ---------- */
.dev3 {perspective: 1400px; --rx: 0deg; --ry: 0deg; --ry-n: 0;}
.dev3__sway, .dev3__body {transform-style: preserve-3d;}
.dev3__body {position: relative; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 320ms var(--ease-out);}
.dev3.is-drag .dev3__body {transition: none; cursor: grabbing;}
.dev3.is-back .dev3__body {transition: transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1);}
.dev3.is-live .dev3__sway {animation: dev3-sway 9s ease-in-out infinite;}
.dev3.is-live .phone--stage {cursor: grab;}
@keyframes dev3-sway {0%, 100% {transform: rotateY(-3deg) rotateX(1deg);} 50% {transform: rotateY(3deg) rotateX(-1deg);}}
.phone--stage {border-radius: 46px; padding: 10px; position: relative;
  background: linear-gradient(150deg, #43607a 0%, #0f2638 30%, #08202f 62%, #34546c 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.28), inset 0 0 0 4px #06151f, 0 60px 90px -40px rgba(2,23,38,0.75), 0 22px 36px -22px rgba(2,23,38,0.55);}
.phone--stage::after {content: ""; position: absolute; inset: 10px; border-radius: 36px; pointer-events: none; z-index: 4; mix-blend-mode: screen;
  background: linear-gradient(112deg, rgba(255,255,255,0) 28%, rgba(255,255,255,0.2) 44%, rgba(255,255,255,0) 58%) 0 0 / 280% 100% no-repeat;
  background-position: calc(50% + var(--ry-n) * 55%) 0;}
.dev3__btn {position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #5a7a93, #1b3448); transform: translateZ(-2px);}
.dev3__btn--l1 {left: -3px; top: 118px; height: 34px;}
.dev3__btn--l2 {left: -3px; top: 164px; height: 56px;}
.dev3__btn--r {right: -3px; top: 150px; height: 78px;}
@media (max-width: 860px) {.dev3.is-live .dev3__sway {animation: none;}}
@media (prefers-reduced-motion: reduce) {.dev3.is-live .dev3__sway {animation: none;}}

/* ---------- Magic transform: mail goes in, results come out ---------- */
.mtx {position: relative; width: 100%; max-width: 580px; justify-self: end;}
.mtx__list {display: grid; gap: 12px;}
.mtx__list li {display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: start; padding: 16px 18px; background: var(--white); border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(2,23,38,0.08);}
.mtx__list li > b {font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; grid-column: 2;}
.mtx__list li > span {grid-column: 2; color: var(--ink-soft); font-size: var(--step-small);}
.mtx__ic {grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--navy); color: var(--cyan);}
.mtx__ic svg {width: 18px; height: 18px;}
.mtx__note {margin-top: 14px; font-size: var(--step-small); color: var(--ink-soft);}
.mtx.is-live .mtx__list {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.mtx__stage {display: none;}
.mtx.is-live .mtx__stage {display: block; position: relative; height: 340px; border-radius: 24px; background: var(--navy); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(2,23,38,0.55);}
.mtx__docs {position: absolute; left: 0; top: 0; bottom: 0; width: 50%; overflow: hidden;}
.mtx__axis {position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(180deg, rgba(1,230,237,0), rgba(1,230,237,0.9) 20%, rgba(1,230,237,0.9) 80%, rgba(1,230,237,0));}
.mtx__core {position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; display: grid; place-items: center; border-radius: 18px; background: #06293f; box-shadow: 0 0 0 1px rgba(1,230,237,0.55), 0 0 40px 2px rgba(1,230,237,0.35);}
.mtx__core svg {width: 30px; height: auto; fill: var(--cyan);}
.mtx__core.is-hit {animation: mtx-hit 600ms var(--ease-out);}
@keyframes mtx-hit {0% {transform: scale(1);} 35% {transform: scale(1.14); box-shadow: 0 0 0 1px #01e6ed, 0 0 70px 8px rgba(1,230,237,0.7);} 100% {transform: scale(1);}}
.mtx__doc {position: absolute; top: 50%; right: 0; width: 210px; margin-top: -58px; padding: 14px 16px; border-radius: 14px; background: var(--white); color: var(--navy); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6);}
.mtx__doc b {display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; line-height: 1.2;}
.mtx__doc span {display: block; margin-top: 6px; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.35;}
.mtx__doc i {display: block; height: 6px; margin-top: 12px; border-radius: 3px; background: var(--mist);}
.mtx__doc i + i {width: 62%; margin-top: 7px;}
.mtx__out {position: absolute; left: 50%; top: 0; bottom: 0; right: 0; pointer-events: none;}
.mtx__chip {position: absolute; left: 36px; top: 50%; margin-top: -26px; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 52px); padding: 12px 16px; border-radius: 14px; background: #0c3a57; color: var(--white); box-shadow: 0 0 0 1px rgba(1,230,237,0.5); font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; line-height: 1.2;}
.mtx__chip svg {flex: none; width: 18px; height: 18px; color: var(--cyan);}
.mtx__p {position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--cyan);}
.mtx__p:nth-child(3n) {background: var(--white);}
@media (max-width: 860px) {
  .mtx {justify-self: stretch; max-width: none;}
  .mtx.is-live .mtx__stage {height: 380px;}
  .mtx__docs {left: 0; right: 0; top: 0; bottom: 50%; width: auto; height: auto;}
  .mtx__axis {left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; background: linear-gradient(90deg, rgba(1,230,237,0), rgba(1,230,237,0.9) 20%, rgba(1,230,237,0.9) 80%, rgba(1,230,237,0));}
  .mtx__doc {left: 0; right: 0; top: auto; bottom: 0; margin: 0 auto;}
  .mtx__out {left: 0; right: 0; top: 50%; bottom: 0;}
  .mtx__chip {left: 0; right: 0; top: 30px; margin: 0 auto; width: fit-content; max-width: calc(100% - 32px);}
}

/* Rotating text: the last word of the closing line cycles through what is yours */
.sr-only {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
.rt {display: inline-block; vertical-align: bottom; padding: 0 0.28em; border-radius: 0.18em; background: var(--cyan); color: var(--navy);}
.rt.is-live {position: relative; overflow: hidden; height: 1.12em; line-height: 1.12; transition: width 450ms var(--ease-out);}
.rt__word {position: absolute; left: 0.28em; top: 0; display: inline-block; white-space: nowrap;}
.rt__c {display: inline-block; will-change: transform;}

/* Hero cards that move: the AI summary writes itself, then Privacy mode switches it off.
   One 10s loop for both so they stay in step. Static (switch on, summary shown) without motion. */
.fc--priv .toggle2 {background: rgba(255, 255, 255, 0.2);}
.fc--priv .toggle2::before {content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--cyan);}
.fc--priv .toggle2 b {right: auto; left: 4px; transform: translateX(28px); background: var(--white);}
.fc--priv .toggle2 b::after {content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--navy);}
.fc--priv small {display: grid;}
.fc--priv small > span {grid-area: 1 / 1;}
.pm__off {opacity: 0;}
@media (prefers-reduced-motion: no-preference) {
  .fc--priv .toggle2::before {animation: pm-on 10s ease-in-out infinite;}
  .fc--priv .toggle2 b {animation: pm-knob 10s ease-in-out infinite;}
  .fc--priv .toggle2 b::after {animation: pm-on 10s ease-in-out infinite;}
  .pm__on {animation: pm-on 10s ease-in-out infinite;}
  .pm__off {animation: pm-off 10s ease-in-out infinite;}
  .fc--ai .fc__h .ic {animation: ai-spark 10s ease-in-out infinite;}
  .fc--ai .fc__h, .fc--ai .fc__sum {animation: ai-dim 10s ease-in-out infinite;}
  .fc__sum li {animation: ai-li1 10s ease-in-out infinite;}
  .fc__sum li:nth-child(2) {animation-name: ai-li2;}
  .fc__sum li:nth-child(3) {animation-name: ai-li3;}
}
@keyframes pm-knob {0%, 58% {transform: translateX(0);} 64%, 92% {transform: translateX(28px);} 98%, 100% {transform: translateX(0);}}
@keyframes pm-on {0%, 58% {opacity: 0;} 64%, 92% {opacity: 1;} 98%, 100% {opacity: 0;}}
@keyframes pm-off {0%, 58% {opacity: 1;} 64%, 92% {opacity: 0;} 98%, 100% {opacity: 1;}}
@keyframes ai-dim {0%, 58% {opacity: 1;} 64%, 92% {opacity: 0.3;} 98%, 100% {opacity: 1;}}
@keyframes ai-spark {0%, 4% {transform: scale(1) rotate(0);} 10% {transform: scale(1.3) rotate(90deg);} 24%, 100% {transform: scale(1) rotate(180deg);}}
@keyframes ai-li1 {0%, 6% {opacity: 0; transform: translateY(8px);} 12%, 94% {opacity: 1; transform: none;} 100% {opacity: 0; transform: translateY(8px);}}
@keyframes ai-li2 {0%, 12% {opacity: 0; transform: translateY(8px);} 18%, 94% {opacity: 1; transform: none;} 100% {opacity: 0; transform: translateY(8px);}}
@keyframes ai-li3 {0%, 18% {opacity: 0; transform: translateY(8px);} 24%, 94% {opacity: 1; transform: none;} 100% {opacity: 0; transform: translateY(8px);}}

/* Home AI section: card stack on top, "mail in, answer out" below */
.aiswap--mtx {margin-top: clamp(56px, 7vw, 104px); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);}
.aiswap--mtx .mtx {justify-self: start;}
.aiswap--mtx .diff__lead {margin-top: 20px;}
@media (max-width: 860px) {.aiswap--mtx {grid-template-columns: 1fr;} .aiswap--mtx .aiswap__copy {order: -1;} .aiswap--mtx .mtx {justify-self: stretch;}}

/* The nav floats over the hero, which reserves its room with a navy top border (--nav-h). */
.hero, .phero {border-top: var(--nav-h) solid var(--navy); transform: translateZ(0);}

/* Footer: the same envelope notch as the hero, drawn in the colour of the section above it. */
.foot {--from: var(--white);}
.foot::before {content: ""; position: absolute; top: -1px; left: 0; right: 0; height: var(--v); background: var(--from); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none;}
main:has(> :last-child.on-mist) + .foot {--from: var(--mist);}
main:has(> :last-child.on-dark) + .foot::before {display: none;}
.foot {padding-top: calc(clamp(64px, 8vw, 110px) + 8px);}

/* Import section: room for the notches above and below; smaller closing banner */
.imp.seam {padding-block: clamp(96px, 9vw, 140px);}
.cta {padding-block: clamp(64px, 8vw, 110px);}
.cta__act {margin-top: clamp(24px, 3vw, 36px);}

.imp .chip-pill {background: var(--white); box-shadow: 0 0 0 1px rgba(2, 23, 38, 0.08);}
.imp .imp__chips + .seal-sec__more {margin-top: clamp(24px, 3vw, 36px);}

/* Card Nav: a floating bar that springs open into a row of cards, one per menu group.
   Size is adjustable from the variables on .cnav (width, bar height, radius, offset, gaps). */
.cnav {--cn-w: 920px; --cn-h: 60px; --cn-top: 12px; --cn-radius: 22px; --cn-pad: 10px; --cn-gap: 10px; --cn-card-h: 168px;
  position: sticky; top: 0; z-index: 60; height: 0; color: var(--white); --focus: var(--focus-on-dark);}
.cnav__bar {position: absolute; top: var(--cn-top); left: 50%; width: min(var(--cn-w), calc(100% - 24px)); height: var(--cn-h); transform: translateX(-50%); overflow: hidden; border-radius: var(--cn-radius);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 60%); background-color: rgba(5, 24, 40, 0.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 18px 44px -14px rgba(0, 10, 20, 0.65);
  transition: height 520ms cubic-bezier(0.22, 1, 0.36, 1), background-color 400ms ease;}
.cnav[data-open="true"] .cnav__bar {background-color: rgba(5, 22, 37, 0.97);}
.cnav__top {position: relative; z-index: 2; height: var(--cn-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--cn-pad) 0 6px;}
.cnav__burger {display: grid; place-content: center; gap: 6px; width: 48px; height: 48px; border: 0; border-radius: 14px; background: transparent; cursor: pointer; color: inherit;}
.cnav__burger:hover {background: rgba(255, 255, 255, 0.08);}
.cnav__burger span {display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);}
.cnav[data-open="true"] .cnav__burger span:first-child {transform: translateY(4px) rotate(45deg);}
.cnav[data-open="true"] .cnav__burger span:last-child {transform: translateY(-4px) rotate(-45deg);}
.cnav__logo {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; min-height: 44px;}
.cnav__logo img {height: 22px; width: auto; display: block;}
.cnav__right {display: flex; align-items: center; gap: 6px;}
.cnav__login {padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 500; color: rgba(255, 255, 255, 0.82);}
.cnav__login:hover {color: #fff; background: rgba(255, 255, 255, 0.08);}
.cnav .btn {min-height: 42px; padding: 0 20px; border-radius: 999px; font-size: 1rem;}
.cnav__panel {position: absolute; z-index: 1; top: var(--cn-h); left: 0; right: 0; padding: 0 var(--cn-pad) var(--cn-pad); visibility: hidden; transition: visibility 0s linear 520ms;}
.cnav[data-open="true"] .cnav__panel {visibility: visible; transition-delay: 0s;}
.cnav__cards {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cn-gap);}
.cnav__card {display: flex; flex-direction: column; gap: 14px; min-height: var(--cn-card-h); padding: 16px 18px 18px; border-radius: calc(var(--cn-radius) - 8px); background: var(--c, #0a2f48);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  opacity: 0; transform: translateY(36px); transition: opacity 160ms ease, transform 160ms ease;}
.cnav[data-open="true"] .cnav__card {opacity: 1; transform: none; transition: opacity 420ms ease calc(160ms + var(--i) * 80ms), transform 560ms cubic-bezier(0.22, 1, 0.36, 1) calc(120ms + var(--i) * 80ms);}
.cnav__card h3 {font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: #fff;}
.cnav__card ul {display: grid; gap: 4px; margin-top: auto;}
.cnav__card a {display: flex; align-items: center; gap: 8px; padding: 6px 0; text-decoration: none; font-size: 1rem; color: var(--on-navy-soft); transition: color 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);}
.cnav__card a svg {width: 15px; height: 15px; flex: none; color: var(--cyan); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);}
.cnav__card a:hover, .cnav__card a:focus-visible {color: #fff; transform: translateX(3px);}
.cnav__card a:hover svg {transform: translate(2px, -2px);}
.cnav__card a[aria-current="page"] {color: #fff; font-weight: 600;}
.cnav__card li {opacity: 0; transform: translateX(-10px); transition: opacity 120ms ease, transform 120ms ease;}
.cnav[data-open="true"] .cnav__card li {opacity: 1; transform: none; transition: opacity 360ms ease calc(300ms + var(--i) * 80ms + var(--j) * 50ms), transform 460ms cubic-bezier(0.22, 1, 0.36, 1) calc(300ms + var(--i) * 80ms + var(--j) * 50ms);}
.cnav__foot {display: none;}
@media (max-width: 880px) {
  .cnav {--cn-h: 54px; --cn-top: 8px; --cn-pad: 8px; --cn-card-h: 0px;}
  .cnav__right {display: none;}
  .cnav__cards {grid-template-columns: 1fr;}
  .cnav__card {flex-direction: column; gap: 6px;}
  .cnav__foot {display: flex; gap: 10px; margin-top: var(--cn-gap); opacity: 0; transition: opacity 120ms ease;}
  .cnav[data-open="true"] .cnav__foot {opacity: 1; transition: opacity 420ms ease 420ms;}
  .cnav__foot a {flex: 1; justify-content: center; text-align: center; display: inline-flex; align-items: center; min-height: 48px; border-radius: 999px; text-decoration: none; font-weight: 600; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);}
  .cnav__foot .btn--cyan {color: var(--navy); box-shadow: none;}
}
@media (prefers-reduced-motion: reduce) {
  .cnav__bar, .cnav__card, .cnav__card li, .cnav__burger span, .cnav__foot {transition: none !important;}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {.cnav__bar {background: #06182a;}}

/* "Three ways" tiles that match their columns: a link that expires behind a password, and a tracker that gets stripped */
.f3__ring {width: 30px; height: 30px; flex: none; transform: rotate(-90deg);}
.f3__ring-bg {stroke: rgba(1, 230, 237, 0.25);}
.f3__ring-fg {stroke: var(--cyan); stroke-dasharray: 100; stroke-dashoffset: 30;}
.f3--lnk .f3__dots {margin-left: 6px;}
.f3--lnk .f3__dots i {background: #fff;}
.f3__shield {width: 28px; height: 28px; flex: none;}
.f3__chip {position: relative; padding: 5px 10px; border-radius: 8px; font: 600 0.75rem var(--font-mono); letter-spacing: 0.02em; color: #fff; background: rgba(255, 255, 255, 0.12); opacity: 0.4;}
.f3__chip::after {content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: var(--cyan); transform-origin: left; transform: scaleX(1);}
@media (prefers-reduced-motion: no-preference) {
  .f3--lnk .f3__ring-fg {animation: f3-ring 5s linear infinite;}
  .f3--lnk .f3__dots i {animation: f3-dot 5s ease-in-out infinite;}
  .f3--lnk .f3__dots i:nth-child(2) {animation-delay: 0.15s;} .f3--lnk .f3__dots i:nth-child(3) {animation-delay: 0.3s;}
  .f3--lnk .f3__dots i:nth-child(4) {animation-delay: 0.45s;} .f3--lnk .f3__dots i:nth-child(5) {animation-delay: 0.6s;}
  .f3--trk .f3__chip {animation: f3-chip 5s ease-in-out infinite;}
  .f3--trk .f3__chip::after {animation: f3-strike 5s ease-in-out infinite;}
  .f3--trk .f3__shield {animation: f3-shield 5s ease-in-out infinite;}
}
@keyframes f3-ring {0%, 6% {stroke-dashoffset: 0;} 94%, 100% {stroke-dashoffset: 100;}}
@keyframes f3-chip {0%, 8% {opacity: 0; transform: translateX(14px);} 20%, 38% {opacity: 1; transform: none;} 52%, 90% {opacity: 0.35; transform: translateX(-4px);} 100% {opacity: 0; transform: translateX(14px);}}
@keyframes f3-strike {0%, 40% {transform: scaleX(0);} 52%, 100% {transform: scaleX(1);}}
@keyframes f3-shield {0%, 38% {transform: scale(1);} 46% {transform: scale(1.2);} 56%, 100% {transform: scale(1);}}

/* Card Nav: Log in sits as its own button to the left of Get started, on every width */
.cnav__login {box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); min-height: 42px; display: inline-flex; align-items: center; padding: 0 18px;}
.cnav__login:hover {box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);}
@media (max-width: 880px) {
  .cnav__right {display: flex; margin-left: auto;}
  .cnav__logo {position: static; transform: none; margin-left: 2px;}
  .cnav__logo img {height: 20px;}
  .cnav__login, .cnav .btn {min-height: 38px; padding: 0 14px; font-size: 0.9375rem;}
  .cnav__foot {display: none !important;}
}
@media (max-width: 400px) {.cnav__logo img {height: 18px;} .cnav__login, .cnav .btn {padding: 0 11px; font-size: 0.875rem;} .cnav__burger {width: 42px;}}
@media (max-width: 400px) {.cnav__logo img {height: 17px;} .cnav__right {gap: 4px;}}

.cta--home .wrap {text-align: center;}
.cta--home .cta__line {max-width: none; margin-inline: auto;}