/*
 * Shared styles for the marketing site (index + the /es/ and /tr/ translations).
 *
 * Extracted from index.html when the localized pages landed: three copies of
 * 600 lines of CSS would have drifted the first time anyone touched one of
 * them. Still dependency-free and build-step-free per the edit-site rule --
 * one more cached request over HTTP/2, shared across all three pages.
 */
:root {
  --brand-50:#fff0ed; --brand-700:#eb1700; --brand-800:#c01400;
  --accent-500:#f59e0b; --accent-600:#d97706;
  --handled:#16a34a;
  --ink-900:#191919; --ink-700:#4a4a4a; --ink-400:#9a9a9a;
  --line:#ececec; --surface:#ffffff; --bg:#f7f6f4;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink-900);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.tnum { font-variant-numeric: tabular-nums; }
svg { display: block; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:8px; font-weight:800; cursor:pointer; border:none; }
.btn-primary { background: var(--brand-700); color:#fff; border-radius:9999px; padding:16px 28px; font-size:16px; box-shadow:0 10px 25px -5px rgba(235,23,0,.25); transition: transform .15s ease, background .15s ease; }
.btn-primary:hover { background: var(--brand-800); transform: scale(1.03); }
.btn-dark { background: var(--ink-900); color:#fff; border-radius:9999px; padding:16px 28px; font-size:16px; transition: transform .15s ease; }
.btn-dark:hover { transform: scale(1.03); }
.btn-nav { background: var(--brand-700); color:#fff; border-radius:12px; padding:9px 16px; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.btn-nav:hover { background: var(--brand-800); }

/* nav */
header.nav { border-bottom:1px solid var(--line); background: var(--surface); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; max-width:1120px; margin:0 auto; }
.logo { display:flex; align-items:center; gap:8px; font-weight:900; }
.logo .mark { display:grid; place-items:center; height:32px; width:32px; border-radius:10px; background:var(--brand-700); color:#fff; }
nav.links { display:flex; align-items:center; gap:22px; font-size:14px; font-weight:700; color:var(--ink-700); }
nav.links a.plain:hover { color:var(--brand-700); }
@media (max-width:640px){ nav.links a.hide-sm{ display:none; } }

/* hero */
.hero { background:linear-gradient(to bottom, var(--brand-50), var(--bg)); overflow:hidden; }
.hero-grid { display:grid; gap:40px; align-items:center; padding:56px 0; }
@media (min-width:820px){ .hero-grid{ grid-template-columns:1fr 1fr; padding:80px 0; } }
.badge { display:inline-flex; align-items:center; gap:8px; background:var(--surface); padding:6px 14px; border-radius:9999px; font-size:14px; font-weight:800; color:var(--brand-700); box-shadow:0 1px 2px rgba(0,0,0,.06); border:1px solid var(--line); }
h1.hero-title { font-size:2.7rem; font-weight:900; line-height:1.05; letter-spacing:-0.02em; margin:16px 0 0; }
@media (min-width:820px){ h1.hero-title{ font-size:3.6rem; } }
.hero-title .accent { color:var(--brand-700); }
.hero-sub { margin-top:16px; max-width:34rem; font-size:1.125rem; color:var(--ink-700); }
.hero-cta { margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
.trust { margin-top:24px; display:flex; flex-wrap:wrap; gap:8px 24px; font-size:14px; font-weight:700; color:var(--ink-700); list-style:none; padding:0; }
.trust li { display:flex; align-items:center; gap:6px; }

/* trade chips */
.chips { display:flex; gap:10px; overflow-x:auto; padding:0 0 24px; }
.chip { display:flex; align-items:center; gap:8px; flex:0 0 auto; background:var(--surface); padding:10px 16px; border-radius:9999px; font-size:14px; font-weight:800; box-shadow:0 1px 2px rgba(0,0,0,.05); border:1px solid var(--line); }
.chip .emoji { font-size:18px; }

/* sections */
section.band { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); padding:64px 0; }
section.pad { padding:64px 0; }
h2.sec { text-align:center; font-size:2rem; font-weight:900; letter-spacing:-0.01em; margin:0; }
p.sec-sub { text-align:center; color:var(--ink-700); margin-top:8px; }
.grid3 { display:grid; gap:24px; margin-top:40px; }
@media (min-width:768px){ .grid3{ grid-template-columns:repeat(3,1fr); } }
.grid-feat { display:grid; gap:20px; margin-top:40px; }
@media (min-width:640px){ .grid-feat{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid-feat{ grid-template-columns:repeat(3,1fr); } }
.card { border:1px solid var(--line); border-radius:16px; background:var(--bg); padding:24px; transition:transform .18s ease, box-shadow .18s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 12px 30px -12px rgba(0,0,0,.2); }
.card.on-surface { background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.ico { display:grid; place-items:center; height:44px; width:44px; border-radius:12px; background:var(--brand-50); color:var(--brand-700); }
.step-top { display:flex; align-items:center; gap:12px; }
.step-n { font-size:14px; font-weight:800; color:var(--ink-400); }
.card h3 { margin:16px 0 0; font-size:1.25rem; font-weight:800; }
.card p { margin:8px 0 0; color:var(--ink-700); }
.feat h3 { font-size:1.05rem; margin-top:16px; }
.feat p { margin-top:6px; }

/* pricing */
.price-wrap { max-width:28rem; margin:32px auto 0; text-align:center; }
.price-card { border:2px solid var(--brand-700); border-radius:24px; background:var(--bg); padding:32px; box-shadow:0 12px 30px -12px rgba(0,0,0,.2); }
.price-kicker { font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-600); }
.price-amt { font-size:3rem; font-weight:900; margin:8px 0 0; }
.price-amt span { font-size:1.25rem; font-weight:800; color:var(--ink-400); }
.price-note { margin:4px 0 0; color:var(--ink-700); }
.price-list { margin:24px 0 0; padding:0; list-style:none; text-align:left; }
.price-list li { display:flex; align-items:flex-start; gap:10px; font-weight:700; margin-top:12px; }
.price-list li svg { flex:0 0 auto; margin-top:2px; color:var(--handled); }
.price-card .btn-primary { width:100%; justify-content:center; border-radius:12px; margin-top:28px; padding:14px; }

/* referral */
.refer { background:var(--brand-800); color:#fff; padding:56px 0; }
.refer-inner { max-width:56rem; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 20px; }
.refer .ico-lg { display:grid; place-items:center; height:48px; width:48px; border-radius:16px; background:var(--accent-500); color:#fff; }
.refer h2 { font-size:2rem; font-weight:900; margin:0; }
.refer p { max-width:36rem; font-size:1.125rem; color:rgba(255,255,255,.82); margin:0; }
.refer .btn { background:var(--accent-500); color:var(--ink-900); border-radius:12px; padding:14px 24px; margin-top:8px; }
.refer .btn:hover { background:var(--accent-600); }

/* footer */
footer.site { border-top:1px solid var(--line); background:var(--bg); padding:32px 0 40px; }
.foot-inner { display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:space-between; font-size:14px; color:var(--ink-700); }
@media (min-width:640px){ .foot-inner{ flex-direction:row; } }
.foot-links a { font-weight:700; margin-left:18px; }
.foot-links a:first-child { margin-left:0; }
.foot-links a:hover { color:var(--brand-700); }

/* footer solutions — sitewide link list to every trade/feature landing page,
   present on every page (not just the homepage) so search traffic that lands
   on any one page can reach the rest of the site, not just its 2-3 siblings. */
.foot-solutions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; justify-content:center; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line); font-size:13px; }
.foot-solutions-label { font-weight:800; color:var(--ink-900); }
.foot-solutions a { font-weight:600; color:var(--ink-700); }
.foot-solutions a:hover { color:var(--brand-700); }
@media (min-width:640px){ .foot-solutions{ justify-content:flex-start; } }

/* hero device */
.device { margin:0 auto; width:100%; max-width:24rem; }
.animate-float { animation: floatY 4s ease-in-out infinite; }
.ringer { margin:0 auto 16px; display:flex; width:fit-content; align-items:center; gap:12px; border-radius:9999px; background:var(--ink-900); color:#fff; padding:10px 20px; box-shadow:0 10px 25px -8px rgba(0,0,0,.35); }
.ring-badge { position:relative; display:grid; place-items:center; height:36px; width:36px; border-radius:9999px; background:var(--brand-700); }
.pulse-ring { position:absolute; inset:0; border-radius:9999px; border:3px solid var(--brand-700); animation:pulseRing 1.8s ease-out infinite; }
.ring-bell { animation: ring 2.4s ease-in-out infinite; transform-origin: top center; }
.dots { margin-left:4px; display:flex; gap:4px; }
.dots span { height:6px; width:6px; border-radius:9999px; }
.msg-card { border:1px solid var(--line); border-radius:24px; background:var(--surface); padding:20px; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); }
.msg-head { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); padding-bottom:12px; font-size:14px; font-weight:800; color:var(--ink-700); }
.msg-body { padding:16px 0; font-size:15px; }
.msg-body p { margin:0 0 10px; }
.msg-body .strong { font-weight:800; }
.msg-actions { display:flex; gap:8px; border-top:1px solid var(--line); padding-top:12px; }
.pill { display:inline-flex; align-items:center; gap:6px; border-radius:10px; padding:8px 12px; font-size:14px; font-weight:800; }
.pill-red { background:var(--brand-700); color:#fff; }
.pill-ghost { border:1px solid var(--line); color:var(--ink-700); }

@keyframes fadeUp { from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none; } }
@keyframes floatY { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
@keyframes ring { 0%,60%,100%{ transform:rotate(0);} 10%,30%,50%{ transform:rotate(-14deg);} 20%,40%{ transform:rotate(14deg);} }
@keyframes pulseRing { 0%{ transform:scale(.75); opacity:.55;} 100%{ transform:scale(2.4); opacity:0;} }
.animate-fade-up { animation: fadeUp .6s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .animate-float, .animate-fade-up, .ring-bell, .pulse-ring { animation:none !important; }
}

/* FAQ (used on the homepage and trade landing pages; visible text must match
   the page's FAQPage JSON-LD, so don't restyle this into hidden/truncated text) */
.faq { max-width:760px; margin:40px auto 0; }
.faq details { border-bottom:1px solid var(--line); padding:18px 0; }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:800; font-size:1.05rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-size:1.5rem; font-weight:400; color:var(--brand-700); flex:0 0 auto; }
.faq details[open] summary::after { content:'\2212'; }
.faq details p { margin:12px 0 0; color:var(--ink-700); }

/* trade landing pages: simple non-animated hero sample (no ringer/pulse — the
   animated device stays a homepage-only flourish) + a short pain-points row +
   a closing cross-link band to sibling trade pages */
.hero-sample { margin:0 auto; width:100%; max-width:24rem; }
.also-serve { padding:48px 0; text-align:center; }
.also-serve h2 { font-size:1.3rem; font-weight:900; margin:0; }
.also-links { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:20px; }
.also-links a { background:var(--surface); border:1px solid var(--line); border-radius:9999px; padding:10px 18px; font-weight:700; font-size:14px; }
.also-links a:hover { color:var(--brand-700); border-color:var(--brand-700); }

/* language switcher — flag is decoration, the code carries the meaning.
   A flag names a country, not a language: our Spanish-speaking visitors are
   mostly US tradespeople, to whom a Spain flag is not "their" Spanish. The
   two-letter code disambiguates; the flag only aids glanceability. */
.langs { display:flex; align-items:center; gap:4px; }
.langs a {
  display:inline-flex; align-items:center; gap:4px;
  min-height:34px; padding:0 8px; border-radius:8px;
  font-size:13px; font-weight:800; color:var(--ink-700);
  border:1px solid var(--line); background:var(--bg);
}
.langs a:hover { background:var(--surface); color:var(--brand-700); }
.langs a[aria-current="true"] { background:var(--brand-700); color:#fff; border-color:var(--brand-700); }
.langs .flag { font-size:14px; line-height:1; }
@media (max-width:520px){ nav.links { gap:10px; } .langs a { padding:0 6px; } }