/* gopher-fd.css — shared service-detail page styles. Was inline <style id="gopher-fd-css"> on 107 pages. */
/* ============================================================
     GOPHER · Food Delivery — service detail (customer vantage)
     Brand: Nunito (display) · DM Sans (body) · Caveat (accent)
     ============================================================ */
  :root{
    --green:#33D975; --green-dark:#1CB061; --aqua:#87F7BD;
    --green-light:#e8f7ea; --navy:#002461; --navy-2:#0a3478; --navy-mid:#253a7e;
    --cornflower:#BADBFC; --terracotta:#d97757; --terra-dk:#c25f3f;
    --sand:#fbf3e4; --sand-2:#f4e9d4; --paper:#fff; --text:#424242; --muted:#6b7280;
    --rule:#e7e2d3; --red:#d8584a;
    --shadow:0 10px 34px -16px rgba(0,36,97,0.30);
    --shadow-lg:0 26px 60px -22px rgba(0,36,97,0.40);
  }
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; background:var(--paper); color:var(--text);
    font-family:'DM Sans',system-ui,sans-serif; font-size:16px; line-height:1.65;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
  a{ color:inherit; }
  h1,h2,h3,h4{ font-family:'Nunito',sans-serif; color:var(--navy); }
  .eyebrow{ font-family:'Nunito',sans-serif; font-weight:800; font-size:12.5px;
    letter-spacing:.22em; text-transform:uppercase; color:var(--green-dark); }
  .caveat{ font-family:'Caveat',cursive; color:var(--terracotta); transform:rotate(-2deg); display:inline-block; }

  .btn{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; text-decoration:none;
    font-family:'Nunito',sans-serif; font-weight:800; font-size:16px; border-radius:12px;
    padding:15px 28px; border:none; transition:transform .18s, box-shadow .18s, background .18s, color .18s; }
  .btn svg{ width:18px; height:18px; }
  .btn-primary{ background:var(--green); color:var(--navy); box-shadow:0 10px 24px -8px rgba(51,217,117,.6); }
  .btn-primary:hover{ background:var(--green-dark); transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(51,217,117,.55); }
  .btn-ghost{ background:transparent; color:var(--navy); border:2px solid var(--navy); padding:13px 26px; }
  .btn-ghost:hover{ background:var(--navy); color:#fff; }
  .btn-light{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.45); padding:13px 26px; }
  .btn-light:hover{ background:rgba(255,255,255,.1); border-color:#fff; }

  .section{ padding:84px 32px; }
  .section.anchor{ background:var(--sand); }
  .wrap{ max-width:1140px; margin:0 auto; }
  .sec-head{ text-align:center; max-width:760px; margin:0 auto 48px; }
  .sec-head .eyebrow{ display:block; margin-bottom:13px; }
  .sec-head h2{ font-weight:900; font-size:clamp(28px,3.8vw,42px); line-height:1.07; letter-spacing:-.02em; margin:0 0 12px; }
  .sec-head h2 .caveat{ font-size:clamp(32px,4.2vw,48px); }
  .sec-head p{ font-size:17.5px; color:var(--muted); margin:0; }

  /* ───── HERO ───── */
  .hero{ position:relative; overflow:hidden; padding:62px 32px 70px;
    background:
      radial-gradient(820px 460px at 88% -10%, rgba(51,217,117,.16), transparent 60%),
      radial-gradient(760px 480px at 4% 16%, rgba(186,219,252,.30), transparent 60%),
      linear-gradient(180deg, var(--sand) 0%, #fffaf2 72%, #fff 100%); }
  .hero-grid{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1.06fr .94fr; gap:52px; align-items:center; position:relative; z-index:2; }
  .crumbs{ font-family:'Nunito',sans-serif; font-weight:700; font-size:13px; color:var(--muted); margin-bottom:18px; }
  .crumbs a{ text-decoration:none; color:var(--muted); }
  .crumbs a:hover{ color:var(--green-dark); }
  .crumbs .sep{ margin:0 8px; color:var(--rule); }
  .crumbs .cur{ color:var(--navy); }
  .hero h1{ font-weight:900; font-size:clamp(38px,5vw,62px); line-height:.99; letter-spacing:-.03em; margin:6px 0 2px; }
  /* Caveat accent per style guide: ~78% of headline, tucked under the baseline
     with a negative top margin, terracotta, rotated -2deg, "—" lead-in. */
  .hero-accent{ font-family:'Caveat',cursive; font-weight:700; color:var(--terracotta);
    transform:rotate(-2deg); transform-origin:left center; display:inline-block;
    font-size:clamp(30px,3.9vw,48px); line-height:.9; margin:-4px 0 0; }
  .hero-sub{ font-size:19px; color:#4a5468; max-width:540px; margin:16px 0 8px; }
  .hero-sub b{ color:var(--navy); font-weight:700; }
  .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
  .hero-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
  .chip{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--rule);
    border-radius:999px; padding:9px 15px; font-family:'Nunito',sans-serif; font-weight:700; font-size:13px; color:var(--navy); box-shadow:var(--shadow); }
  .chip b{ color:var(--green-dark); }
  .hero-visual{ position:relative; height:480px; }
  .hero-photo{ position:absolute; inset:0; border-radius:26px; overflow:hidden; box-shadow:var(--shadow-lg); border:7px solid #fff; background:var(--sand-2); }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hero-note{ position:absolute; left:-14px; bottom:26px; z-index:3; background:var(--navy); color:#fff;
    border-radius:16px; padding:14px 18px; box-shadow:var(--shadow-lg); max-width:230px; }
  .hero-note .caveat{ color:var(--aqua); font-size:26px; line-height:1; display:block; }
  .hero-note span{ font-size:13px; color:rgba(255,255,255,.85); display:block; margin-top:3px; }

  /* ───── PILLARS ───── */
  .pillars{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .pillar{ background:#fff; border:1px solid var(--rule); border-radius:20px; padding:30px 26px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
  .pillar::after{ content:''; position:absolute; top:-60px; right:-60px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, rgba(51,217,117,.10), transparent 70%); }
  .pillar .pic{ width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:26px; background:var(--green-light); margin-bottom:16px; }
  .pillar h4{ font-weight:900; font-size:19px; margin:0 0 8px; }
  .pillar h4 .caveat{ font-size:22px; }
  .pillar p{ font-size:14.5px; color:var(--muted); margin:0; line-height:1.62; }
  .pillar p b{ color:var(--navy); font-weight:700; }

  /* ───── COMPARISON TABLE (customer vantage) ───── */
  .ctable{ max-width:1100px; margin:0 auto; background:#fff; border:1px solid var(--rule);
    border-radius:18px; overflow:hidden; box-shadow:var(--shadow); }
  .crow{ display:grid; grid-template-columns:230px 1fr 1fr; align-items:stretch; }
  .crow + .crow{ border-top:1px solid var(--sand-2); }
  .cc{ padding:20px 24px; }
  .cc.label{ background:#fbfaf6; display:flex; align-items:center; gap:12px; }
  .cc.label .ic{ width:30px; height:30px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; }
  .cc.label .lt{ font-family:'Nunito',sans-serif; font-weight:800; font-size:15px; color:var(--navy); line-height:1.2; }
  .cc.giants{ color:#6c7480; font-size:14.5px; line-height:1.55; display:flex; gap:10px; }
  .cc.giants .x{ color:var(--terracotta); font-weight:900; flex:0 0 auto; }
  .cc.gopher{ background:linear-gradient(180deg,#f4fcf7,#eefaf2); border-left:4px solid var(--green);
    font-size:14.5px; line-height:1.55; color:#1f3a2c; display:flex; gap:10px; }
  .cc.gopher .ck{ color:var(--green-dark); font-weight:900; flex:0 0 auto; }
  .cc.gopher b{ color:var(--green-dark); font-weight:800; }
  /* header strip */
  .crow.head .cc{ padding:16px 24px; }
  .crow.head .cc.label{ font-family:'Nunito',sans-serif; font-weight:800; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .crow.head .cc.giants{ font-family:'Nunito',sans-serif; font-weight:800; color:var(--navy-mid); font-size:16px; }
  .crow.head .cc.gopher{ background:var(--navy); border-left:4px solid var(--green); color:#fff; align-items:center; }
  .crow.head .cc.gopher .dot{ width:9px; height:9px; border-radius:50%; background:var(--green); margin-right:9px; }
  .crow.head .cc.gopher .gt{ font-family:'Nunito',sans-serif; font-weight:900; font-size:16px; }

  /* ───── HONEST-PRICE CALLOUT ───── */
  .price-card{ max-width:760px; margin:0 auto; background:#fff; border:1px solid var(--rule); border-radius:20px; padding:30px 32px; box-shadow:var(--shadow); }
  .price-card h3{ font-weight:900; font-size:21px; margin:0 0 6px; }
  .price-card .lead{ color:var(--muted); font-size:15px; margin:0 0 20px; }
  .price-line{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px dashed var(--rule); }
  .price-line:last-of-type{ border-bottom:none; }
  .price-line .pl{ display:flex; align-items:center; gap:11px; }
  .price-line .pic{ width:34px; height:34px; border-radius:9px; background:var(--sand); border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; font-size:16px; }
  .price-line .nm{ font-family:'Nunito',sans-serif; font-weight:700; font-size:14.5px; color:var(--navy); }
  .price-line .nm small{ display:block; font-family:'DM Sans',sans-serif; font-weight:400; font-size:12.5px; color:var(--muted); }
  .price-line .amt{ font-family:'Nunito',sans-serif; font-weight:800; font-size:15px; color:var(--navy); white-space:nowrap; }
  .price-foot{ margin-top:18px; padding-top:16px; border-top:2px solid var(--green-light); font-size:13.5px; color:var(--muted); }
  .price-foot b{ color:var(--green-dark); }

  /* ───── HOW IT WORKS ───── */
  .steps{ max-width:1040px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .step{ position:relative; padding:6px 4px; }
  .step .n{ font-family:'Nunito',sans-serif; font-weight:900; font-size:34px; color:var(--aqua); line-height:1; }
  .step h4{ font-weight:900; font-size:16.5px; margin:10px 0 6px; }
  .step p{ font-size:14px; color:var(--muted); margin:0; line-height:1.55; }

  /* ───── FINAL ORDER CTA ───── */
  .order{ max-width:1100px; margin:0 auto; border-radius:32px; padding:66px 44px; text-align:center; color:#fff; position:relative; overflow:hidden;
    background:
      radial-gradient(circle at 16% 24%, rgba(51,217,117,.30), transparent 52%),
      radial-gradient(circle at 84% 76%, rgba(186,219,252,.20), transparent 52%),
      linear-gradient(140deg, var(--navy) 0%, #001a48 100%); }
  .order h3{ color:#fff; font-weight:900; font-size:clamp(28px,4vw,46px); line-height:1.05; letter-spacing:-.02em; margin:0 0 12px; }
  .order h3 .caveat{ color:var(--aqua); font-size:clamp(34px,4.6vw,56px); }
  .order p{ font-size:18px; color:rgba(255,255,255,.85); max-width:600px; margin:0 auto 28px; }
  .order .btn-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; align-items:center; }
  .order .badges{ display:flex; gap:16px; justify-content:center; align-items:center; margin-top:26px; }
  /* Matched 398x114 badge pair (from the request page) — equal height = equal width. */
  .order .badges img{ display:block; height:48px; width:auto; }

  /* reveal */
  .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:none; }

  @media (max-width:980px){
    .hero{ padding:53px 22px 56px; }
    .hero-grid{ grid-template-columns:1fr; gap:34px; }
    .hero-visual{ height:340px; width:100%; max-width:460px; margin:0 auto; }
    .pillars{ grid-template-columns:1fr; }
    .steps{ grid-template-columns:1fr 1fr; gap:24px 18px; }
    .crow{ grid-template-columns:1fr; }
    .crow .cc.label{ border-bottom:1px solid var(--sand-2); }
    .crow.head{ display:none; }            /* labels become inline on mobile */
    .cc.giants::before{ content:'Delivery apps: '; font-weight:800; color:#9aa2ad; }
    .cc.gopher::before{ content:'Gopher: '; font-weight:800; color:var(--green-dark); }
  }
  @media (max-width:560px){
    .section{ padding:60px 18px; }
    .steps{ grid-template-columns:1fr; }
    .order{ padding:48px 22px; border-radius:24px; }
    .price-card{ padding:24px 20px; }
    .price-line .amt{ font-size:14px; }
  }