/* Jithmi Coaching components. Load after tokens.css. Every value comes from a token. */
.jm { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink); -webkit-font-smoothing: antialiased; }
.jm *, .jm *::before, .jm *::after { box-sizing: border-box; }
.jm h1, .jm h2, .jm h3, .jm p { margin: 0; }
.jm .display-xl, .jm .display-lg, .jm .display-md, .jm .display-italic { text-wrap: balance; }
.jm-eyebrow { text-transform: uppercase; color: var(--gold); }
.jm-accent { color: var(--rose); }
.jm-muted { color: var(--ink-muted); }

/* page frame */
.jm-inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); padding-block: var(--space-8); min-width: 0; }
.jm-band { background: var(--surface-rose); }

/* Button */
.jm-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5); border: 1.5px solid var(--rose); border-radius: var(--radius-pill); background: var(--rose); color: var(--on-rose); font: 600 16px/1 var(--font-body); text-decoration: none; cursor: pointer; transition: transform .15s ease; }
.jm-btn:hover, .jm-btn.is-hover { transform: translateY(-1px); }
.jm-btn:focus-visible, .jm-btn.is-focus { outline: 2px solid var(--rose); outline-offset: 3px; }
.jm-btn:disabled, .jm-btn.is-disabled { opacity: .6; cursor: not-allowed; transform: none; }
.jm-btn-secondary { background: transparent; color: var(--rose); }
.jm-btn-secondary:hover, .jm-btn-secondary.is-hover { background: var(--surface-rose); }
.jm-btn-sm { min-height: 40px; padding: 0 20px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .jm-btn { transition: none; } .jm-btn:hover, .jm-btn.is-hover { transform: none; } }

/* Nav */
.jm-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.jm-wordmark { color: var(--ink); text-decoration: none; }
.jm-wordmark em { font-style: italic; color: var(--rose); }
.jm-nav-links { display: flex; align-items: center; gap: var(--space-5); }
.jm-nav-links a:not(.jm-btn) { color: var(--ink-muted); text-decoration: none; font-size: 15px; }
.jm-nav-links a:not(.jm-btn):hover { color: var(--ink); }

/* Hero */
.jm-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: var(--space-7); align-items: center; }
.jm-hero-copy { display: grid; gap: var(--space-4); justify-items: start; }
.jm-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.jm-arch { position: relative; width: 100%; max-width: var(--portrait-width); aspect-ratio: 3 / 4; justify-self: end; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-pill) var(--radius-pill) var(--radius-lg) var(--radius-lg); background: linear-gradient(165deg, var(--surface-rose) 0%, var(--rose-tint) 100%); }
.jm-arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jm-arch-cap { position: relative; color: var(--ink); }
@media (max-width: 760px) { .jm-hero { grid-template-columns: minmax(0, 1fr); } .jm-arch { justify-self: start; max-width: 300px; } }

/* WhyMePoint */
.jm-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); }
.jm-point { border-top: 1px solid var(--line); padding-top: var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
@media (max-width: 760px) { .jm-points { grid-template-columns: minmax(0, 1fr); } }

/* PricingCard */
.jm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.jm-card { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.jm-card.is-featured { border: 1.5px solid var(--rose); }
.jm-badge { align-self: flex-start; padding: 6px 12px; border: 1px solid var(--rose); border-radius: var(--radius-pill); color: var(--rose); font: 600 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.jm-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.jm-list { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.jm-list li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.5; }
.jm-list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 6px; border-left: 2px solid var(--rose); border-bottom: 2px solid var(--rose); transform: rotate(-45deg); }
.jm-card .jm-btn { margin-top: auto; }
@media (max-width: 980px) { .jm-cards { grid-template-columns: minmax(0, 1fr); } }

/* CtaBand */
.jm-cta { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--space-6); align-items: center; padding: var(--space-7); background: var(--surface-rose); border-radius: var(--radius-lg); }
.jm-cta-copy { display: grid; gap: var(--space-3); }
@media (max-width: 760px) { .jm-cta { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); } }

/* Form card, FormStep */
.jm-form-card { width: 100%; max-width: var(--form-width); padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.jm-progress-meta { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; color: var(--ink-muted); }
.jm-progress-meta b { color: var(--ink); font-weight: 600; }
.jm-bar { height: 4px; margin-top: 10px; overflow: hidden; background: var(--line); border-radius: 4px; }
.jm-bar > i { display: block; height: 100%; background: var(--rose); border-radius: 4px; }
.jm-step { display: grid; gap: 20px; margin-top: var(--space-6); }
.jm-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
@media (max-width: 560px) { .jm-form-card { padding: 22px 18px; } }

/* Field */
.jm-field { display: grid; gap: var(--space-2); min-width: 0; }
.jm-required::after { content: " *"; color: var(--rose); }
.jm-hint { color: var(--ink-muted); font-weight: 400; font-size: 14px; }
.jm-input, .jm-textarea { width: 100%; padding: var(--space-3) 14px; background: var(--bg); color: var(--ink); border: 1px solid var(--border-control); border-radius: var(--radius-sm); font: 400 16px/1.4 var(--font-body); }
.jm-textarea { min-height: 88px; resize: vertical; }
.jm-input::placeholder, .jm-textarea::placeholder { color: var(--ink-muted); }
.jm-input:focus, .jm-textarea:focus, .jm-input.is-focus, .jm-textarea.is-focus { outline: 2px solid var(--rose); outline-offset: 1px; border-color: var(--rose); }
.jm-input:disabled { opacity: .6; cursor: not-allowed; }
.jm-field.has-error .jm-input, .jm-field.has-error .jm-textarea, .jm-field.has-error .jm-choice label { border-color: var(--danger); }
.jm-error { color: var(--danger); font-size: 14px; }
.jm-note { padding: var(--space-3) 14px; background: var(--surface-rose); color: var(--ink); border-radius: var(--radius-sm); font-size: 15px; line-height: 1.5; }

/* Choice */
.jm-choices { display: grid; gap: var(--space-2); }
.jm-choices.is-inline { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.jm-choice { position: relative; min-width: 0; }
.jm-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.jm-choice label { position: relative; display: block; padding: var(--space-3) 14px var(--space-3) 44px; background: var(--bg); border: 1px solid var(--border-control); border-radius: var(--radius-sm); font: 500 16px/1.4 var(--font-body); }
.jm-choice label small { display: block; margin-top: 2px; color: var(--ink-muted); font: 400 14px/1.4 var(--font-body); }
.jm-choice label::before { content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 1.5px solid var(--border-control); border-radius: 50%; }
.jm-choice.is-check label::before { border-radius: 5px; }
.jm-choice:hover label, .jm-choice.is-hover label { border-color: var(--rose); }
.jm-choice input:checked + label { background: var(--surface-rose); border-color: var(--rose); }
.jm-choice input:checked + label::before { background: var(--rose); border-color: var(--rose); box-shadow: inset 0 0 0 3px var(--surface-rose); }
.jm-choice.is-check input:checked + label::before { box-shadow: none; }
.jm-choice.is-check input:checked + label::after { content: ""; position: absolute; left: 19px; top: 50%; width: 8px; height: 4px; margin-top: -4px; border-left: 2px solid var(--on-rose); border-bottom: 2px solid var(--on-rose); transform: rotate(-45deg); }
.jm-choice input:focus-visible + label, .jm-choice.is-focus label { outline: 2px solid var(--rose); outline-offset: 2px; }
.jm-other { margin-top: var(--space-2); }

/* ThankYou */
.jm-thanks { display: grid; gap: var(--space-4); justify-items: start; }