/* No Cover Charge · Account styles. Owned by WS5 Account (auth, paywall, settings, web home); Foundation owns ncc.css.
   Linked from both hosts (GuitarSuperSystem/wwwroot/index.html, GuitarSuperSystem.Web/Components/App.razor)
   after ncc/ncc.css with the shared build stamp, so it ships with every deploy and can use the tokens.
   Plain CSS (Tailwind does not compile this file): scope every rule under the feature's root class,
   use var(--n-*) tokens instead of raw colours, and keep motion to the ncc.css kit. */

/* ---- Sign in (Login.razor) -------------------------------------------------------------------- */
/* EmptyLayout already pads the top inset, so the page fills what's left and the footer sits at the
   bottom of a short screen instead of being clipped. */
.acc-login { display: flex; flex-direction: column; min-height: calc(100dvh - var(--n-safe-t)); background: var(--n-bg); color: var(--n-text); }
.acc-login__main { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); }

/* Guest marketing hero (wide screens only): uppercase display type is allowed here. */
.acc-login__hero { display: none; }
@media (min-width: 768px) {
  .acc-login__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-login__hero {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--n-8); padding: 48px;
    background: url("../images/hero-hosts.jpg") center / cover no-repeat var(--n-card);
  }
  .acc-login__hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(19,19,19,.78), transparent 55%),
                linear-gradient(to bottom right, rgba(19,19,19,.82), rgba(19,19,19,.4), transparent);
  }
  .acc-login__hero > * { position: relative; }
}
.acc-login__hero-logo { display: block; width: auto; height: 64px; }
.acc-login__tagline { max-width: 480px; }
.acc-login__shout {
  margin: 0 0 var(--n-6); color: var(--n-text-hi); text-transform: uppercase; text-wrap: balance;
  font: 700 clamp(48px, 6vw, 72px)/.95 var(--n-font-display); letter-spacing: -.03em;
}
.acc-login__shout span { color: var(--n-red); }
.acc-login__pitch { max-width: 400px; margin: 0; color: var(--n-text-2); font-size: 18px; line-height: 1.6; }
.acc-login__proof { display: flex; gap: var(--n-4); }
.acc-login__stat {
  display: grid; gap: 4px; padding: var(--n-4); border-radius: var(--n-r-sm);
  background: var(--n-glass); -webkit-backdrop-filter: var(--n-glass-fx); backdrop-filter: var(--n-glass-fx);
}
.acc-login__stat b { font: 700 24px/1.1 var(--n-font-display); color: var(--n-pink); }

.acc-login__panel { display: flex; flex-direction: column; align-items: center; padding: 16px var(--n-gutter) var(--n-10); }
@media (min-width: 768px) { .acc-login__panel { justify-content: center; padding: 64px var(--n-8); } }
.acc-login__back { align-self: flex-start; margin-bottom: var(--n-2); }
.acc-login__box { display: grid; gap: var(--n-6); width: 100%; max-width: 440px; }
.acc-login__logo { display: block; width: auto; height: 40px; }
@media (min-width: 768px) { .acc-login__logo { display: none; } }
.acc-login__head { display: grid; gap: var(--n-2); }
.acc-login__head .n-title, .acc-login__head .n-small { margin: 0; }

/* Code entry */
.acc-sent { display: grid; justify-items: center; gap: var(--n-4); text-align: center; }
.acc-sent .n-empty__icon { margin-bottom: 0; }
.acc-sent__email { color: var(--n-text-hi); font-weight: 600; overflow-wrap: anywhere; }
.acc-sent__code { width: 100%; justify-items: center; margin-top: var(--n-2); }
.acc-sent__status, .acc-sent__hint { margin: 0; max-width: 36ch; }
.acc-sent__status { color: var(--n-text-2); }
.acc-sent .n-alert { width: 100%; }
.acc-sent__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--n-2); }

/* One real field (iOS one-time-code autofill, paste, the number pad) under cells that draw the digits. */
.acc-otp { --cells: 6; position: relative; width: 100%; max-width: calc(var(--cells) * 56px); height: 56px; }
.acc-otp__input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: .01;
  background: none; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 1em; -webkit-appearance: none; appearance: none;
}
.acc-otp__cells { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(var(--cells), minmax(0, 1fr)); gap: var(--n-2); pointer-events: none; }
.acc-otp__cell {
  display: grid; place-items: center; border-radius: var(--n-r-sm); background: var(--n-sunken); border: 1px solid var(--n-line-2);
  color: var(--n-text-hi); font: 700 22px/1 var(--n-font-display); font-variant-numeric: tabular-nums;
  transition: border-color var(--n-dur-fast) ease;
}
.acc-otp__cell.is-filled { border-color: var(--n-line-3); animation: n-pop calc(220ms / var(--n-tempo)) var(--n-pop) backwards; }
.acc-otp:focus-within .acc-otp__cell.is-next { border-color: var(--n-red); }
.acc-otp.is-busy .acc-otp__cell { opacity: .55; }

.acc-login__foot {
  display: flex; flex-direction: column; align-items: center; gap: var(--n-1);
  padding: var(--n-4) var(--n-gutter) calc(var(--n-4) + var(--n-safe-b)); border-top: 1px solid var(--n-line); background: var(--n-bg);
}
.acc-login__brand { display: none; }
.acc-login__links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--n-5); }
.acc-login__links a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--n-text-2); text-decoration: none;
  font: 600 var(--n-fs-small)/1 var(--n-font-body);
}
@media (hover: hover) { .acc-login__links a:hover { color: var(--n-text); } }
@media (min-width: 768px) {
  .acc-login__foot { flex-direction: row; justify-content: space-between; padding: var(--n-4) var(--n-8); }
  .acc-login__brand { display: block; color: var(--n-pink); font: 700 var(--n-fs-kicker)/1 var(--n-font-display); letter-spacing: var(--n-ls-kicker); text-transform: uppercase; }
}

