: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);
  --lh-body: 1.55;
  --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: var(--lh-body);
  -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 {--foot-link-fs: 0.9375rem;}
.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: var(--foot-link-fs);}
.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;}
.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) {
  .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;}
}
@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%;}
}
.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;}
}
.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;}
.feat__text h2 {font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); letter-spacing: -0.02em;}

/* ---------- Home hero (v2): centred copy, trust row, product window with callouts ----------
   One appearance (the site's navy hero). Values with no site token are scoped here. */
.hero--v2 {min-height: 0; display: block; padding-block: clamp(40px, 5vw, 64px) calc(var(--v) + 8px);
  background: radial-gradient(900px 520px at 78% 38%, rgba(1, 230, 237, 0.13), transparent 70%), var(--navy);
  --h-soft: var(--on-navy-soft); --h-faint: #8aa6b8; --h-icon: var(--cyan); --h-link: var(--cyan);
  --h-card: var(--navy-800); --h-card-2: #0d3652; --h-line: #1f4560; --h-line-2: #2b5473; --h-mark: #3a6882;
  --h-plane: var(--navy-800); --h-btn-hover: #33ebf1;
  --h-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 50px -20px rgba(0, 0, 0, 0.7);
  --h-win-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 40px 90px -30px rgba(0, 0, 0, 0.8);}
.hero__planes {position: absolute; inset: auto 0 0 0; height: 62%; pointer-events: none; overflow: hidden; opacity: 0.5;
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent); mask-image: linear-gradient(to top, #000 45%, transparent);}
.hero__plane {position: absolute; bottom: -20%; width: 62%; height: 140%; background: var(--h-plane);}
.hero__plane--l {left: -14%; transform: skewX(-22deg); border-radius: 0 48px 0 0;}
.hero__plane--r {right: -14%; transform: skewX(22deg); border-radius: 48px 0 0 0;}
.hero__in {position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center;}
.hero--v2 h1 {font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; max-width: 15em; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4.25rem);}
.hero--v2 .lead {margin-top: 16px; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.5; max-width: 36em; color: var(--h-soft); text-wrap: pretty;}
.hero--v2 .hero__actions {margin-top: 32px; justify-content: center; gap: 12px 28px;}
.hero__cta {min-height: 56px; padding: 0 28px; border-radius: 999px; font-size: 1.0625rem; white-space: nowrap; -webkit-tap-highlight-color: transparent;}
.hero__cta:hover {background: var(--cyan);}
.hero__cta:active {transform: scale(0.96);}
.hero__more {display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border-radius: 8px; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--h-link); text-decoration: none;}
.hero__more .hero__ic {width: 18px; height: 18px;}
@media (hover: hover) {
  .hero__cta:hover {background: var(--h-btn-hover);}
  .hero__more:hover {text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 2px;}
}
.hero__ic {flex: none; width: 24px; height: 24px;}
.hero__trust {margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 56px;}
.hero__trust li {display: flex; align-items: center; gap: 12px; text-align: left;}
.hero__tic {width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--h-card); box-shadow: inset 0 0 0 1px var(--h-line), var(--h-shadow); color: var(--h-icon);}
.hero__tic .hero__ic {width: 22px; height: 22px;}
.hero__tt {font-size: 0.9375rem; line-height: 1.35; color: var(--h-soft);}
.hero__tt b {display: block; color: var(--white); font-weight: 600;}

/* The scene crops the window with a straight edge above the hero's V-cut */
.hero__scene {position: relative; width: min(1040px, 100%); height: 520px; margin-top: 56px; flex: none; text-align: left;}
.hero__clip {position: absolute; inset: 0; overflow: hidden;}
.hero__win {position: absolute; left: 50%; top: 0; translate: -50% 0; width: 820px; height: 560px; display: grid; grid-template-columns: 230px minmax(0, 1fr);
  background: var(--h-card); color: var(--white); box-shadow: inset 0 0 0 1px var(--h-line), var(--h-win-shadow); border-radius: 24px 24px 0 0; overflow: hidden; font-size: 0.875rem; line-height: 1.35;}
