/* ─────────────────────────────────────────────────────────────────────
   Shared layer for every page (Apple design pass, 13 Oct 2026).
   Loaded after each page's own <style>, so these rules win on equal
   specificity. Brand colours, fonts and layout stay in the page styles;
   this file only changes how things respond, move and read.
   See APPLE-AUDIT.md for the reasoning behind each block.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* strong ease-out for UI */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
  --press: 100ms;
  --settle: 160ms;
}

/* ── Anchors land below the fixed 72px bar ─────────────────────────── */
html { scroll-padding-top: 88px; }
body { cursor: auto; }

/* ── Focus: one visible ring everywhere ───────────────────────────── */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--titanium-light, #B9BEC3);
  outline-offset: 3px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible,
.popup-input:focus-visible {
  outline: 2px solid var(--titanium-light, #B9BEC3);
  outline-offset: 1px;
}
.popup-card:focus, .popup-card:focus-visible { outline: none; }

/* ── Press feedback: respond on pointer-down ──────────────────────────
   Every button and button-styled link scales a touch on press, at once,
   and settles back quickly. Hover background changes are kept. */
.btn-nav, .btn-hero-primary, .btn-hero-secondary, .btn-price, .btn-cta,
.btn-buy, .btn-toolkit, .btn-bundle, .btn-managed, .btn-outline, .btn-pi,
.btn-urgency, .btn-green, .btn-emerald, .btn-ghost, .popup-submit, .hc-submit,
.hc-primary, .hc-secondary, .hc-actions a, .hc-actions button, .page-phone,
.group-card, #navbar .hamburger, .popup-close {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: var(--settle);
  transition-timing-function: var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-nav:active, .btn-hero-primary:active, .btn-hero-secondary:active, .btn-price:active,
.btn-cta:active, .btn-buy:active, .btn-toolkit:active, .btn-bundle:active, .btn-managed:active,
.btn-outline:active, .btn-pi:active, .btn-urgency:active, .btn-green:active, .btn-emerald:active,
.btn-ghost:active, .popup-submit:active, .hc-submit:active, .hc-primary:active, .hc-secondary:active,
.hc-actions a:active, .hc-actions button:active, #navbar .hamburger:active, .popup-close:active {
  transform: scale(0.97);
  transition-duration: var(--press);
}
.group-card:active { transform: scale(0.985); transition-duration: var(--press); }
.hc-opts span:active { transform: scale(0.97); }
details.faq-item summary:active { opacity: 0.8; }

/* ── Hover: only where there is a real pointer, only on real targets ──
   Cards that aren't links no longer lift (it promised a click that did
   nothing); the border glow stays. Lifts on links and buttons only run
   with a fine pointer, so they never stick after a tap on a phone. */
.service-card:hover, .pricing-card:hover, .talk-card:hover, .download-card:hover { transform: none; }
.feature-row { cursor: default; }
@media (hover: none), (pointer: coarse) {
  .btn-hero-primary:hover, .btn-cta:hover, .btn-pi:hover, .btn-toolkit:hover,
  .btn-bundle:hover, .btn-managed:hover, .group-card:hover { transform: none; }
  .btn-hero-primary:hover .arrow, .group-card:hover .group-link .arrow { transform: none; }
  .service-card:hover::after, .talk-card:hover::after, .download-card:hover::after { transform: scaleX(0); }
  /* Card-level blur is near invisible over the flat background and costs a
     compositing layer per card on phones; the bar, menu and pop-up keep it. */
  .problem-item, .solution-card, .service-card, .why-card, .pricing-card, .group-card,
  .hero-screen, .software-screen, .pi-list-item, .callout-card, .proof-card, .process-step,
  .pi-pricing-card, details.faq-item, .urgency-banner, .cta-card, .download-card, .talk-card,
  .toolkit-card, .bundle-card, .managed-card {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ── Nav: animate only what changes ──────────────────────────────── */
#navbar { transition: border-color 0.3s ease, background-color 0.3s ease; }
#navbar.scrolled { border-bottom-color: rgba(255,255,255,0.1); }
#navbar .hamburger { min-width: 44px; min-height: 44px; align-items: center; margin-right: -8px; }

/* ── Full bar down to 1181px: the guides live in one "Guides" item ──── */
@media (min-width: 1181px) {
  #navbar .nav-links { display: flex; }
  #navbar .hamburger { display: none; }
}
@media (max-width: 1180px) {
  #navbar .nav-links { display: none; }
  #navbar .hamburger { display: flex; }
}
#navbar .nav-drop { position: relative; }
#navbar .nav-drop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 6px 0; margin: 0; cursor: pointer;
  font-family: var(--body); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.5px;
  text-transform: uppercase; white-space: nowrap; color: var(--muted);
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
#navbar .nav-drop-btn:hover, #navbar .nav-drop-btn.active, #navbar .nav-drop.open .nav-drop-btn { color: var(--white); }
#navbar .nav-drop-chev { transition: transform 200ms var(--ease-out); }
#navbar .nav-drop.open .nav-drop-chev { transform: rotate(180deg); }
#navbar .nav-drop-panel {
  position: absolute; top: calc(100% + 18px); left: -14px; z-index: 110;
  min-width: 264px; padding: 8px;
  background: rgba(9,16,7,0.94);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 60px rgba(0,0,0,0.5);
  transform-origin: 28px 0;
  visibility: hidden; opacity: 0; pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out), visibility 0s linear 140ms;
}
#navbar .nav-drop.open .nav-drop-panel {
  visibility: visible; opacity: 1; pointer-events: auto; transform: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s;
}
#navbar .nav-drop-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
#navbar .nav-drop-panel a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--off); text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#navbar .nav-drop-panel a:hover, #navbar .nav-drop-panel a:focus-visible { background: rgba(255,255,255,0.06); color: var(--white); }
#navbar .nav-drop-panel a.active { color: var(--white); background: rgba(23,101,58,0.22); }
#navbar .nav-drop-panel a:focus-visible { outline-offset: -2px; }
#navbar .nav-drop-panel a:active { background: rgba(255,255,255,0.1); }
#navbar .nav-drop-panel li:nth-child(6) { border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 6px; margin-bottom: 6px; }