/* ---- Email link landing in the app (MagicLinkCallback.razor) ------------------------------------- */
.acc-cb {
  display: grid; justify-items: center; align-content: center; gap: var(--n-6); min-height: calc(100dvh - var(--n-safe-t));
  padding: var(--n-8) var(--n-gutter) calc(var(--n-8) + var(--n-safe-b)); text-align: center; background: var(--n-bg);
}
.acc-cb__logo { display: block; width: auto; height: 56px; }
.acc-cb__state { display: grid; justify-items: center; gap: var(--n-3); max-width: 420px; }
.acc-cb__state .n-title, .acc-cb__state .n-small { margin: 0; }
.acc-cb__state.n-empty { padding: 0; }
/* The launch cover's loading bar, so the wait reads as the same app. */
.acc-cb__bar { position: relative; display: block; width: 120px; height: 2px; overflow: hidden; border-radius: 2px; background: var(--n-line); }
.acc-cb__bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--n-red);
  animation: n-boot-bar calc(1200ms / var(--n-tempo)) ease-in-out infinite;
}

/* ---- Onboarding (Onboarding.razor) ------------------------------------------------------------- */
.acc-ob { position: relative; min-height: calc(100dvh - var(--n-safe-t)); background: var(--n-bg); color: var(--n-text); }
.acc-ob__glow { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.acc-ob__glow::before, .acc-ob__glow::after { content: ""; position: absolute; border-radius: 50%; }
.acc-ob__glow::before { top: 0; right: 0; width: 80vw; height: 80vw; background: rgba(246,167,170,.05); filter: blur(120px); translate: 33% -50%; }
.acc-ob__glow::after { bottom: 0; left: 0; width: 60vw; height: 60vw; background: var(--n-red-wash); filter: blur(100px); translate: -25% 50%; }
.acc-ob__center { position: relative; z-index: 1; display: grid; place-items: center; min-height: calc(100dvh - var(--n-safe-t)); padding: var(--n-6) var(--n-gutter); }

/* Room at the bottom for the fixed footer (two rows on step 2). */
.acc-ob__main {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 760px; margin: 0 auto;
  padding: 48px var(--n-gutter) calc(var(--n-safe-b) + 176px); text-align: center;
}
.acc-ob__logo { display: block; width: auto; height: 38px; margin-bottom: var(--n-6); }
.acc-ob__steps { display: flex; align-items: center; gap: var(--n-3); margin-bottom: var(--n-4); }
.acc-ob__brand {
  padding: 6px 12px; border-radius: var(--n-r-pill); background: var(--n-red); color: var(--n-on-red);
  font: 700 var(--n-fs-kicker)/1 var(--n-font-display); letter-spacing: var(--n-ls-kicker); text-transform: uppercase;
}
.acc-ob__title {
  margin: 0 0 var(--n-4); color: var(--n-text); text-wrap: balance;
  font: 700 clamp(34px, 7vw, 52px)/1.02 var(--n-font-display); letter-spacing: var(--n-ls-title);
}
.acc-ob__title span { color: var(--n-red); }
.acc-ob__intro { max-width: 460px; margin: 0 auto var(--n-8); color: var(--n-text-2); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.acc-ob__signed { margin-bottom: var(--n-4); }

.acc-ob__paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--n-3); width: 100%; }
.acc-ob__path {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--n-2); min-height: 176px; padding: var(--n-6);
  border-radius: var(--n-r-lg); border: 1px solid var(--n-line); background: var(--n-card); color: var(--n-text); text-align: left; cursor: pointer;
  transition: scale var(--n-dur-fast) ease, border-color var(--n-dur) ease, background-color var(--n-dur) ease;
}
.acc-ob__path:active { scale: .98; }
@media (hover: hover) { .acc-ob__path:not(.on):hover { border-color: var(--n-line-2); background: var(--n-card-2); } }
.acc-ob__path.on { border-color: var(--n-red); background: var(--n-red-wash); }
.acc-ob__path-icon { margin-bottom: auto; color: var(--n-red); }
.acc-ob__path-title { margin-top: var(--n-6); font: 700 var(--n-fs-h2)/1.2 var(--n-font-display); }
.acc-ob__path-desc { color: var(--n-text-2); font-size: var(--n-fs-small); line-height: 1.45; }
.acc-ob__path-check { position: absolute; top: var(--n-4); right: var(--n-4); color: var(--n-red); }