.hero__side {display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; background: var(--h-card-2); box-shadow: inset -1px 0 0 var(--h-line);}
.hero__compose {display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin-bottom: 10px; border-radius: 12px; background: var(--cyan); color: var(--navy); font: 600 0.875rem var(--font-display);}
.hero__compose .hero__ic {width: 16px; height: 16px;}
.hero__sitem {display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 10px; color: var(--h-soft);}
.hero__sitem.is-on {background: var(--h-card); color: var(--white); font-weight: 600;}
.hero__sitem .hero__ic {width: 16px; height: 16px; color: var(--h-icon);}
.hero__scount {margin-inline-start: auto; font-size: 0.75rem; color: var(--h-faint); font-variant-numeric: tabular-nums;}
.hero__main {display: flex; flex-direction: column; min-width: 0;}
.hero__tb {display: flex; align-items: center; gap: 10px; padding: 14px 18px; box-shadow: inset 0 -1px 0 var(--h-line);}
.hero__search {flex: 1; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 10px; background: var(--h-card-2); color: var(--h-faint);}
.hero__search .hero__ic {width: 16px; height: 16px;}
.hero__av {width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--h-card-2); box-shadow: inset 0 0 0 1px var(--h-line); font: 600 0.8125rem var(--font-display);}
.hero__msg {padding: 18px 20px; box-shadow: inset 0 -1px 0 var(--h-line);}
.hero__from {display: flex; align-items: center; gap: 12px;}
.hero__pav {width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--h-card-2); font: 600 0.9375rem var(--font-display);}
.hero__who {min-width: 0; display: grid;}
.hero__who b {font-weight: 600; font-size: 0.9375rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hero__who span {font-size: 0.875rem; line-height: 1.3; color: var(--h-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hero__when {margin-inline-start: auto; flex: none; font-size: 0.8125rem; color: var(--h-faint);}
.hero__cipher {margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--h-card-2); font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; letter-spacing: 0.08em; color: var(--h-mark); word-break: break-all;}
.hero__att {display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 30px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--h-line); font-size: 0.8125rem;}
.hero__att .hero__ic {width: 14px; height: 14px; color: var(--h-icon);}
.hero__body {margin-top: 12px; font-size: 0.9375rem; line-height: 1.55;}
.hero__ghost {color: var(--h-faint);}
.hero__hint {display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 8px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--h-line-2); font-size: 0.75rem; color: var(--h-soft);}
.hero__hint kbd {font: inherit; font-weight: 600; color: var(--white); padding: 0 5px; border-radius: 4px; background: var(--h-card-2);}
.hero__lock {position: absolute; left: 50%; top: 0; translate: -50% -50%; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: var(--h-card); box-shadow: inset 0 0 0 1px var(--h-line), var(--h-shadow); color: var(--h-icon);}
.hero__lock .hero__ic {width: 30px; height: 30px;}
.hero__co {position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 999px; background: var(--h-card); color: var(--white); box-shadow: inset 0 0 0 1px var(--h-line), var(--h-shadow);
  font: 600 1rem var(--font-display); letter-spacing: -0.01em; white-space: nowrap; line-height: 1.25;}
.hero__coic {width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--h-card-2); color: var(--h-icon);}
.hero__coic .hero__ic {width: 18px; height: 18px;}
.hero__cot {display: block;}
.hero__co small {display: block; margin-top: 1px; font: 400 0.8125rem var(--font-text); letter-spacing: 0; color: var(--h-soft);}
.hero__co--1 {left: -10px; top: 96px;}
.hero__co--2 {right: -6px; top: 176px;}
.hero__co--3 {left: 36px; top: 356px;}
.hero__co--4 {right: 40px; top: 420px;}
[dir="rtl"] .hero__more .hero__ic {transform: scaleX(-1);}
@media (max-width: 1100px) {
  .hero__trust {gap: 14px 36px;}
  .hero__scene {height: 480px; margin-top: 44px;}
  .hero__win {width: 720px; grid-template-columns: 200px minmax(0, 1fr);}
  .hero__co--1 {left: -4px;} .hero__co--2 {right: -4px;} .hero__co--3 {left: 12px;} .hero__co--4 {right: 12px;}
}
@media (max-width: 880px) {
  .hero--v2 {padding-top: clamp(32px, 5vw, 48px); padding-bottom: calc(var(--v) + 8px);}
}
@media (max-width: 760px) {
  .hero--v2 .hero__actions {flex-direction: column; gap: 12px;}
  .hero__cta {width: 100%; max-width: 360px;}
  .hero__trust {flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px;}
  .hero__scene {height: 420px; margin-top: 36px;}
  .hero__win {width: calc(100% + 40px); grid-template-columns: minmax(0, 1fr);}
  .hero__side {display: none;}
  .hero__co {font-size: 0.875rem; padding: 10px 14px 10px 10px;}
  .hero__coic {width: 32px; height: 32px;}
  .hero__co--1 {left: 0; top: 72px;} .hero__co--2 {right: 0; top: 150px;} .hero__co--3 {left: 8px; top: 300px;} .hero__co--4 {right: 8px; top: 360px;}
}
@media (max-width: 420px) {
  .hero--v2 h1 {font-size: 2.125rem;}
  .hero__scene {height: 400px;}
  .hero__co--2 {top: 140px;}
  .hero__co--4 {display: none;}
}

/* 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 */
.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;}

