/* corporate-account.css: /corporate/account/ (P4, 02/11/2026).
 * A big page head on porcelain (breadcrumbs, the H1 set large on the left, the lede on its last baseline at the right),
 * then the two-step application (step 1 then step 2, the inline script runs; both show without JavaScript) beside a
 * sticky benefits column: the CBD arrival photo, the five benefits as numbered hairline rows, the WhatsApp line. */

.aj-site .section.ca { padding-top: clamp(32px, 1.5rem + 3vw, 88px); }

/* ---------- the page head ---------- */
.ca-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: clamp(32px, 1rem + 2.5vw, 64px); margin-bottom: clamp(40px, 1.5rem + 3vw, 80px); border-bottom: 1px solid var(--line); }
.ca-crumbs { margin: 0 0 clamp(8px, 1vw, 24px); }
.aj-site .ca-head .t-h1 { max-width: 17ch; }
.ca-head .t-lede { color: var(--text-2); max-width: 30ch; }
@media (min-width: 1024px) {
  .ca-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: last baseline; }
  .ca-head > .ca-crumbs { grid-column: 1 / -1; }
  .ca-head > .t-h1 { grid-column: 1 / span 8; }
  .ca-head > .t-lede { grid-column: 9 / -1; }
}

/* ---------- the two columns ---------- */
.ca-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 3rem + 3vw, 96px); }
@media (min-width: 1024px) {
  .ca-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .ca-main { grid-column: 1 / span 7; }
  .ca-side { grid-column: 9 / -1; position: sticky; top: calc(var(--frame-top, 96px) + 32px); }
}

/* ---------- the steps: two numbered tabs over one hairline; a 2px bar slides under the current one ---------- */
.aj-site .ca-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0 0 clamp(36px, 2rem + 1.5vw, 56px); overflow: visible; counter-reset: ca-step; border-bottom: 1px solid var(--line); }
.aj-site .ca-steps .step { counter-increment: ca-step; position: relative; display: grid; align-content: end; gap: 6px; padding: 0 16px 18px 0; border-bottom: 0; }
.aj-site .ca-steps .step::before { content: counter(ca-step, decimal-leading-zero) / ""; font-size: var(--fs-small); font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.aj-site .ca-steps .step::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--ease-out); }
.aj-site .ca-steps .step:is([data-state="current"], [data-state="done"])::after { transform: scaleX(1); }
.aj-site .ca-steps .step[data-state="done"]::after { background: var(--field); }
.aj-site .ca-steps .step-title { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); font-weight: 500; letter-spacing: -0.015em; color: var(--text-2); white-space: normal; transition: color var(--dur-hover) var(--ease-out); }
.aj-site .ca-steps .step[data-state="current"] .step-title { color: var(--text); }
/* phones: both step names hold one line, so the two numerals line up */
@media (max-width: 479px) { .aj-site .ca-steps .step-title { font-size: 1rem; letter-spacing: -0.01em; } }

/* ---------- the form ---------- */
/* the section numerals (typed copy) sit above their titles, like the questions groups and the legal headings */
.ca-form .form-legend { flex-direction: column; align-items: flex-start; gap: 10px; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); letter-spacing: -0.025em; }
.ca-form .form-legend-n { letter-spacing: 0; line-height: 1; }
.ca-form .form-group + .form-group { padding-top: clamp(36px, 2rem + 1vw, 48px); }
.ca-step { display: grid; gap: clamp(36px, 2rem + 1vw, 48px); }
.ca-step > .form-actions { padding-top: 8px; }
.ca-back { margin: 0 0 -8px; }
.ca-back .btn-link { display: inline-flex; align-items: center; min-height: 44px; }
.ca-billing { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); }
.ca-billing-title { font-size: 1rem; font-weight: 600; color: var(--text); }
.ca-billing-title .opt { font-weight: 400; color: var(--text-2); }
.form-last { display: grid; gap: 24px; padding-top: clamp(36px, 2rem + 1vw, 48px); border-top: 1px solid var(--line); }
/* a step that just opened settles in (only after motion.js has started, never under reduced motion) */
html.mo .ca-form[data-ca-at] .ca-step:not([hidden]) { animation: ca-in 700ms var(--ease-out) both; }
@keyframes ca-in { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { html.mo .ca-form[data-ca-at] .ca-step:not([hidden]) { animation: none; } }

/* ---------- the benefits column ---------- */
.ca-side { display: grid; gap: 20px; align-content: start; }
.ca-photo { aspect-ratio: 3 / 2; margin-bottom: clamp(8px, 1vw, 20px); background: var(--celadon); }
.ca-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.ca-get { list-style: none; margin: 0; padding: 0; counter-reset: ca-get; border-top: 1px solid var(--line); }
.ca-get li { counter-increment: ca-get; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1.4; color: var(--text); }
.ca-get li::before { content: counter(ca-get, decimal-leading-zero) / ""; font-size: var(--fs-small); font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ca-talk { color: var(--text-2); }
@media (max-width: 1023px) {
  .ca-side { padding-top: clamp(40px, 2rem + 2vw, 64px); border-top: 1px solid var(--line); }
}