/* Membership checkout in the member app's fluid language (new-ycs-white-label src/theme/fluid.scss).
   signup.js replaces the accent tokens with the brand's primary colour when it keeps text contrast. */
/* Roboto is served with the page (variable weight, OFL; fonts/OFL.txt) so checkout makes no third-party font request. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/roboto-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/roboto-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  color-scheme: light;
  --accent: #0054e9;
  --accent-rgb: 0, 84, 233;
  --accent-hover: #004acd;
  --accent-dark: #73a1f3; /* 55% primary / 45% white, as the member app's dark --fluid-accent */
  --accent-text: var(--accent);
  --accent-soft: rgba(var(--accent-rgb), .1);
  --page: #eef2f6;
  --surface: #fff;
  --raised: #fff;
  --ink: #171b23;
  --ink-rgb: 23, 27, 35;
  --muted: #5f636d;
  --hover: rgba(var(--ink-rgb), .055);
  --border: rgba(var(--ink-rgb), .13);
  --field: #f4f6f9;
  --field-border: #8a919c;
  --error: #ad000d;
  --error-surface: #fff1f2;
  --error-border: #e5adb3;
  --test-surface: #fff6df;
  --test-ink: #735000;
  --shadow: 0 2px 8px rgba(20, 28, 40, .06), 0 12px 32px rgba(20, 28, 40, .04);
  --fast: 80ms;
  --moderate: 160ms;
  --slow: 240ms;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
}
.ion-palette-dark {
  color-scheme: dark;
  --accent-text: var(--accent-dark);
  --accent-soft: rgba(var(--accent-rgb), .2);
  --page: #121212;
  --surface: #1e1e1e;
  --raised: #333335;
  --ink: #fff;
  --ink-rgb: 255, 255, 255;
  --muted: #a8a8b0;
  --hover: rgba(255, 255, 255, .07);
  --border: rgba(255, 255, 255, .13);
  --field: #2a2a2c;
  --field-border: #7c7c84;
  --error: #ffb4bc;
  --error-surface: #382025;
  --error-border: #88535b;
  --test-surface: #332b18;
  --test-ink: #efcd85;
  --shadow: 0 2px 8px rgba(0, 0, 0, .2), 0 12px 32px rgba(0, 0, 0, .16);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scrollbar-color: var(--border) transparent; scrollbar-width: thin; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--page); color: var(--ink); font: 16px/1.5 "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(var(--accent-rgb), .2); color: var(--ink); }
input { caret-color: var(--accent-text); }
a { color: var(--accent-text); text-underline-offset: .2em; }
button, input { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
/* Headings and main receive focus only to move screen readers; they are not controls. */
[tabindex="-1"]:focus { outline: none; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-weight: 600; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Header */
.brand-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.header-content { max-width: 1080px; min-height: 72px; margin: auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
#brand-logo { max-width: 180px; max-height: 44px; object-fit: contain; }
#brand-name { font-size: 18px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.icon-button { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-height: 44px; min-width: 44px; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; transition: background-color var(--fast) linear, color var(--fast) linear, transform var(--fast) var(--ease); }
.icon-button:hover { background: var(--hover); color: var(--ink); }
.icon-button:active { transform: scale(.97); }
.icon-button svg { width: 20px; height: 20px; }
.sun-icon, .ion-palette-dark .moon-icon { display: none; }
.ion-palette-dark .sun-icon { display: block; }

/* Page */
main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 32px 24px 48px; }
.signup-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px; align-items: start; }
.checkout-details { min-width: 0; }
.panel { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: clamp(24px, 4vw, 32px); }
.test-banner { font-size: 13px; background: var(--test-surface); color: var(--test-ink); padding: 10px 16px; margin-bottom: 24px; border-radius: 12px; }
.error-banner { padding: 14px 18px; margin-bottom: 24px; color: var(--error); background: var(--error-surface); border: 1px solid var(--error-border); border-radius: 12px; }
.error-banner .text-button { margin: -8px 0 -8px 4px; color: inherit; text-decoration: underline; }

/* Order summary */
.summary-card { position: sticky; top: 24px; overflow: hidden; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); }
/* The checkout image is often a logo, so it keeps its own proportions at a fixed height instead of being cropped. */
.membership-image { align-self: flex-start; height: 72px; width: auto; max-width: min(100%, 220px); object-fit: contain; margin-bottom: 18px; border-radius: 12px; }
.summary-body { display: flex; flex-direction: column; padding: 28px 28px 20px; }
.summary-body h1 { font-size: 26px; margin-bottom: 10px; overflow-wrap: anywhere; }
.membership-price { font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.membership-price small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.trial-badge { align-self: flex-start; margin-bottom: 14px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 600; }
.membership-description { font-size: 14px; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; margin-bottom: 20px; }
.membership-description:empty { display: none; }
.summary-lines { margin: 0 0 18px; padding-top: 16px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.summary-lines div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--muted); }
.summary-lines div + div { margin-top: 6px; }
.summary-lines div:first-child { font-size: 16px; font-weight: 600; color: var(--ink); }
.summary-lines dd { margin: 0; text-align: right; }
.secure-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.secure-note svg { width: 16px; height: 16px; flex: 0 0 16px; }
.back-link { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 24px 0 20px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color var(--fast) linear; }
.back-link:hover { background: var(--hover); }
.back-link svg { width: 18px; height: 18px; }

