/* ============================================================
   GrowCarte — Amazon Account Management / Automation Service Page
   Stylesheet (extracted from inline <style>, aligned with the
   site-wide responsive system: ≥1400 desktop, 1024–1399 laptop,
   768–1023 tablet, 481–767 large phone, ≤480 phone)
   ============================================================ */

/* ============================================
   TOKENS — identical to homepage
   ============================================ */
:root{
  --ink:        #040037;
  --ink-soft:   #4A4776;
  --blue:       #0077FC;
  --blue-deep:  #0058C4;
  --blue-pale:  #E7F0FE;
  --paper:      #F7F8FC;
  --paper-alt:  #FFFFFF;
  --mist:       #EEF2FB;
  --line:       #DEE4F5;
  --lift:       #12995A;
  --lift-pale:  #E4F6EC;
  --danger:     #C0392B;

  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --max: 1160px;
  --radius: 14px;
  --radius-sm: 8px;

  --shadow-sm: 0 1px 2px rgba(4,0,55,0.06);
  --shadow-md: 0 12px 32px -12px rgba(4,0,55,0.18);
  --shadow-lg: 0 24px 60px -20px rgba(4,0,55,0.28);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); margin:0; line-height:1.15; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
a.inline-link{ color:var(--blue); }
a.inline-link:hover{ color:var(--blue-deep); }
img, svg{ max-width:100%; }
img{ display:block; }
button{ font-family:inherit; cursor:pointer; }

a:focus-visible, button:focus-visible{ outline:2.5px solid var(--blue); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; width:100%; }

.eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--blue-deep); display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:16px; height:2px; background:var(--blue); display:inline-block; flex:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:100px; font-family:var(--font-body); font-weight:600; font-size:0.95rem;
  border:1.5px solid transparent;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 10px 24px -10px rgba(0,119,252,0.55); }
.btn-primary:hover{ background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(0,119,252,0.6); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue-deep); transform:translateY(-2px); }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *{ transition-delay:calc(var(--i) * 90ms); }

/* ============================================
   HEADER
   ============================================ */
header.site-header{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid transparent; transition:border-color .25s ease, box-shadow .25s ease;
  width:100%;
  isolation:isolate;
}
/* Blur lives on a ::before layer instead of directly on the header.
   backdrop-filter on the header itself creates a new CSS containing
   block for position:fixed descendants on most mobile browsers,
   which traps the full-screen mobile nav inside the header's own
   (tiny) box instead of letting it cover the viewport. */
header.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
header.site-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:var(--shadow-sm); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:78px; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; flex:none; }
.brand img{ height:154px; width:auto; object-fit:contain; }
nav.main-nav{ display:flex; align-items:center; gap:6px; }
nav.main-nav a.nav-link{ padding:10px 14px; border-radius:100px; font-size:0.93rem; font-weight:500; color:var(--ink-soft); transition:background .18s ease, color .18s ease; white-space:nowrap; }
nav.main-nav a.nav-link:hover{ background:var(--mist); color:var(--ink); }
nav.main-nav a.nav-link.is-current{ color:var(--blue-deep); background:var(--blue-pale); }
.header-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-cta{ display:none; }
.nav-toggle{
  display:none; width:42px; height:42px; border:1.5px solid var(--line); border-radius:10px; background:#fff;
  align-items:center; justify-content:center; flex-direction:column; gap:4px; flex:none;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================================
   SERVICES DROPDOWN (header nav)
   ============================================ */
.nav-dropdown{ position:relative; }
.nav-dropdown > .nav-link{ display:inline-flex; align-items:center; gap:5px; }
.nav-dropdown .caret{ font-size:0.6rem; transition:transform 200ms ease; }
.nav-dropdown-menu{
  position:absolute; top:100%; left:0; padding-top:8px; min-width:230px; z-index:110;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity 180ms ease, transform 180ms ease;
}
.nav-dropdown-menu-inner{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:8px; display:flex; flex-direction:column; gap:2px;
}
.nav-dropdown-menu a{ padding:10px 12px; border-radius:8px; font-size:0.9rem; font-weight:500; color:var(--ink-soft); transition:background .18s ease, color .18s ease; }
.nav-dropdown-menu a:hover{ background:var(--mist); color:var(--ink); }
/* Marks the specific service page you're currently on inside the
   dropdown — separate from .nav-link.is-current on the "Services"
   trigger itself, which only says you're somewhere under Services. */
.nav-dropdown-menu a.is-current{ background:var(--blue-pale); color:var(--blue-deep); font-weight:600; }
.nav-dropdown-menu a.is-current:hover{ background:var(--blue-pale); color:var(--blue-deep); }
@media (hover:hover) and (pointer:fine){
  .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-dropdown:hover .caret{ transform:rotate(180deg); }
}
.nav-dropdown.is-open .nav-dropdown-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
.nav-dropdown.is-open .caret{ transform:rotate(180deg); }

/* ============================================
   FOOTER
   ============================================ */
footer.site-footer{ background:var(--ink); color:rgba(255,255,255,0.72); padding:64px 0 28px; width:100%; }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.12); }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img{ height:30px; }
.footer-col p.foot-desc{ font-size:0.88rem; max-width:32ch; color:rgba(255,255,255,0.55); }
.footer-col h4{ color:#fff; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; font-family:var(--font-mono); font-weight:600; margin-bottom:16px; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col ul a{ font-size:0.9rem; color:rgba(255,255,255,0.72); transition:color .18s ease; }
.footer-col ul a:hover{ color:#fff; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:24px; font-size:0.82rem; color:rgba(255,255,255,0.5); flex-wrap:wrap; gap:12px; }
.footer-legal{ display:flex; gap:20px; }

/* ============================================
   SHARED SECTION / CARD PATTERNS
   ============================================ */
.section{ padding:88px 0; width:100%; }
.section-alt{ background:var(--paper-alt); }
.section-head{ max-width:680px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); margin-top:14px; }
.section-head p{ margin-top:14px; color:var(--ink-soft); font-size:1.02rem; }
.service-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px; min-width:0; }