/* 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 .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 .hero--v2 .hero__chunk, html.mo .hero--v2 .hero__co {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 */
.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 {--rt-h: 1.2em; display: inline-block; vertical-align: bottom; position: relative; overflow: hidden; height: var(--rt-h); line-height: var(--rt-h); padding: 0 0.28em; border-radius: 0.18em; background: var(--cyan); color: var(--navy); white-space: nowrap;}
.rt.is-live {transition: width 450ms var(--ease-out);}
.rt__word {position: absolute; left: 0.28em; top: 0; height: var(--rt-h); line-height: var(--rt-h); display: block; white-space: nowrap;}
.rt__c {display: inline-block; height: var(--rt-h); line-height: var(--rt-h); will-change: transform;}


/* 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;}

.foot .foot__social {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;}
.foot .foot__social a {display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--on-navy-soft); box-shadow: inset 0 0 0 1px var(--line-dark); transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;}
.foot .foot__social a:hover {color: var(--navy); background: var(--cyan); box-shadow: none; text-decoration: none;}
.foot .foot__social svg {display: block;}

/* Safari and iOS tint their top bar from the page: navy canvas behind everything, white body on top */
html {background: var(--navy);}

/* Phone nav: plain Log in link, bigger logo, tighter buttons */
@media (max-width: 560px) {
  .cnav__top {padding-left: 4px;}
  .cnav__burger {width: 44px;}
  .cnav__logo {margin-left: 0;}
  .cnav__logo img {height: 21px;}
  .cnav__right {gap: 2px; flex: none;}
  .cnav__login, .cnav .btn {white-space: nowrap;}
  .cnav__login {box-shadow: none; padding: 0 10px; min-height: 36px; font-weight: 600; color: #fff;}
  .cnav__login:hover {box-shadow: none; background: rgba(255, 255, 255, 0.08);}
  .cnav .btn {min-height: 36px; padding: 0 15px; font-size: 0.9375rem;}
}
@media (max-width: 380px) {
  .cnav__logo img {height: 20px;}
  .cnav__login {padding: 0 7px; font-size: 0.875rem;}
  .cnav .btn {padding: 0 12px; font-size: 0.875rem;}
  .cnav__burger {width: 40px;}
}

/* ---- language switcher ---- */
.foot__meta {display: flex; align-items: center; gap: 20px; flex-wrap: wrap;}
.langsw {position: relative; display: inline-block;}
.langsw__btn {display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-dark); background: transparent; color: var(--white); font: inherit; font-size: 0.875rem; cursor: pointer; transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);}
.langsw__btn:hover, .langsw__btn[aria-expanded="true"] {border-color: var(--cyan); background: rgba(1, 230, 237, 0.08);}
.langsw__btn:focus-visible, .langsw__menu a:focus-visible {outline: 2px solid var(--cyan); outline-offset: 2px;}
.langsw__btn svg {width: 16px; height: 16px; flex: none;}
.langsw__btn svg:last-child {width: 12px; height: 12px; transition: transform 160ms var(--ease-out);}
.langsw__btn[aria-expanded="true"] svg:last-child {transform: rotate(180deg);}
.langsw__menu {position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; z-index: 60; min-width: 220px; max-height: min(70vh, 420px); overflow-y: auto; padding: 8px; border-radius: 14px; background: #04263b; border: 1px solid var(--line-dark); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);}
.langsw__menu[hidden] {display: none;}
.langsw__menu ul {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px;}
.langsw__menu a {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--white); text-decoration: none; font-size: 0.9375rem;}
.langsw__menu a:hover {background: rgba(255, 255, 255, 0.08);}
.langsw__menu a[aria-current="true"] {color: var(--cyan);}
.langsw__menu a[aria-current="true"]::after {content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);}
@media (max-width: 560px) {
  .langsw__menu {position: fixed; inset: auto 12px 12px 12px; max-height: 70vh; min-width: 0;}
  .langsw__menu ul {grid-template-columns: 1fr 1fr;}
}

/* ---- RTL (Arabic, Urdu) and extended-Latin type ---- */
:root[dir="rtl"] {--font-display: "Noto Sans Arabic", "Funnel Display", Tahoma, Arial, sans-serif; --font-text: "Noto Sans Arabic", "Funnel Sans", Tahoma, Arial, sans-serif;}
:root[dir="rtl"] *, :root[dir="rtl"] *::before, :root[dir="rtl"] *::after {letter-spacing: 0 !important;}
:root[dir="rtl"] body {line-height: 1.8;}
:root[dir="rtl"] h1, :root[dir="rtl"] h2, :root[dir="rtl"] h3 {line-height: 1.3;}
:root[dir="rtl"] .card__q {text-align: right;}
:root[dir="rtl"] .cipher, :root[dir="rtl"] code, :root[dir="rtl"] .mono {direction: ltr; text-align: left;}