/* Mobile menu: the guides as their own section */
#mobile-menu .mobile-nav-links .mobile-nav-group { padding: 16px 0 10px; }
#mobile-menu .mobile-nav-group-label {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--titanium-light, #B9BEC3);
}
#mobile-menu .mobile-nav-group ul { list-style: none; margin: 0; padding: 0; }
#mobile-menu .mobile-nav-links .mobile-nav-group li { border-bottom: 0; }
#mobile-menu .mobile-nav-links .mobile-nav-group a {
  padding: 9px 0 9px 14px; font-size: 1rem; text-transform: none; letter-spacing: 0;
  border-left: 1px solid rgba(255,255,255,0.12);
}
#mobile-menu .mobile-nav-links .mobile-nav-group a.active { border-left-color: var(--titanium-light, #B9BEC3); }

/* ── Line icons (replacing emoji): drawn on a 24px grid, 1.75 stroke ── */
.lc-icon { display: block; flex-shrink: 0; }
.service-icon { color: var(--titanium-light, #B9BEC3); }
.service-icon .lc-icon { width: 24px; height: 24px; }
.problem-icon { color: #F0A3A0; }
.problem-icon .lc-icon { width: 20px; height: 20px; }
.explainer-icon { color: var(--green2, #B9BEC3); margin-top: 1px; }
.explainer-icon .lc-icon { width: 24px; height: 24px; }
.btn-urgency .lc-icon, .btn-hero-secondary .lc-icon { display: inline-block; }

/* ── Homepage contact line under the two buttons ───────────────────── */
.cta-direct { margin-top: 28px; font-size: 0.9375rem; color: var(--muted); line-height: 1.6; }
.cta-direct a { color: var(--titanium-light, #B9BEC3); text-decoration: underline; text-decoration-color: rgba(185,190,195,0.35); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .cta-direct a:hover { color: var(--white, #fff); text-decoration-color: currentColor; } }

/* ── Mobile menu: drops from under the bar, leaves the same way ─────── */
#mobile-menu {
  display: flex;
  visibility: hidden; opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms;
}
#mobile-menu.open {
  visibility: visible; opacity: 1; pointer-events: auto;
  transform: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
}

/* ── Newsletter pop-up: out of the tab order while closed; the card
   materialises rather than just fading; exit is quicker than entry ── */
.popup-overlay {
  visibility: hidden;
  transition: opacity 160ms var(--ease-out), visibility 0s linear 160ms;
}
.popup-overlay.open {
  visibility: visible;
  transition: opacity 240ms var(--ease-out), visibility 0s;
}
.popup-card {
  opacity: 0; transform: scale(0.96);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.popup-overlay.open .popup-card {
  opacity: 1; transform: none;
  transition-duration: 280ms;
}

/* ── Scroll reveals: content is visible unless the script is running ──
   js/site.js adds .reveal to <html> and marks anything already on screen
   as .shown, so the first frame is always complete. */
.fade-up { opacity: 1; transition: none; }
.fade-up.shown { animation: none !important; }
html.reveal .fade-up:not(.visible) { opacity: 0; }
html.reveal .fade-up.fade-plain.visible:not(.shown) { animation: lc-fade-in 0.5s var(--ease-out) both; }
@keyframes lc-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── Homepage hero: the button comes up the page; the dashboard arrives
   sooner so the first frame isn't half empty ─────────────────────── */
.hero { min-height: 100vh; min-height: 100svh; padding-top: 104px; }
.hero-headline { font-size: clamp(3.5rem, 6.4vw, 6rem); line-height: 0.92; margin-bottom: 24px; }
.hero-tag { margin-bottom: 26px; }
.hero-sub { margin-bottom: 32px; }
.hero-stats { margin-top: 52px; }
.hero-visual { animation-duration: 0.5s; animation-delay: 0.1s; }
@media (max-width: 640px) { .hero-headline { font-size: 3.5rem; } }

/* ── Partner pages: the one action, visible without scrolling ──────── */
.page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 32px; }
.page-actions .btn-cta { display: inline-block; width: auto; padding: 14px 26px; }
.page-phone { color: var(--off, #E7EAEC); font-size: 0.9375rem; font-weight: 500; text-decoration: none; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .page-phone:hover { color: var(--white, #fff); text-decoration: underline; } }

/* ── Typography: tracking by size ────────────────────────────────────
   Bebas display carried +1–2px at every size. Large display now sits a
   hair negative, section titles at zero, small display slightly open;
   small caps labels keep their positive tracking. */
.hero-headline, .pi-headline, .page-headline, .cta-title,
.bundle-heading, .toolkit-heading, .cta-price, .bundle-price, .toolkit-price { letter-spacing: -0.005em; }
.section-title, .cta-heading, .popup-heading, .group-name, .solution-card h3, .hc-score h2,
.stat-num, .price-num, .pi-price-amount, .hc-ring b, .managed-heading, .final-cta-text h3 { letter-spacing: 0; }
.content-prose h2, .price-name, .pi-price-name, .rules-card h3, .hc-area-title, .hc-gaps h3,
.callout-card h4, .proof-card h3, .popup-thanks-heading, .why-number { letter-spacing: 0.01em; }

/* ── Contrast: small print that has to be readable ───────────────── */
.reg-details, .site-footer .reg-details { color: rgba(255,255,255,0.55); }
.powered-by, .site-footer .footer-brand .powered-by { color: rgba(255,255,255,0.55); }
.site-footer .powered-by a { color: var(--titanium-light, #B9BEC3); }
.popup-small, .case-study-disclaimer, .hc-disclaimer { color: rgba(255,255,255,0.55); }

/* ── Reduced motion: still, not lifeless ─────────────────────────────
   Nothing slides, scrolls or pulses; colour and opacity feedback stays. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .marquee-section { overflow-x: auto; scrollbar-width: none; }
  .marquee-section::-webkit-scrollbar { display: none; }
  .hero-tag-dot { animation: none; }
  .hero-visual { animation: none; }
  #mobile-menu, #mobile-menu.open { transform: none; }
  #navbar .nav-drop-panel, #navbar .nav-drop.open .nav-drop-panel { transform: none; }
  #navbar .nav-drop-chev { transition: none; }
  .popup-card, .popup-overlay.open .popup-card { transform: none; }
  .btn-nav:active, .btn-hero-primary:active, .btn-hero-secondary:active, .btn-price:active,
  .btn-cta:active, .btn-buy:active, .btn-toolkit:active, .btn-bundle:active, .btn-managed:active,
  .btn-outline:active, .btn-pi:active, .btn-urgency:active, .popup-submit:active, .hc-submit:active,
  .hc-primary:active, .hc-secondary:active, .group-card:active { transform: none; opacity: 0.85; }
}

/* ── Reduced transparency: glass becomes solid ─────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  #navbar, nav { background: #070D05; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #navbar .nav-drop-panel { background: #0A1307; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #mobile-menu, .mobile-menu { background: #070D05; -webkit-backdrop-filter: none; backdrop-filter: none; }
  footer, footer.site-footer { background: #070D05; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .popup-overlay { background: rgba(0,0,0,0.88); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .popup-card { background: #0A1307; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hc-progress { background: #070D05; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .problem-item, .solution-card, .service-card, .why-card, .pricing-card, .group-card,
  .hero-screen, .software-screen, .pi-list-item, .proof-card, .process-step,
  .pi-pricing-card, details.faq-item, .download-card, .talk-card {
    background: #111A0F; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .pricing-card.featured { background: #1A221D; }
  .cta-card, .callout-card, .toolkit-card, .bundle-card, .managed-card, .urgency-banner {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ── Increased contrast: brighter secondary text, defined edges ────── */
@media (prefers-contrast: more) {
  :root {
    --muted: #C9CED3;
    --border: rgba(255,255,255,0.28);
    --border2: rgba(255,255,255,0.45);
  }
  .reg-details, .site-footer .reg-details, .powered-by, .site-footer .footer-brand .powered-by,
  .popup-small, .case-study-disclaimer, .hc-disclaimer { color: #C9CED3; }
  .problem-item, .service-card, .why-card, .pricing-card, .group-card, .pi-list-item,
  .process-step, details.faq-item, .download-card, .talk-card, .includes-item, .hc-q {
    border-color: rgba(255,255,255,0.4);
  }
  #navbar { background: #070D05; border-bottom-color: rgba(255,255,255,0.4); }
  #navbar .nav-drop-panel { background: #0A1307; border-color: rgba(255,255,255,0.45); }
}

/* Homepage contact: the section kept its 60px desktop side padding on
   phones, squeezing the copy to ~210px and wrapping the call button. */
.cta-actions .btn-hero-primary, .cta-actions .btn-hero-secondary { white-space: nowrap; }
@media (max-width: 640px) {
  #contact.cta-section { padding-left: 0; padding-right: 0; }
}