/* ==========================================================================
   Kalasoon — partner landing page (/partnership)
   --------------------------------------------------------------------------
   Loaded by front::pages.partnership, and by front::pages.show when the page
   it renders has an FAQ list to show. Every selector is scoped under .kpt so
   nothing here can reach the rest of the shop, which is the same arrangement
   dashboard-v2.css uses for the v2 panel — and the palette is deliberately the
   same one, so a visitor who applies here and later signs in to the panel sees
   one product rather than two.

   The type family is inherited from the theme instead of being pulled from a
   font CDN: the shop already ships a Persian face and a second webfont would
   only cost a request.
   ========================================================================== */

.kpt {
    --kpt-accent: #0783a6;
    --kpt-accent-2: #05b8e8;
    --kpt-accent-deep: #05607f;
    --kpt-accent-soft: rgba(7, 131, 166, .08);
    --kpt-accent-line: rgba(7, 131, 166, .16);
    --kpt-accent-hair: rgba(7, 131, 166, .09);

    --kpt-ink: #1a1a2e;
    --kpt-body: #374151;
    --kpt-muted: #6b7280;
    --kpt-faint: #9ca3af;

    --kpt-line: #f3f4f6;
    --kpt-field: #fafcfe;
    --kpt-canvas: #f4f7fa;
    --kpt-surface: #ffffff;
    --kpt-danger: #dc2626;

    --kpt-shadow-sm: 0 1px 8px rgba(7, 131, 166, .04);
    --kpt-shadow: 0 2px 16px rgba(7, 131, 166, .06);
    --kpt-shadow-lg: 0 8px 40px rgba(7, 131, 166, .11);

    --kpt-radius: 18px;

    background: var(--kpt-canvas);
    color: var(--kpt-body);
    line-height: 1.9;
    padding-bottom: 64px;
}

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

/* The theme floats #kalasoon-header (and .main-footer) to the right at the full
   width of .wrapper, so <main class="main-content"> is laid out from y=0 —
   underneath the header rather than after it. Every other page gets away with
   that: main is transparent, and its blocks are not block formatting contexts,
   so only their line boxes step around the float. This page breaks both
   assumptions. main is painted (the canvas below), which would cover the
   header, and .kpt-hero has overflow:hidden, which makes it a BFC — and a BFC
   may not overlap a float, so a full-width one leaves it zero room and
   collapses the hero to 0px wide with everything inside it clipped away.

   Clearing the float puts main back below the header where it belongs. */
main.kpt {
    clear: both;
}

/* Dropped into an existing page card (front::pages.show) rather than owning
   the viewport, so it keeps the tokens but none of the page chrome. */
.kpt-inline {
    background: transparent;
    padding-bottom: 0;
}

.kpt-inline .kpt-block-head {
    text-align: right;
    margin-bottom: 24px;
}

.kpt-inline .kpt-faq {
    max-width: none;
}

.kpt ul,
.kpt ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kpt a,
.kpt a:hover {
    text-decoration: none;
}

.kpt h1,
.kpt h2,
.kpt h3 {
    color: var(--kpt-ink);
    margin: 0;
}

.kpt p {
    margin: 0;
}

.kpt .kpt-accent {
    color: var(--kpt-accent);
}

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */

.kpt-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: var(--kpt-accent);
    letter-spacing: .08em;
    margin-bottom: 10px !important;
}

.kpt-section-title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.45;
    margin-bottom: 16px !important;
}

.kpt-lead {
    font-size: 14px;
    color: var(--kpt-muted);
    line-height: 2;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.kpt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 13px;
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.kpt-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .6);
    outline-offset: 2px;
}

.kpt-btn-primary {
    width: 100%;
    color: #fff;
    background: linear-gradient(135deg, var(--kpt-accent) 0%, var(--kpt-accent-2) 100%);
    box-shadow: 0 6px 20px rgba(7, 131, 166, .3);
}

.kpt-btn-primary:hover {
    color: #fff;
    transform: translateY(-1px);
    opacity: .94;
}

.kpt-btn-primary[disabled] {
    opacity: .6;
    cursor: progress;
    transform: none;
}

.kpt-btn-light {
    background: #fff;
    color: var(--kpt-accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.kpt-btn-light:hover {
    color: var(--kpt-accent);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.kpt-hero {
    position: relative;
    overflow: hidden;
    padding: 22px 0 52px;
    background: linear-gradient(135deg, var(--kpt-accent-deep) 0%, var(--kpt-accent) 52%, var(--kpt-accent-2) 100%);
}

/* Decorative bubbles. Positioned from the logical left so they stay on the
   quiet side of the band in both directions. */
.kpt-hero-orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
}

.kpt-hero-orb-a {
    top: -70px;
    left: -60px;
    width: 230px;
    height: 230px;
}

.kpt-hero-orb-b {
    bottom: 10px;
    left: 130px;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, .045);
}

.kpt-hero > .container {
    position: relative;
    z-index: 1;
}

.kpt-chip-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 38px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.kpt-chip-mark {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .25);
}

