/* Mobile subscription flow (KSW-1616), served under /start/.
 *
 * Everything is scoped under .start-flow-page (body class set by
 * templates/start_flow/base.html) so nothing leaks into the rest of the
 * site. Colors come from KDS tokens (css/kds-tokens.css) only.
 *
 * The checkout step re-uses the desktop includes (_payment_fields.html,
 * _estimate.html, _checkout_scripts.html), so this file must replicate the
 * functional selectors those includes rely on: [data-loading] hiding for
 * the htmx loading-states extension, the #company:checked company/VAT
 * reveal, and the #toggle-coupon-form:checked coupon reveal. Unlike the
 * desktop page (which blanket-hides all radios/checkboxes), only the
 * mechanism inputs are hidden by id here, keeping payment-type radios
 * visible.
 */

/* ---------------------------------------------------------------- shell */

.start-flow-page {
  background: var(--kds-color-gray-1000);
  color: var(--kds-color-white-1000);
  font-family: var(--kds-font-body);
  min-height: 100vh;
  min-height: 100dvh;
}

/* The plan/CTA swapping relies on the hidden attribute; without this rule
 * any display: set below would override the browser's [hidden] handling
 * and every variant would render stacked. */
.start-flow-page [hidden] {
  display: none !important;
}

.start-flow-page .sf-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--kds-space-400) var(--kds-space-600);
  display: flex;
  flex-direction: column;
  gap: var(--kds-space-400);
}

.start-flow-page a {
  color: var(--kds-color-white-1000);
}

.start-flow-page hr {
  border: 0;
  border-bottom: 1px solid var(--kds-color-white-200);
  width: 100%;
  padding: 0;
  margin: 0;
}

.start-flow-page ul.messages {
  list-style: none;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--kds-space-200) var(--kds-space-400);
}

.start-flow-page ul.messages li {
  background: var(--kds-color-white-100);
  border: 1px solid var(--kds-color-white-200);
  border-radius: var(--kds-radius-base);
  padding: var(--kds-space-300) var(--kds-space-400);
  font-size: var(--kds-font-body-small);
}

.start-flow-page ul.messages li.error {
  border-color: var(--kds-color-red-500);
  color: var(--kds-color-red-300);
}

/* ------------------------------------------------------ progress header */

.start-flow-page .sf-header {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--kds-space-400);
  display: flex;
  flex-direction: column;
  gap: var(--kds-space-300);
}

.start-flow-page .sf-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kds-space-200);
}

.start-flow-page .sf-header__back {
  width: 2rem;
  flex-shrink: 0;
}

.start-flow-page .sf-header__back a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  color: var(--kds-color-white-500);
  border-radius: var(--kds-radius-full);
}

.start-flow-page .sf-header__logo {
  height: 1.25rem;
  width: auto;
}

.start-flow-page .sf-header__step {
  font-size: var(--kds-font-body-small);
  color: var(--kds-color-white-500);
  white-space: nowrap;
}

.start-flow-page .sf-header__segments {
  display: flex;
  gap: var(--kds-space-100);
}

.start-flow-page .sf-seg {
  flex: 1;
  height: 3px;
  border-radius: var(--kds-radius-full);
  background: var(--kds-color-white-200);
}

.start-flow-page .sf-seg--done {
  background: var(--kds-color-blue-600);
}

/* ------------------------------------------------------------ typography */

.start-flow-page .sf-title {
  font-family: var(--kds-font-subheading);
  font-size: var(--kds-font-heading);
  line-height: var(--kds-lh-title);
  margin: 0;
}

.start-flow-page .sf-subtitle {
  font-size: var(--kds-font-body-small);
  line-height: var(--kds-lh-body);
  color: var(--kds-color-white-500);
  margin: 0;
}

.start-flow-page .sf-muted {
  color: var(--kds-color-white-400);
  font-size: var(--kds-font-body-small);
}

.start-flow-page .medium-text {
  font-size: var(--kds-font-body-small);
  color: var(--kds-color-white-500);
}

.start-flow-page .small-text {
  font-size: 0.8rem;
  color: var(--kds-color-white-400);
}

.start-flow-page .small-text a {
  color: var(--kds-color-white-400);
  text-decoration: underline;
}