/* ---------------------------------------------------------------- Docs and blog */
.phero--doc {padding-block: clamp(36px, 5vw, 72px) clamp(72px, 8vw, 120px);}
.phero--doc h1 {font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4rem); max-width: 16em; line-height: 1.04;}
.phero--doc .lead {max-width: 34em; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);}
.phero--doc .phero__mark {width: clamp(110px, 12vw, 190px);}
.phero--dochome h1 {font-size: clamp(2.8rem, 1rem + 5.4vw, 5.5rem);}
.crumbs {display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 18px; font-size: var(--step-small); color: var(--on-navy-soft);}
.crumbs a {color: var(--on-navy-soft); text-underline-offset: 0.2em;}
.crumbs a:hover {color: var(--white);}
.crumbs [aria-current] {color: var(--white);}
.bbyline {margin-top: 22px; font-size: var(--step-small); color: var(--on-navy-soft);}

/* search */
.dsearch {position: relative; max-width: 560px;}
.dsearch__label {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.dsearch__input {width: 100%; min-height: 50px; padding: 0 16px; border-radius: var(--radius); border: 2px solid var(--line-light); background: var(--white); color: var(--ink); font: inherit; font-size: 1rem;}
.dsearch__input::placeholder {color: var(--ink-soft);}
.dsearch__input:focus-visible {outline: 3px solid var(--navy); outline-offset: 2px; border-color: var(--navy);}
.phero .dsearch {margin-top: 32px;}
.phero .dsearch__input {border-color: transparent;}
.phero .dsearch__input:focus-visible {outline-color: var(--cyan);}
.dsearch__results {position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: min(70vh, 480px); overflow: auto; margin: 0; padding: 6px; background: var(--white); color: var(--ink); border-radius: var(--radius); box-shadow: 0 0 0 2px var(--navy), 0 18px 40px rgba(2, 23, 38, 0.28);}
.dsearch__results[hidden] {display: none;}
.dsearch__results a {display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit;}
.dsearch__results a:hover, .dsearch__results a[aria-selected="true"] {background: var(--mist);}
.dsearch__t {display: block; font: 600 1rem/1.25 var(--font-display); letter-spacing: -0.01em;}
.dsearch__s {display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--ink-soft);}
.dsearch__x {display: block; margin-top: 4px; font-size: 0.875rem; line-height: 1.4; color: var(--ink-soft);}
.dsearch__x mark, .dsearch__t mark {background: rgba(1, 230, 237, 0.45); color: inherit; border-radius: 2px;}
.dsearch__none {padding: 14px 12px; color: var(--ink-soft); font-size: 0.9375rem;}

/* docs home */
.dhome {padding-block: clamp(56px, 7vw, 100px);}
.dhome__grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 64px);}
.dhome__card {border-top: 2px solid var(--navy); padding-top: 22px;}
.dhome__card h2 {font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); letter-spacing: -0.02em; max-width: none;}
.dhome__card h2 a {text-decoration: none;}
.dhome__card h2 a:hover {text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em;}
.dhome__card > p {margin-top: 10px; color: var(--ink-soft); font-size: 1rem; line-height: 1.45; max-width: 32em;}
.dhome__card ul {margin-top: 16px; display: grid; gap: 2px;}
.dhome__card li a {display: block; padding: 5px 0; font-size: 1rem; text-decoration: none; color: var(--ink);}
.dhome__card li a:hover {text-decoration: underline; text-decoration-color: var(--navy-700); text-underline-offset: 0.2em;}

/* docs article layout: sidebar, article, on-this-page */
.dlayout {padding-block: clamp(32px, 4vw, 56px) clamp(64px, 8vw, 110px);}
.dgrid {display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: clamp(28px, 4vw, 56px); align-items: start;}
.dside, .dright {position: sticky; top: calc(var(--nav-h) + 16px); max-height: calc(100vh - var(--nav-h) - 32px); overflow: auto; overscroll-behavior: contain;}
.dside .dsearch {margin-bottom: 18px;}
.dnav__toggle {display: none;}
.dnav__sec {border-top: 1px solid var(--line-light);}
.dnav__sec summary {list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 11px 0; font: 600 1rem/1.2 var(--font-display); letter-spacing: -0.01em;}
.dnav__sec summary::-webkit-details-marker {display: none;}
.dnav__sec summary::after {content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 160ms var(--ease-out);}
.dnav__sec[open] summary::after {transform: rotate(-135deg) translateY(-2px);}
.dnav__sec ul {padding-bottom: 12px;}
.dnav__sec li a {display: block; padding: 6px 10px; margin-inline: -10px; border-radius: 8px; font-size: 0.9375rem; line-height: 1.3; color: var(--ink-soft); text-decoration: none;}
.dnav__sec li a:hover {background: var(--mist); color: var(--ink);}
.dnav__sec li a[aria-current="page"] {background: var(--navy); color: var(--white); font-weight: 600;}
.dtoc__title {font: 600 0.9375rem/1.2 var(--font-display); margin-bottom: 10px;}
.dtoc ul {border-left: 2px solid var(--line-light);}
.dtoc a {display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 0.875rem; line-height: 1.35; color: var(--ink-soft); text-decoration: none;}
.dtoc a:hover {color: var(--ink);}
.dtoc a.is-active {color: var(--ink); border-left-color: var(--navy); font-weight: 600;}
.dtoc__l3 a {padding-left: 28px;}