.kpt-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 40px;
}

.kpt-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 20px !important;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .95);
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .22);
}

.kpt-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5fffb0;
}

.kpt-hero-title {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 16px !important;
}

.kpt-hero-accent {
    color: #a8e6f7;
}

.kpt-hero-lead {
    max-width: 790px;
    font-size: 15px;
    line-height: 1.95;
    color: rgba(255, 255, 255, .82);
    text-align: justify;
}

.kpt-hero-btn {
    margin-top: 26px;
}

.kpt-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 190px;
}

.kpt-stat {
    padding: 14px 20px;
    border-radius: 14px;
    text-align: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
}

.kpt-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
}

.kpt-stat-label {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: rgba(255, 255, 255, .72);
}

/* --------------------------------------------------------------------------
   Intro + form
   -------------------------------------------------------------------------- */

.kpt-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    gap: 40px;
    align-items: start;
    padding-top: 48px;
    /* The hero CTA jumps here; keep the card clear of the sticky shop header. */
    scroll-margin-top: 24px;
}

.kpt-richtext {
    font-size: 14px;
    color: var(--kpt-muted);
    line-height: 2;
}

.kpt-richtext :last-child {
    margin-bottom: 0;
}

.kpt-richtext img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.kpt-points {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 30px !important;
}

.kpt-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--kpt-body);
    line-height: 29px;
}

.kpt-point-mark {
    width: 26px;
    height: 26px;
    margin-top: 3px;
    flex-shrink: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kpt-accent);
    background: var(--kpt-accent-soft);
    border: 1px solid var(--kpt-accent-line);
}

/* The bullets are whatever the admin listed in the WYSIWYG field, so a point
   can carry its own markup — a bold run, a link, even a nested list. min-width
   keeps a long unbroken one from pushing the tick off the row. */
.kpt-point-text {
    min-width: 0;
}

.kpt-point-text ul,
.kpt-point-text ol {
    margin-top: 6px !important;
    padding-right: 18px !important;
    list-style: disc;
}

.kpt-point-text a {
    color: var(--kpt-accent);
    text-decoration: underline;
}

.kpt-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 32px !important;
    padding: 6px 20px;
    border-radius: 16px;
    background: var(--kpt-surface);
    border: 1px solid var(--kpt-accent-hair);
    box-shadow: var(--kpt-shadow-sm);
}

.kpt-trust li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--kpt-muted);
}

.kpt-trust li + li {
    border-right: 1px solid var(--kpt-line);
}

.kpt-trust svg {
    color: var(--kpt-accent);
}

/* --------------------------------------------------------------------------
   Signup card
   -------------------------------------------------------------------------- */

.kpt-formcard {
    position: sticky;
    top: 20px;
    padding: 32px 28px 26px;
    border-radius: 20px;
    background: var(--kpt-surface);
    border: 1px solid rgba(7, 131, 166, .1);
    box-shadow: var(--kpt-shadow-lg);
}

.kpt-form-head {
    text-align: center;
    margin-bottom: 24px;
}

.kpt-form-mark {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--kpt-accent) 0%, var(--kpt-accent-2) 100%);
    box-shadow: 0 6px 20px rgba(7, 131, 166, .28);
}

.kpt-form-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px !important;
}

.kpt-form-sub {
    font-size: 12px;
    color: var(--kpt-faint);
}

.kpt-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.kpt-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kpt-field label {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--kpt-body);
}

.kpt-req {
    color: var(--kpt-danger);
    font-size: 14px;
    line-height: 1;
}