/* Progress */
.checkout-steps { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.checkout-steps li { display: flex; align-items: center; gap: 8px; }
.checkout-steps li + li::before { content: ""; width: 28px; height: 1px; margin-right: 4px; background: var(--border); }
.checkout-steps li[aria-current] { color: var(--ink); font-weight: 600; }
.step-marker { display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--hover); font-size: 12px; font-weight: 600; transition: background-color var(--moderate) linear, color var(--moderate) linear; }
.checkout-steps li[aria-current] .step-marker { color: #fff; background: var(--accent); }
/* A finished step reads as done, not as one still to come. */
.step-check { display: none; width: 14px; height: 14px; }
.checkout-steps li.is-done .step-marker { color: var(--accent-text); background: var(--accent-soft); }
.checkout-steps li.is-done .step-number { display: none; }
.checkout-steps li.is-done .step-check { display: block; }

/* Details form */
.contact-panel h2 { font-size: 22px; margin-bottom: 6px; }
.form-intro { font-size: 14px; margin-bottom: 24px; }
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.field { margin-bottom: 18px; min-width: 0; }
.field > label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.field input { width: 100%; min-width: 0; min-height: 52px; padding: 12px 14px; border: 1px solid var(--field-border); border-radius: 12px; background: var(--field); transition: border-color var(--fast) linear, background-color var(--fast) linear; }
.field input:hover { border-color: var(--ink); }
.field input:focus { border-color: var(--accent-text); background: var(--surface); outline: 2px solid var(--accent-text); outline-offset: -2px; }
.field input[aria-invalid=true] { border-color: var(--error); }
.field input[aria-invalid=true]:focus { outline-color: var(--error); }
.field-error { display: flex; gap: 6px; margin: 6px 0 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--error); }
.field-error::before { content: ""; flex: 0 0 16px; height: 16px; margin-top: 2px; background: currentColor; -webkit-mask: var(--alert-icon) center / contain no-repeat; mask: var(--alert-icon) center / contain no-repeat; }
.field-error + .help { margin-top: 2px; }
.field input:disabled { opacity: .7; cursor: not-allowed; }
.password-field { position: relative; }
.password-field input { padding-right: 76px; }
.password-field button { position: absolute; right: 4px; top: 4px; min-height: 44px; }
.help { font-size: 13px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
.text-button { flex-shrink: 0; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--accent-text); font-size: 14px; font-weight: 600; transition: background-color var(--fast) linear, transform var(--fast) var(--ease); }
.text-button:hover { background: var(--hover); }
.text-button:active { transform: scale(.97); }
.text-button:disabled { opacity: .6; cursor: wait; }
.preferences { margin: 4px 0 20px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--border); }
.preferences legend { padding: 0 12px 0 0; font-size: 15px; font-weight: 600; }
.preferences legend span { color: var(--muted); font-weight: 400; }
input[type=checkbox] { accent-color: var(--accent); width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 20px; }
.check-label { display: flex; gap: 12px; align-items: start; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; font-size: 13px; line-height: 1.6; cursor: pointer; transition: background-color var(--fast) linear; }
.check-label:hover { background: var(--hover); }
.check-label + .check-label { margin-top: 4px; }
.preference-note { display: block; margin-top: 6px; color: var(--muted); }
.legal { font-size: 13px; color: var(--muted); margin-bottom: 20px; }

/* Actions */
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 12px; color: #fff; background: var(--accent); font-weight: 600; text-align: center; text-decoration: none; transition: background-color var(--fast) linear, transform var(--fast) var(--ease); }
.primary-button:hover { background: var(--accent-hover); }
.primary-button:active:not(:disabled) { transform: scale(.97); }
.primary-button:disabled { cursor: wait; opacity: .8; }
.primary-button.is-busy::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin 700ms linear infinite; }
#continue { width: 100%; }

