/*
 * Small-screen refinements for the marketing pages.
 *
 * Everything here sits inside a max-width query, so at 1024px and wider the
 * pages are exactly as published. Loaded last on each page.
 *
 * What it fixes, found by measuring every page from 320px to 1023px:
 *  - 761-1023px: the desktop top bar no longer fits and every item wrapped
 *    onto two lines. Tablets get the menu button the phone layout has.
 *  - Phones: Log in was dropped from the top bar and was not in the menu.
 *  - Phones and tablets: body text as small as 7-10px, and links and
 *    controls too short to tap reliably.
 */

/* The menu's own Log in. Hidden unless the bar's Log in is (phones). */
.nav .nav-login{display:none}

/* ------------------------------------------------ tablets: 761 - 1023 -- */
@media (min-width:761px) and (max-width:1023px){
  .nav{display:none}
  .menu-toggle{display:block;font-size:14px}
  .nav.open{
    display:flex;position:absolute;top:100px;left:0;right:0;
    flex-direction:column;align-items:flex-start;
    background:#071521;padding:26px 32px;gap:4px;
    border-bottom:1px solid #ffffff25;
  }
  .nav.open a{font-size:15px!important;padding:11px 0;display:block}
  /* The bar still shows Log in at this width, so the menu does not repeat it. */
  .nav.open a.nav-login{display:none}
  .nav-actions{gap:18px!important;font-size:13px!important}
  .nav-actions a{white-space:nowrap}
  .nav-actions>a:first-child{padding:12px 6px}
}

/* ---------------------------------------- phones and tablets: <= 1023 -- */
@media (max-width:1023px){
  /* A comfortable target for the one control that opens the menu. */
  .menu-toggle{min-width:44px;min-height:44px}

  /* Section labels and fine print that are content, not illustration. */
  .eyebrow{font-size:11px!important;line-height:1.5}
  .small-note,.legal-note,.microcopy,.plan-caption,.price-assurance,
  .savings-line,.paired-caption{font-size:12px!important;line-height:1.55}
  .small-note a,.price-assurance a{font-size:inherit!important}
  .index{font-size:11px!important}
  figcaption,caption{font-size:11px!important;line-height:1.5}
  .breadcrumbs,.breadcrumbs a,.breadcrumbs span{font-size:12px!important}
  .example-table th{font-size:11px!important}
  .example-table td{font-size:13px}

  /* Footer: readable, and each link tall enough to tap. */
  .footer-links a,.footer-resource-links a{
    font-size:13px!important;display:inline-block;padding:9px 0;
  }
  .footer-bottom,.footer-bottom span,.footer-bottom a{font-size:11px!important;line-height:1.6}
  .footer-bottom a{display:inline-block;padding:6px 0}

  /* Text links that stand alone on a line. */
  .text-link,.outcome,.seo-detail-link,.selection-demo-link{
    display:inline-block;padding-top:8px;padding-bottom:8px;
  }
  .text-link{font-size:13px}
  .text-link,.outcome,.seo-detail-link,.selection-demo-link{padding-top:9px;padding-bottom:9px}
  .breadcrumbs a{display:inline-block;padding:8px 0}
  .footer-bottom a{padding:8px 0}
  .stage-top button,.zoom-label,#watch-workflow{min-height:34px}
  .mobile-cta span{font-size:11px!important;line-height:1.35}

  /* Questions open on tap; give the tap somewhere to land. */
  details>summary{padding-top:12px;padding-bottom:12px;min-height:44px;box-sizing:border-box}
}

/* --------------------------------------------------- phones: <= 760 ---- */
@media (max-width:760px){
  /* The menu carries Log in, since the bar has no room for it. */
  .nav.open .nav-login{display:block}
  .nav.open{gap:6px!important}
  .nav.open a{font-size:15px!important;padding:10px 0;display:block}
}

