:root {
      --navy: #031a40;
      --navy-deep: #021434;
      --blue: #0267e6;
      --cyan: #0ab1f8;
      --ink: #12273b;
      --muted: #667b8c;
      --line: #dce7ee;
      --soft: #f4f8fb;
      --success: #0267e6;
      --danger: #b4233d;
    }

    * { box-sizing: border-box; }
    html { min-height: 100%; background: var(--soft); }
    body {
      min-height: 100vh;
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 78% 12%, rgba(10, 177, 248, .12), transparent 29rem),
        linear-gradient(180deg, #fbfdff 0%, #f4f8fb 100%);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { cursor: pointer; }

    .shell { min-height: 100vh; display: flex; flex-direction: column; }
    .header {
      min-height: 76px;
      padding: 16px clamp(20px, 4vw, 56px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      border-bottom: 1px solid rgba(207, 221, 230, .85);
      background: rgba(255, 255, 255, .78);
      backdrop-filter: blur(16px);
    }
    .brand { display: inline-flex; align-items: center; gap: 10px; }
    .brand img { width: 36px; height: 36px; object-fit: contain; }
    .brand span {
      color: var(--navy);
      font-size: 1.18rem;
      font-weight: 900;
      letter-spacing: .16em;
    }
    .back-link {
      min-height: 42px;
      padding: 0 15px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: #40586b;
      background: #fff;
      font-size: .88rem;
      font-weight: 750;
      transition: border-color .2s ease, transform .2s ease;
    }
    .back-link:hover { border-color: #8edaf6; transform: translateY(-1px); }

    main {
      width: min(1160px, calc(100% - 40px));
      margin: auto;
      padding: clamp(44px, 8vh, 90px) 0;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(340px, .82fr);
      align-items: stretch;
      gap: clamp(24px, 4vw, 56px);
    }

    .copy-panel { padding: clamp(6px, 2vw, 24px) 0; align-self: center; }
    .eyebrow {
      margin: 0 0 22px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--blue);
      font-size: .76rem;
      font-weight: 900;
      letter-spacing: .15em;
    }
    .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--cyan); }
    h1 {
      max-width: 700px;
      margin: 0;
      color: var(--navy-deep);
      font-size: clamp(2.7rem, 5.2vw, 4.6rem);
      line-height: .99;
      letter-spacing: -.055em;
    }
    h1 em { color: var(--blue); font-style: normal; }
    .lead {
      max-width: 650px;
      margin: 24px 0 0;
      color: #536a7c;
      font-size: 1.08rem;
      line-height: 1.7;
    }

    .form-card {
      max-width: 650px;
      margin-top: 34px;
      padding: clamp(22px, 3vw, 30px);
      border: 1px solid rgba(207, 221, 230, .95);
      border-radius: 20px;
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 22px 60px rgba(2, 20, 52, .09);
    }
    .form-card h2 { margin: 0; color: var(--navy); font-size: 1.18rem; letter-spacing: -.02em; }
    .form-card > p { margin: 8px 0 20px; color: var(--muted); font-size: .94rem; line-height: 1.55; }
    .field-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
    .email-field {
      min-width: 0;
      height: 52px;
      padding: 0 16px;
      border: 1px solid #cbdbe5;
      border-radius: 11px;
      outline: none;
      color: var(--ink);
      background: #fff;
      font-size: 1rem;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .email-field:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(10, 177, 248, .12); }
    .email-field[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(180, 35, 61, .08); }
    .submit-button {
      min-height: 52px;
      padding: 0 21px;
      border: 0;
      border-radius: 11px;
      color: #fff;
      background: linear-gradient(135deg, var(--blue), var(--cyan));
      box-shadow: 0 12px 26px rgba(2, 103, 230, .22);
      font-size: .9rem;
      font-weight: 850;
      white-space: nowrap;
      transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    }
    .submit-button:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(2, 103, 230, .28); }
    .submit-button:disabled { cursor: wait; opacity: .68; transform: none; }
    .consent-row {
      margin-top: 15px;
      display: grid;
      grid-template-columns: 18px 1fr;
      align-items: start;
      gap: 10px;
      color: #607586;
      font-size: .8rem;
      line-height: 1.55;
    }
    .consent-row input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue); }
    .consent-row a { color: var(--blue); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
    .form-message { min-height: 21px; margin-top: 13px; color: var(--danger); font-size: .84rem; font-weight: 700; }
    .form-message.success { color: var(--success); }
    .hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

    .success-panel {
      display: none;
      padding: 8px 0 2px;
    }
    .success-panel.visible { display: block; }
    .success-mark {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: var(--success);
      font-size: 1.3rem;
      font-weight: 900;
      box-shadow: 0 0 0 8px rgba(8, 126, 97, .1);
    }
    .success-panel h2 { margin: 20px 0 7px; font-size: 1.35rem; }
    .success-panel p { margin: 0; color: var(--muted); line-height: 1.6; }

    .proof-row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
    .proof-row span {
      padding: 8px 11px;
      border: 1px solid #d7e5ed;
      border-radius: 999px;
      color: #627787;
      background: rgba(255, 255, 255, .72);
      font-size: .76rem;
      font-weight: 750;
    }

    .offer-panel {
      min-height: 520px;
      padding: clamp(28px, 4vw, 44px);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 28px;
      color: #fff;
      background:
        radial-gradient(circle at 100% 0%, rgba(89, 215, 255, .32), transparent 42%),
        linear-gradient(150deg, #031a40 0%, #063774 62%, #0878b5 120%);
      box-shadow: 0 30px 76px rgba(2, 31, 72, .22);
    }
    .offer-panel::before {
      content: "";
      width: 300px;
      height: 300px;
      position: absolute;
      right: -165px;
      bottom: -145px;
      border: 1px solid rgba(113, 223, 255, .25);
      border-radius: 50%;
      box-shadow: 0 0 0 34px rgba(113, 223, 255, .05), 0 0 0 72px rgba(113, 223, 255, .035);
    }
    .offer-top, .offer-bottom { position: relative; z-index: 1; }
    .offer-label {
      display: inline-flex;
      padding: 8px 11px;
      border: 1px solid rgba(115, 219, 255, .42);
      border-radius: 999px;
      color: #82e1ff;
      background: rgba(2, 20, 52, .24);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .12em;
    }
    .offer-panel h2 { max-width: 400px; margin: 24px 0 13px; font-size: clamp(2rem, 3.6vw, 3.15rem); line-height: 1.04; letter-spacing: -.045em; }
    .offer-panel p { max-width: 430px; margin: 0; color: #bdd7e8; font-size: .96rem; line-height: 1.65; }
    .price-line { margin-top: 36px; display: flex; align-items: baseline; gap: 8px; }
    .price-line strong { font-size: clamp(3.8rem, 7vw, 5.4rem); line-height: .9; letter-spacing: -.065em; }
    .price-line span { color: #c7e1ef; font-weight: 700; }
    .price-note { margin-top: 9px; color: #82e1ff; font-size: .86rem; font-weight: 800; }
    .then-line {
      margin-top: 22px;
      padding-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border-top: 1px solid rgba(255, 255, 255, .16);
    }
    .then-line span { color: #a9c9dc; font-size: .82rem; }
    .then-line strong { font-size: 1.15rem; }

    .footer {
      min-height: 64px;
      padding: 14px clamp(20px, 4vw, 56px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      color: #708391;
      font-size: .78rem;
    }
    .footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
    .footer a:hover { color: var(--blue); }

    @media (max-width: 900px) {
      main { grid-template-columns: 1fr; width: min(700px, calc(100% - 36px)); }
      .offer-panel { min-height: 430px; }
    }
    @media (max-width: 600px) {
      .header { min-height: 68px; padding: 13px 18px; }
      .brand img { width: 32px; height: 32px; }
      .brand span { font-size: 1rem; }
      .back-link { min-height: 38px; padding: 0 11px; font-size: .78rem; }
      main { width: calc(100% - 32px); padding: 38px 0 46px; gap: 28px; }
      h1 { font-size: 2.75rem; }
      .lead { font-size: 1rem; }
      .form-card { margin-top: 26px; padding: 20px; border-radius: 17px; }
      .field-row { grid-template-columns: 1fr; }
      .submit-button { width: 100%; }
      .offer-panel { min-height: 400px; padding: 28px 23px; border-radius: 22px; }
      .footer { align-items: flex-start; flex-direction: column; padding: 22px 18px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
    }

    /* TRIVO Website v33 — direct monthly/annual Stripe checkout */
    .pricing-toggle {
      width: max-content;
      max-width: 100%;
      margin-top: 28px;
      padding: 5px;
      display: flex;
      gap: 5px;
      border: 1px solid #d4e2ea;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 10px 25px rgba(2, 20, 52, .06);
    }
    .pricing-toggle button {
      min-height: 40px;
      padding: 0 14px;
      border: 0;
      border-radius: 8px;
      color: #526a7b;
      background: transparent;
      font: inherit;
      font-size: .75rem;
      font-weight: 850;
      cursor: pointer;
    }
    .pricing-toggle button small { margin-left: 4px; color: var(--blue); font-size: .62rem; }
    .pricing-toggle button.active { color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
    .pricing-toggle button.active small { color: #e4f8ff; }
    .current-plans article { display: flex; flex-direction: column; }
    .current-plans strong b { font: inherit; }
    .mini-checkout {
      min-height: 38px;
      margin-top: 13px;
      padding: 0 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #cfe1eb;
      border-radius: 9px;
      color: #08203c !important;
      background: #fff;
      font-size: .68rem !important;
      font-weight: 850;
      text-align: center;
    }
    .recommended .mini-checkout { border-color: transparent; color: #fff !important; background: linear-gradient(135deg, var(--blue), var(--cyan)); }

    @media (max-width: 600px) {
      .pricing-toggle { width: 100%; }
      .pricing-toggle button { flex: 1; padding: 0 8px; }
      .pricing-toggle button small { display: block; margin: 2px 0 0; }
    }

    /* TRIVO Website v30 — live pricing page */
    .pricing-main { align-items: center; }
    .subscription-status {
      max-width: 650px;
      margin-top: 22px;
      padding: 13px 15px;
      border: 1px solid #bfe5d9;
      border-radius: 11px;
      color: #0267e6;
      background: #edf7ff;
      font-size: .86rem;
      font-weight: 750;
      line-height: 1.5;
    }
    .subscription-status.error { border-color: #efc7d0; color: var(--danger); background: #fff5f7; }
    .subscription-actions { margin-top: 27px; display: flex; flex-wrap: wrap; gap: 11px; }
    .primary-action, .secondary-action, .panel-action {
      min-height: 48px;
      padding: 0 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border-radius: 11px;
      font-size: .86rem;
      font-weight: 850;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .primary-action { color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 13px 28px rgba(2, 103, 230, .22); }
    .secondary-action { border: 1px solid var(--line); color: #40586b; background: #fff; }
    .primary-action:hover, .secondary-action:hover, .panel-action:hover { transform: translateY(-2px); }
    .current-plans { max-width: 650px; margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .current-plans article { padding: 16px; border: 1px solid #dce7ee; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 9px 24px rgba(2,20,52,.045); }
    .current-plans article.recommended { border-color: #70cff3; box-shadow: 0 12px 28px rgba(2,103,230,.09); }
    .current-plans article>div { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .current-plans span { color: #527087; font-size: .59rem; font-weight: 950; letter-spacing: .09em; }
    .current-plans strong { color: var(--navy); font-size: 1.28rem; line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
    .current-plans strong small { margin-left: 2px; color: #7b8e9d; font-size: .55rem; letter-spacing: 0; }
    .current-plans .custom-price { font-size: 1rem; }
    .current-plans p { margin: 13px 0 8px; color: #657b8c; font-size: .73rem; }
    .current-plans article>b, .current-plans article>a { color: var(--blue); font-size: .7rem; }
    .live-plan-panel { min-height: 560px; }
    .panel-action { width: 100%; margin-top: 24px; color: var(--navy); background: #fff; box-shadow: 0 13px 30px rgba(0,0,0,.16); }
    .secure-note { margin-top: 14px; display: block; color: #a9c9dc; font-size: .7rem; line-height: 1.5; text-align: center; }

    @media (max-width: 600px) {
      .current-plans { grid-template-columns: 1fr; }
      .subscription-actions a { width: 100%; }
      .live-plan-panel { min-height: 430px; }
    }