.acc-ob__form { width: 100%; max-width: 600px; text-align: left; }
.acc-ob__email { display: flex; gap: var(--n-2); }
.acc-ob__email .n-input { flex: 1 1 auto; min-width: 0; color: var(--n-text-3); -webkit-text-fill-color: var(--n-text-3); opacity: 1; }
.acc-ob__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 479px) { .acc-ob__pair { grid-template-columns: minmax(0, 1fr); } }
.acc-ob__hint { min-height: 16px; margin: 0; color: var(--n-text-3); font-size: var(--n-fs-meta); line-height: 1.35; }
.acc-ob__hint.is-ok { color: var(--n-go); }
.acc-ob__hint.is-bad { color: var(--n-danger); }
.acc-ob__skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--n-2); }
@media (max-width: 479px) { .acc-ob__skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acc-ob__skill {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: var(--n-3) var(--n-2);
  border-radius: var(--n-r-md); border: 1px solid var(--n-line); background: var(--n-card); color: var(--n-text-2); cursor: pointer;
  font: 700 var(--n-fs-kicker)/1.2 var(--n-font-display); letter-spacing: .08em; text-transform: uppercase;
  transition: scale var(--n-dur-fast) ease, color var(--n-dur) ease, border-color var(--n-dur) ease, background-color var(--n-dur) ease;
}
.acc-ob__skill:active { scale: .97; }
.acc-ob__skill.on { border-color: var(--n-red); background: var(--n-red); color: var(--n-on-red); }

.acc-ob__goal { width: 100%; max-width: 480px; text-align: left; }

/* Fixed action bar: on step 2 the legal line sits above the buttons, so nothing is squeezed sideways. */
.acc-ob__foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--n-3);
  padding: 16px 20px calc(16px + var(--n-safe-b));
  background: linear-gradient(180deg, transparent, var(--n-bg) 28%); text-align: left;
}
.acc-ob__foot > * { width: 100%; max-width: 600px; margin: 0 auto; }
.acc-ob__foot-row { display: flex; align-items: center; gap: var(--n-3); }
.acc-ob__cta { flex: 1 1 auto; min-width: 0; }
/* Step 2 on phones: the full-width CTA on top, Back (ghost) under it; side by side from 480px. */
.acc-ob__foot-row--stack { flex-direction: column-reverse; align-items: stretch; gap: var(--n-2); }
@media (min-width: 480px) { .acc-ob__foot-row--stack { flex-direction: row; align-items: center; gap: var(--n-3); } }
.acc-ob__main--stacked-foot { padding-bottom: calc(var(--n-safe-b) + 224px); }
@media (min-width: 480px) { .acc-ob__main--stacked-foot { padding-bottom: calc(var(--n-safe-b) + 176px); } }
.acc-ob__legal { margin: 0 auto; color: var(--n-text-3); font-size: var(--n-fs-meta); line-height: 1.5; }
/* Keyboard up (html.kb-open, ncc-ui.js): step 2's bar would sit on the keyboard, over the name and
   username fields and their hint. It joins the form's flow under the skill grid until it closes. */
html.kb-open .acc-ob__form > .acc-ob__foot { position: static; padding: var(--n-6) 0 0; background: none; }
html.kb-open .acc-ob__main--stacked-foot { padding-bottom: var(--n-8); }

/* ---- Legal text (Components/Legal, /terms, /privacy, onboarding's sheet) ------------------------- */
.acc-legal-page { padding-bottom: calc(var(--n-10) + var(--n-safe-b)); }
.acc-legal-card { max-width: 720px; }
/* /about's pull quote: the feature card's red wash, the line in sentence-case display type. */
.acc-legal .acc-about__quote { margin-top: var(--n-6); padding: var(--n-5); }
.acc-legal .acc-about__line { color: var(--n-text-hi); font: 700 var(--n-fs-h2)/1.2 var(--n-font-display); letter-spacing: var(--n-ls-title); }
.acc-legal { max-width: 720px; color: var(--n-text-2); font-size: var(--n-fs-body); line-height: 1.65; }
.acc-legal .acc-legal__revised { margin: 0 0 var(--n-4); }
.acc-legal section + section { margin-top: var(--n-6); }
.acc-legal h2 { margin: 0 0 var(--n-2); color: var(--n-text); font: 700 var(--n-fs-h3)/1.3 var(--n-font-display); }
.acc-legal p { margin: 0; }
.acc-legal p + p { margin-top: var(--n-2); }
.acc-legal ul { margin: var(--n-2) 0 0; padding-left: 1.25em; list-style: disc; }
.acc-legal ol { margin: var(--n-2) 0 0; padding-left: 1.25em; list-style: decimal; }
.acc-legal ul + p, .acc-legal ol + p { margin-top: var(--n-2); }
.acc-legal .acc-legal__cta { margin: var(--n-4) 0; }
.acc-legal .acc-legal__fine { padding-top: var(--n-4); border-top: 1px solid var(--n-line); }
/* ?embed=1 (LegalPage): something frames the page, so it covers the app chrome rather than sitting in it. */
.acc-embed {
  position: fixed; inset: 0; z-index: var(--n-z-full); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-top: var(--n-safe-t); background: var(--n-bg);
}
.acc-legal li + li { margin-top: 6px; }
.acc-legal strong { color: var(--n-text); font-weight: 600; }
.acc-legal a { color: var(--n-pink); font-weight: 600; text-decoration: none; }
@media (hover: hover) { .acc-legal a:hover { text-decoration: underline; } }
/* An in-sheet link that switches the document instead of leaving the page. */
.acc-legal__link {
  display: inline; padding: 0; border: 0; background: none; color: var(--n-pink); cursor: pointer;
  font: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--n-red-line); text-underline-offset: 2px;
}

/* ---- App paywall (SubscribeMobile.razor) --------------------------------------------------------- */
/* Paywall: uppercase display type is allowed in the hero. Rows are divs (Android WebView taps), so
   they carry their own press and focus styles. */
.acc-pay {
  position: relative; isolation: isolate; display: grid; gap: var(--n-5); width: 100%; max-width: 560px; margin: 0 auto;
  padding: var(--n-page-top) var(--n-gutter) var(--n-8); color: var(--n-text);
}
.acc-pay__glow {
  position: absolute; inset: 0 0 auto; z-index: -1; height: 360px; pointer-events: none;
  background: radial-gradient(90% 70% at 100% 0%, var(--n-red-wash), transparent 70%);
}
.acc-pay__bar { display: flex; justify-content: flex-end; margin-bottom: calc(-1 * var(--n-4)); }
.acc-pay__hero { display: grid; gap: var(--n-3); }
.acc-pay__shout {
  margin: 0; color: var(--n-text-hi); text-transform: uppercase; text-wrap: balance;
  font: 700 clamp(38px, 11vw, 60px)/.92 var(--n-font-display); letter-spacing: -.03em;
}
.acc-pay__shout span { color: var(--n-red); }
.acc-pay__pitch { max-width: 42ch; margin: 0; color: var(--n-text-2); font-size: var(--n-fs-body); line-height: 1.55; text-wrap: pretty; }
.acc-pay__perks { display: grid; gap: var(--n-2); margin: var(--n-1) 0 0; padding: 0; list-style: none; }
.acc-pay__perks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; }
.acc-pay__perks .n-icon { color: var(--n-red); }