.start-flow-page .sf-center {
  text-align: center;
}

/* Uppercase section labels: CARD DETAILS, WHAT'S INCLUDED, ... */
.start-flow-page .sf-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kds-color-white-400);
  margin: 0;
}

/* ----------------------------------------------------------------- cards */

.start-flow-page .sf-card {
  background: var(--kds-color-white-100);
  border: 1px solid var(--kds-color-white-200);
  border-radius: var(--kds-radius-lg);
  padding: var(--kds-space-600);
  display: flex;
  flex-direction: column;
  gap: var(--kds-space-400);
}

.start-flow-page .sf-card--highlight {
  border-color: var(--kds-color-blue-600);
}

.start-flow-page .sf-chip {
  display: inline-block;
  padding: 2px var(--kds-space-300);
  border-radius: var(--kds-radius-full);
  font-size: 0.75rem;
  background: var(--kds-color-blue-1000);
  color: var(--kds-color-blue-300);
}

/* --------------------------------------------------------------- buttons */

.start-flow-page .sf-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--kds-space-400) var(--kds-space-600);
  border: 1px solid var(--kds-color-blue-600);
  border-radius: var(--kds-radius-full);
  background: var(--kds-color-blue-600);
  color: var(--kds-color-white-1000);
  font-family: var(--kds-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: var(--kds-lh-single);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--kds-transition-duration) var(--kds-transition-ease),
    color var(--kds-transition-duration) var(--kds-transition-ease);
}

.start-flow-page .sf-cta:hover {
  background: var(--kds-color-white-1000);
  border-color: var(--kds-color-white-1000);
  color: var(--kds-color-gray-900);
}

.start-flow-page .sf-cta:disabled {
  background: var(--kds-color-white-200);
  border-color: var(--kds-color-white-200);
  color: var(--kds-color-white-400);
  cursor: not-allowed;
}

.start-flow-page .sf-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--kds-space-400) var(--kds-space-600);
  border: 1px solid var(--kds-color-white-300);
  border-radius: var(--kds-radius-full);
  background: none;
  color: var(--kds-color-white-1000);
  font-family: var(--kds-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: var(--kds-lh-single);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--kds-transition-duration) var(--kds-transition-ease);
}

.start-flow-page .sf-btn-secondary:hover {
  border-color: var(--kds-color-white-1000);
}

.start-flow-page .sf-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--kds-color-white-500);
  font-size: var(--kds-font-body-small);
  text-decoration: underline;
  cursor: pointer;
}

.start-flow-page .sf-link--accent {
  color: var(--kds-color-blue-400);
  align-self: flex-start;
}

/* Sticky CTA bar: fades the page out underneath the button. */
.start-flow-page .sf-sticky {
  position: sticky;
  bottom: 0;
  margin: 0 calc(-1 * var(--kds-space-400));
  padding: var(--kds-space-600) var(--kds-space-400) var(--kds-space-400);
  background: linear-gradient(to top, var(--kds-color-gray-900) 60%, transparent);
}

/* ----------------------------------------------------------------- forms */

.start-flow-page label {
  font-size: var(--kds-font-body-small);
  font-weight: 600;
  color: var(--kds-color-white-900);
}

.start-flow-page input[type="text"],
.start-flow-page input[type="email"],
.start-flow-page input[type="password"],
.start-flow-page input[type="tel"],
.start-flow-page input[type="number"],
.start-flow-page select,
.start-flow-page textarea {
  width: 100%;
  padding: var(--kds-space-300) var(--kds-space-400);
  border: 1px solid var(--kds-color-white-300);
  border-radius: var(--kds-radius-base);
  background: var(--kds-color-white-100);
  color: var(--kds-color-white-1000);
  font-family: var(--kds-font-body);
  /* 16px minimum so iOS Safari doesn't zoom the field on focus. */
  font-size: 1rem;
}

.start-flow-page input:focus,
.start-flow-page select:focus,
.start-flow-page textarea:focus {
  outline: none;
  border-color: var(--kds-color-blue-600);
}

.start-flow-page input::placeholder,
.start-flow-page textarea::placeholder {
  color: var(--kds-color-white-400);
}

