/* The pages that sell and the doors in: the pricing cards, the marketing
   header and footer on a phone, and the sign-in, sign-up and reset pages.
   Loaded after application.css (propshaft's :app takes every stylesheet in
   name order), so a rule here at the same specificity wins. */

/* Pricing: the full course is the card the page is selling, so it carries the
   accent edge and comes first in the HTML: first on a phone where the cards
   stack, and first to Tab and to a screen reader everywhere. (It was second in
   the HTML and moved up with order:-1 on a phone, so focus and reading order
   still started at Free.) Side by side on a wide screen, Free keeps the left. */
.plan.full { border-color: var(--accent); border-bottom-color: var(--key-edge-accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
@media (min-width: 861px) { .plans .plan.free { order: -1; } }

/* Back from sign-in with a plan picked (/pricing?plan=): that row is tinted. */
.price-row.chosen { margin-inline: -.75rem; padding-inline: .75rem; border-radius: var(--radius-sm); border-top-color: transparent; background: var(--accent-soft); }

/* What Checkout commits somebody to, beside the buttons that start it. */
.plan .card-terms { margin: 0; padding: .9rem 0 .1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-2); }

/* The billing page's version of the same line, under its two plan cards. */
.billing-terms { margin: .7rem 0 0; font-size: .85rem; color: var(--ink-2); }

/* Phone tap targets: every link in the marketing header and footer is at
   least 44px tall where a thumb is what presses it. */
@media (max-width: 760px) {
  .mk-nav .nav-item { display: inline-flex; align-items: center; min-height: 44px; }
  .mk-nav .btn { height: 44px; }
  /* Restated: the display above would otherwise bring back the link
     application.css hides at this width. */
  .mk-nav .nav-course { display: none; }
}
/* A 320px phone cannot fit five items beside the mark: Apps and FAQ give way
   (the footer carries both), Pricing, Sign In and Start Free stay. */
@media (max-width: 360px) { .mk-nav .nav-apps, .mk-nav .nav-faq { display: none; } }
/* The footer's seven links stop wrapping into five and two (or six and a lone
   "Terms") on a phone: two rows on a column grid, the product's pages over
   the help and legal ones, every row 44px. */
@media (max-width: 560px) {
  .foot-links { display: grid; grid-template-columns: repeat(4, max-content); column-gap: 1.4rem; row-gap: 0; }
  .foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* The hero's comma sits against its keycap instead of floating a space away:
   the mono comma carries a wide left bearing, and the cap its own margin. */
.hero h1 .kcap-h + .tuck { margin-left: -.2em; }

/* Sign-up from a plan on /pricing: which plan, above the form. */
.plan-pick { margin: 0 0 1rem; padding: .6rem .85rem; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); font-size: .92rem; font-weight: 600; }

/* Sign-up: what the course needs, under the form. */
.auth-note { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-2); }

/* Reset requested: the answer stays on the page rather than in a toast. */
.auth-card .notice { margin: .2rem 0 1rem; overflow-wrap: anywhere; }
.auth-card .notice p { margin: .3rem 0 0; color: var(--ink-2); font-size: .9rem; }