/* prose */
.prose {font-size: 1.0625rem; line-height: 1.7; color: var(--ink); min-width: 0;}
.dart {max-width: 46rem;}
.bart {max-width: 42rem; margin-inline: auto; font-size: 1.125rem; line-height: 1.75;}
.prose > * + * {margin-top: 1.1em;}
.prose h2 {font: 600 clamp(1.5rem, 1.25rem + 0.9vw, 2rem)/1.15 var(--font-display); letter-spacing: -0.02em; margin-top: 2.2em; max-width: none; scroll-margin-top: calc(var(--nav-h) + 20px);}
.prose h3 {font: 600 clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem)/1.25 var(--font-display); letter-spacing: -0.015em; margin-top: 1.8em; scroll-margin-top: calc(var(--nav-h) + 20px);}
.prose h4 {font: 600 1.0625rem/1.3 var(--font-display); margin-top: 1.5em; scroll-margin-top: calc(var(--nav-h) + 20px);}
.prose h2 + *, .prose h3 + *, .prose h4 + * {margin-top: 0.7em;}
.prose .anchor {margin-left: 0.4em; font-weight: 400; text-decoration: none; color: var(--ink-soft); opacity: 0; transition: opacity 120ms;}
.prose h2:hover .anchor, .prose h3:hover .anchor, .prose h4:hover .anchor, .prose .anchor:focus-visible {opacity: 1;}
.prose a {text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: var(--navy-700); font-weight: 500;}
.prose a:hover {text-decoration-color: var(--cyan); background: rgba(1, 230, 237, 0.18);}
.prose a.anchor {text-decoration: none; background: none;}
.prose ul, .prose ol {padding-left: 1.4em;}
.prose ul {list-style: none;}
.prose ul > li {position: relative;}
.prose ul > li::before {content: ""; position: absolute; left: -1.25em; top: 0.7em; width: 0.62em; height: 0.38em; background: var(--navy); clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 100%, 0 40%);}
.prose ol {list-style: decimal;}
.prose ol > li::marker {font-weight: 600; color: var(--navy-700);}
.prose li + li {margin-top: 0.45em;}
.prose li > ul, .prose li > ol {margin-top: 0.45em;}
.prose strong {font-weight: 600;}
.prose code {font-family: var(--font-mono); font-size: 0.88em; padding: 0.12em 0.4em; border-radius: 6px; background: var(--mist);}
.prose pre {overflow: auto; padding: 18px 20px; border-radius: var(--radius); background: var(--navy); color: #d7e7f0; line-height: 1.55; font-size: 0.9375rem;}
.prose pre code {padding: 0; background: none; color: inherit; font-size: inherit;}
.prose hr {border: 0; border-top: 1px solid var(--line-light); margin-block: 2.2em;}
.prose blockquote {padding-left: 1.2em; border-left: 3px solid var(--navy); color: var(--ink-soft);}
.tbl {overflow-x: auto; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-light);}
.tbl table {width: 100%; border-collapse: collapse; font-size: 0.9688rem; line-height: 1.45;}
.tbl th, .tbl td {padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-light);}
.tbl thead th {background: var(--mist); font-family: var(--font-display); font-weight: 600;}
.tbl tbody tr:last-child td {border-bottom: 0;}
.callout {padding: 16px 20px 16px 22px; border-radius: var(--radius); background: var(--mist); border-left: 4px solid var(--navy);}
.callout p {font-size: 1rem; line-height: 1.6;}
.callout strong:first-child {margin-right: 0.5em; font-family: var(--font-display);}
.callout--important, .callout--warning {background: #fff4d6; border-left-color: #8a5a00;}
.callout--tip {border-left-color: var(--cyan); box-shadow: inset 4px 0 0 var(--navy-700);}
.dcards {display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 2em; padding: 0; list-style: none;}
.prose .dcards > li::before {display: none;}
.prose .dcards a {display: block; height: 100%; padding: 18px 20px; border-radius: var(--radius); box-shadow: inset 0 0 0 2px var(--line-light); text-decoration: none; background: none; transition: box-shadow 160ms var(--ease-out);}
.prose .dcards a:hover {box-shadow: inset 0 0 0 2px var(--navy); background: none;}
.dcards__t {display: block; font: 600 1.0625rem/1.25 var(--font-display); letter-spacing: -0.01em;}
.dcards__d {display: block; margin-top: 6px; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-soft); font-weight: 400;}
.dmeta {margin-top: 2.4em; font-size: var(--step-small); color: var(--ink-soft);}
.dpn {display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 2.4em;}
.prose .dpn a {display: block; padding: 16px 20px; border-radius: var(--radius); box-shadow: inset 0 0 0 2px var(--line-light); text-decoration: none; background: none;}
.prose .dpn a:hover {box-shadow: inset 0 0 0 2px var(--navy); background: none;}
.dpn__next {text-align: right; grid-column: 2;}
.dpn__prev {grid-column: 1;}
.dpn__label {display: block; font-size: 0.8125rem; color: var(--ink-soft); font-weight: 400;}
.dpn__title {display: block; margin-top: 2px; font: 600 1.0625rem/1.25 var(--font-display);}
.dhelp {margin-top: 2em; padding: 18px 22px; border-radius: var(--radius); background: var(--mist);}
.dhelp p {font-size: 1rem; line-height: 1.55;}