.start-flow-page select option {
  background: var(--kds-color-gray-900);
  color: var(--kds-color-white-1000);
}

/* Form errors: the shared includes render them as div.error-label (and
 * Django's own ul.errorlist for non-field errors). The global webflow
 * stylesheet positions .error-label absolutely in the field's top-right
 * corner; force it back into normal flow so it sits under its field. */
.start-flow-page .errorlist,
.start-flow-page .invalid-feedback,
.start-flow-page .error-label,
.start-flow-page .error-message {
  position: static;
  top: auto;
  right: auto;
  list-style: none;
  padding: 0;
  margin: var(--kds-space-100) 0 0;
  color: var(--kds-color-red-400);
  font-size: var(--kds-font-body-small);
  font-weight: 600;
}

.start-flow-page input.error,
.start-flow-page select.error,
.start-flow-page textarea.error {
  border-color: var(--kds-color-red-500);
}

/* The Apple Pay error div carries an inline white background meant for
 * the desktop page. */
.start-flow-page #apple-pay-error {
  background: none !important;
}

/* The shared field include (forms/signup_forms/field.html) renders the
 * label AFTER the input for the desktop floating-label CSS; on mobile the
 * label sits ABOVE the field instead. Errors keep their place below. */
.start-flow-page .form-field-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--kds-space-100);
}

.start-flow-page .form-field-wrapper .field-label {
  order: -1;
}

.start-flow-page form {
  display: flex;
  flex-direction: column;
  gap: var(--kds-space-400);
}

.start-flow-page .sf-field {
  display: flex;
  flex-direction: column;
  gap: var(--kds-space-100);
}

.start-flow-page .sf-password {
  position: relative;
}

.start-flow-page .sf-password input {
  padding-right: 3rem;
}

.start-flow-page .sf-eye {
  position: absolute;
  right: var(--kds-space-300);
  top: 50%;
  translate: 0 -50%;
  display: inline-flex;
  padding: var(--kds-space-100);
  background: none;
  border: 0;
  color: var(--kds-color-white-400);
  cursor: pointer;
}

.start-flow-page .sf-divider {
  display: flex;
  align-items: center;
  gap: var(--kds-space-300);
  color: var(--kds-color-white-400);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.start-flow-page .sf-divider::before,
.start-flow-page .sf-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--kds-color-white-200);
}

.start-flow-page .sf-google {
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------- month/year toggle */

.start-flow-page .sf-toggle {
  display: flex;
  padding: var(--kds-space-100);
  border: 1px solid var(--kds-color-white-200);
  border-radius: var(--kds-radius-full);
  background: var(--kds-color-white-100);
}

.start-flow-page .sf-toggle input {
  display: none;
}

.start-flow-page .sf-toggle label {
  flex: 1;
  padding: var(--kds-space-200) var(--kds-space-400);
  border-radius: var(--kds-radius-full);
  text-align: center;
  font-size: var(--kds-font-body-small);
  color: var(--kds-color-white-500);
  cursor: pointer;
  transition: background var(--kds-transition-duration) var(--kds-transition-ease),
    color var(--kds-transition-duration) var(--kds-transition-ease);
}

.start-flow-page .sf-toggle input:checked + label {
  background: var(--kds-color-blue-600);
  color: var(--kds-color-white-1000);
}

.start-flow-page .sf-toggle .sf-badge {
  display: inline-block;
  margin-left: var(--kds-space-100);
  padding: 1px var(--kds-space-200);
  border-radius: var(--kds-radius-full);
  background: var(--kds-color-white-200);
  font-size: 0.7rem;
  font-weight: 700;
}

/* ------------------------------------------------------------ plan step */

.start-flow-page .sf-plan {
  display: flex;
  flex-direction: column;
  gap: var(--kds-space-400);
}

.start-flow-page .sf-plan__name {
  font-family: var(--kds-font-subheading);
  font-weight: 700;
}

.start-flow-page .sf-chip {
  align-self: flex-start;
}

.start-flow-page .sf-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kds-space-300);
  margin-bottom: var(--kds-space-200);
}

.start-flow-page .sf-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--kds-color-blue-600);
  border-radius: var(--kds-radius-full);
  background: none;
  color: var(--kds-color-white-1000);
  font-size: 0.8rem;
  cursor: pointer;
}