.acc-pay__plans, .acc-pay__list { display: grid; gap: var(--n-3); }
.acc-pay__skel { border-radius: var(--n-r-lg); }
.acc-pay__plan {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--n-3); padding: var(--n-4);
  border-radius: var(--n-r-lg); border: 1.5px solid var(--n-line-2); background: var(--n-card); cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: border-color var(--n-dur) ease, background-color var(--n-dur) ease, scale var(--n-dur-fast) ease;
}
.acc-pay__plan:active { scale: .985; }
.acc-pay__plan:focus-visible { outline: 2px solid var(--n-pink); outline-offset: 2px; }
.acc-pay__plan.is-on {
  border-color: var(--n-red);
  background: radial-gradient(120% 120% at 0% 0%, var(--n-red-wash), transparent 70%), var(--n-card);
}
.acc-pay__radio { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--n-line-3); transition: border-color var(--n-dur) ease; }
.acc-pay__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--n-red); scale: 0; transition: scale calc(320ms / var(--n-tempo)) var(--n-pop); }
.acc-pay__plan.is-on .acc-pay__radio { border-color: var(--n-red); }
.acc-pay__plan.is-on .acc-pay__radio::after { scale: 1; }
.acc-pay__name { display: grid; gap: 4px; min-width: 0; }
.acc-pay__plan-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--n-2); color: var(--n-text); font: 700 17px/1.2 var(--n-font-display); }
.acc-pay__badge {
  padding: 3px 8px; border-radius: var(--n-r-pill); background: var(--n-red); color: var(--n-on-red); white-space: nowrap;
  font: 700 var(--n-fs-micro)/1.2 var(--n-font-display); letter-spacing: .1em; text-transform: uppercase;
}
.acc-pay__plan-sub { color: var(--n-text-3); font-size: var(--n-fs-meta); }
.acc-pay__price { display: grid; justify-items: end; gap: 2px; text-align: right; }
.acc-pay__price b { color: var(--n-text-hi); font: 700 20px/1.1 var(--n-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.acc-pay__plan.is-on .acc-pay__price b { color: var(--n-pink); }
.acc-pay__price small { color: var(--n-text-3); font-size: var(--n-fs-meta); }
.acc-pay__price .acc-pay__then { color: var(--n-text-2); }

.acc-pay__fine { margin: calc(-1 * var(--n-2)) 0 0; color: var(--n-text-2); font-size: var(--n-fs-meta); line-height: 1.5; text-align: center; }
.acc-pay__cta { display: grid; gap: var(--n-3); }
.acc-pay__renew { margin: 0; color: var(--n-text-3); font-size: var(--n-fs-meta); line-height: 1.5; text-align: center; text-wrap: pretty; }
.acc-pay__legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: var(--n-1); margin-top: calc(-1 * var(--n-3)); color: var(--n-text-4); }
.acc-pay__legal a, .acc-pay__legal button, .acc-pay__who button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer;
  color: var(--n-text-2); font: 600 var(--n-fs-small)/1 var(--n-font-body); text-decoration: none;
}
.acc-pay__legal button:disabled, .acc-pay__who button:disabled { opacity: .45; cursor: default; }
@media (hover: hover) {
  .acc-pay__legal a:hover, .acc-pay__legal button:hover:not(:disabled), .acc-pay__who button:hover:not(:disabled) { color: var(--n-text); }
}
.acc-pay__who {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--n-1); margin: calc(-1 * var(--n-4)) 0 0;
  color: var(--n-text-3); font-size: var(--n-fs-meta); text-align: center;
}
.acc-pay__who > span { color: var(--n-text-2); overflow-wrap: anywhere; }

/* ---- Web checkout (Checkout.razor) and its landing (CheckoutReturn.razor) -------------------------- */
/* The paywall's look (acc-pay glow and shout) at desktop width: summary and perks on the left, Stripe's
   embedded checkout on the right and sticky from 1024px; one column on phones. */