/* blog */
.bloglist {padding-block: clamp(48px, 6vw, 88px) clamp(64px, 8vw, 110px);}
.bfeat {border-bottom: 2px solid var(--navy); padding-bottom: clamp(32px, 4vw, 56px);}
.bfeat a, .bcard a {display: block; text-decoration: none; color: inherit;}
.bfeat h2 {font: 700 clamp(2rem, 1.2rem + 3vw, 3.5rem)/1.05 var(--font-display); letter-spacing: -0.025em; max-width: 18em; margin-top: 10px;}
.bfeat a:hover h2, .bcard a:hover h3 {text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em;}
.bfeat .bdesc {margin-top: 16px; max-width: 38em; font-size: var(--step-lead); line-height: 1.4; color: var(--ink-soft);}
.bmeta {font-size: var(--step-small); color: var(--ink-soft);}
.btags {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;}
.btags li {padding: 3px 12px; border-radius: 999px; font-size: 0.8125rem; box-shadow: inset 0 0 0 1.5px var(--line-light); color: var(--ink-soft);}
.bgrid {display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(28px, 3vw, 44px); margin-top: clamp(32px, 4vw, 56px);}
.bcard {height: 100%; border-top: 2px solid var(--navy); padding-top: 18px;}
.bcard h3 {font: 600 clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem)/1.12 var(--font-display); letter-spacing: -0.02em; margin-top: 8px;}
.bcard .bdesc {margin-top: 10px; font-size: 1rem; line-height: 1.5; color: var(--ink-soft);}
.dpost {padding-block: clamp(40px, 5vw, 72px) clamp(64px, 8vw, 110px);}
.bmore {margin-top: clamp(56px, 7vw, 96px); padding-top: 40px; border-top: 1px solid var(--line-light);}
.bmore h2 {font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--font-display); letter-spacing: -0.02em;}

@media (max-width: 1100px) {
  .dgrid {grid-template-columns: 240px minmax(0, 1fr);}
  .dright {display: none;}
}
@media (max-width: 860px) {
  .dgrid {grid-template-columns: minmax(0, 1fr);}
  .dside {position: static; max-height: none; overflow: visible;}
  .dside .dsearch {max-width: none;}
  .dnav__toggle {display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--radius); background: var(--mist); font: 600 1rem var(--font-display); cursor: pointer;}
  .dnav__toggle::after {content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);}
  .dnav__toggle[aria-expanded="true"]::after {transform: rotate(-135deg) translateY(-2px);}
  .dnav__list {display: none; margin-top: 10px; padding-inline: 4px;}
  .dnav__toggle[aria-expanded="true"] + .dnav__list {display: block;}
  .dpn {grid-template-columns: 1fr;}
  .dpn__next, .dpn__prev {grid-column: auto; text-align: left;}
}
@media (prefers-reduced-motion: reduce) {
  .dnav__sec summary::after, .dnav__toggle::after {transition: none;}
}
@media (max-width: 760px) {.phero--doc .phero__mark {display: none;}}
/* The hero clips its children, so results on the docs home open in the flow instead of floating */
.phero .dsearch__results {position: static; margin-top: 8px; max-height: 340px; box-shadow: 0 0 0 2px var(--cyan);}


/* ---------- Business pages (/business, /business/plans, /features/business) ----------
   Same tokens as the home. Only the pieces these pages add are defined here. */