.start-flow-page .sf-dialog__options {
  display: flex;
  flex-direction: column;
  gap: var(--kds-space-300);
  margin: var(--kds-space-400) 0 0;
}

.start-flow-page .sf-dialog__option {
  display: flex;
  align-items: flex-start;
  gap: var(--kds-space-300);
  padding: var(--kds-space-400);
  border: 1px solid var(--kds-color-white-200);
  border-radius: var(--kds-radius-lg);
  background: var(--kds-color-white-100);
  cursor: pointer;
  color: var(--kds-color-white-1000);
  font-size: var(--kds-font-body-small);
  text-decoration: none;
}

.start-flow-page .sf-dialog__option:has(input:checked) {
  border-color: var(--kds-color-blue-600);
}

.start-flow-page .sf-dialog__option input[type="radio"],
.start-flow-page .sf-dialog__option .sf-dialog__option-radio {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin: 2px 0 0;
  border: 1px solid var(--kds-color-white-300);
  border-radius: var(--kds-radius-full);
  background: none;
}

.start-flow-page .sf-dialog__option input[type="radio"]:checked {
  border-color: var(--kds-color-blue-600);
  background-color: var(--kds-color-blue-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 0.7rem;
  background-position: center;
  background-repeat: no-repeat;
}

.start-flow-page .sf-dialog__option-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--kds-space-100);
}

.start-flow-page .sf-dialog__option-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kds-space-200);
}

.start-flow-page .sf-dialog__option-name {
  font-weight: 700;
}

.start-flow-page .sf-dialog__option-price {
  font-weight: 600;
}

.start-flow-page .sf-chip--small {
  align-self: flex-start;
  padding: 1px var(--kds-space-200);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Plan card: blue top banner (trial), hero price, strikethrough */

.start-flow-page .sf-card--banner {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.start-flow-page .sf-banner {
  background: var(--kds-color-blue-600);
  color: var(--kds-color-white-1000);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--kds-space-200) var(--kds-space-400);
}

.start-flow-page .sf-card--banner .sf-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kds-space-300);
  padding: var(--kds-space-500);
  text-align: center;
}

.start-flow-page .sf-price-hero {
  font-family: var(--kds-font-subheading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: var(--kds-lh-single);
  color: var(--kds-color-blue-400);
}

.start-flow-page .sf-strike {
  text-decoration: line-through;
  color: var(--kds-color-white-400);
}

.start-flow-page .sf-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--kds-space-200) var(--kds-space-500);
  border: 1px solid var(--kds-color-white-300);
  border-radius: var(--kds-radius-full);
  background: var(--kds-color-white-100);
  color: var(--kds-color-white-1000);
  font-size: var(--kds-font-body-small);
  font-weight: 600;
  cursor: pointer;
}

/* Numbered WHAT HAPPENS NEXT timeline */

.start-flow-page .sf-steps {
  list-style: none;
  counter-reset: sf-step;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--kds-space-400);
}

.start-flow-page .sf-steps li {
  counter-increment: sf-step;
  position: relative;
  padding-left: 2.25rem;
  font-size: var(--kds-font-body-small);
}

.start-flow-page .sf-steps li::before {
  content: counter(sf-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--kds-radius-full);
  background: var(--kds-color-blue-1000);
  color: var(--kds-color-blue-300);
  font-weight: 700;
  font-size: 0.75rem;
}

.start-flow-page .sf-steps .sf-steps__label {
  font-weight: 700;
  color: var(--kds-color-white-1000);
}

.start-flow-page .sf-steps .sf-steps__detail {
  color: var(--kds-color-white-500);
}

/* Audience tag chips under WHAT'S INCLUDED */

.start-flow-page .sf-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kds-space-200);
}

.start-flow-page .sf-tags span {
  padding: var(--kds-space-100) var(--kds-space-400);
  border: 1px solid var(--kds-color-white-200);
  border-radius: var(--kds-radius-full);
  font-size: 0.75rem;
  color: var(--kds-color-white-500);
}

/* Success page check circle */

