/* ============================================================
   NetBreezer GEO Tag marketing site.
   Same tokens as geo-builder/static/css/wizard.css -- kept visually
   consistent with the product this page promotes.
   ============================================================ */
:root {
  --surface-0: #f7f7f4;
  --surface-1: #f2f1ed;
  --surface-2: #f7f7f4;
  --text-primary: #26251e;
  --text-secondary: rgba(38, 37, 30, .60);
  --text-muted: rgba(38, 37, 30, .40);
  --border: rgba(38, 37, 30, .10);
  --accent: #f54e00;
  --accent-bg: rgba(245, 78, 0, .08);
  --on-accent: #fff;
  --success: #0f6e56;
  --success-bg: rgba(15, 110, 86, .10);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 9999px;
  --shadow-soft: 0 0 16px rgba(0,0,0,.035), 0 0 6px rgba(0,0,0,.02);
  --font-mono: ui-monospace, "SF Mono", "Berkeley Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-0: #14120b; --surface-1: #1c1a12; --surface-2: #14120b;
    --text-primary: #edecec; --text-secondary: rgba(237,236,236,.60); --text-muted: rgba(237,236,236,.40);
    --border: rgba(237,236,236,.10);
    --accent: #ff6a2b; --accent-bg: rgba(255,106,43,.12);
    --success: #5dcaa5; --success-bg: rgba(93,202,165,.12);
    --shadow-soft: 0 0 20px rgba(0,0,0,.30), 0 0 8px rgba(0,0,0,.18);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  background: var(--surface-0);
  color: var(--text-primary);
  line-height: 1.55;
}
a { color: inherit; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; margin: 0; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
section { padding: 64px 0; }
section + section { border-top: 1px solid var(--border); }

/* ---- nav ---- */
header.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--surface-0) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1080px; margin: 0 auto; gap: 16px; }
.brand { display: flex; align-items: center; gap: 6px; }
.brand-mark { width: 28px; height: 28px; flex: none; }
.brand-text { display: flex; align-items: center; gap: 10px; }
/* Bold wordmark treatment, matching Cursor's own logo lockup -- a deliberate,
   scoped exception to this site's otherwise weight-400-everywhere type
   system, reserved for the brand name itself. Natural case (no uppercase). */
.brand-text .company { font-weight: 600; letter-spacing: -.01em; font-size: 20px; }
/* the tag-shaped label: a clip-path notch + a punched-hole dot, like a real
   price tag -- grounded in the product literally being named "Tag." Points
   left, toward "NetBreezer", so it reads as hanging off the company name.
   The hole's fill must match whatever surface it sits on (nav bar vs.
   footer/page background) or it reads as a solid dot instead of a cutout. */
/* Solid fill, not a light tint: at accent-bg's ~8% opacity the notch/hole
   outline read as too faint/thin to register as a shape. A solid accent
   background with white text reads as a confident, physical price-tag shape
   at a glance -- the one deliberate spot on this site where the accent fills
   a whole surface, same reasoning as geo-builder's .btn.brand. */
.tag-label {
  position: relative;
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent);
  padding-block: 4px;
  padding-inline: 18px 12px;
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
}
/* The notch is a hand-drawn polygon, so it can't flip itself: mirror it for
   RTL or the price-tag point ends up on the wrong end of the label. */
[dir="rtl"] .tag-label {
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
}
/* a genuine punched hole -- filled to match the page background, showing
   "through" the solid tag -- rather than a ring, since the tag itself is now
   opaque enough for a punch-through to actually read correctly. */
.tag-label::before {
  content: ""; position: absolute; inset-inline-start: 5px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--surface-0);
}
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-links { display: flex; gap: 22px; font-size: 14px; color: var(--text-secondary); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--text-primary); }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; cursor: pointer;
}
.nav-toggle span { display: block; width: 16px; height: 1.5px; margin: 0 auto; background: var(--text-primary); transition: transform .18s ease, opacity .18s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 24px; right: 24px;
    flex-direction: column; gap: 0;
    background: var(--surface-1); border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 4px 16px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav-links a:last-child { border-bottom: none; }
}

/* ---- hero ---- */
.hero { position: relative; padding: 88px 0 72px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 720px 420px at 50% -10%, var(--accent-bg), transparent 70%);
}
.hero .wrap { text-align: center; }
.badge { display: inline-block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--accent-bg); color: var(--accent); margin-bottom: 18px; }
.hero h1 { font-size: 44px; letter-spacing: -.02em; margin-bottom: 16px; }
.hero .lede { font-size: 17px; color: var(--text-secondary); max-width: 56ch; margin: 0 auto 30px; }
.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.engine-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.engine-pill { font-size: 11px; padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--accent); color: var(--accent); }