.acc-co {
  position: relative; isolation: isolate; width: 100%; max-width: var(--n-max-wide); margin: 0 auto;
  padding: var(--n-page-top) var(--n-gutter) calc(var(--n-10) + var(--n-safe-b)); color: var(--n-text);
}
.acc-co__head { display: flex; align-items: flex-start; gap: var(--n-2); margin-bottom: var(--n-6); }
.acc-co__titles { display: grid; gap: var(--n-2); min-width: 0; padding-top: 12px; }
.acc-co__title { font-size: clamp(30px, 7vw, 44px); }
.acc-co__grid { display: grid; gap: var(--n-5); align-items: start; }
.acc-co__col { display: grid; gap: var(--n-4); min-width: 0; }
.acc-co__skel { border-radius: var(--n-r-md); }
@media (min-width: 1024px) {
  .acc-co__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--n-8); }
  .acc-co__pay { position: sticky; top: var(--n-8); }
}
.acc-co__card { padding: var(--n-5); }
.acc-co__kicker { margin: 0 0 var(--n-4); }
.acc-co__item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; gap: var(--n-4); }
.acc-co__mark {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--n-r-sm);
  border: 1px solid var(--n-red-line); background: var(--n-red-wash); color: var(--n-red);
}
.acc-co__what { display: grid; gap: var(--n-1); min-width: 0; }
.acc-co__what p { margin: 0; }
.acc-co__price { display: grid; justify-items: end; gap: 2px; text-align: right; }
.acc-co__price b { color: var(--n-text-hi); font: 700 var(--n-fs-h3)/1.2 var(--n-font-display); font-variant-numeric: tabular-nums; }
.acc-co__promo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--n-2) var(--n-3); margin-top: var(--n-5); padding-top: var(--n-5);
  border-top: 1px dashed var(--n-line-2);
}
.acc-co__code {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px dashed var(--n-red-line); border-radius: var(--n-r-xs);
  color: var(--n-text-hi); font: 700 var(--n-fs-kicker)/1.2 var(--n-font-display); letter-spacing: var(--n-ls-kicker);
}
.acc-co__code .n-icon { color: var(--n-red); }
.acc-co__promo-terms { flex: 1; min-width: 0; }
.acc-co__off { color: var(--n-pink); font: 700 14px/1 var(--n-font-display); }
.acc-co__total {
  display: flex; align-items: center; justify-content: space-between; gap: var(--n-3); margin-top: var(--n-5); padding-top: var(--n-5);
  border-top: 1px solid var(--n-line);
}
.acc-co__total-label { color: var(--n-text-hi); font: 700 var(--n-fs-small)/1.2 var(--n-font-display); letter-spacing: var(--n-ls-btn); text-transform: uppercase; }
.acc-co__total-amt { color: var(--n-text-hi); font: 800 30px/1 var(--n-font-display); }
.acc-co__total-amt.is-deal { color: var(--n-pink); }
.acc-co__note { margin: var(--n-1) 0 0; text-align: right; }
.acc-co__perks { display: grid; gap: var(--n-4); margin: 0; padding: 0; list-style: none; }
.acc-co__perks li { display: flex; align-items: flex-start; gap: var(--n-3); }
.acc-co__perks .n-icon { flex: none; margin-top: 1px; color: var(--n-red); }
.acc-co__perks b { display: block; color: var(--n-text-hi); font: 700 14px/1.3 var(--n-font-display); }
.acc-co__perks .n-small { display: block; margin-top: 2px; }
.acc-co__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--n-2) var(--n-5); margin: 0; padding: 0; list-style: none; }
.acc-co__trust li { display: inline-flex; align-items: center; gap: 6px; }
.acc-co__stripe { min-height: 500px; }
.acc-co-error { max-width: 520px; margin: 0 auto; border-radius: var(--n-r-lg); background: var(--n-card); border: 1px solid var(--n-line); }
.acc-co-tier { margin: 0; color: var(--n-text-hi); font: 700 var(--n-fs-h3)/1.3 var(--n-font-display); }

/* The landing reads as the Join welcome: dark, the pluck, then where to go first. */
.acc-done {
  display: grid; place-items: center; min-height: calc(100dvh - var(--n-safe-t));
  padding: var(--n-8) var(--n-gutter) calc(var(--n-8) + var(--n-safe-b));
  background: radial-gradient(80% 45% at 50% 0%, var(--n-red-wash), transparent 70%), var(--n-bg); color: var(--n-text);
}
.acc-done__box { display: grid; gap: var(--n-4); width: 100%; max-width: 480px; }
.acc-done__box > * { animation: n-rise calc(560ms / var(--n-tempo)) var(--n-out) backwards; }
.acc-done__box > :nth-child(2) { animation-delay: 60ms; } .acc-done__box > :nth-child(3) { animation-delay: 120ms; }
.acc-done__box > :nth-child(4) { animation-delay: 180ms; } .acc-done__box > :nth-child(n+5) { animation-delay: 240ms; }
.acc-done__logo { display: block; width: auto; height: 40px; }
.acc-done__pluck { display: block; width: 100%; height: 90px; }
.acc-done__title { margin: 0; color: var(--n-text-hi); font: 700 clamp(30px, 7vw, 42px)/1.05 var(--n-font-display); letter-spacing: var(--n-ls-title); text-wrap: balance; }
.acc-done__lead { margin: 0; color: var(--n-text-2); font-size: var(--n-fs-body); line-height: 1.55; }
.acc-done__status {
  display: flex; align-items: center; gap: var(--n-3); min-height: 48px; padding: var(--n-3) var(--n-4);
  border-radius: var(--n-r-md); border: 1px solid var(--n-line); background: var(--n-card); color: var(--n-text-2); font-size: var(--n-fs-small);
}
.acc-done__status.is-on { border-color: var(--n-go-wash); color: var(--n-text); }
.acc-done__status.is-on .n-icon { color: var(--n-go); }
.acc-done__status .n-btn { margin-left: auto; }
.acc-done__cards { display: grid; gap: var(--n-3); }
.acc-done__card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--n-3); color: var(--n-text); }
.acc-done__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--n-r-sm); background: var(--n-red-wash); color: var(--n-red); }
.acc-done__card small { display: block; color: var(--n-pink); font: 700 var(--n-fs-kicker)/1.2 var(--n-font-display); letter-spacing: var(--n-ls-kicker); text-transform: uppercase; }
.acc-done__card b { display: block; margin-top: 2px; font: 700 16px/1.25 var(--n-font-display); }
.acc-done__card > .n-icon:last-child { color: var(--n-text-3); }
.acc-done__actions { display: grid; gap: var(--n-2); }
.acc-done__state.n-empty { padding: 0; }
.acc-done__wait { display: grid; justify-items: center; gap: var(--n-3); text-align: center; }
.acc-done__wait .n-title, .acc-done__wait .n-small { margin: 0; }

