/*
 * Ryze Guides mobile and tablet composition layer
 *
 * Load this file after minimal-plan.css, motion-plan.css, and motion-domain.css.
 * It intentionally contains presentation-only overrides: no product naming,
 * offer logic, or content is redefined here.
 *
 * Responsive design packet
 * - Pattern: calm conversion-led editorial site + repeat-use member dashboard
 * - Density: 5/10; enough information per viewport without compressed controls
 * - Motion: 2/10; transforms are removed for touch and reduced-motion contexts
 * - Variance: 3/10; existing palette, type, radii, and card language are retained
 */

/* Reflow and intrinsic-size safeguards shared by every prototype surface. */
html,
body {
  max-inline-size: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

img,
svg,
video,
canvas,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

:where(main, section, article, aside, nav, form, fieldset, dialog, div) {
  min-inline-size: 0;
}

:where(p, li, blockquote, cite, dd, figcaption, label, strong, small) {
  overflow-wrap: break-word;
}

:where(input, select, textarea, button) {
  max-inline-size: 100%;
}

:where(table) {
  inline-size: 100%;
  border-collapse: collapse;
}

:where(pre) {
  max-inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
  :root {
    --section-y: clamp(42px, 7vw, 68px);
  }

  /* Tablet navigation should behave like an intentional compact menu. */
  .site-shell.has-mobile-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 16px;
  }

  .site-shell.has-mobile-nav .mobile-nav-toggle {
    display: inline-flex;
  }

  .site-shell.has-mobile-nav .top-nav {
    grid-column: 1 / -1;
    display: none;
    inline-size: 100%;
    max-block-size: calc(100dvh - 82px);
    padding-block-start: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-block-start: 1px solid rgba(200, 208, 220, 0.7);
  }

  .site-shell.has-mobile-nav.is-nav-open .top-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
  }

  .site-shell.has-mobile-nav .nav-item,
  .site-shell.has-mobile-nav .nav-link,
  .site-shell.has-mobile-nav .nav-trigger,
  .site-shell.has-mobile-nav .header-action {
    inline-size: 100%;
  }

  .site-shell.has-mobile-nav .nav-link,
  .site-shell.has-mobile-nav .nav-trigger,
  .site-shell.has-mobile-nav .header-action {
    justify-content: space-between;
    min-block-size: 48px;
    padding: 10px 13px;
    white-space: normal;
  }

  .site-shell.has-mobile-nav .header-action {
    justify-content: center;
  }

  .site-shell.has-mobile-nav .nav-menu {
    position: static;
    display: none;
    inline-size: 100%;
    margin-block-start: 6px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  .site-shell.has-mobile-nav .nav-item::before,
  .site-shell.has-mobile-nav .nav-menu::before {
    display: none;
  }

  .site-shell.has-mobile-nav .nav-item.is-open .nav-menu {
    display: grid;
  }

  .site-shell.has-mobile-nav .nav-menu a {
    min-block-size: 48px;
    padding: 11px 13px;
  }

  /* Do not leave desktop-only absolute boards active on tablets. */
  .motion-command-board,
  .motion-domain-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-block-size: 0;
  }

  .motion-command-board::before,
  .motion-command-board::after,
  .motion-domain-board::before,
  .motion-domain-board::after {
    display: none;
  }

  .motion-command-board .motion-board-core,
  .motion-command-board .motion-route-card,
  .motion-domain-board .domain-board-core,
  .motion-domain-board .domain-board-card {
    position: relative;
    inset: auto;
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    transform: none;
    animation: none;
  }

  .motion-command-board .motion-board-core,
  .motion-domain-board .domain-board-core {
    display: none;
  }

  .motion-domain-board [data-board-cards] {
    display: contents;
  }

  .motion-route-card,
  .domain-board-card {
    min-block-size: 112px;
  }

  /* Tablet card sets should stack before text and controls become narrow. */
  .motion-pricing-singles,
  .motion-pricing-ladder,
  .motion-pricing-state,
  .motion-reviews,
  .motion-route-grid,
  .motion-domain-offer-grid,
  .motion-action-tier-grid,
  .reviews-first-grid,
  .review-theme-grid,
  .blog-feature-grid,
  .blog-topic-section,
  .action-depth-grid {
    grid-template-columns: 1fr;
  }

  .motion-pricing-state article:last-child {
    grid-column: auto;
  }

  .motion-domain-offer-grid[data-plan-count="2"],
  .motion-domain-offer-grid[data-plan-count="3"] {
    grid-template-columns: 1fr;
    max-inline-size: none;
  }

  .motion-domain-offer-grid .motion-domain-offer,
  .motion-domain-offer-grid[data-plan-count="2"] .motion-domain-offer,
  .motion-domain-offer-grid[data-plan-count="3"] .motion-domain-offer,
  .motion-pricing-state article,
  .action-depth-card,
  .review-feature-card,
  .review-theme-card {
    min-block-size: 0;
  }

  .motion-domain-offer-grid .motion-domain-offer:nth-child(even),
  .motion-route-grid a:nth-child(even) {
    margin-block-start: 0;
  }

  .member-guide-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-dashboard-layout,
  .member-dashboard-intro,
  .member-access-gate,
  .member-start-grid,
  .member-support,
  .member-account,
  .action-plan-builder,
  .action-plan-selection {
    grid-template-columns: 1fr;
  }

  .member-sidebar {
    position: relative;
    top: auto;
  }
}