@media (max-width: 560px) {
  .hero h1 { font-size: 32px; }
}

/* ---- buttons ---- */
.btn {
  display: inline-block; text-align: center; font: inherit; font-size: 15px; padding: 12px 26px;
  border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: transparent; color: var(--text-primary); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover { border-color: var(--text-muted); }
.btn.brand { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.brand:hover { opacity: .9; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- section headers ---- */
.eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.section-head h2 { font-size: 30px; letter-spacing: -.015em; margin-bottom: 12px; }
.section-head p { font-size: 15px; color: var(--text-secondary); margin: 0; }

/* ---- about + live preview mock ---- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.about-copy p { font-size: 15px; color: var(--text-secondary); margin: 0 0 16px; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy strong { color: var(--text-primary); font-weight: 400; }

.preview-frame {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-soft); overflow: hidden;
}
.preview-chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.preview-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.preview-url { margin-inline-start: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.preview-body { padding: 22px 22px 26px; background: var(--surface-0); }
.preview-body h3 { font-size: 17px; margin-bottom: 4px; }
.preview-tagline { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 14px; }
.preview-answer { background: var(--accent-bg); border-inline-start: 2px solid var(--accent); border-radius: 0 4px 4px 0; padding: 10px 12px; font-size: 12px; margin-bottom: 14px; }
.preview-h4 { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin: 14px 0 6px; }
.preview-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 11.5px; margin-bottom: 6px; }

/* ---- feature grid ---- */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 20px; }
.feature .icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 15px; margin-bottom: 14px; }
.feature h3 { font-size: 15px; margin-bottom: 6px; }
.feature p { font-size: 13px; color: var(--text-secondary); margin: 0; }
@media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr 1fr; } .about-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---- how it works ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--text-primary); color: var(--surface-0);
  font-family: var(--font-mono); font-size: 13px; margin-bottom: 14px;
}
.step h3 { font-size: 15px; margin-bottom: 6px; }
.step p { font-size: 13px; color: var(--text-secondary); margin: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---- after you publish ----
   Two panels side by side: what runs automatically, and what the customer has
   to do. The pairing is the point -- the "yours" list alone would read as
   unfinished software, and the "automatic" list alone would overpromise. */
.after-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.after-panel {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 24px 24px 26px;
}
.after-panel h3 { font-size: 16px; margin-bottom: 14px; }

.after-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.after-tag.auto { color: var(--success); background: var(--success-bg); }
.after-tag.yours { color: var(--accent); background: var(--accent-bg); }

.after-ticks { list-style: none; margin: 0; padding: 0; }
.after-ticks li {
  position: relative; padding-inline-start: 24px; margin-bottom: 11px;
  font-size: 14px; color: var(--text-secondary);
}
.after-ticks li:last-child { margin-bottom: 0; }
/* Logical inset, not `left`: the Hebrew build flips the whole page. */
.after-ticks li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--success-bg); border: 1.5px solid var(--success);
}

.after-tasks { list-style: none; counter-reset: task; margin: 0; padding: 0; }
.after-tasks li { position: relative; padding-inline-start: 34px; margin-bottom: 18px; }
.after-tasks li:last-child { margin-bottom: 0; }
.after-tasks li::before {
  counter-increment: task; content: counter(task);
  position: absolute; inset-inline-start: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px;
  background: var(--accent); color: var(--on-accent);
}
.after-tasks b { display: block; font-weight: 400; font-size: 15px; margin-bottom: 3px; }
.after-tasks span { font-size: 14px; color: var(--text-secondary); }

.after-note {
  margin-top: 22px; padding: 16px 20px;
  background: var(--accent-bg);
  border-inline-start: 3px solid var(--accent);
  /* Logical radii, not the `0 8px 8px 0` shorthand: the accent rule moves to
     the right under RTL (Hebrew build), and a physical shorthand would leave
     the flat corners on the opposite side from the rule. */
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}
.after-note p { margin: 0; font-size: 14px; color: var(--text-secondary); max-width: 68ch; }
.after-note b { color: var(--text-primary); font-weight: 400; }

.after-closer {
  margin-top: 26px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 16px;
}
.after-closer span { font-size: 14px; color: var(--text-secondary); }

@media (max-width: 860px) { .after-split { grid-template-columns: 1fr; } }