.card-hover{ transition:transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.card-hover:hover{ transform:translateY(-5px) scale(1.02); box-shadow:var(--shadow-md); border-color:var(--blue); }

/* ============================================
   SERVICE HERO
   ============================================ */
.svc-hero{ padding:64px 0 40px; width:100%; }
.svc-hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.svc-hero h1{ font-size:clamp(1.9rem, 3.8vw, 3.1rem); margin-top:16px; }
.svc-hero h1 .accent{ color:var(--blue); }
.svc-hero .lede{ margin-top:18px; font-size:1.06rem; color:var(--ink-soft); max-width:520px; }
.svc-outcomes{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.svc-outcomes li{ display:flex; align-items:flex-start; gap:10px; font-size:0.96rem; color:var(--ink-soft); }
.svc-outcomes li::before{ content:""; width:7px; height:7px; margin-top:8px; border-radius:2px; background:var(--blue); flex:none; }
.svc-hero-actions{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.svc-hero-media{ border-radius:var(--radius); overflow:hidden; min-width:0; background:var(--blue-pale); aspect-ratio:4/3; }
.svc-hero-media img{ width:100%; height:100%; object-fit:contain; }

/* ============================================
   WHO THIS IS FOR
   ============================================ */
.who-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.who-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.who-card .ico{ width:38px; height:38px; border-radius:50%; background:var(--blue-pale); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem; flex:none; }
.who-card p{ font-size:0.92rem; color:var(--ink-soft); }

/* ============================================
   PROBLEMS WE SOLVE
   ============================================ */
.problems-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
.problems-list{ display:flex; flex-direction:column; gap:16px; }
.problem-item{ display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; min-width:0; }
.problem-item .ico{ width:34px; height:34px; border-radius:8px; background:#FDEEEC; color:var(--danger); display:flex; align-items:center; justify-content:center; flex:none; }
.problem-item h4{ font-size:0.96rem; }
.problem-item p{ font-size:0.88rem; color:var(--ink-soft); margin-top:4px; }
.problems-media{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); min-width:0; background:var(--mist); aspect-ratio:4/3; }
.problems-media img{ width:100%; height:100%; object-fit:cover; }

/* ============================================
   SERVICE COMPONENTS
   ============================================ */
.components-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.component-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.component-card .num{ font-family:var(--font-mono); font-size:0.72rem; font-weight:600; color:var(--blue-deep); }
.component-card h3{ font-size:1.05rem; }
.component-card p{ font-size:0.92rem; color:var(--ink-soft); }

/* ============================================
   PROCESS
   ============================================ */
.process-list{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.process-step{ display:flex; flex-direction:column; gap:10px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; min-width:0; }
.process-step .process-num{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--blue); }
.process-step h3{ font-size:1.05rem; }
.process-step p{ font-size:0.9rem; color:var(--ink-soft); }

/* ============================================
   PROOF / METRICS
   ============================================ */
.metrics-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; }
.metric-tile{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 16px; text-align:center; min-width:0; }
.metric-tile .val{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--blue); }
.metric-tile .lbl{ font-size:0.78rem; color:var(--ink-soft); margin-top:6px; }
.proof-media{ margin-top:36px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); background:var(--mist); aspect-ratio:16/9; }
.proof-media img{ width:100%; height:100%; object-fit:cover; }

