/* AI Invoice Maker — marketing mobile UX polish (Phase M1)
   Loaded by marketing HTML only. Desktop layout preserved; enhancements are additive.
   No transition:all. No JS. */

:root {
  --header: 64px;
  --nav: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ── Sticky chrome + notch / home-indicator clearance ── */
.feat-nav,
.legal-nav,
.tut-nav {
  top: 0;
  padding-top: var(--safe-top);
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
  height: calc(var(--header) + var(--safe-top));
  box-sizing: border-box;
}

.feat-secnav-wrap,
.legal-secnav-wrap,
.tut-secnav-wrap {
  top: calc(var(--header) + var(--safe-top));
  isolation: isolate;
}

.feat-card,
.legal-card,
.tut-card {
  scroll-margin-top: calc(var(--header) + var(--nav) + var(--safe-top) + 12px);
}

/* ── Section navigation: snap, fades, touch, breathing room ── */
.feat-secnav-wrap::before,
.feat-secnav-wrap::after,
.legal-secnav-wrap::before,
.legal-secnav-wrap::after,
.tut-secnav-wrap::before,
.tut-secnav-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(36px, 10vw);
  z-index: 2;
  pointer-events: none;
}

.feat-secnav-wrap::before,
.legal-secnav-wrap::before,
.tut-secnav-wrap::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(10, 15, 30, 0.96) 0%,
    rgba(10, 15, 30, 0.55) 45%,
    transparent 100%
  );
}

.feat-secnav-wrap::after,
.legal-secnav-wrap::after,
.tut-secnav-wrap::after {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(10, 15, 30, 0.96) 0%,
    rgba(10, 15, 30, 0.55) 45%,
    transparent 100%
  );
}

/* Desktop: edge fades clip the first/last chip labels (e.g. About “Mission”).
   Keep fades on mobile only where sideways scrubbing needs affordance. */
@media (min-width: 769px) {
  .feat-secnav-wrap::before,
  .feat-secnav-wrap::after,
  .legal-secnav-wrap::before,
  .legal-secnav-wrap::after,
  .tut-secnav-wrap::before,
  .tut-secnav-wrap::after {
    content: none;
    display: none;
  }

  .feat-secnav,
  .legal-secnav,
  .tut-secnav {
    scroll-snap-type: x proximity;
    padding-inline: 20px;
    scroll-padding-inline: 20px;
  }
}

.feat-secnav,
.legal-secnav,
.tut-secnav {
  scroll-snap-type: x proximity;
  scroll-padding-inline: 20px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  padding: 8px 20px;
  max-width: 100%;
  box-sizing: border-box;
}

