:root {
      --bg: #f4f8fb;
      --bg-soft: #eaf2f7;
      --card: #ffffff;
      --ink: #14243a;
      --ink-soft: #20344b;
      --muted: #63778b;
      --muted-2: #8295a7;
      --line: #d8e3ec;
      --line-strong: #c4d3df;

      --blue: #2f7db7;
      --blue-dark: #1f5f8e;
      --blue-soft: #e6f2fc;

      --green: #23935d;
      --green-dark: #147346;
      --green-soft: #e6f6ee;

      --red: #d74b56;
      --red-dark: #a82d38;
      --red-soft: #ffe7ea;

      --amber: #d89a28;
      --amber-dark: #9a6a12;
      --amber-soft: #fff3d8;

      --purple: #7f6be6;
      --purple-soft: #eeeafe;

      --teal: #22aaa1;
      --teal-soft: #e1f6f4;

      --shadow: 0 14px 36px rgba(21, 43, 68, .08);
      --shadow-soft: 0 6px 18px rgba(21, 43, 68, .055);
      --radius: 18px;
      --radius-lg: 24px;
      --max: 1200px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      text-rendering: optimizeLegibility;
      overflow-x: clip;
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
      -moz-osx-font-smoothing: grayscale;
      background: linear-gradient(180deg, #fbfdff 0%, var(--bg-soft) 55%, #edf4f8 100%);
      overflow-x: clip;
    }

    a {
      color: inherit;
    }

    .page {
      width: min(var(--max), calc(100% - 48px));
      margin: 0 auto;
      padding: 22px 0 50px;
    }

    .topbar {
      display: grid;
      grid-template-columns: 230px 1fr auto;
      align-items: center;
      gap: 18px;
      margin-bottom: 42px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      min-width: 0;
    }

    .logo {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      background: #ffffff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
      flex: 0 0 auto;
    }

    .logo svg {
      width: 30px;
      height: 30px;
      display: block;
    }

    .brand strong {
      display: block;
      color: var(--ink);
      font-size: 1.18rem;
      letter-spacing: -.03em;
      line-height: 1;
    }

    .nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 34px;
    }

    .nav a,
    .top-actions a {
      text-decoration: none;
      font-size: .88rem;
      font-weight: 660;
      color: #344c64;
      white-space: nowrap;
    }

    .top-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
    }

    .top-actions a {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 17px;
      border-radius: 9px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .82);
      box-shadow: var(--shadow-soft);
    }

    .top-actions .primary {
      color: #fff;
      background: var(--blue);
      border-color: var(--blue);
      box-shadow: 0 10px 20px rgba(47, 125, 183, .22);
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
      gap: 58px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      min-height: 25px;
      padding: 0 9px;
      border-radius: 999px;
      color: var(--blue-dark);
      background: rgba(230, 242, 252, .72);
      border: 1px solid rgba(47, 125, 183, .18);
      font-size: .72rem;
      font-weight: 815;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3 {
      margin: 0;
      color: var(--ink);
      letter-spacing: -.045em;
      line-height: 1.04;
      /* Crisper glyph edges on large display type (variable font hinting). */
      text-rendering: geometricPrecision;
    }

    h1 {
      margin-top: 16px;
      max-width: 640px;
      font-size: clamp(3.35rem, 5.4vw, 4.85rem);
    }

    h2 {
      font-size: clamp(2rem, 3vw, 2.85rem);
      max-width: 720px;
    }

    h3 {
      font-size: 1.08rem;
      letter-spacing: -.025em;
    }

    p {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
    }

    .lead {
      margin-top: 20px;
      color: #3c5268;
      font-size: 1.04rem;
      line-height: 1.7;
      max-width: 530px;
    }

    .hero-convert {
      margin-top: 16px;
      max-width: 540px;
      color: #314a5f;
      font-size: 0.95rem;
      font-weight: 615;
      line-height: 1.55;
    }

    .cta-ico {
      display: inline-grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: var(--blue-soft);
      border: 1px solid rgba(47, 125, 183, 0.22);
    }

    .cta-ico svg {
      width: 11px;
      height: 11px;
      color: var(--blue);
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      margin-top: 28px;
    }

    .btn {
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 25px;
      border-radius: 9px;
      border: 1px solid transparent;
      text-decoration: none;
      font-weight: 760;
      font-size: .95rem;
      cursor: pointer;
      font-family: inherit;
    }

    .btn-primary {
      color: #fff;
      background: var(--blue);
      border-color: var(--blue);
      box-shadow: 0 12px 24px rgba(47, 125, 183, .24);
    }

    .btn-secondary {
      color: var(--ink);
      background: #fff;
      border-color: var(--line);
      box-shadow: var(--shadow-soft);
    }

    .play-dot {
      width: 22px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      color: var(--blue);
      background: var(--blue-soft);
      border: 1px solid rgba(47, 125, 183, .25);
      font-size: .7rem;
      line-height: 1;
    }

    .trust-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 52px;
      max-width: 455px;
    }

    .trust-card {
      min-height: 63px;
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 13px 15px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .88);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
      color: var(--ink-soft);
      font-size: .95rem;
      font-weight: 760;
      line-height: 1.25;
    }

    .icon-tile {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
    }

    .icon-tile svg {
      width: 16px;
      height: 16px;
      display: block;
    }

    .icon-tile-lg {
      width: 56px;
      height: 56px;
      border-radius: 16px;
    }

    .icon-tile-lg svg {
      width: 26px;
      height: 26px;
    }

    .trust-card .icon-tile {
      width: 32px;
      height: 32px;
      border-radius: 10px;
    }

    .trust-card .icon-tile svg {
      width: 14px;
      height: 14px;
    }

    .icon-blue {
      color: #2f7db7;
      background: #e6f2fc;
    }

    .icon-green {
      color: #147346;
      background: #e6f6ee;
    }

    .icon-red {
      color: #b93644;
      background: #ffe7ea;
    }

    .icon-amber {
      color: #9a6a12;
      background: #fff3d8;
    }

    .icon-teal {
      color: #148f88;
      background: #e1f6f4;
    }

    .icon-purple {
      color: #6f5bd6;
      background: #eeeafe;
    }

    /* Product screenshot-style hero */
    .product-preview {
      border-radius: 25px;
      background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 253, 0.92));
      border: 1px solid rgba(215, 227, 236, .98);
      box-shadow: 0 22px 55px rgba(21, 43, 68, .12);
      padding: 12px;
    }

    .portal-mock {
      height: 486px;
      display: grid;
      grid-template-columns: 170px 1fr;
      gap: 12px;
      overflow: hidden;
      border-radius: 20px;
      background: #eef5f9;
      border: 1px solid #cbdbe5;
    }

    .mock-sidebar {
      padding: 16px 13px;
      background: #fff;
      border-right: 1px solid #d8e3ec;
    }

    .mock-brand {
      display: flex;
      gap: 9px;
      align-items: center;
      margin-bottom: 20px;
    }

    .mock-brand .mini-shield {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: linear-gradient(135deg, #1fa35b, #0b7a43);
      position: relative;
      flex: 0 0 auto;
    }

    .mock-brand .mini-shield::after {
      content: "";
      position: absolute;
      left: 7px;
      right: 7px;
      top: 8px;
      height: 3px;
      border-radius: 999px;
      background: #ece9de;
      box-shadow: 0 6px 0 #ece9de;
    }

    .mock-brand strong {
      display: block;
      font-size: .72rem;
      line-height: 1;
    }

    .mock-brand span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: .52rem;
      font-weight: 760;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .mock-label {
      margin: 15px 0 7px;
      color: #8495a5;
      font-size: .54rem;
      font-weight: 815;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .mock-select {
      min-height: 31px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 8px;
      border: 1px solid #d9e5ee;
      border-radius: 8px;
      background: #fbfdfe;
      font-size: .62rem;
      font-weight: 760;
    }

    .mock-select-dd {
      position: relative;
      padding-right: 22px;
    }

    .mock-select-dd::after {
      content: "";
      position: absolute;
      right: 9px;
      top: 50%;
      margin-top: -2px;
      border: solid #6b8299;
      border-width: 0 1.5px 1.5px 0;
      display: inline-block;
      padding: 2.5px;
      transform: rotate(45deg);
    }

    .mock-plan {
      margin-top: 7px;
      color: #5b7082;
      font-size: .58rem;
      font-weight: 660;
    }

    .mock-nav {
      display: grid;
      gap: 5px;
      margin-top: 8px;
    }

    .mock-nav-item {
      min-height: 27px;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 8px;
      border-radius: 7px;
      color: #263b51;
      font-size: .6rem;
      font-weight: 760;
    }

    .mock-nav-item.active {
      background: #ddecfa;
      border: 1px solid #bdd7ea;
    }

    .icon-tile-nav {
      width: 22px;
      height: 22px;
      border-radius: 7px;
    }

    .icon-tile-nav svg {
      width: 12px;
      height: 12px;
    }

    .mock-main {
      padding: 16px;
      min-width: 0;
      display: grid;
      gap: 11px;
      grid-template-rows: auto auto auto 1fr;
    }

    .mock-top {
      display: grid;
      grid-template-columns: 1.65fr .9fr;
      gap: 12px;
    }

    .mock-card,
    .mock-stat,
    .mock-shortcut,
    .mock-row {
      background: #fff;
      border: 1px solid #d8e3ec;
      box-shadow: 0 1px 2px rgba(16,32,51,.035);
    }

    .mock-card {
      border-radius: 14px;
      padding: 13px;
      min-width: 0;
    }

    .mock-kicker {
      color: #8495a5;
      font-size: .52rem;
      font-weight: 815;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .mock-title {
      display: block;
      margin-top: 5px;
      color: var(--ink);
      font-size: 1rem;
      font-weight: 815;
      letter-spacing: -.04em;
    }

    .mock-pills {
      display: flex;
      gap: 5px;
      margin-top: 7px;
      flex-wrap: wrap;
    }

    .mock-pill {
      display: inline-flex;
      align-items: center;
      min-height: 17px;
      padding: 0 7px;
      border-radius: 999px;
      background: var(--blue-soft);
      color: var(--blue-dark);
      font-size: .5rem;
      font-weight: 815;
    }

    .mock-input {
      height: 31px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      padding: 0 8px;
      border-radius: 8px;
      border: 1px solid #d8e3ec;
      color: var(--ink);
      background: #fbfdfe;
      font-size: .62rem;
      font-weight: 715;
    }

    .mock-actions {
      display: flex;
      gap: 6px;
      margin-top: 9px;
    }

    .mock-button {
      min-height: 22px;
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      border-radius: 7px;
      border: 1px solid #d8e3ec;
      color: var(--ink);
      background: #fff;
      font-size: .56rem;
      font-weight: 760;
    }

    .mock-button.blue {
      color: var(--blue-dark);
      background: var(--blue-soft);
      border-color: #c2dceb;
    }

    .mock-status {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .mock-status-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 9px;
      align-items: center;
      padding-bottom: 6px;
      border-bottom: 1px solid #edf2f6;
      color: var(--muted);
      font-size: .58rem;
      font-weight: 715;
    }

    .mock-status-row:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .tiny-tag {
      display: inline-flex;
      align-items: center;
      min-height: 16px;
      padding: 0 7px;
      border-radius: 999px;
      background: #eff4f8;
      color: #455d72;
      font-size: .48rem;
      font-weight: 815;
    }

    .tiny-tag.green {
      background: var(--green-soft);
      color: var(--green-dark);
    }

    .tiny-tag.blue {
      background: var(--blue-soft);
      color: var(--blue-dark);
    }

    .mock-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .mock-stat {
      min-height: 67px;
      position: relative;
      border-radius: 12px;
      padding: 10px;
    }

    .mock-stat span {
      color: var(--muted);
      font-size: .54rem;
      font-weight: 760;
    }

    .mock-stat strong {
      display: block;
      margin-top: 9px;
      font-size: 1.05rem;
      letter-spacing: -.04em;
    }

    .mock-kpi-ico {
      position: absolute;
      top: 9px;
      right: 9px;
    }

    .mock-kpi-ico svg {
      width: 14px;
      height: 14px;
    }

    .mock-shortcuts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .mock-shortcut {
      min-height: 62px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px;
      border-radius: 12px;
    }

    .mock-shortcut-ico {
      flex: 0 0 auto;
    }

    .mock-shortcut-ico svg {
      width: 15px;
      height: 15px;
    }

    .mock-shortcut strong {
      display: block;
      color: var(--ink);
      font-size: .63rem;
      line-height: 1.1;
    }

    .mock-shortcut span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: .5rem;
      line-height: 1.2;
      font-weight: 660;
    }

    .mock-lower {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 10px;
      min-height: 0;
    }

    .mock-list {
      display: grid;
      gap: 6px;
      margin-top: 9px;
    }

    .mock-row {
      min-height: 36px;
      border-radius: 9px;
      padding: 7px;
    }

    .mock-row-head {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .mock-row p {
      margin-top: 5px;
      color: var(--muted);
      font-size: .48rem;
      line-height: 1.2;
      font-weight: 660;
    }

    /* Section blocks */
    .system-totals {
      display: grid;
      grid-template-columns: 270px repeat(4, minmax(0, 1fr));
      gap: 11px;
      align-items: stretch;
      margin-top: 24px;
      padding: 14px;
      border-radius: 14px;
      background: rgba(255,255,255,.88);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }

    .system-heading h2 {
      font-size: 1.45rem;
      max-width: none;
    }

    .system-heading p {
      margin-top: 8px;
      font-size: .88rem;
      font-weight: 660;
    }

    .total-card {
      display: grid;
      align-content: center;
      gap: 6px;
      min-height: 72px;
      padding: 13px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid var(--line);
    }

    .total-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .total-card-label {
      color: var(--muted);
      font-size: .76rem;
      font-weight: 715;
      line-height: 1.25;
    }

    .total-card strong {
      display: block;
      margin-top: 2px;
      font-size: 1.35rem;
      letter-spacing: -.04em;
    }

    .platform-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 28px;
      margin-top: 24px;
    }

    .platform-pill {
      min-height: 62px;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 11px 18px;
      border-radius: 12px;
      background: rgba(255,255,255,.9);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }

    .platform-mark {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: #fff;
      background: var(--blue);
      font-weight: 815;
      font-size: 1rem;
      flex: 0 0 auto;
    }

    .platform-mark.dark {
      background: #263b51;
    }

    .platform-mark svg {
      width: 20px;
      height: 20px;
      color: #fff;
    }

    .platform-mark-discourse {
      background: #5a6b7a;
      color: #fff;
    }

    .platform-pill strong {
      display: block;
      line-height: 1.1;
      font-weight: 615;
    }

    .platform-pill span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 660;
    }

    .attack {
      display: grid;
      grid-template-columns: 170px 1fr 250px;
      gap: 28px;
      align-items: center;
      margin-top: 24px;
      padding: 20px 24px;
      border-radius: 13px;
      border: 1px solid #f1bfc5;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: var(--shadow-soft);
    }

    .attack-symbol {
      width: 142px;
      height: 142px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: #fff5f6;
      border: 1px solid #fae1e4;
    }

    .attack-warn-tile svg {
      width: 34px;
      height: 34px;
    }

    .attack h2 {
      font-size: 2rem;
    }

    .attack-copy p {
      margin-top: 9px;
      color: #3e556b;
      font-size: .94rem;
    }

    .attack-checks {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 20px;
      margin-top: 17px;
    }

    .attack-check {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #344d63;
      font-size: .86rem;
      font-weight: 715;
    }

    .attack-check-ico {
      width: 22px;
      height: 22px;
      border-radius: 8px;
      flex: 0 0 auto;
    }

    .attack-check-ico svg {
      width: 12px;
      height: 12px;
    }

    .attack-buttons {
      display: grid;
      gap: 8px;
    }

    .attack-buttons a {
      min-height: 34px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 0 12px;
      border-radius: 7px;
      text-decoration: none;
      color: var(--ink);
      background: #eef5fb;
      border: 1px solid #d7e3ec;
      font-size: .82rem;
      font-weight: 760;
    }

    .attack-buttons a:first-child {
      color: #fff;
      background: var(--blue);
      border-color: var(--blue);
    }

    .attack-buttons a:first-child .attack-btn-mark {
      color: #fff;
      background: rgba(0, 0, 0, 0.14);
    }

    .attack-btn-mark {
      min-width: 28px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      padding: 0 6px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.25);
      font-size: 0.68rem;
      font-weight: 815;
      flex-shrink: 0;
    }

    .attack-buttons a:not(:first-child):not(.attack-btn-muted) .attack-btn-mark {
      background: rgba(47, 125, 183, 0.12);
      color: var(--blue-dark);
    }

    .attack-btn-mark-wide {
      font-size: 0.58rem;
      letter-spacing: 0.02em;
    }

    .attack-btn-mark-ico {
      min-width: 28px;
      padding: 0;
      background: rgba(90, 107, 122, 0.15);
    }

    .attack-btn-mark-ico svg {
      width: 14px;
      height: 14px;
      color: var(--muted);
    }

    .attack-btn-muted {
      opacity: 0.85;
      cursor: default;
    }

    .section {
      margin-top: 32px;
    }

    .section h2 {
      margin-bottom: 18px;
      font-size: 2rem;
      max-width: none;
    }

    .pain-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 18px;
    }

    .pain-card {
      min-height: 132px;
      display: grid;
      justify-items: center;
      text-align: center;
      align-content: start;
      padding: 20px 13px 14px;
      border-radius: 12px;
      background: rgba(255,255,255,.86);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }

    .pain-card .icon-tile-lg {
      margin-bottom: 13px;
    }

    .pain-card strong {
      display: block;
      margin-bottom: 4px;
      font-size: .9rem;
      line-height: 1.1;
      font-weight: 590;
    }

    .pain-card p {
      font-size: .76rem;
      line-height: 1.25;
      font-weight: 625;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 14px;
    }

    .feature-card {
      min-height: 82px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px;
      border-radius: 10px;
      background: rgba(255,255,255,.86);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }

    .feature-card .icon-tile {
      flex: 0 0 auto;
    }

    .feature-card strong {
      display: block;
      font-size: .78rem;
      line-height: 1.1;
      font-weight: 585;
    }

    /* Only the subtitle under the heading — not the icon-tile span (same tag name). */
    .feature-card > div span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: .66rem;
      line-height: 1.18;
      font-weight: 625;
    }

    .flow {
      display: grid;
      grid-template-columns: 1fr 255px;
      gap: 18px;
      align-items: stretch;
    }

    .flow-main,
    .flow-side {
      border-radius: 12px;
      background: rgba(255,255,255,.9);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }

    .flow-main {
      display: grid;
      grid-template-columns: 1fr 70px 1fr 70px 1fr;
      align-items: center;
      padding: 22px;
      min-height: 110px;
    }

    .flow-step {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .flow-num {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: var(--blue);
      background: var(--blue-soft);
      font-weight: 815;
      flex: 0 0 auto;
    }

    .flow-step-ico {
      flex: 0 0 auto;
    }

    .flow-step-ico svg {
      width: 26px;
      height: 26px;
    }

    .flow-step strong {
      display: block;
      font-size: .92rem;
      line-height: 1.2;
      font-weight: 605;
    }

    .flow-arrow {
      color: #aec0cf;
      text-align: center;
      font-size: 1.3rem;
      font-weight: 760;
    }

    .flow-side {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px;
      background: rgba(230,242,252,.86);
    }

    .flow-side-ico {
      flex: 0 0 auto;
    }

    .flow-side-ico svg {
      width: 28px;
      height: 28px;
    }

    .flow-side strong {
      display: block;
      font-size: .9rem;
      line-height: 1.25;
      font-weight: 605;
    }

    .flow-side p {
      margin-top: 4px;
      font-size: .78rem;
      line-height: 1.3;
      font-weight: 625;
    }

    .pricing-intro p {
      margin-top: -8px;
      max-width: 720px;
      font-size: .92rem;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
      max-width: 990px;
      margin: 28px auto 0;
    }

    .price-card {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 28px 24px 24px;
      border-radius: 12px;
      background: rgba(255,255,255,.92);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }

    .price-card.featured {
      border: 2px solid var(--green);
      padding-top: 45px;
      box-shadow: 0 18px 38px rgba(21, 43, 68, .1);
    }

    .recommended {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 10px 10px 0 0;
      color: #fff;
      background: var(--green);
      font-size: .72rem;
      font-weight: 815;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .price-card h3 {
      font-size: 1.5rem;
    }

    .price {
      margin-top: 12px;
      color: var(--ink);
      font-size: 3rem;
      line-height: 1;
      /* Keep hero numerals assertive; smaller UI weights were tuned down globally. */
      font-weight: 888;
      letter-spacing: -.06em;
    }

    .price small {
      color: var(--muted);
      font-size: .92rem;
      letter-spacing: 0;
      font-weight: 660;
    }

    .checks-month {
      margin-top: 12px;
      color: #3d5368;
      font-weight: 760;
      font-size: .9rem;
    }

    .plan-list {
      display: grid;
      gap: 9px;
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
    }

    .plan-list li {
      display: flex;
      gap: 8px;
      align-items: center;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 715;
    }

    .plan-li-ico {
      width: 22px;
      height: 22px;
      border-radius: 8px;
      flex: 0 0 auto;
    }

    .plan-li-ico svg {
      width: 11px;
      height: 11px;
    }

    .pricing-note {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 9px;
      margin-top: 18px;
      color: #4c6579;
      font-size: .92rem;
      font-weight: 715;
    }

    .pricing-note::before {
      content: "◉";
      color: var(--green);
    }

    .cleanup {
      max-width: 990px;
      margin: 30px auto 0;
      min-height: 75px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 18px;
      padding: 14px 20px;
      border-radius: 10px;
      background: rgba(255,255,255,.82);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }

    .cleanup .trash {
      display: grid;
      place-items: center;
    }

    .cleanup .trash .icon-tile-lg {
      width: 48px;
      height: 48px;
      border-radius: 12px;
    }

    .cleanup .trash .icon-tile-lg svg {
      width: 22px;
      height: 22px;
    }

    .cleanup h3 {
      font-size: 1.18rem;
    }

    .cleanup p {
      margin-top: 3px;
      font-size: .82rem;
      font-weight: 660;
    }

    .contact-section {
      display: grid;
      grid-template-columns: 330px 1fr 1.3fr;
      gap: 28px;
      align-items: start;
      margin-top: 16px;
      padding: 24px 22px;
      border-radius: 12px;
      background: rgba(255,255,255,.88);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }

    .contact-section h2 {
      font-size: 1.8rem;
      margin: 0 0 14px;
    }

    .contact-section p {
      color: #3d5368;
      font-size: .94rem;
      font-weight: 630;
    }

    .field-group {
      display: grid;
      gap: 9px;
    }

    label {
      color: #344d63;
      font-size: .78rem;
      font-weight: 675;
    }

    input,
    textarea {
      width: 100%;
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      padding: 0 13px;
      min-height: 39px;
      background: #fff;
      color: var(--ink);
      font: inherit;
      font-size: .86rem;
    }

    textarea {
      min-height: 122px;
      padding-top: 12px;
      resize: vertical;
    }

    .message-column {
      display: grid;
      gap: 9px;
    }

    .message-column .btn {
      min-height: 43px;
      width: 100%;
      border-radius: 7px;
    }

    .footer {
      display: grid;
      place-items: center;
      gap: 10px;
      margin-top: 30px;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 660;
      text-align: center;
    }

    .footer-links {
      display: flex;
      justify-content: center;
      gap: 42px;
      flex-wrap: wrap;
    }

    .footer-links a {
      color: #40596e;
      text-decoration: none;
    }

    .copyright {
      color: #8da0af;
      font-size: .76rem;
    }

    @media (max-width: 1120px) {
      .page {
        width: min(940px, calc(100% - 32px));
      }

      .topbar {
        grid-template-columns: 1fr;
      }

      .nav,
      .top-actions {
        justify-content: flex-start;
      }

      .hero {
        grid-template-columns: 1fr;
      }

      .product-preview {
        max-width: 760px;
      }

      .system-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .system-heading {
        grid-column: 1 / -1;
      }

      .platform-strip,
      .pain-grid,
      .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .attack,
      .contact-section {
        grid-template-columns: 1fr;
      }

      .attack-symbol {
        display: none;
      }

      .flow {
        grid-template-columns: 1fr;
      }

      .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
      }

      .cleanup {
        grid-template-columns: 1fr;
        text-align: left;
      }
    }

    @media (max-width: 720px) {
      .page {
        width: min(100% - 22px, 520px);
        padding-top: 14px;
      }

      .nav,
      .top-actions,
      .cta-row {
        gap: 8px;
      }

      .top-actions a,
      .btn {
        width: 100%;
      }

      h1 {
        font-size: 3rem;
      }

      h2,
      .section h2 {
        font-size: 2rem;
      }

      .trust-grid,
      .system-totals,
      .platform-strip,
      .pain-grid,
      .feature-grid,
      .mock-top,
      .mock-stats,
      .mock-shortcuts,
      .mock-lower,
      .attack-checks,
      .flow-main {
        grid-template-columns: 1fr;
      }

      .portal-mock {
        height: auto;
        grid-template-columns: 1fr;
      }

      .mock-sidebar {
        display: none;
      }

      .mock-main {
        grid-template-rows: none;
      }

      .flow-main {
        gap: 14px;
      }

      .flow-arrow {
        display: none;
      }

      .contact-section {
        padding: 18px;
      }
    }

/* Local Inter stack (portal-fonts.css) */
body,
button,
input,
textarea,
select {
  font-family: var(--ff-font-sans, Inter, "Helvetica Neue", Arial, sans-serif);
}

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

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 1000;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 660;
  text-decoration: none;
  color: var(--ink);
}

.skip-link:focus-visible {
  top: 16px;
}

.flash {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-weight: 660;
  font-size: 0.92rem;
}

.flash.success {
  background: var(--green-soft);
  color: var(--green-dark);
  border-color: rgba(35, 147, 93, 0.35);
}

.flash.error {
  background: var(--red-soft);
  color: var(--red-dark);
  border-color: rgba(215, 75, 86, 0.45);
}

label.sr-only,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.product-preview,
.portal-mock {
  -webkit-user-select: none;
  user-select: none;
}

.portal-mock svg,
.product-preview svg,
.logo svg {
  -webkit-user-select: none;
  user-select: none;
}

.logo img {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
}

a.platform-pill {
  text-decoration: none;
  color: inherit;
}

form.contact-form {
  display: contents;
}