/* 21 · Team seats for members (team.html, /team).
   Spec: docs/team-seats-checkout/member-team-checkout/spec.md (AI With Remy project). Layout and values are the approved
   prototype's: the /checkout chrome, a warm paper order card on the left and a white action card on the right, with the
   action card first on phones. Light only, like the rest of the site.

   Unlike the other pages this one renders at true size (no 75% / 90% page zoom from base.css). The prototype is
   specified at rendered size, and Stripe's Embedded Checkout iframe should not sit inside a CSS-zoomed page.
   Every class is prefixed tm- so nothing collides with base.css (.eyebrow, .mono, .label are global there). */

.tm-page {
  --tm-paper: #F6F2E9;
  --tm-paper-soft: #FAF8F3;
  --tm-paper-line: #E7E0D3;
  --tm-paper-shelf: #EDE7DC;
  --tm-paper-shadow: rgba(41, 32, 21, 0.04);
  --tm-card-line: #E6E2DB;
  --tm-ink-2: #514D47;
  --tm-muted: #716E68;
  --tm-faint: #A8A29E;
  --tm-line: #EAE7E1;
  --tm-field-line: #DCD7CE;
  --tm-blue-deep: #2A2098;
  --tm-blue-wash: #EDEDFF;
  --tm-bevel: rgba(255, 255, 255, 0.22);
  --tm-green: #1F7A50;
  --tm-green-stroke: #348560;
  --tm-green-wash: #E7F0E8;
  --tm-red: #C23A1E;
  --tm-red-wash: #FCEDE9;
  --tm-amber: #8A6200;
  --tm-amber-stroke: #C99A1E;
  --tm-amber-wash: #FFF5D9;
  zoom: 1;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}
.tm-page a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--tm-faint); }
.tm-page a:hover { text-decoration-color: currentColor; }
.tm-page strong { font-weight: 600; }
.tm-page [hidden] { display: none !important; }
.tm-page :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tm-wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 24px; }
.tm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Header: the /checkout chrome */
.tm-head { border-bottom: 1px solid var(--tm-line); }
.tm-head-inner { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 68px; padding-block: 12px; }
.tm-page .tm-brand { display: inline-flex; flex-direction: row; align-items: baseline; gap: 12px; text-decoration: none; }
.tm-wordmark { font-weight: 500; font-size: 19px; letter-spacing: -0.03em; }
.tm-brand-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tm-muted); }
.tm-head-links { display: flex; flex-direction: row; align-items: center; gap: 24px; font-size: 13px; color: var(--tm-muted); }
.tm-page .tm-head-links a { color: var(--tm-muted); text-decoration: none; }
.tm-page .tm-head-links a:hover { color: var(--ink); }

/* Step rail */
.tm-main { padding-block: 32px 72px; }
.tm-steps { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: row; gap: 10px; }
.tm-steps li { flex: 1 1 auto; display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
.tm-steps li:last-child { flex: 0 0 auto; }
.tm-steps li:not(:last-child)::after { content: ''; flex: 1 1 auto; height: 1px; min-width: 12px; background: var(--tm-line); }
.tm-steps li.is-done::after { background: var(--tm-green-stroke); }
.tm-step { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; border-radius: 6px; }
button.tm-step { cursor: pointer; }
button.tm-step:hover .tm-step-label { text-decoration: underline; text-underline-offset: 3px; }
button.tm-step:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.tm-step-num { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; line-height: 1; border: 1px solid var(--tm-field-line); color: var(--tm-muted); background: var(--bg-white); }
.tm-step-num svg { display: none; }
.tm-step-label { font-size: 13px; color: var(--tm-muted); white-space: nowrap; }
.is-current .tm-step-num { background: var(--blue); border-color: var(--tm-blue-deep); color: #fff; }
.is-current .tm-step-label { color: var(--ink); font-weight: 500; }
.is-done .tm-step-num { background: var(--tm-green-wash); border-color: var(--tm-green-stroke); color: var(--tm-green-stroke); }
.is-done .tm-step-num .tm-n { display: none; }
.is-done .tm-step-num svg { display: block; }
.is-done .tm-step-label { color: var(--tm-ink-2); }

/* Two columns: order card left, action card right. The action card comes first in the DOM (and on phones). */
.tm-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 36px; align-items: start; }
.tm-summary { grid-column: 1; grid-row: 1; position: sticky; top: 24px; }
.tm-panel { grid-column: 2; grid-row: 1; }

/* Action card */
.tm-panel { background: var(--bg-white); border: 1px solid var(--tm-card-line); border-radius: 14px; padding: 32px; min-width: 0; }
.tm-panel.is-entering > * { animation: tm-rise 0.32s var(--ease) both; }
@keyframes tm-rise { from { opacity: 0.35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tm-title { font-size: 26px; line-height: 1.2; letter-spacing: -0.035em; font-weight: 500; margin: 0 0 8px; text-wrap: balance; }
/* Headings take focus on each step change for screen readers. They're not in the tab order, so no focus ring. */
.tm-page [tabindex="-1"]:focus, .tm-page [tabindex="-1"]:focus-visible { outline: none; }
.tm-sub { margin: 0 0 24px; color: var(--tm-ink-2); max-width: 54ch; overflow-wrap: anywhere; }
.tm-foot { margin: 20px 0 0; font-size: 13px; color: var(--tm-muted); }
.tm-stack { display: flex; flex-direction: column; gap: 16px; }
.tm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tm-field > label { font-size: 13px; font-weight: 500; color: var(--ink); }
.tm-page input[type="email"], .tm-page input[type="text"], .tm-page textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--bg-white); border: 1px solid var(--tm-field-line); border-radius: 8px;
  padding: 11px 13px; width: 100%; min-width: 0; margin: 0; transition: border-color 0.15s, box-shadow 0.15s;
}
.tm-page input:focus, .tm-page textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--tm-blue-wash); }
.tm-page input[readonly] { background: var(--tm-paper-soft); color: var(--ink); }
.tm-page input::placeholder, .tm-page textarea::placeholder { color: var(--tm-faint); }
.tm-err { margin: 0; font-size: 13px; color: var(--tm-red); }
.tm-err.is-ok { color: var(--tm-green); }
.tm-err:empty { display: none; }
.tm-hint { margin: 0; font-size: 12px; color: var(--tm-muted); }
.tm-company { margin-bottom: 22px; }
.tm-company-head { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; }
.tm-company-head label { font-size: 13px; font-weight: 500; }
.tm-rows-label { margin: 0 0 8px; font-size: 13px; font-weight: 500; }