/* ---- pricing ---- */
.price-card {
  max-width: 380px; margin: 0 auto; text-align: center;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); padding: 32px 30px;
}
.price-amount { font-size: 40px; letter-spacing: -.02em; margin: 6px 0 2px; }
.price-amount span { font-size: 30px; color: var(--text-secondary); }
.price-list { list-style: none; padding: 0; margin: 22px 0 26px; text-align: start; font-size: 13.5px; color: var(--text-secondary); }
.price-list li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.price-list li:last-child { border-bottom: none; }

/* ---- language switcher ---- */
.lang-switch {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  margin: 22px 0 6px; font-size: 13px;
}
.lang-switch a { color: var(--text-secondary); text-decoration: none; }
.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--text-primary); }

/* ---- legal / long-form ---- */
.legal-page { max-width: 760px; }
.legal-page h2 { font-size: 19px; letter-spacing: -.01em; margin: 32px 0 10px; }
.legal-page p, .legal-page li { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); }
.legal-page p { margin: 0 0 12px; }
.legal-page strong { color: var(--text-primary); }
.legal-page ul { margin: 0 0 12px; padding-inline-start: 20px; }
.legal-page li { margin-bottom: 9px; }
.legal-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }

/* ---- FAQ ---- */
.faq-list { max-width: 720px; margin: 0 auto; }
details.faq-item { border-bottom: 1px solid var(--border); padding: 16px 0; }
details.faq-item summary {
  cursor: pointer; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: "+"; color: var(--text-muted); font-size: 18px; flex: none; transition: transform .15s ease; }
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item p { font-size: 14px; color: var(--text-secondary); margin: 10px 0 0; max-width: 62ch; }

/* ---- footer ---- */
footer { padding: 40px 0 48px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-links { display: flex; gap: 18px; font-size: 13px; color: var(--text-secondary); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--text-primary); }
.copyright { font-size: 12px; color: var(--text-muted); margin-top: 18px; font-family: var(--font-mono);
  display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between; align-items: baseline; }
.copyright a { color: var(--text-secondary); text-decoration: none; }
.copyright a:hover { color: var(--text-primary); }


/* Shown only on translated Terms pages (inserted by i18n/build-i18n.sh):
   clause 14 says English governs, and that is worth nothing if the reader of a
   translation can't see it before reading the rest. */
.legal-notice {
  font-size: 13px; line-height: 1.6;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 16px; margin: 0 0 18px;
  color: var(--text-secondary);
}

/* ---- language dropdown (header) ----
   <details> rather than a JS menu: it opens, closes and is keyboard-operable
   with no script at all, which matches the rest of this site.

   Two-letter codes rather than flags. A flag names a country, not a language
   (Spanish is not Spain; "English" has no flag), and each inline SVG cost
   about a kilobyte twice per page. Codes also make adding a language one <a>
   instead of a hand-drawn SVG.

   The summary carries EVERY code and CSS reveals the one matching the document
   language -- so each generated page shows the right one with no build-step
   logic, and it cannot fall out of sync with <html lang>. */
.lang-menu { position: relative; }
.lang-menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px;
  padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::after { content: "\25BE"; color: var(--text-muted); font-size: 10px; }
.lang-menu > summary:hover, .lang-menu[open] > summary { border-color: var(--text-muted); color: var(--text-primary); }
.lang-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lang-code {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  line-height: 1;
}
/* Hidden by default; the one matching <html lang> is revealed below. */
.lang-current .lang-code { display: none; }
html[lang="en"] .lang-current .lang-code[data-lang="en"],
html[lang="fr"] .lang-current .lang-code[data-lang="fr"],
html[lang="de"] .lang-current .lang-code[data-lang="de"],
html[lang="es"] .lang-current .lang-code[data-lang="es"],
html[lang="he"] .lang-current .lang-code[data-lang="he"],
html[lang="ru"] .lang-current .lang-code[data-lang="ru"] { display: inline-block; }

.lang-menu ul {
  position: absolute; z-index: 20; margin: 6px 0 0; padding: 6px; list-style: none;
  /* inset-inline-end, not right: under RTL it must hang off the other edge. */
  inset-inline-end: 0;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
}
.lang-menu li a {
  display: block; padding: 6px 10px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--text-secondary); text-decoration: none;
}
.lang-menu li a:hover, .lang-menu li a:focus-visible {
  background: var(--surface-2); color: var(--text-primary);
}
@media (max-width: 720px) {
  .lang-menu > summary { padding: 4px 7px; }
}