.feat-secnav a,
.legal-secnav a,
.tut-secnav a {
  scroll-snap-align: start;
  scroll-margin-inline: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.2;
  border: 1px solid transparent;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.feat-secnav a:hover,
.legal-secnav a:hover,
.tut-secnav a:hover {
  color: var(--gold2, #e8c97a);
  border-color: rgba(201, 168, 76, 0.28);
  background: rgba(201, 168, 76, 0.08);
}

.feat-secnav a:focus-visible,
.legal-secnav a:focus-visible,
.tut-secnav a:focus-visible {
  color: var(--gold2, #e8c97a);
  border-color: rgba(201, 168, 76, 0.45);
  background: rgba(201, 168, 76, 0.14);
  outline: 2px solid rgba(232, 201, 122, 0.75);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.25);
}

/* Active chip while hash target matches (CSS-only, no JS) */
body:has(#agency-types:target) .feat-secnav a[href="#agency-types"],
body:has(#backup-workflow:target) .feat-secnav a[href="#backup-workflow"],
body:has(#businesses:target) .feat-secnav a[href="#businesses"],
body:has(#capabilities:target) .feat-secnav a[href="#capabilities"],
body:has(#consultant-types:target) .feat-secnav a[href="#consultant-types"],
body:has(#contractor-types:target) .feat-secnav a[href="#contractor-types"],
body:has(#example-prompts:target) .feat-secnav a[href="#example-prompts"],
body:has(#examples:target) .feat-secnav a[href="#examples"],
body:has(#faq:target) .feat-secnav a[href="#faq"],
body:has(#features:target) .feat-secnav a[href="#features"],
body:has(#how:target) .feat-secnav a[href="#how"],
body:has(#how-it-works:target) .feat-secnav a[href="#how-it-works"],
body:has(#industries:target) .feat-secnav a[href="#industries"],
body:has(#related:target) .feat-secnav a[href="#related"],
body:has(#services:target) .feat-secnav a[href="#services"],
body:has(#template-examples:target) .feat-secnav a[href="#template-examples"],
body:has(#types:target) .feat-secnav a[href="#types"],
body:has(#use-cases:target) .feat-secnav a[href="#use-cases"],
body:has(#what-it-does:target) .feat-secnav a[href="#what-it-does"],
body:has(#who:target) .feat-secnav a[href="#who"],
body:has(#why-agencies:target) .feat-secnav a[href="#why-agencies"],
body:has(#why-consultants:target) .feat-secnav a[href="#why-consultants"],
body:has(#why-contractors:target) .feat-secnav a[href="#why-contractors"],
body:has(#why-estimates:target) .feat-secnav a[href="#why-estimates"],
body:has(#why-freelancers:target) .feat-secnav a[href="#why-freelancers"],
body:has(#why-proforma:target) .feat-secnav a[href="#why-proforma"],
body:has(#why-quotes:target) .feat-secnav a[href="#why-quotes"],
body:has(#why-receipts:target) .feat-secnav a[href="#why-receipts"],
body:has(#why-small-business:target) .feat-secnav a[href="#why-small-business"],
body:has(#why-tax:target) .feat-secnav a[href="#why-tax"],
body:has(#why-vat:target) .feat-secnav a[href="#why-vat"],
body:has(#workflow:target) .feat-secnav a[href="#workflow"],
body:has(#acceptance:target) .legal-secnav a[href="#acceptance"],
body:has(#ai-assistant:target) .legal-secnav a[href="#ai-assistant"],
body:has(#contact:target) .legal-secnav a[href="#contact"],
body:has(#data-stored-locally:target) .legal-secnav a[href="#data-stored-locally"],
body:has(#diagnostics:target) .legal-secnav a[href="#diagnostics"],
body:has(#disclaimer:target) .legal-secnav a[href="#disclaimer"],
body:has(#google-drive:target) .legal-secnav a[href="#google-drive"],
body:has(#overview:target) .legal-secnav a[href="#overview"],
body:has(#permitted-use:target) .legal-secnav a[href="#permitted-use"],
body:has(#prohibited-use:target) .legal-secnav a[href="#prohibited-use"],
body:has(#send-invoice:target) .legal-secnav a[href="#send-invoice"],
body:has(#what-we-do-not-collect:target) .legal-secnav a[href="#what-we-do-not-collect"],
body:has(#your-rights:target) .legal-secnav a[href="#your-rights"],
body:has(#ai-assistant:target) .tut-secnav a[href="#ai-assistant"],
body:has(#banks:target) .tut-secnav a[href="#banks"],
body:has(#client-details:target) .tut-secnav a[href="#client-details"],
body:has(#clients:target) .tut-secnav a[href="#clients"],
body:has(#company-setup:target) .tut-secnav a[href="#company-setup"],
body:has(#create-invoice:target) .tut-secnav a[href="#create-invoice"],
body:has(#dashboard:target) .tut-secnav a[href="#dashboard"],
body:has(#download-pdf:target) .tut-secnav a[href="#download-pdf"],
body:has(#faq:target) .tut-secnav a[href="#faq"],
body:has(#google-drive-backup:target) .tut-secnav a[href="#google-drive-backup"],
body:has(#items-services:target) .tut-secnav a[href="#items-services"],
body:has(#multi-company:target) .tut-secnav a[href="#multi-company"],
body:has(#preview-invoice:target) .tut-secnav a[href="#preview-invoice"],
body:has(#pwa-installation:target) .tut-secnav a[href="#pwa-installation"],
body:has(#save-history:target) .tut-secnav a[href="#save-history"],
body:has(#send-email:target) .tut-secnav a[href="#send-email"],
body:has(#settings:target) .tut-secnav a[href="#settings"],
body:has(#templates:target) .tut-secnav a[href="#templates"] {
  color: var(--gold2, #e8c97a);
  border-color: rgba(201, 168, 76, 0.45);
  background: rgba(201, 168, 76, 0.14);
  box-shadow: inset 0 -2px 0 rgba(201, 168, 76, 0.65);
}

body:has(#mission:target) .legal-secnav a[href="#mission"],
body:has(#what-it-is:target) .legal-secnav a[href="#what-it-is"],
body:has(#why-built:target) .legal-secnav a[href="#why-built"],
body:has(#principles:target) .legal-secnav a[href="#principles"],
body:has(#privacy-first:target) .legal-secnav a[href="#privacy-first"],
body:has(#ai-philosophy:target) .legal-secnav a[href="#ai-philosophy"],
body:has(#local-first:target) .legal-secnav a[href="#local-first"],
body:has(#drive-backup:target) .legal-secnav a[href="#drive-backup"],
body:has(#security:target) .legal-secnav a[href="#security"],
body:has(#roadmap:target) .legal-secnav a[href="#roadmap"],
body:has(#contact:target) .legal-secnav a[href="#contact"],
body:has(#get-started:target) .legal-secnav a[href="#get-started"] {
  color: var(--gold2, #e8c97a);
  border-color: rgba(201, 168, 76, 0.45);
  background: rgba(201, 168, 76, 0.14);
  box-shadow: inset 0 -2px 0 rgba(201, 168, 76, 0.65);
}

.feat-card:target,
.legal-card:target,
.tut-card:target {
  border-color: rgba(201, 168, 76, 0.35);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.18);
}

/* ── Header / CTA touch targets (compact pages) ── */
.feat-nav .btn-gold,
.feat-nav .btn-outline,
.legal-nav .btn-gold,
.legal-nav .btn-outline,
.tut-nav .btn-gold,
.tut-nav .btn-outline {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  box-sizing: border-box;
}

.feat-nav .btn-gold:focus-visible,
.feat-nav .btn-outline:focus-visible,
.legal-nav .btn-gold:focus-visible,
.legal-nav .btn-outline:focus-visible,
.tut-nav .btn-gold:focus-visible,
.tut-nav .btn-outline:focus-visible,
.btn-gold-lg:focus-visible {
  outline: 2px solid rgba(232, 201, 122, 0.75);
  outline-offset: 3px;
}

.tut-main .wf-step {
  min-height: 44px;
  box-sizing: border-box;
}

code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── Global mobile polish (≤768) ── */
@media (max-width: 768px) {
  .feat-secnav,
  .legal-secnav,
  .tut-secnav {
    padding: 8px 16px;
    scroll-padding-inline: 16px;
  }

  .feat-nav,
  .legal-nav,
  .tut-nav {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }

  .feat-hero h1,
  .tut-page-head h1,
  .legal-page-head h1 {
    overflow-wrap: break-word;
    word-break: break-word;
    letter-spacing: -0.3px;
  }

  .feat-hero-cta {
    width: 100%;
  }

  .feat-hero-cta .btn-gold-lg {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    text-align: center;
  }

  .feat-page-head,
  .tut-page-head,
  .legal-page-head {
    padding-left: 16px;
    padding-right: 16px;
  }

  .related-link,
  .industry-tag,
  .benefit-item,
  .how-step,
  .faq-card {
    min-width: 0;
  }

  .related-link {
    min-height: 44px;
  }

  .legal-logo-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── Homepage mobile / tablet (index) ── */
@media (max-width: 1024px) {
  #nav {
    padding-top: var(--safe-top);
    height: calc(64px + var(--safe-top));
    box-sizing: border-box;
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
  }

  /* Prevent clipped mid-nav + long CTA between tablet and phone */
  .nav-mid {
    display: none;
  }

  .nav-launch {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    box-sizing: border-box;
  }

  #explore-features-grid,
  #solutions-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #nav {
    padding-left: max(10px, var(--safe-left));
    padding-right: max(10px, var(--safe-right));
  }

  .nav-launch {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }

  .hero h1,
  .cta h2,
  .sec-h2 {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .hero-bg-glow {
    width: 100%;
    max-width: 100%;
    left: 0;
    transform: none;
  }

  .section {
    padding-left: 20px;
    padding-right: 20px;
  }

  #explore-features,
  #solutions {
    padding-left: 0;
    padding-right: 0;
  }

  #explore-features > div,
  #solutions > div {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .btn-primary,
  .btn-outline {
    min-height: 48px;
    box-sizing: border-box;
  }
}

@media (max-width: 360px) {
  .feat-logo-text,
  .tut-logo-text,
  .legal-logo-text {
    font-size: 13px;
  }

  .feat-hero h1 {
    font-size: clamp(28px, 8.5vw, 36px);
  }
}