/* Buttons */
.tm-btn { font: inherit; font-size: 15px; font-weight: 500; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 18px; border-radius: 8px; cursor: pointer; transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.15s, border-color 0.15s; }
.tm-page a.tm-btn { text-decoration: none; }
.tm-btn-primary { background: var(--blue); color: #fff; border: 1px solid var(--tm-blue-deep); box-shadow: inset 0 1px 0 var(--tm-bevel), 0 2px 0 var(--tm-blue-deep); }
.tm-page a.tm-btn-primary { color: #fff; }
.tm-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--tm-bevel), 0 3px 0 var(--tm-blue-deep); }
.tm-btn-primary:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 0 var(--tm-bevel), 0 1px 0 var(--tm-blue-deep); }
.tm-btn-secondary { background: var(--bg-white); color: var(--ink); border: 1px solid var(--tm-field-line); box-shadow: 0 2px 0 var(--tm-line); }
.tm-btn-secondary:hover:not(:disabled) { border-color: var(--tm-ink-2); }
.tm-btn-quiet { background: transparent; color: var(--blue); border: 1px dashed var(--tm-field-line); min-height: 40px; font-size: 14px; padding: 0 14px; }
.tm-btn-quiet:hover:not(:disabled) { border-color: var(--blue); background: var(--tm-blue-wash); }
.tm-btn:disabled { cursor: not-allowed; opacity: 0.45; }
.tm-btn-block { width: 100%; }
.tm-link { cursor: pointer; color: var(--blue); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tm-page a.tm-link { color: var(--blue); text-decoration-color: currentColor; }
.tm-link:disabled { color: var(--tm-faint); cursor: default; text-decoration: none; }
.tm-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.tm-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: tm-spin 0.7s linear infinite; flex: 0 0 14px; }
@keyframes tm-spin { to { transform: rotate(360deg); } }