.kpt-field input,
.kpt-field select {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1.5px solid rgba(7, 131, 166, .18);
    background: var(--kpt-field);
    color: var(--kpt-ink);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.kpt-field input::placeholder {
    color: var(--kpt-faint);
}

/* The mobile field for a signed-in applicant: shown because it is part of what
   is being filed, greyed because the account decides it. */

.kpt-field input[readonly] {
    background: rgba(7, 131, 166, .05);
    color: var(--kpt-muted);
    cursor: default;
}

.kpt-field input:focus,
.kpt-field select:focus {
    border-color: var(--kpt-accent);
    box-shadow: 0 0 0 3px rgba(7, 131, 166, .1);
}

.kpt-field select {
    /* The chevron is painted in rather than left to the platform, so the three
       birth-date selects line up with each other on every browser. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 34px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
}

.kpt-field select[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.kpt-ltr {
    direction: ltr;
    text-align: right;
}

.kpt-input-wrap {
    position: relative;
    display: block;
}

.kpt-has-tag {
    padding-left: 66px;
}

.kpt-tag {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--kpt-line);
    color: var(--kpt-faint);
    font-size: 10px;
    font-weight: 700;
}

.kpt-triple {
    display: grid;
    grid-template-columns: 2fr 2.4fr 2.6fr;
    gap: 8px;
}

.kpt-field.is-invalid input,
.kpt-field.is-invalid select {
    border-color: var(--kpt-danger);
}

.kpt-error {
    display: none;
    font-size: 11px;
    color: var(--kpt-danger);
}

.kpt-field.is-invalid .kpt-error {
    display: block;
}

.kpt-hint {
    font-size: 11px;
    color: var(--kpt-faint);
    line-height: 1.8;
}

.kpt-submit {
    margin-top: 4px;
    padding: 14px 0;
}

.kpt-terms {
    text-align: center;
    font-size: 11px;
    color: var(--kpt-faint);
    line-height: 1.8;
}

.kpt-terms .kpt-accent {
    font-weight: 600;
}

.kpt-note {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.9;
    background: var(--kpt-accent-soft);
    border: 1px solid var(--kpt-accent-line);
    color: var(--kpt-accent);
}

.kpt-note-error {
    background: rgba(220, 38, 38, .06);
    border-color: rgba(220, 38, 38, .2);
    color: var(--kpt-danger);
}

ul.kpt-note {
    padding-right: 30px;
    list-style: disc;
}

/* A note that answers with an action rather than only wording — the "already
   registered" case, where the way forward is the login button. The button keeps
   the accent fill it has everywhere else so it still reads as the thing to
   press inside a red panel. */

.kpt-note-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kpt-note-action[hidden] {
    display: none;
}

.kpt-note-text {
    margin: 0;
    flex: 1 1 200px;
}

.kpt-note-btn {
    flex: 0 0 auto;
    padding: 9px 18px;
    font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   Success panel — replaces the form in place once the request is filed
   -------------------------------------------------------------------------- */

.kpt-success {
    text-align: center;
    padding: 8px 0 4px;
}

.kpt-success[hidden] {
    display: none;
}

.kpt-success-mark {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--kpt-accent) 0%, var(--kpt-accent-2) 100%);
    box-shadow: 0 8px 24px rgba(7, 131, 166, .28);
}

/* Nothing was filed this time — the request was already waiting. The cross and
   the red carry that on their own, so the heading beneath does not have to. */
.kpt-success-mark.is-wait {
    background: linear-gradient(135deg, #b91c1c 0%, var(--kpt-danger) 100%);
    box-shadow: 0 8px 24px rgba(220, 38, 38, .26);
}

.kpt-success-mark svg[hidden] {
    display: none;
}

.kpt-success-title {
    font-size: 21px;
    font-weight: 800;
    margin-bottom: 10px !important;
}

.kpt-success-lead {
    font-size: 14px;
    color: var(--kpt-muted);
    margin-bottom: 6px !important;
}

.kpt-success-note {
    font-size: 13px;
    color: var(--kpt-faint);
    margin-bottom: 22px !important;
}

/* --------------------------------------------------------------------------
   Section blocks
   -------------------------------------------------------------------------- */

.kpt-block {
    padding-top: 72px;
}

.kpt-block-head {
    text-align: center;
    margin-bottom: 44px;
}

.kpt-block-head .kpt-lead {
    max-width: 520px;
    margin: 0 auto;
}

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

.kpt-card {
    padding: 28px 24px;
    border-radius: var(--kpt-radius);
    background: var(--kpt-surface);
    border: 1px solid rgba(7, 131, 166, .08);
    box-shadow: 0 2px 16px rgba(7, 131, 166, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}

.kpt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(7, 131, 166, .14);
}

.kpt-card-mark {
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kpt-accent);
    background: var(--kpt-accent-soft);
    border: 1px solid var(--kpt-accent-line);
}

.kpt-card-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px !important;
}

.kpt-card-text {
    font-size: 13px;
    color: var(--kpt-muted);
    line-height: 1.9;
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.kpt-steps-block {
    margin-top: 72px;
    padding: 48px 40px;
    border-radius: 24px;
    background: var(--kpt-surface);
    border: 1px solid rgba(7, 131, 166, .08);
    box-shadow: 0 2px 20px rgba(7, 131, 166, .05);
}

.kpt-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

/* The rail behind the numbers. Stops short of the outer two so it never runs
   past the first and last step. */
.kpt-steps::before {
    content: "";
    position: absolute;
    top: 28px;
    right: 16.5%;
    left: 16.5%;
    height: 2px;
    border-radius: 2px;
    background: var(--kpt-accent-line);
}

.kpt-step {
    position: relative;
    text-align: center;
}

.kpt-step-number {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, var(--kpt-accent) 0%, var(--kpt-accent-2) 100%);
    box-shadow: 0 4px 16px rgba(7, 131, 166, .28);
}