@media (max-width: 768px) {
  :root {
    --page-x: 18px;
    --section-y: clamp(38px, 10vw, 58px);
  }

  body {
    font-size: 16px;
    line-height: 1.55;
  }

  main {
    padding-inline: var(--page-x);
  }

  /* Bounded mobile type with readable measures. */
  h1,
  body[data-prototype="minimal-plan"] .hero h1,
  body[data-prototype="motion-showcase"] .motion-hero h1,
  .motion-hero h1,
  .motion-domain-copy h1,
  .offer-directory-hero .motion-domain-copy h1,
  .checkout-confirmation-intro h1,
  .member-hero h1,
  body[data-prototype="minimal-plan"] .member-hero h1,
  .reviews-index-top h1,
  .blog-index-top h1 {
    max-inline-size: 100%;
    font-size: clamp(2.25rem, 9vw, 3.15rem);
    line-height: 1;
    text-wrap: balance;
  }

  h2,
  .motion-section-head h2,
  .motion-proof h2,
  .motion-domain-head h2,
  .motion-domain-proof h2,
  .motion-domain-faq h2,
  .member-section-head h2,
  .member-support-panel h2,
  .member-account h2,
  .action-plan-form h2,
  .action-plan-output h2,
  .action-plan-selection h2,
  .blog-topic-heading h2 {
    max-inline-size: 100%;
    font-size: clamp(1.85rem, 7.5vw, 2.65rem);
    line-height: 1.05;
    text-wrap: balance;
  }

  h3 {
    text-wrap: balance;
  }

  .deck,
  .motion-hero .deck,
  .motion-domain-copy .deck {
    max-inline-size: 58ch;
    font-size: 1rem;
    line-height: 1.52;
  }

  .eyebrow {
    line-height: 1.3;
  }

  .site-shell {
    top: 0;
    gap: 10px;
    padding: 10px var(--page-x);
  }

  .brand,
  .mobile-nav-toggle,
  .nav-link,
  .nav-trigger,
  .header-action,
  .button,
  .text-link,
  summary,
  .footer-links a,
  .prototype-footer a,
  .motion-domain-footer a,
  .blog-topic-nav a,
  .billing-review-link,
  .checkout-back-link {
    min-block-size: 44px;
  }

  .brand {
    min-inline-size: 0;
  }

  .brand b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav-toggle {
    flex: 0 0 auto;
  }

  .site-shell.has-mobile-nav.is-nav-open .top-nav {
    grid-template-columns: 1fr;
    padding-block-end: max(10px, env(safe-area-inset-bottom));
  }

  .site-shell.has-mobile-nav .nav-menu {
    padding: 6px;
    border-radius: 10px;
  }

  .site-shell.has-mobile-nav .nav-menu span {
    font-size: 0.65rem;
  }

  .site-shell.has-mobile-nav .nav-menu strong {
    font-size: 0.88rem;
  }

  .button {
    justify-content: center;
    inline-size: 100%;
    min-inline-size: 0;
    padding: 12px 16px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  .hero-actions,
  .motion-hero-actions,
  .motion-domain-actions,
  .checkout-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  .hero-actions > *,
  .motion-hero-actions > *,
  .motion-domain-actions > *,
  .checkout-actions > * {
    inline-size: 100%;
  }

  /* Homepage composition. */
  .motion-hero,
  .motion-method,
  .motion-pricing,
  .motion-proof,
  .motion-routes,
  .motion-domain-hero,
  .motion-domain-method,
  .motion-domain-plans,
  .motion-domain-questions {
    inline-size: min(100% - 28px, var(--max));
  }

  .motion-hero,
  .motion-domain-hero {
    gap: 22px;
    min-block-size: 0;
    padding-block: 30px 38px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 26px;
    min-block-size: 0;
    padding-block: 34px 44px;
  }

  .motion-hero::after,
  .motion-domain-hero::after {
    display: none;
  }

  .motion-hero .deck,
  .motion-domain-copy .deck {
    margin-block-start: 14px;
  }

  .motion-hero-actions,
  .motion-domain-actions {
    margin-block-start: 20px;
  }

  .motion-command-board,
  .motion-domain-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .motion-route-card,
  body[data-prototype="motion-domain"] .motion-domain-board .domain-board-card {
    min-block-size: 106px;
    padding: 14px;
    border-radius: 10px;
  }

  .motion-route-card strong,
  .domain-board-card strong {
    font-size: 1.05rem;
    line-height: 1.12;
  }

  .motion-route-card small,
  .domain-board-card small {
    font-size: 0.82rem;
    line-height: 1.3;
  }

  .motion-method,
  .motion-pricing,
  .motion-proof,
  .motion-routes,
  .motion-domain-method,
  .motion-domain-plans,
  .motion-domain-questions {
    padding-block: clamp(42px, 11vw, 62px);
  }

  .motion-section-head,
  .motion-domain-head {
    max-inline-size: 100%;
    margin-block-end: 26px;
  }

  .motion-method-grid,
  .motion-domain-method-grid {
    gap: 18px;
  }

  .motion-method-stage,
  .motion-domain-stage {
    position: relative;
    top: auto;
    gap: 14px;
    min-block-size: 280px;
    padding: 22px;
    border-radius: 12px;
  }

  .motion-method-stage strong,
  .motion-domain-stage strong {
    font-size: clamp(1.9rem, 8vw, 2.55rem);
    line-height: 1.04;
  }

  .motion-method-steps,
  .motion-domain-steps {
    gap: 12px;
  }

  .motion-step,
  .motion-domain-step {
    gap: 9px;
    padding: 19px;
    border-radius: 10px;
    transform: none !important;
  }

  .motion-pricing,
  .motion-domain-plans {
    gap: 22px;
  }

  .motion-pricing-singles article,
  .motion-pricing-ladder article,
  .motion-pricing-state article,
  .motion-domain-offer {
    gap: 12px;
    min-block-size: 0;
    padding: 20px;
    border-radius: 11px;
  }

  .motion-pricing-singles > article > strong,
  .motion-pricing-ladder > article > strong,
  .motion-domain-price {
    font-size: clamp(2rem, 9vw, 2.9rem);
  }

  .motion-pricing-singles .button,
  .motion-pricing-ladder a,
  .motion-domain-offer .button {
    inline-size: 100%;
    justify-self: stretch;
    text-align: center;
  }

  .motion-pricing-note,
  .motion-action-plan-notes,
  .action-plan-boundary {
    padding: 14px 15px;
  }

  .motion-founder {
    gap: 22px;
  }

  .motion-founder .advisor-photo,
  .motion-domain-founder-proof img {
    max-block-size: 340px;
  }

  .motion-reviews {
    gap: 12px;
  }

  .motion-reviews article {
    min-block-size: 0;
    padding: 20px;
  }

  .motion-reviews blockquote {
    font-size: clamp(1.25rem, 6vw, 1.7rem);
  }

  .motion-reviews p {
    margin-block-start: 18px;
    padding-block-start: 0;
  }

  .motion-route-grid a {
    gap: 10px;
    min-block-size: 150px;
    padding: 20px;
  }

  /* Domain detail and comparison sections. */
  .motion-domain-proof,
  .motion-domain-faq {
    gap: 22px;
  }

  .motion-domain-proof > div,
  .motion-domain-proof > article,
  .motion-domain-faq > div,
  .motion-domain-faq details {
    min-inline-size: 0;
  }

  .motion-domain-faq details {
    padding: 14px 17px;
  }

  .motion-domain-faq summary {
    display: flex;
    align-items: center;
    padding-block: 10px;
  }

  .motion-action-plan-comparison {
    margin-block-start: 16px;
    border-radius: 12px;
  }

  .motion-action-plan-comparison > summary {
    min-block-size: 56px;
    padding: 15px 48px 15px 16px;
  }

  .motion-action-plan-comparison > summary::after {
    right: 16px;
  }

  .motion-action-tier-grid {
    gap: 10px;
    padding: 0 10px 10px;
  }

  .motion-action-tier {
    gap: 10px;
    padding: 16px;
    border-radius: 10px;
  }

  .motion-career-paths,
  .motion-action-plan-notes {
    margin: 0 10px 10px;
    border-radius: 10px;
  }

  .motion-domain-founder-proof {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 13px;
    margin-block-end: 18px;
    padding-block-end: 18px;
  }

  .motion-domain-founder-proof img {
    inline-size: 72px;
  }

  /* Checkout confirmation: one decision per viewport. */
  .checkout-site-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding-block: 10px;
  }

  .checkout-security-label {
    max-inline-size: 19ch;
    min-block-size: 44px;
    justify-content: flex-end;
    font-size: 0.76rem;
    line-height: 1.25;
    text-align: right;
  }

  .checkout-confirmation {
    min-block-size: 0;
    padding: 28px 14px 44px;
  }

  .checkout-confirmation-intro {
    gap: 8px;
    margin-block-end: 18px;
    text-align: left;
  }

  .checkout-confirmation-intro h1,
  .checkout-confirmation-intro > p:last-child {
    margin-inline: 0;
  }

  .checkout-confirmation-grid {
    gap: 14px;
  }

  .checkout-summary-card,
  .checkout-testimonial {
    gap: 14px;
    padding: 19px;
    border-radius: 11px;
  }

  .checkout-plan-heading {
    align-items: flex-start;
  }

  .checkout-summary-card h2 {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .checkout-includes {
    gap: 6px;
  }

  .checkout-includes li {
    min-block-size: 42px;
    padding: 10px 10px 10px 30px;
  }

  .checkout-testimonial blockquote {
    font-size: clamp(1.35rem, 6.8vw, 1.85rem);
    line-height: 1.14;
  }

  .checkout-testimonial cite {
    margin-block-start: 2px;
  }

  .checkout-actions {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 5;
    margin: 4px -6px -4px;
    padding: 8px 6px;
    border-radius: 11px;
    background: color-mix(in srgb, white 92%, transparent);
    box-shadow: 0 14px 36px rgba(16, 35, 61, 0.16);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .membership-builder {
    gap: 12px;
    padding: 15px;
  }

  .membership-domain-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .membership-domain-grid label {
    grid-template-columns: 28px minmax(0, 1fr);
    min-block-size: 68px;
    padding: 12px;
  }

  .membership-domain-grid input {
    inline-size: 24px;
    min-inline-size: 24px;
    block-size: 24px;
  }

  /* Purchase dialog becomes an app-like sheet with a persistent action. */
  .billing-term-dialog {
    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .billing-term-shell {
    gap: 8px;
    min-block-size: 100%;
    max-block-size: 100dvh;
    padding: max(16px, env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
  }

  .billing-term-close {
    top: max(10px, env(safe-area-inset-top));
    right: 12px;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding-inline: 12px;
  }

  .billing-term-shell > .eyebrow {
    max-inline-size: calc(100% - 86px);
    padding: 6px 9px;
  }

  .billing-term-shell h2 {
    max-inline-size: calc(100% - 70px);
    padding-inline-end: 0;
    font-size: clamp(1.65rem, 7.4vw, 2.05rem);
    line-height: 1.06;
  }

  .billing-selection-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    align-items: end;
    padding: 9px 11px;
  }

  .billing-selection-summary b {
    justify-self: end;
  }

  .billing-purchase-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .billing-purchase-benefits li {
    display: flex;
    align-items: center;
    min-block-size: 36px;
    padding: 5px 7px 5px 23px;
    border-radius: 8px;
    line-height: 1.25;
  }

  .billing-quick-proof {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
    align-items: end;
  }

  .billing-quick-proof blockquote {
    font-size: 0.82rem;
  }

  .billing-quick-proof p {
    justify-content: end;
    text-align: right;
  }

  .billing-trial-disclosure,
  .billing-duration-recommendation {
    padding: 10px 11px;
  }

  .billing-duration-recommendation {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .billing-duration-details summary,
  .billing-term-more summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    font-size: 0.76rem;
  }

  .billing-duration-benchmarks {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-duration-benchmarks ul {
    display: grid;
    flex-basis: auto;
    inline-size: 100%;
  }

  .billing-duration-benchmarks a {
    align-items: center;
    inline-size: 100%;
    min-block-size: 44px;
    border-radius: 9px;
    white-space: normal;
  }

  .billing-term-featured,
  .billing-term-other {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .billing-term-option {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    min-block-size: 70px;
    padding: 11px;
  }

  .billing-term-option input {
    inline-size: 24px;
    min-inline-size: 24px;
    block-size: 24px;
  }

  .billing-term-option-copy > span {
    align-items: flex-start;
  }

  .action-tier-details {
    padding: 13px;
  }

  .action-tier-details > p,
  .action-tier-details li {
    font-size: 0.8rem;
  }

  .billing-term-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin: 4px -16px 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-block-start: 1px solid rgba(181, 192, 207, 0.74);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -16px 34px rgba(16, 35, 61, 0.1);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .billing-term-actions .button,
  .billing-review-link {
    inline-size: 100%;
    flex-basis: auto;
    justify-content: center;
    text-align: center;
  }

  .billing-review-link {
    padding: 8px 12px;
  }

  .billing-term-footnote {
    padding-block-end: 6px;
  }

  .checkout-footer {
    padding: 18px var(--page-x) 26px;
  }

  /* Member dashboard: compact navigation, readable forms, no desktop rail. */
  .member-guide-switcher-shell {
    top: 66px;
    inline-size: calc(100% - 20px);
    margin-block-start: 8px;
    padding: 6px;
  }

  .member-guide-switcher {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  .member-guide-switch {
    flex: 0 0 min(74vw, 250px);
    min-block-size: 66px;
    padding: 10px 12px;
    scroll-snap-align: start;
  }

  .member-hero {
    gap: 22px;
    min-block-size: 0;
    padding-block: 28px 36px;
  }

  .member-summary-card {
    min-block-size: 0;
    padding: 18px;
  }

  .member-dashboard-shell,
  .action-plan-workspace,
  .member-access-gate {
    inline-size: calc(100% - 24px);
  }

  .member-dashboard-shell,
  .action-plan-workspace {
    padding-block: 38px;
  }

  .member-dashboard-shell {
    padding-inline: 14px;
    border-radius: 10px;
  }

  .member-dashboard-intro {
    gap: 10px;
    margin-block-end: 18px;
  }

  .member-dashboard-intro h2 {
    max-inline-size: 100%;
    font-size: clamp(1.9rem, 8vw, 2.45rem);
  }

  .member-dashboard-intro .member-plan-status {
    border-radius: 8px;
    line-height: 1.35;
  }

  .member-dashboard-layout {
    gap: 24px;
  }

  .member-sidebar {
    gap: 12px;
    padding: 17px;
  }

  .member-sidebar nav {
    display: flex;
    gap: 7px;
    margin: 0;
    padding-block-end: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border-block-start: 0;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  .member-sidebar nav a,
  .member-sidebar nav a:nth-child(odd) {
    flex: 0 0 auto;
    min-block-size: 44px;
    padding: 0 13px;
    border: 1px solid rgba(200, 208, 220, 0.78);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    scroll-snap-align: start;
  }

  .member-section {
    scroll-margin-block-start: 178px;
    padding-block: 38px;
  }

  .member-section-head {
    gap: 10px;
    margin-block-end: 20px;
  }

  .member-start-grid,
  .member-roadmap,
  .member-resource-list,
  .member-support,
  .member-account,
  .action-plan-steps {
    grid-template-columns: 1fr;
  }

  .member-focus,
  .member-roadmap article,
  .action-plan-steps article {
    min-block-size: 0;
    padding: 19px;
  }

  .member-task-list {
    gap: 8px;
  }

  .member-task-list li {
    min-block-size: 58px;
    padding: 12px 13px 12px 46px;
  }

  .member-task-list li::before {
    left: 13px;
  }

  .member-support-panel,
  .member-account > div {
    padding: 18px;
  }

  .member-support-panel .button,
  .member-account .button {
    inline-size: 100%;
  }

  .member-question-form input,
  .member-question-form textarea,
  .action-plan-form select,
  .action-plan-form textarea,
  .action-plan-form input[type="file"] {
    min-block-size: 48px;
    font-size: 1rem;
  }

  :where(.newsletter-form, .blog-newsletter-form, .editorial-newsletter form, .email-row > div) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  :where(.newsletter-form, .blog-newsletter-form, .editorial-newsletter form, .email-row) input[type="email"] {
    inline-size: 100%;
    min-block-size: 48px;
    border-radius: 9px;
    font-size: 1rem;
  }

  :where(.newsletter-form, .blog-newsletter-form, .editorial-newsletter form, .email-row) .button {
    inline-size: 100%;
  }

  .member-resource-list button {
    min-block-size: 84px;
    padding: 14px;
  }

  .member-resource-dialog {
    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .member-resource-dialog-head {
    padding: max(26px, env(safe-area-inset-top)) 62px 20px 18px;
  }

  .member-resource-dialog-head h2 {
    max-inline-size: 100%;
    font-size: clamp(1.75rem, 8vw, 2.15rem);
  }

  .member-resource-close {
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
  }

  .member-resource-prompts {
    padding: 20px 18px 22px;
  }

  .member-resource-dialog-foot {
    align-items: stretch;
    flex-direction: column;
    padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  }

  .member-resource-dialog-foot .button {
    inline-size: 100%;
  }

  /* Delivery/countdown components can adopt these hooks as they are added. */
  :where(
    .action-plan-delivery-status,
    .action-plan-countdown,
    .member-delivery-countdown,
    .plan-delivery-card,
    [data-action-plan-countdown],
    [data-plan-delivery-status]
  ) {
    display: grid;
    gap: 9px;
    inline-size: 100%;
    padding: 17px;
    border: 1px solid color-mix(in srgb, var(--member-guide-accent, var(--accent)) 26%, var(--line));
    border-inline-start: 4px solid var(--member-guide-accent, var(--accent));
    border-radius: 9px;
    background: color-mix(in srgb, var(--member-guide-accent-soft, var(--accent-soft)) 50%, white);
  }

  :where(
    .action-plan-delivery-status,
    .action-plan-countdown,
    .member-delivery-countdown,
    .plan-delivery-card,
    [data-action-plan-countdown],
    [data-plan-delivery-status]
  ) :where(a, button) {
    inline-size: 100%;
    min-block-size: 44px;
  }

  /* Guided Action Plan workspace and forms. */
  .action-plan-workspace {
    gap: 24px;
  }

  .action-plan-journey {
    grid-template-columns: 1fr;
  }

  .action-plan-journey > div {
    padding: 16px 0;
  }

  .action-plan-journey > div + div {
    border-block-start: 1px solid rgba(184, 194, 208, 0.72);
    border-inline-start: 0;
  }

  .action-plan-form,
  .action-plan-output,
  .action-depth-card {
    gap: 12px;
    padding: 18px;
  }

  .action-plan-form textarea {
    min-block-size: 150px;
  }

  .action-plan-form .button,
  .action-plan-output .button,
  .action-plan-selection .button {
    inline-size: 100%;
  }

  .action-plan-selection {
    gap: 20px;
    padding-block: 30px;
  }

  /* Editorial hub, article-ready patterns, and review pages. */
  .blog-index-shell,
  .reviews-index-shell,
  :where(.editorial-shell, .article-shell, .blog-article, .article-page main) {
    inline-size: min(100% - 28px, var(--max));
    padding-block: 28px 42px;
    margin-inline: auto;
  }

  .blog-index-top,
  .reviews-index-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }

  .blog-topic-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-inline-size: 100%;
    padding-block-end: 5px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  .blog-topic-nav a {
    flex: 0 0 auto;
    min-block-size: 44px;
    scroll-snap-align: start;
  }

  .blog-feature-card {
    min-block-size: 250px;
    padding: 20px;
  }

  .blog-feature-card strong {
    max-inline-size: 13ch;
    font-size: clamp(1.9rem, 9vw, 2.9rem);
    line-height: 1;
  }

  .blog-latest-list a,
  .blog-row,
  .review-feature-card,
  .review-theme-card {
    min-block-size: 0;
    padding: 17px;
  }

  .blog-row {
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
  }

  .blog-row small {
    justify-self: start;
    white-space: normal;
  }

  .blog-library {
    gap: 36px;
    margin-block-start: 38px;
  }

  .blog-topic-section {
    gap: 18px;
    padding-block-start: 20px;
  }

  .review-feature-card blockquote,
  .review-feature-card:first-child blockquote {
    font-size: clamp(1.45rem, 7vw, 2.2rem);
    line-height: 1.06;
  }

  :where(.article-hero, .editorial-hero) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding-block: 22px 30px;
  }

  :where(.article-hero h1, .editorial-hero h1, .article-title) {
    max-inline-size: 16ch;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    line-height: 1;
    text-wrap: balance;
  }

  .insights-hero-copy h1 {
    max-inline-size: 13ch;
    font-size: clamp(2.45rem, 11vw, 3.4rem);
    line-height: 0.98;
  }

  :where(.article-layout, .article-grid, .editorial-layout) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  :where(.article-toc, .article-sidebar) {
    position: relative;
    top: auto;
    inline-size: 100%;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.72);
  }

  :where(.article-summary, .article-answer, .answer-first, .key-takeaway) {
    padding: 17px;
    border-inline-start: 4px solid var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 42%, white);
  }

  :where(.article-body, .article-content, .editorial-content) {
    min-inline-size: 0;
    max-inline-size: 72ch;
    font-size: 1rem;
    line-height: 1.7;
  }

  :where(.article-body, .article-content, .editorial-content) h2 {
    margin-block: 2.1em 0.65em;
    font-size: clamp(1.7rem, 7vw, 2.35rem);
  }

  :where(.article-body, .article-content, .editorial-content) h3 {
    margin-block: 1.7em 0.55em;
    font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  }

  :where(.article-body, .article-content, .editorial-content) :where(p, ul, ol, blockquote) {
    max-inline-size: 100%;
  }

  :where(.article-body, .article-content, .editorial-content) blockquote {
    margin-inline: 0;
    padding: 16px 18px;
    border-inline-start: 4px solid var(--gold);
    background: rgba(255, 255, 255, 0.68);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.18rem;
    line-height: 1.45;
  }

  :where(.article-table-wrap, .table-scroll, .responsive-table) {
    inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  :where(.article-table-wrap, .table-scroll, .responsive-table) table {
    min-inline-size: 620px;
  }

  :where(.article-sources, .article-evidence, .article-related, .article-next-step, .article-cta) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px;
    border-radius: 9px;
  }

  /* Footer navigation has a legal-link landing place without crowding. */
  .prototype-footer,
  .motion-domain-footer {
    grid-template-columns: 1fr;
    gap: 18px;
    inline-size: min(100% - 28px, var(--max));
    padding-block: 30px 36px;
  }

  .prototype-footer nav,
  .motion-domain-footer nav,
  :where(.footer-links, .legal-links) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
    justify-content: start;
  }

  .prototype-footer nav a,
  .motion-domain-footer nav a,
  :where(.footer-links, .legal-links) a {
    inline-size: 100%;
  }
}

@media (max-width: 460px) {
  :root {
    --page-x: 16px;
  }

  h1,
  body[data-prototype="minimal-plan"] .hero h1,
  body[data-prototype="motion-showcase"] .motion-hero h1,
  .motion-hero h1,
  .motion-domain-copy h1,
  .offer-directory-hero .motion-domain-copy h1,
  .checkout-confirmation-intro h1,
  .member-hero h1,
  body[data-prototype="minimal-plan"] .member-hero h1 {
    font-size: clamp(2.1rem, 10.5vw, 2.75rem);
  }

  h2,
  .motion-section-head h2,
  .motion-proof h2,
  .motion-domain-head h2,
  .motion-domain-proof h2,
  .motion-domain-faq h2,
  .member-section-head h2,
  .member-support-panel h2,
  .member-account h2 {
    font-size: clamp(1.75rem, 8.8vw, 2.3rem);
  }

  .site-shell,
  .checkout-site-shell {
    padding-inline: 14px;
  }

  .brand {
    gap: 8px;
    font-size: 0.94rem;
  }

  .brand span {
    inline-size: 32px;
    block-size: 32px;
  }

  .mobile-nav-label {
    font-size: 0.84rem;
  }

  .motion-command-board,
  .motion-domain-board {
    grid-template-columns: 1fr;
  }

  .motion-route-card,
  body[data-prototype="motion-domain"] .motion-domain-board .domain-board-card {
    min-block-size: 94px;
  }

  .motion-method-stage,
  .motion-domain-stage {
    min-block-size: 240px;
    padding: 19px;
  }

  .motion-pricing-singles article,
  .motion-pricing-ladder article,
  .motion-pricing-state article,
  .motion-domain-offer,
  .motion-reviews article,
  .motion-route-grid a {
    padding: 18px;
  }

  .motion-domain-founder-proof {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .motion-domain-founder-proof img {
    inline-size: 58px;
  }

  .checkout-security-label {
    max-inline-size: 15ch;
    font-size: 0.7rem;
  }

  .checkout-security-label::before {
    flex: 0 0 auto;
  }

  .checkout-confirmation {
    padding-inline: 10px;
  }

  .checkout-plan-heading {
    display: grid;
    justify-content: start;
  }

  .billing-purchase-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .billing-term-option-copy > span {
    display: grid;
    justify-content: start;
  }

  .billing-term-option-copy em {
    inline-size: fit-content;
  }

  .member-guide-switch {
    flex-basis: min(82vw, 250px);
  }

  .member-dashboard-shell,
  .action-plan-workspace,
  .member-access-gate {
    inline-size: calc(100% - 16px);
  }

  .member-dashboard-shell {
    padding-inline: 12px;
  }

  .member-focus,
  .member-roadmap article,
  .member-support-panel,
  .member-account > div,
  .action-plan-form,
  .action-plan-output,
  .action-depth-card {
    padding: 16px;
  }

  .member-resource-list button {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .prototype-footer nav,
  .motion-domain-footer nav,
  :where(.footer-links, .legal-links) {
    grid-template-columns: 1fr;
  }

  :where(.article-meta, .article-author, .article-actions) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 360px) {
  :root {
    --page-x: 14px;
  }

  .site-shell,
  .checkout-site-shell {
    padding-inline: 10px;
  }

  .brand b {
    max-inline-size: 108px;
  }

  .mobile-nav-toggle {
    gap: 6px;
    padding-inline: 10px;
  }

  .checkout-security-label {
    max-inline-size: 12ch;
  }

  .motion-hero,
  .motion-method,
  .motion-pricing,
  .motion-proof,
  .motion-routes,
  .motion-domain-hero,
  .motion-domain-method,
  .motion-domain-plans,
  .motion-domain-questions,
  .prototype-footer,
  .motion-domain-footer,
  .blog-index-shell,
  .reviews-index-shell {
    inline-size: calc(100% - 20px);
  }

  .billing-term-shell {
    padding-inline: 13px;
  }

  .billing-purchase-benefits,
  .billing-quick-proof {
    grid-template-columns: 1fr;
  }

  .billing-quick-proof p {
    justify-content: start;
    text-align: left;
  }

  .billing-term-actions {
    margin-inline: -13px;
    padding-inline: 13px;
  }

  .billing-term-close {
    right: 9px;
  }
}

/* Coarse pointers should not rely on hover and should retain comfortable hits. */
@media (pointer: coarse) {
  :where(
    .brand,
    .mobile-nav-toggle,
    .top-nav a,
    .top-nav button,
    .button,
    .text-link,
    summary,
    .member-sidebar nav a,
    .blog-topic-nav a,
    .billing-review-link,
    .checkout-back-link,
    .prototype-footer a,
    .motion-domain-footer a
  ) {
    min-block-size: 44px;
  }

  :where(
    .motion-route-card,
    .motion-step,
    .motion-domain-step,
    .motion-domain-offer,
    .motion-reviews article,
    .motion-route-grid a,
    .blog-feature-card,
    .blog-latest-list a,
    .blog-row,
    .member-resource-list button
  ):hover {
    transform: none;
  }
}

/* Motion is enhancement only; content and purchase actions remain static. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .motion-reveal,
  .motion-domain-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .motion-route-card,
  .domain-board-card,
  .motion-step,
  .motion-domain-step,
  .action-depth-card.is-selected {
    transform: none !important;
  }

  .motion-progress span,
  .domain-progress span,
  .scroll-progress span {
    transition: none !important;
  }
}

/* High-contrast preferences get stronger control and card boundaries. */
@media (prefers-contrast: more) {
  :where(
    .button,
    .nav-trigger,
    .nav-link,
    .header-action,
    .motion-route-card,
    .motion-domain-offer,
    .motion-step,
    .motion-domain-step,
    .billing-term-option,
    .member-resource-list button,
    .blog-row,
    .review-feature-card
  ) {
    border-color: currentColor;
  }

  :where(.deck, .motion-section-head p, .motion-domain-head p, .member-section-head p) {
    color: var(--text);
  }
}