/* Callouts (signed out, blocked, errors) */
.tm-callout { padding: 12px 14px; border-radius: 10px; background: var(--tm-paper-soft); border: 1px solid var(--tm-line); font-size: 14px; color: var(--tm-ink-2); margin: 0 0 22px; overflow-wrap: anywhere; }
.tm-callout p { margin: 0; }
.tm-callout p + p { margin-top: 8px; }
.tm-mail { display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.tm-mono { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.tm-alert { margin: 0 0 18px; padding: 10px 12px; border-radius: 8px; background: var(--tm-red-wash); color: var(--tm-red); font-size: 13px; }
.tm-alert:empty { display: none; }
.tm-alert .tm-link { margin-left: 6px; color: var(--tm-red); }

/* Code entry */
.tm-code { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); gap: 8px; }
.tm-page .tm-code input[type="text"] { text-align: center; font-family: var(--font-mono); font-size: 22px; padding: 0; height: 58px; }
.tm-code-links { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }

/* Signed-in strip */
.tm-signed { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; margin-bottom: 24px; background: var(--tm-paper-soft); border: 1px solid var(--tm-line); border-radius: 10px; font-size: 13px; color: var(--tm-ink-2); }
.tm-signed .tm-who-line { min-width: 0; overflow-wrap: anywhere; }
.tm-signed .tm-link { margin-left: auto; }
.tm-pill { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1.5; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tm-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tm-pill-green { background: var(--tm-green-wash); color: var(--tm-green); }

/* Teammate rows */
.tm-rows { display: flex; flex-direction: column; gap: 12px; }
.tm-row-main { display: flex; flex-direction: row; gap: 6px; align-items: center; }
.tm-row-field { position: relative; flex: 1 1 auto; min-width: 0; }
.tm-page .tm-row-field input { padding-right: 40px; }
.tm-row-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; display: grid; place-items: center; color: var(--tm-faint); pointer-events: none; }
.tm-row-remove { cursor: pointer; width: 40px; height: 44px; flex: 0 0 40px; display: grid; place-items: center; color: var(--tm-faint); border-radius: 8px; }
.tm-row-remove:hover { color: var(--ink); background: var(--tm-paper-soft); }
.tm-row-remove:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; }
.tm-row-msg { margin: 6px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.tm-row-msg:empty, .tm-row-msg.is-quiet { margin: 0; }
.tm-row-msg .tm-link { margin-left: 6px; }
.tm-row.is-error input { border-color: var(--tm-red); }
.tm-row.is-error .tm-row-msg { color: var(--tm-red); }
.tm-row.is-warn input { border-color: var(--tm-amber-stroke); }
.tm-row.is-warn .tm-row-msg { color: var(--tm-amber); }
.tm-row-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tm-paste { margin-top: 14px; padding: 14px; border: 1px solid var(--tm-line); border-radius: 10px; background: var(--tm-paper-soft); display: flex; flex-direction: column; gap: 10px; }
.tm-paste label { font-size: 13px; font-weight: 500; }
.tm-page .tm-paste textarea { resize: vertical; min-height: 92px; }
.tm-paste-actions { display: flex; flex-direction: row; align-items: center; gap: 16px; }
.tm-team-foot { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--tm-line); }
.tm-team-count { margin: 0; font-size: 14px; color: var(--tm-ink-2); font-variant-numeric: tabular-nums; }
.tm-cap-note { margin: 14px 0 0; font-size: 12px; color: var(--tm-muted); }
.tm-cap-note.is-at-cap { color: var(--tm-amber); }