/* Saved details */
.saved-details { display: flex; align-items: center; gap: 14px; }
.saved-icon { width: 36px; height: 36px; flex: 0 0 36px; padding: 8px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.saved-text { flex: 1 1 0; min-width: 0; }
.saved-text p { margin: 0; overflow-wrap: anywhere; font-size: 14px; color: var(--muted); }
#summary-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.saved-details .text-button { margin-left: auto; margin-right: -8px; }
/* Once saved, the row itself says what it is; the heading stays for screen-reader structure. */
.contact-panel.is-saved { padding-block: 18px; }
.contact-panel.is-saved h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Payment */
.payment-panel { margin-top: 20px; padding: 24px 12px 12px; }
.payment-panel > h2, .payment-panel > p, .payment-panel > button { margin-left: 16px; margin-right: 16px; }
.payment-panel > h2 { font-size: 22px; margin-bottom: 12px; }
.payment-status { font-size: 14px; color: var(--muted); }
/* Stripe always draws its fields on white, so its form is created white with the page accent; in dark mode it sits
   in the panel as one deliberate light card rather than a dark frame around a white one. */
#stripe-checkout { min-height: 160px; border-radius: 12px; overflow: hidden; background: #fff; color-scheme: light; }

/* Plan choice */
.plan-picker { max-width: 640px; margin: 0 auto; }
.plan-picker h1 { font-size: 26px; margin-bottom: 8px; }
.plan-list { display: grid; gap: 12px; margin-top: 24px; }
.plan-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 18px; border: 1px solid var(--field-border); border-radius: 12px; color: var(--ink); font-size: 18px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; transition: background-color var(--fast) linear, border-color var(--fast) linear, transform var(--fast) var(--ease); }
.plan-option:hover { background: var(--hover); border-color: var(--accent-text); }
.plan-option:active { transform: scale(.985); }
.plan-option span { font-size: 14px; font-weight: 500; color: var(--accent-text); }

/* Completion and expiry */
.completion-panel { max-width: 560px; margin: 24px auto 0; padding: clamp(28px, 5vw, 44px); text-align: center; }
.completion-icon { display: block; width: 56px; height: 56px; margin: 0 auto 20px; padding: 6px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); animation: pop var(--slow) var(--ease) both; }
.completion-panel h1 { font-size: 28px; margin-bottom: 10px; }
.completion-panel p { color: var(--muted); margin: 0 auto 28px; max-width: 42ch; }
.completion-panel .primary-button { min-width: 240px; }

/* Loading */
.skeleton { display: block; background: rgba(var(--ink-rgb), .09); border-radius: 6px; }
.skeleton-field { height: 52px; margin-bottom: 18px; border-radius: 12px; }
.skeleton-button { height: 48px; border-radius: 12px; }
.skeleton-group { pointer-events: none; animation: pulse 1400ms ease-in-out infinite; }
#loading .panel, #loading .summary-card { position: static; }

/* Entering content settles in instead of popping. */
#signup-layout:not([hidden]), #payment-section:not([hidden]), .completion-panel:not([hidden]), .plan-picker:not([hidden]) { animation: enter var(--slow) var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop { from { opacity: 0; transform: scale(.85); } }
@keyframes pulse { 50% { opacity: .55; } }
@keyframes spin { to { transform: rotate(360deg); } }

footer { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 0 24px max(24px, env(safe-area-inset-bottom)); color: var(--muted); font-size: 13px; }
footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }

/* Policy pages */
.policy-page main { max-width: 880px; padding-top: 48px; }
.policy-page article { padding: 36px 40px; }
.policy-page h1 { font-size: clamp(26px, 3vw, 32px); }
.policy-page h6 { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 32px 0 12px; }
.policy-page h1 + h6 { margin-top: 24px; }
.policy-page p, .policy-page li { color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }

@media (max-width: 800px) {
  main { padding-top: 20px; }
  .signup-layout { grid-template-columns: 1fr; gap: 20px; }
  .summary-card { position: static; }
  .membership-image { height: 56px; margin-bottom: 14px; }
  .summary-body { padding: 22px 22px 16px; }
  .summary-body h1 { font-size: 22px; margin-bottom: 6px; }
  .membership-price { font-size: 24px; margin-bottom: 10px; }
  .membership-description { margin-bottom: 16px; }
  .back-link { min-height: 44px; }
  #loading .summary-card + .panel { display: none; }
}
@media (max-width: 480px) {
  main { padding: 16px 16px 32px; }
  .header-content { min-height: 64px; padding: 10px 16px; gap: 12px; }
  #brand-logo { max-width: 120px; max-height: 36px; }
  #brand-name { font-size: 16px; }
  .icon-button { padding: 10px; }
  .icon-button span { display: none; }
  .panel { padding: 22px 18px; }
  .field-pair { gap: 12px; }
  #profile-fields { grid-template-columns: 1fr; gap: 0; }
  .payment-panel { padding: 22px 4px 4px; }
  .payment-panel > h2, .payment-panel > p, .payment-panel > button { margin-left: 14px; margin-right: 14px; }
  .completion-panel { margin-top: 8px; }
  .completion-panel h1 { font-size: 24px; }
  .completion-panel .primary-button { width: 100%; min-width: 0; }
  .policy-page main { padding-top: 20px; }
  .policy-page article { padding: 24px 18px; }
}
@media (max-width: 360px) { .field-pair { grid-template-columns: 1fr; gap: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0ms; --moderate: 0ms; --slow: 0ms; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .primary-button:active, .text-button:active, .icon-button:active, .plan-option:active { transform: none !important; }
}