/* Homepage theme. Shared layout rules remain in style.css and responsive.css. */
.home-page {
  --brand: #d03127;
  --action: #dd4b39;
  --action-hover: #ba3f30;
  --soft-action: #fef8f7;
  --ink: #272b30;
  --muted: #62666c;
  --line: #dedfe2;
  --canvas: #f6f7f8;
  color: var(--ink);
  background: #fff;
  font-size: 16px;
}
.home-page :is(a, button):focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.home-page :is(h1, h2, h3):not(#how *) { text-transform: none; color: var(--ink); font-weight: 600; }
.home-page p:not(#how *) { color: var(--muted); font-size: 17px; line-height: 1.65; }
.home-page a { color: var(--action); }
.home-page .container:not(#how *) { width: min(1180px, calc(100% - 64px)); }
.home-page #main-nav { background: #fff; border-block-end: 1px solid var(--line); padding-block: 6px; }
.home-page #main-nav .navbar-header { padding-block-start: 0; }
.home-page #main-nav .navbar-brand { display: flex; align-items: center; height: 48px; padding: 0; margin: 0; }
.home-page #main-nav .navbar-brand img { width: 190px; margin: 0; }
.home-page #main-nav .navbar-morki { padding-block-start: 0; background: #fff; }
.home-page #main-nav .navbar-morki ul.nav li a { color: var(--ink); text-transform: none; font-size: 14px; font-weight: 600; }
.home-page #main-nav .navbar-morki ul.nav li a:hover { color: var(--brand); }
.home-page #main-nav .navbar-morki ul.nav li a:focus { color: var(--brand) !important; }
.home-page #main-nav .navbar-morki ul.nav li.nav-login-btn a { background: white; color: var(--action); border: 1px solid var(--action); border-radius: 6px; margin-block-start: 1px; }
.home-page #main-nav .navbar-morki ul.nav li.nav-login-btn a:hover { background: var(--soft-action); }
.home-page .navbar-default .navbar-toggle { border-color: var(--line); min-width: 44px; min-height: 44px; }
.home-page .navbar-default .navbar-toggle .icon-bar { background: var(--ink); }
.hero { background: #fff; padding-block: 52px 22px; }
.hero-inner { width: min(1180px, calc(100% - 64px)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.hero-copy { max-width: 830px; }
.home-page .hero-eyebrow { color: var(--brand); font-size: 11px; letter-spacing: .15em; font-weight: 900; margin-block: 0 22px; }
.home-page .hero-copy h1 { font-size: clamp(2.5rem, 1rem + 3.4vw, 4.1rem); line-height: 1.16; letter-spacing: -.045em; margin: 0; font-weight: 600; }
.hero-copy h1 em { color: var(--brand); font-style: normal; display: inline; }
.home-page .hero-lede { font-size: 21px; line-height: 1.55; color: var(--ink); margin-block: 25px 15px; max-width: 660px; margin-inline: auto; }
.home-page .hero-description { font-size: 16px; max-width: 660px; margin-inline: auto; margin-block-end: 25px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.home-page :is(.button-primary, .button-secondary) { padding: 14px 21px; border-radius: 6px; font-weight: 700; font-size: 16px; line-height: 1.25; min-height: 48px; display: inline-flex; gap: 14px; align-items: center; justify-content: center; border: 1px solid var(--action); }
.home-page .button-primary { color: white; background: var(--action); }
.home-page .button-primary:hover { background: var(--action-hover); }
.home-page .button-secondary { color: var(--action); background: white; }
.home-page .button-secondary:hover { background: var(--soft-action); }
.home-page .hero-platforms { font-size: 13px; margin-block: 15px 0; }
.hero-platforms span { margin-inline: 6px; color: #96999d; }
.feature-summary { display: grid; grid-template-columns: repeat(3, 1fr); width: min(1180px, calc(100% - 64px)); margin: 36px auto 0; text-align: center; padding-block: 26px 14px; border-block-start: 1px solid var(--line); gap: 25px; }
.feature-summary > span { font-size: 13px; color: var(--muted); }
.feature-summary b { display: block; color: var(--ink); font-size: 14px; margin-block-end: 6px; }
.home-page .hero-purpose { text-align: center; font-size: 12px; margin-block: 17px 0; }
.home-page main > section:not(.hero, #how) { padding-block: 72px; }
.home-page .section-header:not(#how *) { margin-block-end: 34px; padding-block-end: 0; }
.home-page .section-header:not(#how *) h2 { font-size: clamp(1.65rem, 1.1rem + 1.5vw, 2.2rem); letter-spacing: -.035em; margin-block: 0 22px; padding-block-end: 20px; }
.home-page .section-header:not(#how *) h2::before { background: var(--brand); width: 36px; height: 3px; margin-left: 0; transform: translateX(-50%); }
.home-page .why { background: var(--canvas); }
.home-page .why-content { border: 1px solid var(--line); border-radius: 8px; padding: 28px; margin-block-end: 24px; }
.home-page .why-content h3 { color: var(--ink); font-size: 22px; text-align: start; letter-spacing: -.025em; }
.home-page .why-box :is(p, li) { font-size: 16px; line-height: 1.65; }
.home-page .why-box :is(p.answer, ul.answer) { color: var(--muted); margin-inline-start: 0; }
.home-page .video-featured { background: #fff; }
.home-page .video-featured::before { display: none; }
.home-page .video-featured iframe { border: 1px solid var(--line); border-radius: 9px; }
.home-page .price-table { background: var(--canvas); }
.home-page .price-table .price-table-wrapper { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: none; padding: 30px; flex: 1; }
.home-page .price-table .price-table-featured { border-block-start: 3px solid var(--brand); }
.home-page .price-table .price-table-featured::before { display: none; }
.home-page .price-table .price-header { color: var(--ink); font-size: 23px; text-align: start; }
.home-page .price-table .price-content { text-align: start; }
.home-page .price-table .price-content li { color: var(--muted); font-size: 15px; border-color: var(--line); }
.home-page .price-no-slash { color: var(--brand); font-size: 24px; }
.home-page .download-app { background: #fff; border-block: 1px solid var(--line); }
.home-page .download-app::before { display: none; }
.home-page .download-app :is(h3, p) { color: var(--ink); }
.home-page .btn-success { background: var(--action); border: 1px solid var(--action); border-radius: 6px; color: #fff; }
.home-page .btn-success:hover { background: var(--action-hover); }
.home-page footer { background: #fff; padding-block: 40px; }
.home-page footer :is(p, a) { color: var(--muted); font-size: 14px; }
.home-page footer a:hover { color: var(--action); }
.home-page footer .footer-bottom-menu ul li a { color: var(--muted); }
.home-page .price-table .price-table-wrapper .price-no-slash, .home-page .price-table .price-table-wrapper .price-no-slash a { color: var(--brand); }

.home-page #price-table .row.equal { max-width: 1000px; margin-inline: auto; }
.home-page #price-table .row.equal > div { width: 50%; }

/* Desktop supporting copy needs more weight beside the large headline.
   Match the paragraph default's exclusion so these font sizes take precedence. */
@media (min-width: 1001px) {
  .home-page p.hero-lede:not(#how *) { font-size: 1.375rem; line-height: 1.55; }
  .home-page p.hero-description:not(#how *) { font-size: 1.25rem; }
  .feature-summary > span { font-size: 1.25rem; line-height: 1.55; }
  .feature-summary b { font-size: 1.375rem; }
  .home-page p.hero-purpose:not(#how *) { font-size: 1.25rem; }
}

@media (max-width: 1000px) {
  .home-page .container:not(#how *), .hero-inner, .feature-summary { width: calc(100% - 40px); }
  .home-page #main-nav .navbar-morki ul.nav li a { padding-inline: 10px; font-size: 13px; }
  .hero-actions { gap: 8px; }
  .home-page :is(.button-primary, .button-secondary) { font-size: 14px; padding-inline: 16px; }
}
@media (max-width: 767px) {
  .home-page .container:not(#how *), .hero-inner, .feature-summary { width: calc(100% - 36px); }
  .hero-inner { gap: 28px; align-items: stretch; }
  .home-page .hero-copy h1 { font-size: clamp(2.25rem, 1.25rem + 4.6vw, 3rem); }
  .home-page .hero-eyebrow { font-size: 10px; margin-block-end: 18px; }
  .home-page .hero-lede { font-size: 18px; margin-block: 20px 12px; }
  .home-page .hero-description { font-size: 15px; margin-block-end: 22px; }
  .home-page :is(.button-primary, .button-secondary) { padding: 13px 14px; font-size: 14px; gap: 8px; }
  .home-page .hero-platforms { font-size: 12px; }
  .feature-summary { grid-template-columns: 1fr; gap: 16px; text-align: start; padding-block-start: 22px; }
  .feature-summary b { display: inline; margin-inline-end: 7px; font-size: 12px; }
  .feature-summary > span { font-size: 12px; }
  .home-page .hero-purpose { font-size: 11px; padding-inline: 18px; }
  .home-page main > section:not(.hero, #how) { padding-block: 44px; }
  .home-page .section-header:not(#how *) h2 { font-size: 25px; line-height: 1.35; }
  .home-page .why-content { padding: 25px; }
  .home-page .row.equal > [class*='col-'] { width: 100%; }
  .home-page .price-table .price-table-wrapper { margin-block-end: 20px; }
  .home-page footer .text-right { text-align: start; }
  .home-page #price-table .row.equal > div { width: 100%; }
}
@media (forced-colors: active) {
  .home-page .button-primary { border: 1px solid ButtonText; }
  .home-page :is(a, button):focus-visible { outline-color: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page { scroll-behavior: auto; }
  .home-page a, .home-page #main-nav, .home-page #main-nav :is(.navbar-header, .navbar-morki) { transition: none; }
}

/* The walkthrough uses the original site's layout, typography, and staggered
   offsets unchanged. Its local overrides are colors only. */
.home-page #how { font-size: 14px; background: var(--canvas); }
.home-page #how :is(h2, h3) { color: var(--ink); }
.home-page #how p { color: var(--muted); }
.home-page #how a { color: var(--action); }
.home-page #how a:hover { color: var(--action-hover); }
.home-page #how .section-header h2::before { background: var(--brand); }
.home-page #how .timeline::before { background-color: var(--line); }
.home-page #how .timeline-panel { background-color: #fff; border-color: var(--line); }
.home-page #how .timeline-panel::before { border-left-color: var(--line); border-right-color: var(--line); }
.home-page #how .timeline-badge { color: #fff; background-color: var(--action) !important; }
.home-page #how .masters-only { color: var(--muted); background-color: var(--canvas); border-color: var(--line); }

.video-poster { display: flex; align-items: center; justify-content: center; gap: 60px; width: 100%; padding: 40px; border: 1px solid var(--line); border-radius: 9px; background: var(--canvas); color: var(--ink); text-align: left; cursor: pointer; }
.video-poster > img { display: block; width: 48%; max-width: 480px; height: auto; aspect-ratio: 16 / 9; border-radius: 6px; }
.video-copy { min-width: 0; }
.video-copy small { color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.video-copy strong { display: block; margin-block: 18px 25px; font-family: Montserrat, sans-serif; font-size: clamp(1.8rem, 1rem + 2vw, 3rem); font-weight: 600; line-height: 1.25; letter-spacing: -.04em; }
.video-play { display: inline-block; padding: 13px 18px; border-radius: 6px; background: var(--action); color: #fff; font-size: 16px; font-weight: 700; }
.video-poster:hover .video-play { background: var(--action-hover); }
@media (max-width: 767px) {
  .video-poster { flex-direction: column; align-items: stretch; gap: 24px; padding: 22px; }
  .video-poster > img { width: 100%; max-width: none; }
  .video-copy strong { font-size: 26px; }
}

@media (max-width: 1200px) {
  .home-page #main-nav .navbar-header { display: flex; align-items: center; justify-content: space-between; }
  .home-page #main-nav .navbar-header::before, .home-page #main-nav .navbar-header::after { display: none; }
  .home-page #main-nav .navbar-brand { float: none; order: 1; }
  .home-page #main-nav .navbar-toggle { float: none; order: 2; width: 44px; height: 44px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
  .home-page #main-nav .navbar-morki.collapse.in { background: #fff; margin-block-start: 6px; padding: 8px 0; border-block-start: 1px solid var(--line); box-shadow: none; }
  .home-page #main-nav .navbar-morki ul.nav { margin: 0; }
  .home-page #main-nav .navbar-morki ul.nav li a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; font-size: 14px; line-height: 24px; border-radius: 6px; }
  .home-page #main-nav .navbar-morki ul.nav li a:hover { background: var(--soft-action); }
  .home-page #main-nav .navbar-morki ul.nav li.nav-login-btn a { margin: 6px 0 0; justify-content: center; }
}

.home-page .video-player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }