:root {
      --bg: #f7f8fa;
      --surface: #fff;
      --ink: #1b1e27;
      --muted: #646b7a;
      --line: #e5e8ee;
      --green: #326e56;
      --mint: #93e4cd;
      --ease: cubic-bezier(.22, 1, .36, 1);
      --container: 1120px;
    }

    *, *::before, *::after { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 110px;
      -webkit-text-size-adjust: 100%;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family:
        Inter, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Helvetica, Arial, sans-serif;
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, p { margin: 0; }

    h1, h2, h3 {
      font-weight: 650;
      line-height: 1.13;
      text-wrap: balance;
    }

    p { text-wrap: pretty; }

    a { color: inherit; text-decoration: none; }
    button, select { font: inherit; }
    a, button, select { touch-action: manipulation; }
    svg { display: block; }
    ul, ol { margin: 0; padding: 0; list-style: none; }
    [hidden] { display: none !important; }

    ::selection { background: #ccecdf; color: var(--ink); }

    :focus-visible {
      outline: 3px solid #7668c9;
      outline-offset: 5px;
    }

    .container {
      width: min(var(--container), calc(100% - 40px));
      margin-inline: auto;
    }

    .section { padding-block: 62px; }

    .icon {
      width: 20px;
      height: 20px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 23px;
      font-weight: 750;
      letter-spacing: -.055em;
      line-height: 1;
    }

    .brand-mark { width: 34px; height: 34px; flex: 0 0 auto; }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 12px 20px;
      border: 1px solid transparent;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      text-align: center;
      transition:
        transform .22s var(--ease),
        background .22s,
        box-shadow .22s;
    }

    .button .icon { width: 17px; height: 17px; }
    .button-dark { color: white; background: var(--ink); }
    .button-light { background: white; border-color: var(--line); }
    .button-mint { background: var(--mint); color: #183a2e; }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
    }

    .text-link .icon { width: 15px; height: 15px; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 2px;
      background: #75b59c;
    }

    .section-heading { max-width: 650px; margin-bottom: 30px; }
    .section-heading.center { margin-inline: auto; text-align: center; }

    .section-title {
      font-size: clamp(30px, 4.2vw, 47px);
      letter-spacing: -.045em;
    }

    .section-description {
      margin-top: 17px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.8;
    }

    .skip-link {
      position: fixed;
      z-index: 100;
      top: 10px;
      left: 10px;
      padding: 12px 18px;
      border-radius: 10px;
      background: var(--ink);
      color: white;
      transform: translateY(-160%);
    }

    .skip-link:focus { transform: none; }

    /* Header */

    .site-header {
      position: sticky;
      z-index: 30;
      top: 0;
      border-bottom: 1px solid rgb(229 232 238 / 80%);
      background: rgb(247 248 250 / 90%);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }

    .header-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding-block: 16px;
      min-height: 76px;
    }

    .header-nav {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .header-nav > a:not(.button) {
      color: var(--muted);
      font-size: 12px;
    }

    .header-nav .button {
      min-height: 40px;
      padding: 9px 13px;
      font-size: 12px;
    }

    .header-home { display: none; }

    /* Hero */

    .hero {
      position: relative;
      overflow: hidden;
      padding-block: 38px 58px;
      background:
        radial-gradient(ellipse at 95% 45%, #ece8f7, transparent 43%),
        radial-gradient(ellipse at 70% 95%, #e4f1e9, transparent 40%);
    }

    .breadcrumbs {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-bottom: 42px;
      color: #818998;
      font-size: 11px;
    }

    .breadcrumbs [aria-current="page"] { color: #606a79; }
    .breadcrumbs li + li::before { content: "/"; margin-right: 9px; color: #bbc1ca; }

    .hero-grid { display: grid; align-items: center; gap: 40px; }

    .hero-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 23px;
      padding: 6px 10px;
      border: 1px solid #e0e6e1;
      border-radius: 30px;
      background: rgb(255 255 255 / 65%);
      color: #647469;
      font-size: 11px;
      font-weight: 550;
    }

    .hero-label .icon { width: 13px; height: 13px; }

    h1 {
      font-size: clamp(41px, 5.7vw, 68px);
      letter-spacing: -.06em;
      line-height: 1.07;
    }

    h1 span { color: #828a99; }

    .hero-copy > p {
      max-width: 465px;
      margin-top: 24px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.8;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 29px;
    }

    .hero-note {
      display: block;
      margin-top: 15px;
      color: #7b8592;
      font-size: 11px;
    }

    .commission-visual {
      position: relative;
      width: min(100%, 430px);
      margin-inline: auto;
      padding: 12px 0;
    }

    .commission-visual::before {
      content: "";
      position: absolute;
      inset: 12% 5%;
      border-radius: 50%;
      background: rgb(190 215 204 / 27%);
      filter: blur(40px);
      pointer-events: none;
      animation: ambient 16s ease-in-out infinite alternate;
    }

    .commission-card {
      position: relative;
      padding: 26px;
      border: 1px solid #dce6df;
      border-radius: 22px;
      background: linear-gradient(135deg, #fff, #f1f8f3);
      box-shadow: 0 22px 50px -30px rgb(47 76 61 / 30%);
    }

    .commission-card.secondary {
      width: 89%;
      margin: 14px 0 0 auto;
      border-color: #e4e0ef;
      background: linear-gradient(135deg, #fff, #f5f2fb);
    }

    .commission-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #718477;
      font-size: 11px;
    }

    .commission-card-top .icon { width: 18px; height: 18px; }

    .commission-value {
      display: block;
      margin-top: 16px;
      font-size: 78px;
      font-weight: 600;
      letter-spacing: -.075em;
      line-height: 1;
      color: #345e47;
    }

    .commission-value span {
      margin-left: 3px;
      font-size: 38px;
      font-weight: 450;
    }

    .commission-card h2 {
      margin-top: 12px;
      font-size: 16px;
      letter-spacing: -.025em;
    }

    .commission-card p {
      margin-top: 7px;
      color: #7b887e;
      font-size: 12px;
    }

    .secondary .commission-card-top,
    .secondary p { color: #8a809e; }

    .secondary .commission-value { color: #78658f; font-size: 60px; }
    .secondary .commission-value span { font-size: 30px; }

    .visual-note {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 7px;
      margin-top: 22px;
      color: #7f8995;
      font-size: 10px;
    }

    .visual-note .icon { width: 13px; height: 13px; }

    /* Summary */

    .summary-grid {
      display: grid;
      gap: 20px;
      padding-block: 28px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .summary-item { display: flex; align-items: flex-start; gap: 11px; }
    .summary-item > .icon { margin-top: 2px; color: #8d9e93; }
    .summary-item strong { display: block; font-size: 13px; font-weight: 600; }
    .summary-item p { margin-top: 4px; color: var(--muted); font-size: 12px; }

    /* Audience */

    .cards-grid { display: grid; gap: 15px; }

    .card {
      padding: 27px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: white;
      transition: transform .25s var(--ease), box-shadow .25s;
    }

    .card-icon {
      display: grid;
      place-items: center;
      width: 39px;
      height: 39px;
      margin-bottom: 22px;
      border: 1px solid #e8eaf0;
      border-radius: 11px;
      background: #f6f7fa;
      color: #8993a2;
    }

    .card h3 { margin-bottom: 12px; font-size: 19px; letter-spacing: -.03em; }
    .card p { color: var(--muted); font-size: 13px; line-height: 1.8; }

    /* Calculation */

    .calculation {
      overflow: hidden;
      display: grid;
      border: 1px solid var(--line);
      border-radius: 25px;
      background: white;
    }

    .calculation-copy { padding: 28px; }
    .calculation-copy h3 { font-size: 25px; letter-spacing: -.035em; }
    .calculation-copy > p { margin-top: 15px; color: var(--muted); font-size: 13px; }

    .plan-control { margin-top: 25px; }
    .plan-control label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 550; }

    .plan-control select {
      width: 100%;
      min-height: 48px;
      padding: 11px 12px;
      border: 1px solid #dfe4ea;
      border-radius: 10px;
      background: #fff;
      color: var(--ink);
      font-size: 14px;
      cursor: pointer;
    }

    .calculation-copy .calculation-note {
      margin-top: 17px;
      color: #818b98;
      font-size: 11px;
      line-height: 1.8;
    }

    .calculation-results {
      display: grid;
      align-content: center;
      gap: 15px;
      padding: 28px;
      background:
        radial-gradient(ellipse at 95% 0%, #ece8f6, transparent 60%),
        #f0f6f2;
    }

    .result-row {
      padding: 21px;
      border: 1px solid rgb(217 228 221 / 90%);
      border-radius: 14px;
      background: rgb(255 255 255 / 85%);
    }

    .result-label { display: block; color: #75837a; font-size: 12px; }

    .result-amount {
      display: block;
      margin-top: 8px;
      color: #335d47;
      font-size: 39px;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -.05em;
    }

    .result-formula { display: block; margin-top: 6px; color: #8b958f; font-size: 11px; }
    .result-row.secondary .result-amount { color: #76658c; }

    .results-caption { color: #7e8b82; font-size: 11px; line-height: 1.8; }

    /* Steps */

    .steps { display: grid; gap: 25px; counter-reset: steps; }

    .step {
      position: relative;
      padding-top: 21px;
      border-top: 1px solid var(--line);
      counter-increment: steps;
    }

    .step::before {
      content: counter(steps, decimal-leading-zero);
      display: block;
      margin-bottom: 19px;
      color: #9aa5b1;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .08em;
    }

    .step h3 { margin-bottom: 10px; font-size: 17px; letter-spacing: -.025em; }
    .step p { color: var(--muted); font-size: 13px; line-height: 1.8; }

    .steps-link { margin-top: 28px; }

    /* Terms */

    .terms-layout { display: grid; gap: 25px; }
    .terms-intro p { margin-top: 17px; color: var(--muted); font-size: 14px; line-height: 1.8; }

    .terms-list { margin: 0; border-top: 1px solid var(--line); }

    .term {
      display: grid;
      gap: 8px;
      padding-block: 20px;
      border-bottom: 1px solid var(--line);
    }

    .term dt { font-size: 13px; font-weight: 600; }
    .term dd { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

    .payout-banner {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      margin-top: 24px;
      padding: 22px;
      border: 1px solid #dfe8e2;
      border-radius: 16px;
      background: #eef5f0;
    }

    .payout-banner > .icon { margin-top: 2px; color: #6f907b; }
    .payout-banner h3 { font-size: 14px; }
    .payout-banner p { margin-top: 7px; color: #748178; font-size: 12px; line-height: 1.8; }

    /* Product context */

    .product-banner {
      display: grid;
      gap: 25px;
      padding: 29px;
      border: 1px solid var(--line);
      border-radius: 23px;
      background: white;
    }

    .product-banner h2 { font-size: 27px; letter-spacing: -.035em; }
    .product-banner p { margin-top: 15px; color: var(--muted); font-size: 14px; line-height: 1.8; }
    .product-banner .text-link { margin-top: 21px; }

    .product-points { display: grid; gap: 13px; align-content: center; }

    .product-point {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 17px;
      border: 1px solid #eceef2;
      border-radius: 12px;
      background: #f9fafb;
    }

    .product-point .icon { color: #8d9c93; width: 18px; height: 18px; margin-top: 2px; }
    .product-point strong { display: block; font-size: 12px; font-weight: 600; }
    .product-point span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }

    /* FAQ */

    .faq-wrap { max-width: 800px; margin-inline: auto; }
    .faq-list { border-top: 1px solid var(--line); }
    .faq-item { border-bottom: 1px solid var(--line); }

    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding-block: 22px;
      list-style: none;
      cursor: pointer;
      font-size: 14px;
      font-weight: 550;
      line-height: 1.5;
    }

    .faq-item summary::-webkit-details-marker { display: none; }

    .faq-plus {
      display: grid;
      place-items: center;
      width: 25px;
      height: 25px;
      flex: 0 0 auto;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: white;
      color: #85909d;
    }

    .faq-plus::before { content: "+"; font-size: 17px; font-weight: 400; }
    .faq-item[open] .faq-plus::before { content: "−"; }

    .faq-answer {
      padding: 0 35px 23px 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.85;
    }

    /* Final */

    .final-section { padding-block: 25px 65px; }

    .final-cta {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 49px 25px;
      border: 1px solid #343e3c;
      border-radius: 27px;
      background: #20282b;
      color: white;
      text-align: center;
    }

    .final-cta::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: -50%;
      background:
        radial-gradient(ellipse at 28% 70%, rgb(58 115 91 / 55%), transparent 38%),
        radial-gradient(ellipse at 78% 50%, rgb(111 88 148 / 35%), transparent 35%);
      pointer-events: none;
    }

    .final-cta::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      opacity: .07;
      background-image:
        linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px);
      background-size: 55px 55px;
      -webkit-mask-image: linear-gradient(90deg, #000, transparent 45%, #000);
      mask-image: linear-gradient(90deg, #000, transparent 45%, #000);
      pointer-events: none;
    }

    .final-cta .eyebrow { color: #b5c5bc; }

    .final-cta h2 {
      max-width: 680px;
      margin-inline: auto;
      font-size: clamp(32px, 4.3vw, 49px);
      letter-spacing: -.045em;
    }

    .final-cta p {
      max-width: 500px;
      margin: 20px auto 27px;
      color: #bdcbc5;
      font-size: 14px;
      line-height: 1.8;
    }

    .final-cta small { display: block; margin-top: 16px; color: #a9bbb2; font-size: 11px; }

    /* Footer */

    .footer-main {
      display: flex;
      flex-direction: column;
      gap: 25px;
      padding-bottom: 27px;
      border-bottom: 1px solid var(--line);
    }

    .footer-brand p { margin-top: 13px; color: var(--muted); font-size: 12px; }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 22px;
      color: var(--muted);
      font-size: 12px;
    }

    .footer-bottom {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-block: 20px 26px;
      color: #858f9a;
      font-size: 10px;
    }

    /* Motion */

    @keyframes ambient {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(-15px, 12px, 0); }
    }

    .reveal.is-pending { opacity: 0; transform: translateY(16px); }

    .reveal.is-visible {
      opacity: 1;
      transform: none;
      transition: opacity .65s var(--ease), transform .65s var(--ease);
    }

    @media (hover: hover) {
      .button:hover { transform: translateY(-2px); }
      .button-dark:hover { background: #343d43; }
      .button-mint:hover { background: #b2eedc; }
      .button-light:hover { box-shadow: 0 5px 15px rgb(30 40 50 / 6%); }

      .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px -30px rgb(35 47 60 / 25%);
      }

      .header-nav > a:not(.button):hover,
      .footer-links a:hover,
      .text-link:hover { color: var(--green); }
    }

    @media (min-width: 600px) {
      .container { width: min(var(--container), calc(100% - 64px)); }
      .section { padding-block: 78px; }
      .header-home { display: inline; }
      .header-nav { gap: 22px; }
      .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
      .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
      .term { grid-template-columns: 155px 1fr; gap: 20px; }
      .calculation-copy, .calculation-results { padding: 35px; }
      .product-banner { padding: 36px; }
      .final-cta { padding: 63px 35px; }
      .footer-bottom { flex-direction: row; justify-content: space-between; gap: 25px; }
    }

    @media (min-width: 900px) {
      .section { padding-block: 88px; }
      .hero { padding-block: 35px 77px; }
      .breadcrumbs { margin-bottom: 51px; }
      .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 55px; }
      .commission-visual { padding-inline: 8px; }
      .commission-card { padding: 27px 30px; }
      .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .calculation { grid-template-columns: 1fr 1fr; }
      .calculation-copy, .calculation-results { padding: 42px; }
      .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px; }
      .terms-layout { grid-template-columns: .8fr 1.2fr; gap: 65px; }
      .product-banner { grid-template-columns: 1.2fr 1fr; gap: 55px; padding: 43px; }
      .footer-main { flex-direction: row; align-items: center; justify-content: space-between; }
    }

    @media (max-width: 359px) {
      .container { width: calc(100% - 28px); }
      .brand { font-size: 21px; }
      .brand-mark { width: 30px; height: 30px; }
      .header-nav { gap: 10px; }
      .header-nav .button { padding-inline: 10px; font-size: 11px; }
      .hero-actions .button { width: 100%; }
      .commission-card { padding: 22px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }
      .reveal.is-pending { opacity: 1; transform: none; }
    }

    @media print {
      .site-header { position: static; }
      .reveal.is-pending { opacity: 1; transform: none; }
      .hero, .calculation-results, .final-cta { background: white; color: black; }
      .final-cta p, .final-cta small { color: #444; }
    }

    /* ==================================================
       Partner calculator — monthly cohort growth
    ================================================== */

    .partner-calc {
      --pc-first: #79b79c;
      --pc-repeat: #b8a6d2;
      display: grid;
      min-width: 0;
      overflow: hidden;
      border: 1px solid #dfe6e2;
      border-radius: 25px;
      background: #fff;
      box-shadow: 0 24px 65px -45px rgb(38 61 48 / 28%);
    }

    .partner-calc > * { min-width: 0; }

    .pc-settings {
      padding: 28px;
      border-bottom: 1px solid #e5ebe7;
      background: #fff;
    }

    .pc-small-label {
      display: block;
      color: #7a877f;
      font-size: 10px;
      font-weight: 650;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .pc-settings-heading h3 {
      margin-top: 15px;
      font-size: 26px;
      letter-spacing: -.04em;
      line-height: 1.18;
    }

    .pc-settings-heading > p {
      max-width: 330px;
      margin-top: 13px;
      color: #78827d;
      font-size: 13px;
      line-height: 1.8;
    }

    .pc-controls {
      display: grid;
      gap: 26px;
      margin-top: 29px;
    }

    .pc-field { min-width: 0; }

    .pc-field > label {
      display: block;
      margin-bottom: 10px;
      color: #4b5850;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.6;
    }

    .pc-number-control {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) 46px;
      align-items: center;
      gap: 8px;
      padding: 7px;
      border: 1px solid #dce5df;
      border-radius: 14px;
      background: #f9fbfa;
      transition: border-color .2s, box-shadow .2s;
    }

    .pc-number-control:focus-within {
      border-color: #8fb6a1;
      box-shadow: 0 0 0 4px rgb(121 183 156 / 11%);
    }

    .pc-stepper {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      padding: 0;
      border: 1px solid #e2e8e4;
      border-radius: 10px;
      background: #fff;
      color: #52675b;
      font-size: 23px;
      line-height: 1;
      cursor: pointer;
      transition: background .2s, border-color .2s;
    }

    .pc-stepper:disabled {
      opacity: .35;
      cursor: default;
    }

    #pc-customers {
      width: 100%;
      min-width: 0;
      padding: 5px 0;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-size: 30px;
      font-weight: 600;
      letter-spacing: -.05em;
      text-align: center;
      font-variant-numeric: tabular-nums;
      appearance: textfield;
      -moz-appearance: textfield;
    }

    #pc-customers::-webkit-inner-spin-button,
    #pc-customers::-webkit-outer-spin-button {
      margin: 0;
      -webkit-appearance: none;
    }

    #pc-customers[aria-invalid="true"] { color: #a04d4d; }

    .pc-field-hint,
    .pc-input-error {
      margin-top: 10px;
      font-size: 11px;
      line-height: 1.7;
    }

    .pc-field-hint { color: #8a948e; }
    .pc-input-error { color: #a04d4d; }

    .pc-presets {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 14px;
    }

    .pc-presets button {
      min-width: 47px;
      min-height: 36px;
      padding: 6px 13px;
      border: 1px solid #e5eae7;
      border-radius: 9px;
      background: #fff;
      color: #77837b;
      font-size: 12px;
      cursor: pointer;
      transition: background .2s, border-color .2s, color .2s;
    }

    .pc-presets button[aria-pressed="true"] {
      border-color: #c9dfd1;
      background: #edf5ef;
      color: #37664c;
    }

    #pc-plan {
      width: 100%;
      min-width: 0;
      min-height: 49px;
      padding: 12px;
      border: 1px solid #dce5df;
      border-radius: 11px;
      background: #fff;
      color: #38463d;
      font-size: 13px;
      cursor: pointer;
    }

    .pc-rate-note {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 18px;
      margin-top: 26px;
      padding-top: 20px;
      border-top: 1px solid #edf0ee;
      color: #849088;
      font-size: 11px;
    }

    .pc-rate-note strong {
      margin-right: 3px;
      color: #466b55;
      font-weight: 650;
    }

    .pc-rate-note span + span strong { color: #847097; }

    .pc-nojs {
      margin-top: 22px;
      color: #78827d;
      font-size: 12px;
      line-height: 1.8;
    }

    /* Правая часть */

    .pc-dashboard {
      padding: 28px;
      background:
        radial-gradient(
          ellipse at 100% 0%,
          rgb(235 228 246 / 66%),
          transparent 48%
        ),
        linear-gradient(155deg, #f9fbfa, #f1f6f3);
    }

    .pc-dashboard-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .pc-scenario {
      margin-top: 8px;
      color: #5d6c63;
      font-size: 12px;
      line-height: 1.7;
    }

    .pc-period {
      flex: 0 0 auto;
      padding: 5px 9px;
      border: 1px solid rgb(217 224 220 / 85%);
      border-radius: 7px;
      background: rgb(255 255 255 / 65%);
      color: #7a847f;
      font-size: 10px;
      white-space: nowrap;
    }

    /* График */

    .pc-chart-area { margin-top: 29px; }

    .pc-chart-topline {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 6px 12px;
      color: #87928c;
      font-size: 10px;
    }

    .pc-chart {
      position: relative;
      height: 232px;
      margin-top: 15px;
      isolation: isolate;
    }

    .pc-chart-grid {
      position: absolute;
      z-index: -1;
      inset: 0 0 31px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      pointer-events: none;
    }

    .pc-chart-grid span {
      display: block;
      width: 100%;
      border-top: 1px dashed #dde5df;
    }

    .pc-chart-grid span:last-child {
      border-top-style: solid;
    }

    .pc-bars {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 6px;
      height: 100%;
    }

    .pc-bars > li {
      min-width: 0;
      height: 100%;
    }

    .pc-bar {
      display: flex;
      flex-direction: column;
      gap: 9px;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #8a948e;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .pc-bar:focus-visible {
      outline-offset: 3px;
    }

    .pc-bar-track {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: flex-end;
      width: 100%;
      min-height: 0;
      border-radius: 7px 7px 2px 2px;
      background: transparent;
      transition: background .2s;
    }

    .pc-bar-stack {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: var(--pc-height, 0%);
      overflow: hidden;
      border-radius: 6px 6px 2px 2px;
      opacity: .72;
      transition:
        height .4s var(--ease),
        opacity .2s,
        filter .2s;
    }

    .pc-bar-repeat,
    .pc-bar-first {
      display: block;
      width: 100%;
      min-height: 0;
    }

    .pc-bar-repeat {
      flex: var(--pc-repeat-weight, 0) 1 0;
      background: linear-gradient(90deg, #b1a0cb, #c6b7dc);
    }

    .pc-bar-first {
      flex: var(--pc-first-weight, 1) 1 0;
      background: linear-gradient(90deg, #74ad93, #90c5aa);
    }

    .pc-bar-number {
      display: grid;
      place-items: center;
      align-self: center;
      width: 24px;
      height: 22px;
      border-radius: 6px;
      font-size: 10px;
      font-variant-numeric: tabular-nums;
      transition: background .2s, color .2s;
    }

    .pc-bar[aria-pressed="true"] .pc-bar-track {
      background: rgb(84 122 98 / 5%);
    }

    .pc-bar[aria-pressed="true"] .pc-bar-stack {
      opacity: 1;
      filter: saturate(1.08);
    }

    .pc-bar[aria-pressed="true"] .pc-bar-number {
      background: #e1ece5;
      color: #345b44;
      font-weight: 700;
    }

    .pc-chart-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px 16px;
      margin-top: 15px;
    }

    .pc-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 15px;
      color: #7b8880;
      font-size: 10px;
    }

    .pc-legend > span,
    .pc-breakdown .pc-detail-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .pc-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-radius: 2px;
    }

    .pc-dot-first { background: var(--pc-first); }
    .pc-dot-repeat { background: var(--pc-repeat); }

    .pc-chart-hint {
      color: #919b95;
      font-size: 10px;
    }

    /* Расшифровка выбранного месяца */

    .pc-month-details {
      margin-top: 24px;
      padding: 22px;
      border: 1px solid rgb(218 228 221 / 90%);
      border-radius: 17px;
      background: rgb(255 255 255 / 80%);
      box-shadow: 0 9px 25px -22px rgb(44 72 54 / 28%);
    }

    .pc-detail-label {
      display: block;
      color: #7d8981;
      font-size: 11px;
      line-height: 1.6;
    }

    .pc-month-total {
      display: block;
      margin-top: 5px;
      color: #335b44;
      font-size: clamp(29px, 3.6vw, 43px);
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -.055em;
      font-variant-numeric: tabular-nums;
      overflow-wrap: anywhere;
    }

    .pc-breakdown {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin-top: 19px;
      padding-top: 17px;
      border-top: 1px solid #e9eeeb;
    }

    .pc-breakdown > div { min-width: 0; }

    .pc-breakdown strong {
      display: block;
      margin-top: 7px;
      color: #42664f;
      font-size: clamp(17px, 2vw, 22px);
      font-weight: 600;
      letter-spacing: -.035em;
      line-height: 1.35;
      font-variant-numeric: tabular-nums;
      overflow-wrap: anywhere;
    }

    .pc-breakdown > div + div strong { color: #837094; }

    .pc-breakdown small {
      display: block;
      margin-top: 5px;
      color: #929b95;
      font-size: 10px;
      line-height: 1.7;
    }

    .pc-year-summary {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 13px 22px;
      margin-top: 21px;
    }

    .pc-year-summary > div { min-width: 0; }

    .pc-year-summary strong {
      display: block;
      margin-top: 5px;
      color: #344d3d;
      font-size: clamp(24px, 2.7vw, 31px);
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: -.045em;
      font-variant-numeric: tabular-nums;
      overflow-wrap: anywhere;
    }

    .pc-year-summary > p {
      color: #89958d;
      font-size: 10px;
      line-height: 1.8;
    }

    /* Допущения расчёта */

    .pc-assumptions {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      padding: 20px 28px;
      border-top: 1px solid #e4ebe6;
      background: #fafcfb;
    }

    .pc-assumptions > .icon {
      width: 16px;
      height: 16px;
      margin-top: 2px;
      color: #89a391;
    }

    .pc-assumptions p {
      color: #8a948e;
      font-size: 10px;
      line-height: 1.85;
    }

    .pc-assumptions strong {
      color: #63756a;
      font-weight: 600;
    }

    .pc-sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    @media (hover: hover) {
      .pc-stepper:not(:disabled):hover {
        border-color: #c5d8cb;
        background: #edf5ef;
      }

      .pc-presets button:hover {
        border-color: #c9dfd1;
        background: #f3f8f5;
      }

      .pc-bar:hover .pc-bar-stack { opacity: 1; }
      .pc-bar:hover .pc-bar-track { background: rgb(84 122 98 / 4%); }
      .pc-bar:hover .pc-bar-number { color: #345b44; }
    }

    @media (min-width: 600px) {
      .pc-settings,
      .pc-dashboard { padding: 34px; }

      .pc-chart { height: 255px; }
      .pc-bars { gap: 9px; }
      .pc-assumptions { padding: 22px 34px; }
    }

    @media (min-width: 900px) {
      .partner-calc {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.45fr);
      }

      .pc-settings {
        padding: 34px 30px;
        border-right: 1px solid #e5ebe7;
        border-bottom: 0;
      }

      .pc-dashboard { padding: 34px 30px; }
      .pc-assumptions { grid-column: 1 / -1; }
    }

    @media (max-width: 599px) {
      .pc-settings,
      .pc-dashboard { padding: 24px 20px; }

      .pc-dashboard-heading { gap: 10px; }
      .pc-period { padding-inline: 7px; font-size: 9px; }
      .pc-chart { height: 211px; }
      .pc-bars { gap: 4px; }
      .pc-bar-number { width: 19px; font-size: 9px; }
      .pc-bar-stack { border-radius: 4px 4px 1px 1px; }
      .pc-chart-hint { display: none; }
      .pc-month-details { padding: 18px 16px; }
      .pc-breakdown { gap: 12px; }
      .pc-assumptions { padding: 19px 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .partner-calc *,
      .partner-calc *::before,
      .partner-calc *::after {
        animation: none !important;
        transition: none !important;
      }
    }

    @media print {
      .pc-bar-stack {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }

      .pc-month-details,
      .pc-year-summary { break-inside: avoid; }
    }
        /* ==================================================
       Calculator — readable scale and selected value
    ================================================== */

    .pc-chart-topline {
      align-items: center;
      min-height: 24px;
    }

    #pc-chart-scale {
      position: relative;
      padding: 3px 7px;
      border-radius: 6px;
      color: #728278;
      font-variant-numeric: tabular-nums;
      transition: background .25s, color .25s;
    }

    #pc-chart-scale::after {
      content: "Масштаб изменён";
      position: absolute;
      right: 0;
      bottom: calc(100% + 3px);
      color: #708b79;
      font-size: 9px;
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(3px);
      pointer-events: none;
      transition: opacity .2s, transform .2s;
    }

    #pc-chart-scale.is-rescaled {
      background: #e5efe8;
      color: #3d674e;
    }

    #pc-chart-scale.is-rescaled::after {
      opacity: 1;
      transform: translateY(0);
    }

    /*
     * Слева — место под денежную шкалу.
     * Сверху — место под подпись самого высокого столбца.
     */

    .pc-chart {
      margin-top: 35px;
      margin-left: 62px;
    }

    .pc-chart-grid > span {
      position: relative;
    }

    .pc-chart-grid > span::before {
      content: attr(data-label);
      position: absolute;
      top: 0;
      left: -62px;
      width: 53px;
      color: #8d9891;
      font-size: 9px;
      font-weight: 400;
      line-height: 1;
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      transform: translateY(-50%);
    }

    /*
     * Этот слой совпадает с рабочей высотой столбцов:
     * нижние 31px оставлены под номера месяцев.
     */

    .pc-chart-overlay {
      position: absolute;
      z-index: 3;
      inset: 0 0 31px;
      pointer-events: none;
    }

    .pc-chart-value {
      position: absolute;

      /*
       * Подпись следует за столбцом, но не выходит
       * за левый и правый края графика.
       */
      left: clamp(
        58px,
        var(--pc-label-x, 95.833%),
        calc(100% - 58px)
      );

      bottom: var(--pc-label-y, 93.08%);

      display: block;
      width: max-content;
      max-width: calc(100% - 8px);
      padding: 6px 9px;
      border: 1px solid #d8e5dc;
      border-radius: 8px;
      background: rgb(255 255 255 / 96%);
      box-shadow: 0 5px 16px -9px rgb(44 72 54 / 25%);
      color: #365c45;
      font-size: 11px;
      font-weight: 650;
      line-height: 1.3;
      letter-spacing: -.02em;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;

      transform: translate(-50%, -8px);

      transition:
        left .3s var(--ease),
        bottom .4s var(--ease);
    }

    @media (max-width: 599px) {
      .pc-chart {
        margin-left: 54px;
      }

      .pc-chart-grid > span::before {
        left: -54px;
        width: 47px;
        font-size: 8px;
      }

      .pc-chart-value {
        left: clamp(
          52px,
          var(--pc-label-x, 95.833%),
          calc(100% - 52px)
        );

        padding: 5px 7px;
        font-size: 10px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pc-chart-value,
      #pc-chart-scale,
      #pc-chart-scale::after {
        transition: none !important;
      }
    }