.kpt-step-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px !important;
}

.kpt-step-text {
    max-width: 230px;
    margin: 0 auto;
    font-size: 13px;
    color: var(--kpt-muted);
    line-height: 1.9;
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.kpt-faq-block .kpt-block-head {
    margin-bottom: 36px;
}

.kpt-faq {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kpt-faq-item {
    border-radius: 14px;
    overflow: hidden;
    background: var(--kpt-surface);
    border: 1px solid rgba(7, 131, 166, .07);
    box-shadow: 0 1px 8px rgba(7, 131, 166, .04);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.kpt-faq-item.is-open {
    border-color: var(--kpt-accent-line);
    box-shadow: 0 4px 20px rgba(7, 131, 166, .1);
}

.kpt-faq-heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.kpt-faq-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 17px 22px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
}

.kpt-faq-number {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--kpt-accent);
    background: var(--kpt-accent-soft);
    border: 1px solid var(--kpt-accent-line);
    transition: background-color .18s ease, color .18s ease;
}

.kpt-faq-item.is-open .kpt-faq-number {
    background: var(--kpt-accent);
    color: #fff;
}

.kpt-faq-question {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--kpt-ink);
    line-height: 1.7;
}

.kpt-faq-chevron {
    flex-shrink: 0;
    color: var(--kpt-accent);
    transition: transform .2s ease;
}

.kpt-faq-item.is-open .kpt-faq-chevron {
    transform: rotate(180deg);
}

.kpt-faq-panel {
    padding: 16px 22px 20px;
    border-top: 1px solid var(--kpt-line);
}

.kpt-faq-panel[hidden] {
    display: none;
}

.kpt-faq-panel p {
    font-size: 13px;
    color: #4b5563;
    line-height: 2.1;
}

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.kpt-cta {
    position: relative;
    overflow: hidden;
    margin-top: 72px;
    padding: 48px 44px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: linear-gradient(135deg, var(--kpt-accent-deep) 0%, var(--kpt-accent) 60%, var(--kpt-accent-2) 100%);
}

.kpt-cta-orb-a {
    top: -34px;
    left: -34px;
    width: 170px;
    height: 170px;
}

.kpt-cta-orb-b {
    bottom: -24px;
    right: 84px;
    width: 110px;
    height: 110px;
}

.kpt-cta-text {
    position: relative;
    z-index: 1;
}

.kpt-cta-title {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.5;
    color: #fff;
    margin-bottom: 10px !important;
}

.kpt-cta-lead {
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
    line-height: 1.9;
}

.kpt-cta .kpt-btn {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .kpt-split {
        grid-template-columns: minmax(0, 1fr) 410px;
        gap: 28px;
    }

    .kpt-hero-title {
        font-size: 36px;
    }
}

@media (max-width: 991.98px) {
    /* The form stops being a side rail and becomes the next thing you read. */
    .kpt-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .kpt-formcard {
        position: static;
    }

    .kpt-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 28px;
    }

    .kpt-stats {
        flex-direction: row;
        min-width: 0;
    }

    .kpt-stat {
        flex: 1 1 0;
    }

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

@media (max-width: 767.98px) {
    .kpt-hero {
        padding-bottom: 40px;
    }

    .kpt-hero-title {
        font-size: 28px;
    }

    .kpt-section-title {
        font-size: 23px;
    }

    .kpt-block {
        padding-top: 56px;
    }

    .kpt-steps-block {
        margin-top: 56px;
        padding: 40px 22px;
    }

    .kpt-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    /* One column means the rail would run vertically through the numbers. */
    .kpt-steps::before {
        display: none;
    }

    .kpt-step-text {
        max-width: none;
    }

    .kpt-cta {
        margin-top: 56px;
        padding: 36px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .kpt-cta-title {
        font-size: 21px;
    }

    .kpt-hero {
        padding: 20px 24px;
    }
    .kpt-stat {
        width: 200px;
        margin: auto;
    }
    #partner-signup {
        padding: 20px 24px;
        direction: ltr;
    }
    #partner-signup > div {
        direction: rtl;
    }
}

@media (max-width: 575.98px) {
    .kpt-chip-brand {
        margin-bottom: 26px;
    }

    .kpt-stats {
        flex-direction: column;
    }

    .kpt-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .kpt-formcard {
        padding: 26px 18px 22px;
    }

    .kpt-trust {
        grid-template-columns: minmax(0, 1fr);
        padding: 4px 16px;
    }

    .kpt-trust li + li {
        border-right: 0;
        border-top: 1px solid var(--kpt-line);
    }

    .kpt-triple {
        grid-template-columns: minmax(0, 1fr);
    }

    .kpt-faq-trigger {
        padding: 15px 16px;
    }

    .kpt-faq-panel {
        padding: 14px 16px 18px;
    }
}