@layer app {
  /* ============================================================
     Partners landing page
     ============================================================ */

  /* var(--color-primary) over its own 12% tint reaches only 3.4:1 on the glass
     card, short of the 4.5:1 AA threshold for text. Shading the foreground
     clears it. */
  :root {
    --partner-ink: color-mix(in srgb, #000 30%, var(--color-primary));
  }

  .partner-landing {
    max-width: 640px;
  }

  .partner-section {
    padding: 2rem 1.75rem;
  }

  .partner-section + .partner-section {
    margin-top: 1.25rem;
  }

  .partner-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .partner-heading {
    font-size: 1.5rem;
    font-weight: 600;
  }

  .partner-step {
    color: color-mix(in srgb, var(--color-dark) 75%, transparent);
  }

  .partner-step + .partner-step {
    margin-top: 1.25rem;
  }

  .partner-step__number {
    width: 2rem;
    height: 2rem;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--partner-ink);
  }

  .partner-plan {
    padding: 1.25rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent);
    border-radius: var(--radius);
  }

  .partner-plan + .partner-plan {
    margin-top: 1rem;
  }

  .partner-plan--featured {
    border-color: var(--color-primary);
    border-width: 2px;
  }

  .partner-plan__badge {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--partner-ink);
    font-size: 0.75rem;
  }

  .partner-plan__features {
    color: color-mix(in srgb, var(--color-dark) 65%, transparent);

    li + li {
      margin-top: 0.25rem;
    }
  }

  /* The partners page's two calls to action, set lighter and a step smaller
     than a stock large button (DM Sans 500 at 18px rather than 600 at 20px). */
  .partner-landing-cta {
    --btn-font-size: 1.125rem;
    --btn-font-weight: 500;
  }

  .partner-cta {
    /* The button component's shared active rule (`.btn:first-child:active` and
       its siblings) outranks this class and paints from --btn-*-active. Setting
       the variables instead of the properties keeps the fill through a press. */
    --btn-fg: var(--partner-ink);
    --btn-bg: color-mix(in srgb, var(--color-primary) 10%, transparent);
    --btn-border: transparent;
    --btn-fg-hover: var(--partner-ink);
    --btn-bg-hover: color-mix(in srgb, var(--color-primary) 18%, transparent);
    --btn-border-hover: transparent;
    --btn-fg-active: var(--partner-ink);
    --btn-bg-active: color-mix(in srgb, var(--color-primary) 18%, transparent);
    --btn-border-active: transparent;
  }

  .partner-assurance {
    color: color-mix(in srgb, var(--color-dark) 75%, transparent);
  }

  .partner-assurance + .partner-assurance {
    margin-top: 1rem;
  }

  .partner-faq {
    .accordion-button {
      font-size: 1.0625rem;
    }

    .accordion-body {
      color: color-mix(in srgb, var(--color-dark) 65%, transparent);
    }
  }

  /* ---- Registration form ------------------------------------------ */

  .partner-form {
    .form-label,
    .partner-fieldset__legend {
      color: color-mix(in srgb, var(--color-dark) 65%, transparent);
      font-size: 0.8125rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
  }

  /* `~` rather than `+`: the Smart-ID panel sits between two sections and
     must not cost the second one its divider. */
  .partner-fieldset ~ .partner-fieldset {
    border-top: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }

  /* Bootstrap keeps legends floated at full width, which is what lays the
     section title under the divider instead of across it. */
  .partner-fieldset__legend {
    margin-bottom: 1rem;
  }

  /* A select that names itself through its prompt rather than a label,
     sized to match the floating fields around it. */
  .partner-select {
    height: calc(3.5rem + 2px);
  }

  /* Two equal columns, so the toggles match whatever their labels say and
     together span the same edges as the inputs below them. The hidden radios
     are absolutely positioned and take no cell. */
  .partner-kinds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
  }

  /* Input height (46px) rather than a tall block. A label too long for a
     phone wraps inside its cell; the grid row keeps both toggles as tall as
     the taller one. */
  .partner-kind {
    --btn-border: color-mix(in srgb, var(--color-dark) 12%, transparent);
    --btn-fg-active: var(--partner-ink);
    --btn-bg-active: transparent;
    --btn-border-active: var(--color-primary);
    --btn-padding-y: 0.5rem;
    --btn-padding-x: 0.75rem;
    --btn-font-size: 0.9375rem;

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    min-width: 0;

    .btn-check:checked + & {
      border-width: 2px;
    }

    /* The rest of a two-word type ("Eraisikust teenusepakkuja") sits a step
       lighter than the word that tells the types apart. */
    small {
      font-size: inherit;
      font-weight: 400;
    }
  }

  /* A photo already stored, with the box that keeps it in its corner: the
     tiles are too narrow on a phone for a visible label. Unticked, the photo
     fades to show it goes on the next save. */
  .partner-stored-image {
    position: relative;
    cursor: pointer;

    &:has(input:not(:checked)) .media-preview-thumb {
      opacity: 0.4;
    }
  }

  .partner-stored-image__keep {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    margin: 0;
  }

  /* ---- Smart-ID panel -------------------------------------------- */

  .partner-smart-id {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--color-dark), color-mix(in srgb, var(--color-dark) 80%, var(--color-primary)));
    color: rgb(255 255 255 / 0.85);
    font-size: 0.875rem;
  }

  .partner-smart-id__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 0.12);
    color: var(--color-secondary);
    font-size: 1.25rem;
  }

  .partner-smart-id__title {
    margin-bottom: 0.125rem;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
  }

  /* ---- Plan choice ------------------------------------------------ */

  /* The chosen card turns green. Green-700 rather than the palette's
     success green, which reads at only 2.3:1 as text on white. */
  .partner-plan-options {
    --partner-plan-chosen: #15803d;

    display: grid;
    gap: 0.625rem;
  }

  .partner-plan-option {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent);
    border-radius: var(--radius);
    background: var(--color-body-bg);
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);

    &:has(:checked) {
      border-color: var(--partner-plan-chosen);
      background: color-mix(in srgb, var(--color-success) 8%, var(--color-body-bg));

      .partner-plan-option__price {
        color: var(--partner-plan-chosen);
      }
    }

    &:has(:focus-visible) {
      box-shadow: 0 0 0 3px var(--primary-ring-strong);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .partner-plan-option {
      transition: none;
    }
  }

  .partner-plan-option__radio {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    accent-color: var(--partner-plan-chosen);
  }

  .partner-plan-option__body {
    flex: 1;
    min-width: 0;
  }

  /* The price holds the right edge; on a phone a badge wraps under the plan
     name instead of pushing the price onto its own line. */
  .partner-plan-option__header {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    justify-content: space-between;
  }

  .partner-plan-option__name {
    flex: 1;
    min-width: 0;
    color: var(--color-dark);
    font-weight: 600;

    .badge {
      margin-left: 0.25rem;
      font-size: 0.75rem;
      font-weight: 600;
    }
  }

  .partner-plan-option__pro {
    background: #fef3c7;
    color: #92400e;
  }

  .partner-plan-option__price {
    color: var(--partner-ink);
    font-weight: 700;
    white-space: nowrap;
  }

  .partner-plan-option__period {
    color: var(--color-muted);
    font-size: 0.8125rem;
    font-weight: 400;
  }

  .partner-plan-option__features {
    margin: 0.375rem 0 0;
    padding-left: 1rem;
    color: color-mix(in srgb, var(--color-dark) 65%, transparent);
    font-size: 0.8125rem;

    li + li {
      margin-top: 0.125rem;
    }
  }

  /* ---- Plan activation ------------------------------------------ */

  .partner-activation__icon {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: #fff;
    font-size: 1.5rem;
  }

  .partner-activation__trial {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-body-bg));
    color: #15803d;
    font-weight: 600;
  }

  /* Nothing to pay on the free plan, so no payment method to add. */
  .partner-activation:has(.partner-plan-option__radio[value="free"]:checked) .partner-activation__payment-method {
    display: none;
  }

  .partner-activation__heading {
    margin: 1.5rem 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
  }

  /* The inert stand-in for Stripe's Payment Element: it reads as a place
     rather than a control, so nobody mistakes it for a form to fill in. */
  .partner-activation__payment {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border: 1.5px dashed color-mix(in srgb, var(--color-dark) 20%, transparent);
    border-radius: var(--radius);
    color: color-mix(in srgb, var(--color-dark) 65%, transparent);
    font-size: 0.875rem;
  }

  .partner-activation__payment-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    opacity: 0.6;
  }

  .partner-activation__payment-title {
    margin-bottom: 0.125rem;
    color: var(--color-dark);
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .partner-activation__summary {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent);
    border-radius: var(--radius);
    background: var(--color-body-bg);

    dl > div {
      display: flex;
      justify-content: space-between;
      padding: 0.375rem 0;
    }

    dt {
      color: color-mix(in srgb, var(--color-dark) 65%, transparent);
      font-weight: 400;
    }

    dd {
      margin: 0;
      font-weight: 600;
    }
  }

  .partner-activation__total {
    border-top: 1px dashed color-mix(in srgb, var(--color-dark) 15%, transparent);

    dd {
      color: var(--partner-ink);
      font-size: 1.125rem;
      font-weight: 700;
    }
  }

  .partner-activation__after-trial {
    margin: 0.5rem 0 0;
    color: color-mix(in srgb, var(--color-dark) 60%, transparent);
    font-size: 0.8125rem;
  }
}