/* ---- Settings (Settings.razor) -------------------------------------------------------------------- */
.acc-set { max-width: 680px; padding-bottom: var(--n-8); }
.acc-set__acct { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--n-6); color: var(--n-text); text-decoration: none; }
.acc-set__acct-text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.acc-set__acct-name { overflow: hidden; color: var(--n-text-hi); font: 600 16px/1.3 var(--n-font-body); text-overflow: ellipsis; white-space: nowrap; }
.acc-set__acct .n-small { margin: 0; }
.acc-set__alert { margin: calc(-1 * var(--n-3)) 0 var(--n-5); }
.acc-set__version { margin: var(--n-2) 0 var(--n-6); text-align: center; color: var(--n-text-4); letter-spacing: .06em; }
.acc-set__panel { display: grid; gap: var(--n-4); }
.acc-set__photo { display: flex; align-items: center; gap: var(--n-5); }
.acc-set__photo > div { display: grid; gap: var(--n-2); justify-items: start; }
.acc-set__file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.acc-set__photo label.n-btn { cursor: pointer; }
.acc-set__err { margin: 0; color: var(--n-danger); }
.acc-set__actions { display: flex; justify-content: flex-end; gap: var(--n-2); }
.acc-set__skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--n-2); }
@media (min-width: 560px) { .acc-set__skills { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Native time picker in a row: compact, right-aligned, 16px so iOS doesn't zoom. */
/* The delete sheet's store button sits under the warning: beside it, the text had no room on a phone. */
.acc-set__del-act { margin-top: var(--n-2); }
.acc-set__time { width: auto; min-width: 112px; min-height: 40px; padding: 6px 10px; text-align: right; color-scheme: dark; }

/* Switch (iOS-sized, 51x31) with a 44px target. The input covers the whole control so a tap anywhere on
   it lands, and the native focus ring is swapped for the system one. */
.acc-switch { position: relative; flex: none; display: inline-grid; place-items: center; width: 51px; height: 44px; cursor: pointer; }
.acc-switch input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.acc-switch__track {
  position: relative; display: block; width: 51px; height: 31px; border-radius: var(--n-r-pill); background: var(--n-card-3);
  box-shadow: inset 0 0 0 1px var(--n-line-2); transition: background-color var(--n-dur) ease, box-shadow var(--n-dur) ease;
}
.acc-switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--n-text-hi);
  box-shadow: var(--n-shadow-card); transition: translate var(--n-dur) var(--n-glide);
}
.acc-switch input:checked + .acc-switch__track { background: var(--n-red); box-shadow: none; }
.acc-switch input:checked + .acc-switch__track::after { translate: 20px 0; }
.acc-switch input:focus-visible + .acc-switch__track { outline: 2px solid var(--n-pink); outline-offset: 2px; }
.acc-switch input:disabled + .acc-switch__track { opacity: .45; }
.acc-switch__skel { border-radius: var(--n-r-pill); }

/* Membership */
.acc-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--n-4); }
.acc-plan__name { margin: 6px 0 0; color: var(--n-text-hi); font: 700 var(--n-fs-h2)/1.2 var(--n-font-display); letter-spacing: var(--n-ls-title); }
.acc-plan .n-small { margin: 0; }
.acc-plan__renew strong { color: var(--n-text); font-weight: 600; }
.acc-plan__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--n-2); }
.acc-plan__hint { margin: 0; }

/* ---- Web home (DashboardV2.razor) ---------------------------------------------------------------- */
/* The image-first hero (photo, left scrim, glass route tiles) and the card stack under it. The scrim
   gradients are part of the photo treatment, so they keep their own ink stops. Uppercase display type
   only on the guest hero; members get sentence case. */
.acc-home { color: var(--n-text-hi); font-family: var(--n-font-body); padding: 24px 32px 48px; box-sizing: border-box; }
.acc-home .container { width: 100%; max-width: 1500px; margin: 0 auto; }

.acc-home .hero { position: relative; width: 100%; height: 440px; overflow: hidden; border-radius: 24px; border: 1px solid var(--n-line); background: var(--n-sunken); }
.acc-home .hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: url('../images/branding/hosts-couch-wide.jpg') center center / cover no-repeat;
  /* The asset is 2.5:1, narrower than the box at every width, so cover only crops vertically and both
     hosts always show. Faces sit at ~50% height, inside the worst-case crop. */
  filter: contrast(1.04) brightness(0.94);
}
/* All the headline darkening lives here, anchored to the container edge so it survives any crop. */
.acc-home .hero-scrim-left {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.88) 24%, rgba(10,10,10,.45) 36%, rgba(10,10,10,.12) 48%, rgba(10,10,10,0) 60%);
}
.acc-home .hero-scrim-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 220px; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.55) 60%, rgba(10,10,10,.85) 100%);
}

/* Streak chip at the top of the content column (clear of both faces). */
.acc-home .streak-chip {
  align-self: flex-start; z-index: 3; display: inline-flex; flex-direction: column; gap: 7px; margin-bottom: 14px; padding: 10px 16px;
  border-radius: var(--n-r-md); border: 1px solid var(--n-line-2); background: var(--n-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: inherit; text-decoration: none;
}
.acc-home .streak-line {
  display: inline-flex; align-items: center; gap: 6px; color: var(--n-red);
  font: 700 var(--n-fs-kicker)/1 var(--n-font-display); letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.acc-home .streak-best { margin-left: 6px; color: var(--n-text-3); font-weight: 500; }
.acc-home .streak-dots { display: inline-flex; align-items: center; gap: 6px; }
.acc-home .streak-dots .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--n-line); border: 1px solid var(--n-line-2); }
.acc-home .streak-dots .dot.lit { background: var(--n-red); border-color: var(--n-red); }
.acc-home .streak-dots .dot.frozen { background: var(--n-card-3); border-color: var(--n-text-3); }
.acc-home .streak-dots .dot.today { box-shadow: 0 0 0 2px var(--n-red-line); }