.start-flow-page .sf-success-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--kds-radius-full);
  background: var(--kds-color-blue-600);
  color: var(--kds-color-white-1000);
  font-size: 1.75rem;
  font-weight: 700;
}

/* Summary rows on the payment page */

.start-flow-page .sf-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kds-space-300);
  font-size: var(--kds-font-body-small);
}

.start-flow-page .sf-row .sf-row__label {
  color: var(--kds-color-white-500);
}

.start-flow-page .sf-row .sf-row__value {
  font-weight: 700;
  text-align: right;
}

/* Microcopy under the sticky CTA */

.start-flow-page .sf-cta-note {
  margin: var(--kds-space-200) 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--kds-color-white-400);
}

/* ----------------------------------------------- estimate include tidy-up
 * _estimate.html is shared with the desktop checkout. On mobile the plan
 * summary card renders its own "Your plan" row, so the include's line-item
 * block (plan name, quantity, marketing description) is hidden and only
 * the coupon controls, totals and billed-on copy remain.
 */

.start-flow-page #estimate {
  display: flex;
  flex-direction: column;
  gap: var(--kds-space-400);
}

.start-flow-page #estimate > section.block:first-of-type,
.start-flow-page #estimate > hr,
.start-flow-page #estimate .eb135-a,
.start-flow-page #estimate .eb135-b,
.start-flow-page #estimate [data-field="multiseat"],
.start-flow-page #estimate [data-field="buy_now"] {
  display: none;
}

/* The include's own billed-on paragraphs are replaced by the card's
 * "Then ... unless you cancel first." line (start_flow/checkout.html).
 * The :has() variant also removes the wrapper's phantom margin. */
.start-flow-page #estimate .payment_sticky-card_text-wrap .medium-text {
  display: none;
}

.start-flow-page #estimate .payment_sticky-card_text-wrap:has(> .medium-text) {
  display: none;
}

/* Due today row: bolder and larger than the other summary rows. */
.start-flow-page #estimate .payment_sticky-card_text-wrap strong {
  font-size: 1rem;
}

/* "Add coupon" toggle: quiet row label, not an underlined link. */
.start-flow-page [for="toggle-coupon-form"].medium-text {
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kds-color-white-900);
}

/* No saved-payment-method UI in the mobile flow: users always enter a
 * payment method. The hidden checkbox stays in the DOM because the Apple
 * Pay script drives it. The .w-checkbox-input div is the Webflow-styled
 * checkbox visual the widget renders next to the input. */
.start-flow-page #existing_payment_source,
.start-flow-page .card-toggle,
.start-flow-page input[name="use_existing_payment_source"],
.start-flow-page .w-checkbox-input {
  display: none !important;
}

.start-flow-page #estimate section.block {
  display: flex;
  flex-direction: column;
  gap: var(--kds-space-200);
  margin: 0 !important;
}

.start-flow-page #estimate hr {
  border: 0 !important;
  border-bottom: 1px solid var(--kds-color-white-200) !important;
  margin: 0;
}

.start-flow-page #estimate .payment_sticky-card_text-wrap strong {
  color: var(--kds-color-white-1000);
}

.start-flow-page #coupon-form {
  align-items: flex-start;
}

.start-flow-page #coupon-form .button {
  margin-top: 2px;
  padding-top: var(--kds-space-300);
  padding-bottom: var(--kds-space-300);
}

.start-flow-page #coupon-form [data-field="coupon_id"] {
  flex: 1;
}

.start-flow-page #coupon-form [data-field="coupon_id"] .field-label {
  display: none;
}

.start-flow-page #coupon-form .button {
  flex: none;
  width: auto;
  height: auto;
  padding: var(--kds-space-200) var(--kds-space-500);
  border: 1px solid var(--kds-color-blue-600);
  border-radius: var(--kds-radius-full);
  background: var(--kds-color-blue-600);
  color: var(--kds-color-white-1000);
  font-size: var(--kds-font-body-small);
  font-weight: 600;
  line-height: var(--kds-lh-single);
  cursor: pointer;
}

/* --------------------------------------------------------------checklist */

.start-flow-page .sf-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--kds-space-200);
}

.start-flow-page .sf-check li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--kds-font-body-small);
  color: var(--kds-color-white-700);
}

