/* Storecrew marketing pages (/golf, /compare). The rules above the v0.63 line are copied from landing.html's <style>; keep them in step. */

  :root {
    --bg: #F6F5F1; --surface: #FFFFFF; --ink: #1E2422; --dim: #5B6664; --line: #E3E1DA;
    --teal: #0F6E73; --teal-dark: #0B5B60; --teal-soft: #E1F0F0; --mint: #5FC3C7; --amber: #C98A12; --amber-soft: #FBF1DC;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --bg: #121615; --surface: #1B201F; --ink: #F2F6F5; --dim: #A6B0AD; --line: #2B3331; --teal: #5FC3C7; --teal-dark: #0B5B60; --teal-soft: #163538; --amber: #E2A93A; --amber-soft: #3A2E12; }
  }
  :root[data-theme="dark"] { --bg: #121615; --surface: #1B201F; --ink: #F2F6F5; --dim: #A6B0AD; --line: #2B3331; --teal: #5FC3C7; --teal-dark: #0B5B60; --teal-soft: #163538; --amber: #E2A93A; --amber-soft: #3A2E12; }
  * { box-sizing: border-box; }
  /* overflow-x: clip — a phone with large text must never lay the page out wider than the screen (Chrome widens the
     layout to the widest element, which cut the hero text and the header off at the right edge) */
  html { scroll-behavior: smooth; overflow-x: clip; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.55; }
  a { color: var(--teal); text-decoration: none; }
  img { max-width: 100%; height: auto; display: block; }
  /* KR: Manrope has no Hangul, so Noto Sans KR draws it; keep Korean words whole when lines wrap */
  html[lang="ko"] body { font-family: Manrope, "Noto Sans KR", system-ui, sans-serif; word-break: keep-all; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
  .eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 0 0 10px; }
  h1, h2, h3 { line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; margin: 0; }
  h1 { font-size: clamp(36px, 6vw, 62px); font-weight: 800; }
  h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; }
  h3 { font-size: 21px; font-weight: 800; }
  p { margin: 0; }
  .lead { color: var(--dim); font-size: clamp(17px, 1.6vw, 20px); max-width: 34em; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 10px; font-weight: 800; font-size: 16px; white-space: nowrap; border: 2px solid transparent; }
  .btn:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
  .btn-primary { background: var(--teal); color: #fff; }
  .btn-primary:hover { background: var(--teal-dark); }
  :root[data-theme="dark"] .btn-primary, .btn-primary.dark-ok { color: #fff; }
  .btn-ghost { border-color: var(--teal); color: var(--teal); background: transparent; }
  .btn-ghost:hover { background: var(--teal-soft); }
  .btn-sm { height: 40px; padding: 0 16px; font-size: 14.5px; border-radius: 8px; }

  /* nav */
  .nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .nav .wrap { display: flex; align-items: center; gap: 24px; height: 66px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--ink); }
  .brand svg { width: 34px; height: 34px; border-radius: 9px; }
  .nav-links { display: flex; gap: 22px; margin-left: 8px; }
  .nav-links a { color: var(--dim); font-weight: 700; font-size: 15px; }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta { margin-left: auto; display: flex; gap: 10px; min-width: 0; }
  .lang { display: inline-flex; align-self: center; border: 1.5px solid var(--teal); border-radius: 999px; overflow: hidden; height: 32px; flex-shrink: 0; }
  .lang button { font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .05em; min-width: 38px; padding: 0 10px; border: 0; background: transparent; color: var(--teal); cursor: pointer; }
  .lang button[aria-pressed="true"] { background: var(--teal); color: var(--bg); }
  .lang button:focus-visible { outline: 3px solid var(--mint); outline-offset: -3px; }
  @media (max-width: 900px) { .nav-links { display: none; } }
  /* phone: logo · EN/ES · Log in — Try the demo is the big button right under the header */
  @media (max-width: 480px) { .nav .wrap { gap: 10px; } .nav .brand-name { display: none; } .nav-cta { gap: 8px; } .nav-cta .btn-sm { padding: 0 12px; } .nav-cta .btn-primary { display: none; } .lang button { min-width: 32px; padding: 0 8px; } }
  /* long Spanish labels: the big buttons may wrap on a narrow phone instead of widening the page */
  @media (max-width: 480px) { .hero-copy { min-width: 0; } .btn:not(.btn-sm) { white-space: normal; height: auto; min-height: 50px; padding: 12px 20px; text-align: center; } }

  /* hero */
  .hero { padding: clamp(40px, 7vw, 88px) 0 24px; }
  .hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
  .hero-copy { display: flex; flex-direction: column; gap: 22px; }
  .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
  .watch-row { display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .watch { font-weight: 800; font-size: 16px; }
  .watch:hover { text-decoration: underline; }
  .fine { color: var(--dim); font-size: 14px; }
  .fine b { color: var(--ink); font-weight: 700; }
  .hero-art { position: relative; min-height: 520px; }
  .hero-art .desk { position: absolute; right: -8%; top: 4%; width: 92%; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.18); border: 1px solid var(--line); }
  .hero-art .phone { position: absolute; left: 0; bottom: 0; width: 46%; max-width: 250px; border-radius: 28px; padding: 8px; background: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
  .hero-art .phone img { border-radius: 22px; }
  @media (max-width: 900px) {
    .hero .wrap { grid-template-columns: 1fr; }
    .hero-art { min-height: 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: end; }
    .hero-art .desk, .hero-art .phone { position: static; width: 100%; max-width: 100%; }
  }
  @media (max-width: 600px) {
    .hero-art { grid-template-columns: 1fr; justify-items: center; }
    .hero-art .desk { display: none; }
    .hero-art .phone { max-width: 260px; }
  }

  /* logos / trust strip */
  .strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
  .strip .wrap { display: flex; flex-wrap: wrap; gap: 10px 36px; justify-content: center; padding: 18px 20px; color: var(--dim); font-weight: 700; font-size: 14.5px; }
  .strip span::before { content: "✓ "; color: var(--teal); }

  /* sections */
  section { padding: clamp(56px, 8vw, 104px) 0; }
  .section-head { max-width: 40em; margin-bottom: 40px; display: flex; flex-direction: column; gap: 14px; }
  .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
  .card .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--teal-soft); color: var(--teal); display: grid; place-items: center; font-size: 22px; }
  .card p { color: var(--dim); font-size: 15.5px; }
  .card ul { margin: 4px 0 0; padding-left: 18px; color: var(--dim); font-size: 15px; display: flex; flex-direction: column; gap: 6px; }
  @media (max-width: 860px) { .features { grid-template-columns: 1fr; } }

  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .split.flip > :first-child { order: 2; }
  .split .copy { display: flex; flex-direction: column; gap: 16px; }
  .split .copy ul { margin: 0; padding-left: 20px; color: var(--dim); display: flex; flex-direction: column; gap: 8px; }
  .shot { border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(0,0,0,.14); }
  .phone-pair { display: flex; gap: 18px; justify-content: center; }
  .phone-pair .phone { width: 46%; max-width: 240px; border-radius: 26px; padding: 7px; background: var(--ink); box-shadow: 0 18px 44px rgba(0,0,0,.22); }
  .phone-pair .phone img { border-radius: 20px; }
  .phone-pair .phone:last-child { transform: translateY(28px); }
  @media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 32px; } .split.flip > :first-child { order: 0; } }

  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
  .step { position: relative; padding: 24px 24px 24px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
  .step::before { counter-increment: step; content: counter(step); width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 800; display: grid; place-items: center; }
  .step p { color: var(--dim); font-size: 15.5px; }
  @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

  .pricing { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .price-card { max-width: 560px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
  .price-tag { display: inline-flex; align-items: baseline; gap: 8px; background: var(--amber-soft); color: var(--amber); border-radius: 999px; padding: 8px 18px; font-weight: 800; }
  .price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--dim); font-size: 15.5px; }
  .price-card li::before { content: "✓ "; color: var(--teal); font-weight: 800; }

  .faq { max-width: 760px; }
  .faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
  .faq summary { cursor: pointer; font-weight: 800; font-size: 17.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; color: var(--teal); font-weight: 800; }
  .faq details[open] summary::after { content: "–"; }
  .faq details p { color: var(--dim); margin-top: 10px; max-width: 40em; }

  .cta-band { background: #0F6E73; color: #fff; } /* fixed deep teal in both themes: white text needs it */
  .cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
  .cta-band h2 { color: #fff; }
  .cta-band p { color: rgba(255,255,255,.82); }
  .cta-band .btn-primary { background: #fff; color: #0F6E73; }
  .cta-band .btn-primary:hover { background: #E1F0F0; }

  footer { padding: 40px 0 48px; color: var(--dim); font-size: 14.5px; }
  footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
  footer .wrap > * { min-width: 0; }
  footer a { overflow-wrap: anywhere; }
  footer h4 { margin: 0 0 10px; color: var(--ink); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
  footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  footer a { color: var(--dim); }
  footer a:hover { color: var(--teal); }
  .legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 18px; }
  @media (max-width: 760px) { footer .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* ---- v0.63 (marketing pages: /golf, /compare) — shared with landing.html's look ---- */
  .nav-links a[aria-current="page"] { color: var(--ink); }
  .video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .video-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); }
  .video-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
  .video-card div { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
  .video-card b { font-size: 16px; }
  .video-card span { color: var(--dim); font-size: 14px; }
  .video-card:hover { border-color: var(--teal); }
  @media (max-width: 960px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .video-grid { grid-template-columns: 1fr; } }
  .dept-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .dept { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
  .dept b { font-size: 17px; }
  .dept span { color: var(--dim); font-size: 14.5px; }
  .dept i { font-style: normal; font-size: 24px; }
  @media (max-width: 860px) { .dept-row { grid-template-columns: repeat(2, 1fr); } }
  .offer { background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: 18px; padding: clamp(22px, 4vw, 36px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; }
  .offer h2 { font-size: clamp(26px, 3vw, 34px); }
  .offer ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
  @media (max-width: 860px) { .offer { grid-template-columns: 1fr; } }
  .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  table.compare { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 15.5px; }
  table.compare th, table.compare td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  table.compare thead th { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); background: var(--bg); }
  table.compare thead th.us { color: var(--teal); }
  table.compare tbody th { font-weight: 800; width: 22%; }
  table.compare td.us { background: var(--teal-soft); }
  table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: 0; }
  .sources { color: var(--dim); font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
  .note { color: var(--dim); font-size: 14.5px; }
  .theme-btn { display: inline-flex; align-items: center; justify-content: center; align-self: center; flex-shrink: 0; width: 34px; height: 32px; border-radius: 999px; border: 1.5px solid var(--teal); background: transparent; color: var(--teal); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
  .theme-btn:hover { background: var(--teal-soft); }
  .theme-btn:focus-visible { outline: 3px solid var(--mint, var(--teal)); outline-offset: 2px; }
  /* v0.66: the team import cards and the Ask Storecrew example (landing.html has the same rules inline) */
  .import-cta { margin-top: 28px; }
  .ask-mock { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .ask-mock .q { align-self: flex-end; background: var(--teal); color: var(--bg); padding: 10px 14px; border-radius: 14px 14px 4px 14px; font-weight: 700; max-width: 85%; }
  .ask-mock .a { align-self: flex-start; background: var(--teal-soft); color: var(--ink); padding: 10px 14px; border-radius: 14px 14px 14px 4px; max-width: 92%; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
  .ask-mock .a span { font-weight: 800; }
  .ask-mock .a small { display: block; margin-top: 6px; color: var(--teal); font-weight: 800; font-size: 14px; }