.hero--biz .hero__sh {margin: 10px 10px 2px; font-size: 0.75rem; font-weight: 600; color: var(--h-faint);}
.hero__tbt {font: 600 0.9375rem var(--font-display);}
.hero__avs {margin-inline-start: auto; display: flex;}
.hero__avs span {width: 28px; height: 28px; margin-inline-start: -6px; display: grid; place-items: center; border-radius: 9px; background: var(--h-card-2); box-shadow: inset 0 0 0 1px var(--h-line); font: 600 0.75rem var(--font-display);}
.hero__chips {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;}
.hero__chip {display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--h-line); font-size: 0.8125rem;}
.hero__chip .hero__ic {width: 14px; height: 14px; color: var(--h-icon);}
.hero__chip--due {box-shadow: none; background: rgba(255, 196, 107, 0.16); color: #ffc46b;}
.hero__chip--due .hero__ic {color: #ffc46b;}
.hero__note {margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(1, 230, 237, 0.1); font-size: 0.8125rem; color: var(--h-soft);}
.hero__note b {color: var(--white); font-weight: 600;}
.every__grid--3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
.every .diff__lead {max-width: 32em;}
.ai > .wrap > h2 {font-size: var(--step-head); font-weight: 700; letter-spacing: -0.03em; max-width: 14em;}
.diff__for {margin-top: 8px; color: var(--ink-soft); font-size: 1rem;}
.diff__col--us .diff__for {color: var(--on-navy-soft);}
.diff__col li span .link {font-size: 0.9375rem;}
.diff__col .link {color: #0b5e63;}
.plan-pill {display: inline-block; margin-top: 18px; padding: 4px 12px; border-radius: 99px; background: var(--mist); color: var(--navy); font: 600 0.8125rem var(--font-display);}
.on-mist .plan-pill {background: var(--white);}
/* product windows: rows, tags, notes, records, members, sign-in */
.wrow {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #f3f8fa; font-size: 0.9375rem;}
.wrow b {display: block; font-weight: 600;}
.wrow span {display: block; color: var(--ink-soft); font-size: 0.875rem;}
.wrow .wtag {display: inline-flex;}
.wtag {display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--mist); color: var(--navy); font: 600 0.8125rem var(--font-display); white-space: nowrap;}
.wtag--ok {background: #dff4ea; color: #114b31;}
.wtag--due {background: #fdecd2; color: #6a3a05;}
.wtag--ai {background: #ede9fe; color: #4c1d95;}
.wnote {padding: 12px 14px; border-radius: 12px; background: rgba(1, 230, 237, 0.14); font-size: 0.875rem; color: var(--ink);}
.wnote b {font-weight: 600;}
.dns {display: grid; gap: 8px; font-family: var(--font-mono); font-size: 0.8125rem;}
.dns div {display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #f3f8fa; color: var(--ink);}
.dns div span:nth-child(2) {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.dns div span:last-child {font-family: var(--font-text); font-weight: 600; color: #114b31;}
.wsteps {margin-top: 24px; display: grid; gap: 10px;}
.wsteps li {display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--ink-soft); font-size: 0.9375rem;}
.wsteps li i {width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; font: 600 0.8125rem var(--font-display); font-style: normal;}
.mems {display: grid; gap: 6px;}
.mem {display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: 0.9375rem;}
.mem__av {width: 36px; height: 36px; border-radius: 10px; background: var(--mist); display: grid; place-items: center; font: 600 0.875rem var(--font-display);}
.mem b {display: block; font-weight: 600;}
.mem span {display: block; font-size: 0.8125rem; color: var(--ink-soft);}
.mem__role {display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-light); font-size: 0.875rem; font-weight: 500; color: var(--ink); white-space: nowrap;}
.sso {display: grid; gap: 12px; justify-items: center; padding: 12px 0;}
.sso__field {width: 100%; max-width: 360px; display: grid; gap: 6px;}
.sso__lab {font-size: 0.875rem; font-weight: 600;}
.sso__in {min-height: 48px; padding: 0 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-light); display: flex; align-items: center; font-size: 1rem;}
.sso__btn {width: 100%; max-width: 360px;}
.sso p {font-size: 0.875rem; color: var(--ink-soft); text-align: center; max-width: 36ch;}
.bub--ai {background: #ede9fe; color: #4c1d95;}
.bub--ai b {color: #6d28d9;}
.pc__per--tight {margin-bottom: 0;}
.pc__total {margin: 6px 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--mist); font-size: 0.9375rem; color: var(--ink);}
.pc__total b {font-weight: 600;}
.pc--pick .pc__total {background: var(--navy-800); color: var(--white);}
.pc__price--text {font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); letter-spacing: -0.03em;}
.pcards__grid--3 {grid-template-columns: repeat(3, minmax(0, 1fr));}
/* page hero: features page actions */
.phero__act {margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;}
.phero__act .hero__more {color: var(--cyan);}
/* plans hero: seat stepper and the billing switch */
.pctrls {margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px;}
.pctrl {display: flex; align-items: center; gap: 14px;}
.pctrl__lab {font-size: 1rem; font-weight: 500;}
.step {display: inline-flex; align-items: center; background: var(--navy-800); border-radius: 12px; padding: 4px; box-shadow: inset 0 0 0 1px var(--line-dark);}
.step__btn {width: 44px; height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--white); cursor: pointer; display: grid; place-items: center; transition: background-color 160ms var(--ease-out);}
.step__btn:hover {background: var(--navy-700);}
.step__btn .ic {width: 18px; height: 18px;}
.step__in {width: 64px; height: 44px; border: 0; background: transparent; color: var(--white); text-align: center; font: 600 1.125rem var(--font-display);}
.step__in:focus-visible {outline-offset: -3px;}
.sw {display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; border: 0; background: transparent; cursor: pointer; color: var(--white); font: 500 1rem var(--font-text);}
.sw__k {position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: #5c7f97; transition: background-color 200ms var(--ease-out);}
.sw__k::after {content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); transition: translate 200ms var(--ease-out), background-color 200ms var(--ease-out);}
.sw[aria-checked="true"] .sw__k {background: var(--cyan);}
.sw[aria-checked="true"] .sw__k::after {translate: 16px 0; background: var(--navy);}
[dir="rtl"] .sw__k::after {left: auto; right: 2px;}
[dir="rtl"] .sw[aria-checked="true"] .sw__k::after {translate: -16px 0;}
.sw__save {margin-inline-start: 4px; padding: 2px 10px; border-radius: 99px; background: rgba(1, 230, 237, 0.18); color: var(--cyan); font: 600 0.8125rem var(--font-display);}
.sw__save:empty {display: none;}
/* closing section with a heading, a line and two buttons */
.cta--biz {padding-block: clamp(72px, 9vw, 120px);}
.cta--biz h2 {font-size: var(--step-head); max-width: 12em;}
.cta--biz p {margin-top: 20px; font-size: var(--step-lead); max-width: 26em; color: var(--on-navy-soft);}
.cta--biz .cta__acts {margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px;}
@media (max-width: 1100px) {
  .every__grid--3 {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 880px) {
  .every__grid--3, .pcards__grid--3 {grid-template-columns: 1fr;}
  .pcards__grid--3 .pc--pick {margin-block: 0; padding-block: 34px;}
  .wrow {grid-template-columns: 1fr;}
  .dns div {grid-template-columns: 56px minmax(0, 1fr);}
  .dns div span:last-child {grid-column: 2;}
  .mem {grid-template-columns: 36px minmax(0, 1fr); row-gap: 6px;}
  .mem__role {grid-column: 2; justify-self: start;}
}
@media (max-width: 480px) {
  .pctrl {width: 100%; justify-content: space-between;}
  .cta--biz h2 {font-size: 2rem;}
}
/* No scroll-triggered entrances below the hero on these pages (the motion board); the hero entrance still runs. */
@media (prefers-reduced-motion: no-preference) {
  html.mo body[data-page^="business"] .diff__grid > .diff__col, html.mo body[data-page^="business"] .facts > .fact,
  html.mo body[data-page^="business"] .pcards__grid > * {opacity: 1;}
}
@media (prefers-reduced-motion: reduce) {
  .sw__k, .sw__k::after, .step__btn {transition: none;}
}

/* Store badges in the footer. Official artwork, unmodified (badges.py picks the localized file when it exists, else English).
   Each wrapper is exactly the visible badge, 44px high, and carries the hairline so the black badges stay visible on navy.
   Width, image size and the offsets that clip any transparent clear-space baked into a PNG are measured from the file and
   written inline by the build, so the visible height is 44px for every language. */
.foot {
  /* Where the first link's visible text (cap height) starts below the top of its row, so the first badge's top edge lines up with
     it. A link row is a line box of the body text (font-size --step-body, line-height --lh-body) holding the 15px link
     (--foot-link-fs). Baseline sits (lh/2 + (asc - desc)/2) * font-size below the row top; the cap top is cap * link size above it.
     Funnel Sans metrics (units per em 1200): ascent 1200, descent 300, cap height 810. Body text is 17-19px, so this is 9.4-11.7px. */
  --foot-font-asc: 1; --foot-font-desc: 0.25; --foot-font-cap: 0.675;
  --foot-link-top: calc(var(--step-body) * (var(--lh-body) / 2 + (var(--foot-font-asc) - var(--foot-font-desc)) / 2) - var(--foot-font-cap) * var(--foot-link-fs));
}
.foot .foot__apps {display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-block-start: var(--foot-link-top);}
.foot .badge {position: relative; display: block; overflow: hidden; height: 44px; min-height: 44px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-dark); transition: filter 160ms ease; line-height: 0;}
.foot .badge img {display: block; max-width: none;}
.foot .badge:hover {filter: brightness(1.18); text-decoration: none;}
.foot .badge:focus-visible {outline: 3px solid var(--focus); outline-offset: 3px;}
@media (max-width: 640px) {
  .foot .foot__apps {flex-direction: row; flex-wrap: wrap;}
}
@media (prefers-reduced-motion: reduce) {
  .foot .badge {transition: none;}
}