.start-flow-page .sf-check li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--kds-radius-full);
  background: var(--kds-color-blue-1000);
  color: var(--kds-color-blue-300);
  font-size: 0.7rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------- dialog */

.start-flow-page .sf-dialog {
  width: calc(100% - 2 * var(--kds-space-400));
  max-width: 480px;
  border: 1px solid var(--kds-color-white-200);
  border-radius: var(--kds-radius-lg);
  background: var(--kds-color-gray-900);
  color: var(--kds-color-white-1000);
  padding: var(--kds-space-500);
}

.start-flow-page .sf-dialog::backdrop {
  background: var(--kds-color-black-600);
}

/* ============================================================ checkout ==
 * Functional selectors required by the shared desktop includes.
 */

/* htmx loading-states extension: hidden until the extension shows them. */
.start-flow-page [data-loading] {
  display: none;
}

/* Mechanism inputs driven purely by CSS/JS state; payment-type radios and
 * other visible controls are intentionally NOT in this list. */
.start-flow-page #individual,
.start-flow-page #company,
.start-flow-page #id_is_company,
.start-flow-page #id_use_existing_payment_source,
.start-flow-page #toggle-coupon-form,
.start-flow-page #id_multiseat,
.start-flow-page #id_buy_now {
  display: none;
}

.start-flow-page [data-field="is_company"] {
  display: none;
}

/* Company/VAT fields appear only when the Company tab radio is checked. */
.start-flow-page [data-field="company_name"],
.start-flow-page [data-field="vat"] {
  display: none;
}

.start-flow-page #company:checked ~ [data-field="company_name"],
.start-flow-page #company:checked ~ [data-field="vat"] {
  display: block;
}

.start-flow-page .company-selector {
  display: grid;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

.start-flow-page .company-selector div label {
  display: block;
  padding: 0.6em;
  color: var(--kds-color-white-400);
  border-bottom: 2px solid var(--kds-color-white-200);
  text-align: center;
  cursor: pointer;
}

.start-flow-page input[type="radio"]:checked + .company-selector div label[for="company"],
.start-flow-page input[type="radio"]:checked + input + .company-selector div label[for="individual"] {
  color: var(--kds-color-blue-400);
  border-bottom: 2px solid var(--kds-color-blue-600);
}

/* Payment method rows (card / PayPal / Apple Pay radios). */
.start-flow-page .payment-option {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kds-space-200);
  padding: var(--kds-space-100) 0;
}

.start-flow-page .payment-option:last-child {
  margin-bottom: 1rem;
}

.start-flow-page .payment-option input[type="radio"] {
  display: inline;
  width: auto;
  margin: 0 0.5rem 0 0;
  accent-color: var(--kds-color-blue-600);
}

.start-flow-page .payment-option label {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--kds-color-white-1000);
  margin: 0 1rem 0 0;
}

.start-flow-page .payment-option label img {
  height: 1.5rem;
  width: auto;
}

.start-flow-page .card-icons {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
}

.start-flow-page .card-icons img {
  height: 1.4rem;
  width: auto;
}

/* Coupon reveal (structure comes from _estimate.html). */
.start-flow-page #coupon-form {
  display: none;
}

.start-flow-page [for="toggle-coupon-form"] {
  display: flex;
  gap: 0.5em;
  align-items: center;
  font-size: 0.8em;
  position: relative;
  text-decoration: underline;
  color: var(--kds-color-white-500);
  cursor: pointer;
}

.start-flow-page [for="toggle-coupon-form"] img {
  transition: rotate var(--kds-transition-duration) var(--kds-transition-ease);
  rotate: 90deg;
  height: 1em;
  /* The chevron asset is dark; invert it for the dark background. */
  filter: invert(1);
}

.start-flow-page #toggle-coupon-form:checked ~ [for="toggle-coupon-form"] img {
  rotate: -90deg;
}

.start-flow-page #toggle-coupon-form:checked ~ #coupon-form {
  display: flex;
  gap: 0.5em;
}

/* Estimate include internals (_estimate.html). */
.start-flow-page .payment_sticky-card_text-wrap {
  display: flex;
  justify-content: space-between;
  gap: var(--kds-space-200);
  font-size: var(--kds-font-body-small);
}