/* Status icons */
.tm-ic .ring { stroke-width: 1.25; }
.tm-ic-ok .ring { fill: var(--tm-green-wash); stroke: var(--tm-green-stroke); }
.tm-ic-ok .mark { fill: none; stroke: var(--tm-green-stroke); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tm-ic-err .ring { fill: var(--tm-red-wash); stroke: var(--tm-red); }
.tm-ic-err .mark { stroke: var(--tm-red); stroke-width: 1.7; stroke-linecap: round; }
.tm-ic-err .dot { fill: var(--tm-red); }
.tm-ic-warn .ring { fill: var(--tm-amber-wash); stroke: var(--tm-amber-stroke); }
.tm-ic-warn .mark { stroke: var(--tm-amber); stroke-width: 1.7; stroke-linecap: round; }
.tm-ic-warn .dot { fill: var(--tm-amber); }

/* Order card: warm paper with the hard shelf shadow, like /checkout's course card */
.tm-summary { background: var(--tm-paper); border: 1px solid var(--tm-paper-line); border-radius: 4px; box-shadow: 0 3px 0 var(--tm-paper-shelf), 0 12px 28px var(--tm-paper-shadow); padding: 28px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.tm-eyebrow { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tm-muted); }
.tm-sum-head { display: flex; flex-direction: column; gap: 12px; }
.tm-sum-title { margin: 0; font-weight: 500; font-size: 32px; line-height: 1.1; letter-spacing: -0.045em; text-wrap: balance; color: var(--ink); }
.tm-sum-sub { margin: 0; color: var(--tm-ink-2); }
.tm-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tm-checks li { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.tm-checks svg { flex: 0 0 20px; margin-top: 1px; }
.tm-price-line { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-top: 18px; border-top: 1px solid var(--tm-paper-line); color: var(--tm-ink-2); }
.tm-price-big { font-size: 34px; font-weight: 500; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tm-who { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.tm-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--tm-paper); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.tm-who-text { min-width: 0; flex: 1 1 140px; }
.tm-who-name { margin: 0; font-weight: 500; }
.tm-who-meta { margin: 0; font-size: 13px; color: var(--tm-muted); overflow-wrap: anywhere; }
.tm-lines { margin: 0; display: flex; flex-direction: column; }
.tm-lines > div { display: flex; flex-direction: row; justify-content: space-between; gap: 16px; padding-block: 11px; border-top: 1px solid var(--tm-paper-line); font-size: 14px; }
.tm-lines dt { color: var(--tm-ink-2); }
.tm-lines dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-lines .is-total dt, .tm-lines .is-total dd { color: var(--ink); font-weight: 600; font-size: 16px; }
.tm-fine { margin: 0; font-size: 12px; line-height: 1.55; color: var(--tm-muted); }

/* Pay step */
.tm-review { border: 1px solid var(--tm-line); border-radius: 10px; padding: 14px 16px; margin-bottom: 24px; }
.tm-review-head { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.tm-review-head p { margin: 0; font-weight: 500; font-size: 14px; }
.tm-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; }
.tm-review-list li { font-size: 13px; padding: 4px 10px; background: var(--tm-paper-soft); border: 1px solid var(--tm-line); border-radius: 999px; max-width: 100%; overflow-wrap: anywhere; }
/* Line items repeat inside the review on phones, where the order card sits below the payment form. */
.tm-review-lines { margin-top: 14px; display: none; }
.tm-review-lines > div { padding-block: 9px; border-top-color: var(--tm-line); font-size: 13px; }
.tm-review-lines .is-total dt, .tm-review-lines .is-total dd { font-size: 14px; }
.tm-checkout { min-height: 220px; min-width: 0; }
.tm-checkout-wait { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 18px 0; font-size: 14px; color: var(--tm-muted); }
.tm-checkout-fail { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* Done step */
.tm-done-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--tm-green-wash); border: 1px solid var(--tm-green-stroke); display: grid; place-items: center; margin-bottom: 16px; color: var(--tm-green-stroke); }
.tm-invites { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--tm-line); border-radius: 10px; }
.tm-invites li { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; font-size: 14px; }
.tm-invites li + li { border-top: 1px solid var(--tm-line); }
.tm-invites .tm-addr { min-width: 0; overflow-wrap: anywhere; }
.tm-inv-state { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--tm-muted); }
.tm-inv-state.is-sent { color: var(--tm-green); }
.tm-inv-state.is-failed { color: var(--tm-amber); white-space: normal; text-align: right; }
.tm-inv-note { margin: 0 0 28px; font-size: 13px; color: var(--tm-muted); }
.tm-inv-note:empty { margin-bottom: 16px; }
.tm-next-title { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.tm-page .tm-next { margin: 0 0 24px; padding-left: 22px; list-style: decimal; display: flex; flex-direction: column; gap: 8px; color: var(--tm-ink-2); font-size: 14px; }
.tm-next li { padding-left: 4px; }
.tm-next li::marker { font-family: var(--font-mono); font-size: 12px; color: var(--blue); }
.tm-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }

/* Footer: the /checkout slim row */
.tm-site-foot { border-top: 1px solid var(--tm-line); }
.tm-foot-inner { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 22px 30px; font-size: 12px; color: var(--tm-muted); }
.tm-foot-links { display: flex; flex-direction: row; gap: 20px; list-style: none; margin: 0; padding: 0; }
.tm-page .tm-foot-inner a { color: var(--tm-muted); }

/* ---- Tablet and phone: one column, action card first ---------------------------------------------------------- */
@media (max-width: 880px) {
  .tm-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tm-summary, .tm-panel { grid-column: 1; grid-row: auto; }
  .tm-summary { position: static; }
  .tm-review-lines { display: flex; }
}
/* A short desktop window can't hold a sticky order card. */
@media (max-height: 700px) { .tm-summary { position: static; } }

@media (max-width: 600px) {
  .tm-wrap { padding-inline: 16px; }
  .tm-head-mail, .tm-head-back { display: none; }
  .tm-main { padding-block: 20px 48px; }
  .tm-steps { margin-bottom: 20px; }
  .tm-panel { padding: 24px 18px; }
  .tm-summary { padding: 22px 18px; }
  .tm-title { font-size: 24px; }
  .tm-sub { margin-bottom: 20px; }
  .tm-sum-title { font-size: 28px; }
  /* 16px keeps iOS Safari from zooming into a field on focus. */
  .tm-page input[type="email"], .tm-page input[type="text"], .tm-page textarea { font-size: 16px; }
  .tm-team-foot { flex-direction: column; align-items: stretch; }
  .tm-team-foot .tm-btn { width: 100%; }
  .tm-actions { flex-direction: column; align-items: stretch; }
  .tm-actions .tm-btn { width: 100%; }
  .tm-foot-inner { flex-direction: column; }
}
/* Narrow phones: only the current step keeps its visible label (the others stay readable to screen readers). */
@media (max-width: 520px) { .tm-steps li:not(.is-current) .tm-step-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 400px) {
  .tm-code { gap: 6px; }
  .tm-page .tm-code input[type="text"] { height: 50px; font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-panel.is-entering > * { animation: none; }
  .tm-btn { transition: none; }
  .tm-spin { animation-duration: 2s; }
}