/* ------------------- captions and illustrations, phones and tablets ---- */
@media (max-width:1023px){
  /* Hero */
  .stage-top{flex-wrap:wrap;row-gap:8px}
  .stage-top .live-label{font-size:11px!important}
  .stage-top button{font-size:11px!important;padding:8px 0}
  .hero-bottom em{font-size:11px!important}
  .mobile-cta span{font-size:11px!important;line-height:1.35}

  /* Captions under the real screenshots */
  .screen-caption{flex-wrap:wrap;row-gap:6px}
  .screen-caption span{font-size:11px!important}
  .zoom-label{font-size:11px!important;padding:8px 0}
  .contract-proof>span{font-size:11px!important}
  .contract-proof small{font-size:11px!important;line-height:1.5}
  .button.small.secondary{font-size:12px!important}

  /* The contract-packet illustration */
  .packet small{font-size:11px!important;line-height:1.45}
  .packet-header small{font-size:11px!important}
  .packet-footer{font-size:12px!important}
  .packet-footer small{font-size:11px!important}

  /* The client-selection illustration: a three-column table in a narrow
     card, so it is lifted to legible rather than to body size. */
  .selection-header small{font-size:11px!important}
  .example-badge{font-size:11px!important;padding:10px 12px!important}
  .selection-tr.heading span{font-size:11px!important;letter-spacing:.02em!important}
  .selection-tr b{font-size:13px!important}
  .selection-tr small{font-size:11px!important;line-height:1.35}
  .selection-tr .state{font-size:11px!important}
  .selection-foot span{font-size:11px!important}
  .selection-demo-link{font-size:12.5px!important}

  /* The paired contractor / client illustration */
  .portal-browser{font-size:11px!important}
  .homeowner-head span{font-size:11px!important}
  .homeowner-body small{font-size:11px!important}
  .homeowner-update span{font-size:11px!important}
  .homeowner-body p,.homeowner-update p{font-size:12px!important;line-height:1.45}
  .homeowner-tabs b,.homeowner-tabs span{font-size:11px!important}
  .homeowner-body>a{font-size:12.5px!important;display:inline-block;padding:10px 0}
  .guarantee-seal small{font-size:9px!important}

  /* Cash example, founder's note, guarantee and pricing teaser */
  .cash-example small{font-size:11px!important}
  .cash-example span{font-size:12px!important}
  .cash-example p{font-size:11.5px!important;line-height:1.5}
  .signature small{font-size:12px!important}
  .guarantee-band a{font-size:13px!important;display:inline-block;padding:10px 0}
  .included-note a{display:inline-block;padding:9px 0}
  .teaser-offer span{font-size:11px!important}

  /* Pricing page */
  .standard-label span{font-size:11px!important}
  .offer-topline span,.offer-status{font-size:11px!important}
  .offer-kicker{font-size:11px!important}
  .offer-limit span{font-size:12px!important}
  .savings-chip{font-size:11px!important}
  .offer-footnote span{font-size:11.5px!important;line-height:1.5}
  .pricing-risk span,.pricing-risk a{font-size:12.5px!important}
  .pricing-risk a{display:inline-block;padding:8px 0}
  .founding-close small{font-size:12px!important;line-height:1.5}
  .plan-kicker,.founder-badge,.deal-saving{font-size:11px!important}

  /* Guarantee page */
  .policy-card a{display:inline-block;padding:6px 0}
}

/* -------------------------------------------------- the demo page ------ */
@media (max-width:1023px){
  body>header>nav a{display:inline-block;padding:10px 0}
  section.intro small{font-size:11px!important}
}
@media (max-width:760px){
  body>header>nav a{font-size:11.5px!important;padding:10px 0;display:inline-block}
  body>header>nav a.cta{padding:10px 12px}
  section.intro small{font-size:11px!important}
  section.intro p{font-size:13px!important;line-height:1.55}
  section.intro p b{font-size:inherit!important}
  .demo-intro-actions button,.demo-guide-actions button,.guide>button{
    font-size:12px!important;min-height:40px;
  }
  .guide span{font-size:12px!important;line-height:1.5}
}