.acc-home .hero-content { position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; display: flex; flex-direction: column; width: 540px; padding: 38px 36px; }
.acc-home .hero-eyebrow { margin: 0; color: var(--n-red); font: 700 12px/1 var(--n-font-display); letter-spacing: .22em; text-transform: uppercase; }
.acc-home .hero-headline { margin: 14px 0 0; color: var(--n-text-hi); font: 700 48px/1 var(--n-font-display); letter-spacing: var(--n-ls-title); text-wrap: balance; }
.acc-home .hero-content:not(.is-auth) .hero-headline { font-size: 56px; line-height: .94; letter-spacing: -.03em; text-transform: uppercase; }
.acc-home .hero-sub { margin: 14px 0 0; color: var(--n-text); font-size: 14px; line-height: 1.4; }
.acc-home .hero-sub .lesson-tag { color: var(--n-red); font: 700 var(--n-fs-kicker)/1 var(--n-font-display); letter-spacing: var(--n-ls-kicker); text-transform: uppercase; }
.acc-home .hero-sub .course { color: var(--n-text-hi); font-weight: 600; }
.acc-home .hero-sub .path { color: var(--n-text-2); }
.acc-home .hero-cta-wrap { width: 320px; margin-top: 22px; }
@media (min-width: 721px) {
  /* The member hero carries the streak chip and the continue line: keep the CTA clear of the tiles. */
  .acc-home .hero-content.is-auth .hero-headline { font-size: 40px; line-height: 1.02; }
  .acc-home .hero-content.is-auth .streak-chip { margin-bottom: 8px; }
}

/* Card stack: one column on phones, two packed columns on desktop. */
.acc-home .card-stack { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
@media (min-width: 1100px) {
  .acc-home .card-stack { display: block; column-count: 2; column-gap: 14px; }
  .acc-home .card-stack > * { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 14px; }
}
.acc-home .card { display: block; padding: 24px; border-radius: var(--n-r-lg); border: 1px solid var(--n-line); background: var(--n-card); color: var(--n-text-hi); text-decoration: none; }
.acc-home .card.flush { padding: 0; overflow: hidden; }
.acc-home .card .eyebrow { margin: 0 0 8px; color: var(--n-text-3); font: 700 var(--n-fs-kicker)/1.2 var(--n-font-display); letter-spacing: var(--n-ls-kicker); text-transform: uppercase; }
.acc-home .card .headline-xl { margin: 0 0 12px; color: var(--n-text-hi); font: 700 40px/1 var(--n-font-display); letter-spacing: var(--n-ls-title); }
.acc-home .card .headline-xl .accent { color: var(--n-red); }
.acc-home .card .headline-md { margin: 0; color: var(--n-text-hi); font: 700 22px/1.2 var(--n-font-display); letter-spacing: -.01em; }
.acc-home .card .sub { margin: 0 0 18px; color: var(--n-text-2); font-size: 14px; line-height: 1.45; }
.acc-home .meta-line { color: var(--n-text-3); font-size: var(--n-fs-meta); font-weight: 500; font-variant-numeric: tabular-nums; }
.acc-home .card .divider-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--n-line); }
.acc-home .ghost-cta {
  display: inline-flex; align-items: center; gap: 8px; color: var(--n-text-2); text-decoration: none;
  font: 700 12px/1 var(--n-font-display); letter-spacing: var(--n-ls-btn); text-transform: uppercase; transition: color var(--n-dur-fast) ease;
}
@media (hover: hover) { .acc-home .ghost-cta:hover { color: var(--n-red); } }
.acc-home .card-skel { display: grid; gap: var(--n-3); }

/* Today's lick: the first card, the habit loop's front door. */
.acc-home .lick-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--n-4); align-items: center; }
.acc-home .lick-thumb { position: relative; aspect-ratio: 1; border-radius: var(--n-r-sm); overflow: hidden; background: var(--n-card-2); }
.acc-home .lick-thumb .n-icon { position: absolute; inset: 0; z-index: 1; margin: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--n-glass); color: var(--n-text-hi); }
.acc-home .lick-body { display: grid; gap: var(--n-2); min-width: 0; }
.acc-home .lick-body .eyebrow { display: flex; align-items: center; gap: var(--n-2); margin: 0; color: var(--n-pink); }
.acc-home .lick-title { margin: 0; overflow: hidden; color: var(--n-text-hi); font: 700 20px/1.2 var(--n-font-display); text-overflow: ellipsis; white-space: nowrap; }
.acc-home .lick-done { display: inline-flex; align-items: center; gap: 6px; color: var(--n-go); font: 700 12px/1 var(--n-font-display); letter-spacing: var(--n-ls-btn); text-transform: uppercase; }
@media (max-width: 480px) { .acc-home .lick-card { grid-template-columns: 96px minmax(0, 1fr); } }

/* Featured lesson */
.acc-home .featured-media { position: relative; display: block; height: 220px; overflow: hidden; background: var(--n-card-2); text-decoration: none; }
.acc-home .featured-media > .n-img { position: absolute; inset: 0; border-radius: 0; }
.acc-home .featured-media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 80% 20%, var(--n-red-wash) 0%, transparent 60%); }
.acc-home .featured-ribbon {
  position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 10px; border-radius: var(--n-r-pill); background: var(--n-red); color: var(--n-on-red);
  font: 700 var(--n-fs-micro)/1 var(--n-font-display); letter-spacing: .16em; text-transform: uppercase;
}
.acc-home .featured-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.acc-home .featured-play span {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--n-line-2); background: var(--n-glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--n-text-hi);
}
.acc-home .featured-duration {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 4px 8px; border-radius: var(--n-r-xs); background: var(--n-glass); color: var(--n-text-hi);
  font: 600 var(--n-fs-kicker)/1 var(--n-font-body); font-variant-numeric: tabular-nums;
}
.acc-home .featured-body { padding: 24px; }
.acc-home .featured-body > a { color: inherit; text-decoration: none; }
.acc-home .featured-instructor { display: flex; align-items: center; gap: 10px; margin: 8px 0 18px; }
.acc-home .featured-avatar {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--n-line-2); background: var(--n-card-2); color: var(--n-red); font: 700 var(--n-fs-micro)/1 var(--n-font-display);
}
.acc-home .featured-instructor .meta { color: var(--n-text-2); font-size: 13px; }