/* ============================================
   FAQ
   ============================================ */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:760px; }
.faq-item{ border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; overflow:hidden; transition:border-color 200ms ease, box-shadow 200ms ease; }
.faq-item .faq-q{
  width:100%; padding:18px 22px; font-weight:600; font-size:0.98rem; font-family:inherit; text-align:left;
  background:none; border:none; color:var(--ink); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item .faq-q .faq-icon{ color:var(--blue); font-size:1.2rem; flex:none; transition:transform 200ms ease, color 200ms ease; }

.faq-item .faq-a-wrap{ max-height:0; opacity:0; overflow:hidden; transition:max-height 220ms ease, opacity 200ms ease; }
.faq-item .faq-a{ padding:0 22px 20px; font-size:0.92rem; color:var(--ink-soft); }

/* Opening is always driven by a click/tap — on every device, no
   feature-detection involved (see script). Detecting "does this
   device support hover" to decide whether JS should even run turned
   out to be unreliable in practice (touch laptops, some Android
   browsers, etc. can misreport it), which was silently disabling the
   accordion on some phones. Hover now only gives desktop pointer
   users a subtle highlight — it no longer opens the panel itself,
   so there's nothing for a touch device to "miss out on". */
@media (hover:hover) and (pointer:fine){
  .faq-item:hover{ border-color:var(--blue); box-shadow:var(--shadow-sm); }
}
.faq-item.is-open{ border-color:var(--blue); box-shadow:var(--shadow-sm); }
.faq-item.is-open .faq-a-wrap{ max-height:320px; opacity:1; }
.faq-item.is-open .faq-q .faq-icon{ transform:rotate(45deg); }

/* ============================================
   CLOSING CTA
   ============================================ */
.svc-cta{ background:var(--ink); border-radius:var(--radius); padding:52px 48px; text-align:center; }
.svc-cta h2{ color:#fff; font-size:clamp(1.5rem, 3vw, 2.1rem); }
.svc-cta p{ color:rgba(255,255,255,0.68); margin-top:14px; max-width:560px; margin-left:auto; margin-right:auto; }
.svc-cta-actions{ display:flex; justify-content:center; gap:12px; margin-top:26px; flex-wrap:wrap; }
.svc-cta .fine{ margin-top:16px; font-size:0.82rem; color:rgba(255,255,255,0.5); }

/* ============================================================
   RESPONSIVE
   Breakpoints: 1024 (laptop/tablet), 980 (grid stacking, matches
   homepage), 720 (mobile nav + single-column), 600 / 480 / 360
   (progressive phone tightening).
   ============================================================ */

@media (max-width: 1024px){
  .wrap{ padding:0 20px; }
  .section{ padding:76px 0; }
  .section-head{ margin-bottom:38px; }
}

@media (max-width: 980px){
  .svc-hero-grid{ grid-template-columns:1fr; gap:36px; }
  .svc-hero .lede{ max-width:none; }
  .who-grid{ grid-template-columns:repeat(2,1fr); }
  .problems-grid{ grid-template-columns:1fr; gap:32px; }
  .problems-grid .problems-media{ order:-1; }
  .components-grid{ grid-template-columns:repeat(2,1fr); }
  .process-list{ grid-template-columns:repeat(2,1fr); }
  .metrics-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:36px; }
}

@media (max-width: 720px){
  .header-inner{ height:64px; }

  /* Full-screen mobile dropdown. Sized with dvh (falls back to vh
     on older browsers) so mobile browser toolbars showing/hiding
     never leave part of the menu unreachable. Paired with
     header::before above (blur off the header itself) so this
     fixed panel isn't trapped inside the header's own small box. */
  nav.main-nav{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    height:calc(100vh - 64px);
    height:calc(100dvh - 64px);
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    gap:2px;
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    border-top:1px solid var(--line);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:99;
  }
  nav.main-nav.is-open{
    opacity:1;
    transform:translateY(0);
    visibility:visible;
    pointer-events:auto;
  }
  nav.main-nav a.nav-link{
    padding:16px 14px;
    font-size:1.05rem;
    border-bottom:1px solid var(--mist);
  }
  .nav-toggle{ display:flex; }
  .header-actions .btn-primary{ display:none; }
  nav.main-nav .nav-cta{ display:inline-flex; justify-content:center; margin-top:18px; width:100%; }

  /* Services dropdown becomes an inline expandable section on mobile.
     max-height raised from 220px to 420px — the 8 service links need
     roughly 330px to show in full; 220px was silently clipping the
     last few with no way to reach them. */
  .nav-dropdown-menu{
    position:static; opacity:1; transform:none; pointer-events:auto; padding-top:0;
    max-height:0; overflow:hidden;
    transition:max-height 260ms ease;
  }
  .nav-dropdown-menu-inner{ background:var(--paper); border:none; box-shadow:none; padding:0 8px; border-radius:var(--radius-sm); }
  .nav-dropdown-menu a{ padding:13px 12px; font-size:0.98rem; }
  .nav-dropdown.is-open .nav-dropdown-menu{ max-height:420px; }
  .nav-dropdown.is-open .nav-dropdown-menu-inner{ padding:8px; margin:4px 0 6px; }
  .nav-dropdown > .nav-link{ width:100%; justify-content:space-between; border-bottom:1px solid var(--mist); }
  .nav-dropdown.is-open > .nav-link{ border-bottom-color:transparent; }

  .who-grid{ grid-template-columns:1fr; }
  .components-grid{ grid-template-columns:1fr; }
  .process-list{ grid-template-columns:1fr; }
  .metrics-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .svc-hero{ padding:40px 0 32px; }
  .svc-cta{ padding:40px 24px; }
  .svc-cta-actions{ flex-direction:column; }
  .svc-cta-actions .btn{ width:100%; }
}

/* When the mobile nav is open, body scroll is locked via JS
   (position:fixed technique) — see the inline script. This class
   supplies the fixed positioning so the lock can't leave the page
   scrolled to the wrong spot when it's released. */
body.nav-open{
  position:fixed;
  inset:0;
  overflow:hidden;
  width:100%;
}

/* ---- Large phones / small tablets (600px) ---- */
@media (max-width: 600px){
  .wrap{ padding:0 18px; }
  .section{ padding:56px 0; }
  .section-head{ margin-bottom:30px; }
  .section-head p{ font-size:0.96rem; }

  .brand img{ height:112px; }
  .btn{ padding:13px 22px; font-size:0.92rem; }

  .svc-hero h1{ font-size:clamp(1.6rem, 7vw, 2.1rem); }
  .svc-hero .lede{ font-size:0.98rem; }
  .svc-hero-actions .btn{ width:100%; }

  .who-card, .process-step, .component-card{ padding:20px; }
  .problem-item{ padding:14px; }

  .metrics-grid{ gap:10px; }
  .metric-tile{ padding:16px 12px; }
  .metric-tile .val{ font-size:1.25rem; }

  .faq-item .faq-q{ padding:16px 18px; font-size:0.94rem; }
  .faq-item .faq-a{ padding:0 18px 18px; font-size:0.9rem; }

  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
  .footer-legal{ gap:16px; }
}

/* ---- Small phones (≤480px) ---- */
@media (max-width: 480px){
  html{ font-size:15px; }
  .wrap{ padding:0 16px; }
  .header-inner{ gap:10px; }

  .svc-hero h1{ font-size:clamp(1.5rem, 8vw, 1.9rem); }
  .section-head h2{ font-size:clamp(1.5rem, 8vw, 1.9rem); }

  .metrics-grid{ grid-template-columns:repeat(2,1fr); }

  .svc-cta{ padding:32px 20px; border-radius:var(--radius-sm); }
  .svc-cta h2{ font-size:1.35rem; }
  .svc-cta p{ font-size:0.92rem; }

  .footer-top{ gap:28px; }
  .footer-col p.foot-desc{ max-width:none; }
}

/* ---- Very small phones (≤360px) ---- */
@media (max-width: 360px){
  html{ font-size:14px; }
  .wrap{ padding:0 14px; }
  .btn{ padding:12px 18px; font-size:0.88rem; }
  .svc-hero h1{ font-size:1.4rem; }
  .metrics-grid{ grid-template-columns:1fr; }
}

/* ---- Landscape phones (short height) ---- */
@media (max-height: 480px) and (orientation: landscape){
  .svc-hero{ padding:28px 0; }
}

/* ---- Guard against any accidental horizontal scroll ---- */
img, svg, video, canvas, iframe, table{ max-width:100%; height:auto; }
.wrap, .section, header.site-header, footer.site-footer{ max-width:100%; }