/* Active courses */
.acc-home .course-card { cursor: pointer; transition: border-color var(--n-dur-fast) ease, scale var(--n-dur-fast) ease; }
.acc-home .course-card:active { scale: .995; }
@media (hover: hover) { .acc-home .course-card:hover { border-color: var(--n-line-2); } }
.acc-home .courses-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc-home .courses-glyph { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--n-r-md); background: var(--n-red-wash); color: var(--n-red); }
.acc-home .courses-meta { margin-top: var(--n-2); }
.acc-home .courses-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.acc-home .thumb-stack { display: flex; }
.acc-home .stack-thumb { width: 36px; height: 36px; border-radius: var(--n-r-sm); border: 2px solid var(--n-card); background: var(--n-card-3); }
.acc-home .stack-thumb + .stack-thumb { margin-left: -10px; }

/* Backstage */
.acc-home .threads { margin: 14px 0 16px; border-top: 1px solid var(--n-line); }
.acc-home .threads--skel { padding-top: 14px; }
.acc-home .card .card-lede { margin-top: var(--n-2); }
.acc-home .card .card-sub-end { margin: 0; }
.acc-home .card-head { margin-bottom: 14px; }
.acc-home .thread { display: flex; align-items: flex-start; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--n-line); color: inherit; text-decoration: none; }
.acc-home .thread-main { flex: 1; min-width: 0; }
.acc-home .thread .title { margin: 0 0 4px; color: var(--n-text-hi); font-size: 14px; font-weight: 600; line-height: 1.3; }

/* Podcast */
.acc-home .podcast-row { display: flex; align-items: stretch; gap: 16px; margin-top: 8px; }
.acc-home .podcast-art {
  position: relative; flex-shrink: 0; display: grid; place-items: center; width: 104px; height: 104px; overflow: hidden; border-radius: var(--n-r-sm);
  background: var(--n-red); color: var(--n-on-red);
}
.acc-home .podcast-meta { margin-top: var(--n-2); }
.acc-home .podcast-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0; }
.acc-home .podcast-title {
  margin: 0; overflow: hidden; color: var(--n-text-hi); font: 700 20px/1.15 var(--n-font-display); letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Fresh gear */
.acc-home .gear-list { display: flex; flex-direction: column; gap: 14px; }
.acc-home .gear-item { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.acc-home .gear-thumb { flex-shrink: 0; width: 60px; height: 60px; border-radius: var(--n-r-sm); background: var(--n-card-3); }
.acc-home .gear-main { flex: 1; min-width: 0; }
.acc-home .gear-title { overflow: hidden; color: var(--n-text-hi); font: 700 14px/1.3 var(--n-font-display); text-overflow: ellipsis; white-space: nowrap; }
.acc-home .gear-meta { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.acc-home .gear-price { color: var(--n-red); font: 700 13px/1 var(--n-font-display); font-variant-numeric: tabular-nums; }

/* Resume-a-course sheet */
.acc-home-resume { display: flex; flex-direction: column; gap: 8px; }
.acc-home-resume__row {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--n-r-md); border: 1px solid var(--n-line);
  background: var(--n-card-2); color: inherit; text-decoration: none; transition: background-color var(--n-dur-fast) ease;
}
@media (hover: hover) { .acc-home-resume__row:hover { background: var(--n-card-3); } }
.acc-home-resume__thumb { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--n-r-sm); background: var(--n-card-3); }
.acc-home-resume__meta { margin-top: 6px; }
.acc-home-resume__info { flex: 1; min-width: 0; }
.acc-home-resume__title { margin-bottom: 8px; overflow: hidden; color: var(--n-text-hi); font: 700 15px/1.2 var(--n-font-display); text-overflow: ellipsis; white-space: nowrap; }
.acc-home-resume__bar { height: 4px; overflow: hidden; border-radius: 2px; background: var(--n-line-2); }
.acc-home-resume__bar span { display: block; height: 100%; border-radius: 2px; background: var(--n-red); }
.acc-home-resume__go { flex-shrink: 0; color: var(--n-red); }
.acc-home-resume__all { justify-self: start; margin-top: 8px; }

/* Tablet */
@media (max-width: 1100px) {
  .acc-home .hero-content { width: 60%; }
  .acc-home .hero-headline, .acc-home .hero-content:not(.is-auth) .hero-headline { font-size: 44px; }
  .acc-home .card .headline-xl { font-size: 32px; }
  .acc-home .featured-media { height: 190px; }
  .acc-home .podcast-title { font-size: 18px; }
}
/* Phones: the hero stacks photo, content, tiles. */
@media (max-width: 720px) {
  .acc-home { padding: 12px 16px 0; }
  .acc-home .container { padding-bottom: 32px; }
  .acc-home .hero { height: auto; border-radius: var(--n-r-lg); }
  .acc-home .hero-photo {
    position: relative; inset: auto; height: 260px;
    /* A 3:2 crop with both hosts in frame: the wide banner shows only ~29% of its width up here. */
    background-image: url('../images/branding/hosts-couch-mobile.jpg'); background-position: center 40%;
  }
  .acc-home .hero-scrim-left { background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.4) 60%, rgba(10,10,10,.85) 100%); }
  .acc-home .hero-scrim-bottom { display: none; }
  .acc-home .streak-chip { margin-bottom: 10px; padding: 5px 10px; }
  .acc-home .hero-content { position: relative; inset: auto; width: 100%; padding: 20px; }
  .acc-home .hero-headline, .acc-home .hero-content:not(.is-auth) .hero-headline { font-size: 34px; }
  .acc-home .hero-cta-wrap { width: 100%; }
  .acc-home .card { padding: 18px; }
  .acc-home .card .headline-xl { font-size: 28px; }
  .acc-home .featured-media { height: 170px; }
  .acc-home .featured-body { padding: 18px; }
  .acc-home .podcast-row { flex-direction: column; gap: 12px; }
  .acc-home .podcast-art { width: 100%; height: 140px; }
}