/* ============================================================
   ARKHOS — Coastal Bridge design system
   White sand · sky · aqua · electric blue · deep navy.
   Calm, precise, premium — and alive. Light is the default;
   dark = coastal night via [data-theme="dark"].
   ============================================================ */

:root,
:root[data-theme="light"] {
  --bg: #f6f9fc;
  --bg2: #eef6fa;
  --bgs: rgba(252, 254, 255, 0.82);
  --sf: #ffffff;
  --sf2: #f1f7fb;
  --sf3: #e7f2f8;
  --bd: #dbe7ef;
  --bdh: #b9d3e2;
  --tx: #0c2340;
  --txd: #3d5a76;
  --txm: #6d8499;
  --ac: #0ea5e9;
  --ach: #0284c7;
  --ac2: #38bdf8;
  --acg: rgba(14, 165, 233, 0.12);
  --gn: #0e9f6e;
  --gng: rgba(14, 159, 110, 0.12);
  --am: #0e7490;
  --amg: rgba(14, 116, 144, 0.10);
  --pp: #06b6d4;
  --ppg: rgba(6, 182, 212, 0.10);
  --rd: #e11d48;
  --grad1: #0284c7;
  --grad2: #0ea5e9;
  --grad3: #2dd4bf;
  --sc: 0 1px 2px rgba(12, 35, 64, 0.05), 0 2px 10px rgba(12, 74, 110, 0.05);
  --sc-lg: 0 24px 60px -20px rgba(12, 74, 110, 0.22), 0 6px 18px rgba(12, 35, 64, 0.06);
  --shadow: var(--sc-lg);
  --ring: 0 0 0 3px rgba(14, 165, 233, 0.25);
  --frame-top: #f1f7fb;
  --wrap: 1180px;
  --f-display: "Outfit", "DM Sans", system-ui, sans-serif;
  --f-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --f-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hero-glow:
    radial-gradient(55% 55% at 78% -6%, rgba(56, 189, 248, 0.20), transparent 65%),
    radial-gradient(45% 45% at 8% 18%, rgba(191, 227, 239, 0.55), transparent 62%),
    radial-gradient(50% 60% at 60% 110%, rgba(45, 212, 191, 0.10), transparent 60%);
}
:root[data-theme="dark"] {
  --bg: #071a2e;
  --bg2: #0a2138;
  --bgs: rgba(7, 26, 46, 0.80);
  --sf: #0d2843;
  --sf2: #123356;
  --sf3: #173d64;
  --bd: rgba(191, 227, 239, 0.14);
  --bdh: rgba(191, 227, 239, 0.26);
  --tx: #eaf6fc;
  --txd: #a9c7db;
  --txm: #7093ac;
  --ac: #38bdf8;
  --ach: #7dd3fc;
  --ac2: #7dd3fc;
  --acg: rgba(56, 189, 248, 0.16);
  --gn: #34d399;
  --gng: rgba(52, 211, 153, 0.15);
  --am: #22d3ee;
  --amg: rgba(34, 211, 238, 0.13);
  --pp: #22d3ee;
  --ppg: rgba(34, 211, 238, 0.12);
  --rd: #fb7185;
  --grad1: #38bdf8;
  --grad2: #7dd3fc;
  --grad3: #2dd4bf;
  --sc: 0 8px 30px rgba(2, 12, 24, 0.35);
  --sc-lg: 0 20px 55px rgba(2, 12, 24, 0.55);
  --shadow: var(--sc-lg);
  --ring: 0 0 0 3px rgba(56, 189, 248, 0.24);
  --frame-top: #123356;
  --hero-glow:
    radial-gradient(55% 55% at 78% -6%, rgba(56, 189, 248, 0.18), transparent 65%),
    radial-gradient(50% 60% at 8% 100%, rgba(45, 212, 191, 0.10), transparent 60%);
}

/* ============================================================
   BASE COMPONENTS (shared by every page)
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip (not hidden) kills horizontal pinch-pan / descuadre without creating a
     scroll container, so the sticky nav keeps working. Root causes fixed above. */
  overflow-x: clip;
}
h1, h2, h3, h4 {
  font-family: "Outfit", "DM Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--tx);
  line-height: 1.12;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--acg); }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 12px; top: 12px; background: var(--sf); padding: 10px 14px; border-radius: 10px; z-index: 100; box-shadow: var(--sc); }

/* ---------- buttons (product primary blue) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--ac); color: #fff; box-shadow: 0 2px 8px var(--acg); }
.btn-primary:hover { background: var(--ach); transform: translateY(-1px); box-shadow: 0 6px 18px var(--acg); }
.btn-ghost { background: var(--sf); color: var(--tx); border-color: var(--bd); }
.btn-ghost:hover { border-color: var(--bdh); transform: translateY(-1px); }
.btn-sm { padding: 9px 16px; font-size: 14px; border-radius: 10px; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bgs); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bd);
}
.nav-in { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: "Outfit", sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
/* Provisional wordmark — pure-word logo (ARKO-style thin geometric caps),
   replaces the old .brand-mark arch. Inherits theme colour via currentColor. */
.brand-logo { height: 23px; width: auto; display: block; flex: none; overflow: visible; }
.footer .brand-logo { height: 22px; }
.brand-mark {
  width: 28px; height: 28px; flex: none;
  background: url("logo-mark.svg") center / contain no-repeat;
  filter: drop-shadow(0 4px 10px rgba(14, 165, 233, 0.35));
}
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.nav-links a { color: var(--txd); font-size: 14.5px; font-weight: 500; padding: 8px 11px; border-radius: 9px; transition: background .14s, color .14s; }
.nav-links a:hover { background: var(--sf2); color: var(--tx); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tgl {
  width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--bd);
  background: var(--sf); color: var(--txd); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .14s, color .14s, background .14s;
}
.tgl:hover { border-color: var(--bdh); color: var(--tx); }
.tgl svg { width: 19px; height: 19px; }
.tgl .moon { display: none; }
:root[data-theme="dark"] .tgl .sun { display: none; }
:root[data-theme="dark"] .tgl .moon { display: block; }

/* ---------- section rhythm ---------- */
section { position: relative; }
.band { padding: 76px 0; }
.band.alt { background: var(--sf); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ac);
}
.kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--ac); opacity: .6; }
.center { text-align: center; }
.sec-head { max-width: 760px; margin: 0 auto 44px; }
.sec-head.center { display: flex; flex-direction: column; align-items: center; }
.sec-title { font-size: clamp(28px, 4vw, 40px); margin: 14px 0 0; }
.lede { color: var(--txd); font-size: 18px; line-height: 1.6; }
.lede.small { font-size: 16.5px; }
.sec-head .lede { margin-top: 16px; }
em { font-style: normal; color: var(--ac); }

/* ---------- hero ---------- */
.hero { padding: 60px 0 72px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-glow); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 52px; align-items: center; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--sf); border: 1px solid var(--bd); color: var(--txd);
  font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; box-shadow: var(--sc);
}
.badge svg { width: 14px; height: 14px; color: var(--ac); }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gn); box-shadow: 0 0 0 3px var(--gng); }
.eyebrow { color: var(--ac); font-weight: 600; font-size: 14.5px; letter-spacing: .01em; margin-bottom: 10px; }
h1.hero-h { font-size: clamp(34px, 5.2vw, 56px); letter-spacing: -0.03em; }
h1.hero-h .grad { background: linear-gradient(100deg, var(--ac), var(--pp)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lede { margin-top: 20px; max-width: 540px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.microtrust { color: var(--txm); font-size: 13.5px; margin-top: 16px; }
.microtrust strong { color: var(--txd); }
.hero-stats { display: flex; gap: 30px; margin-top: 34px; flex-wrap: wrap; }
.hero-stats > div { display: flex; flex-direction: column; }
.hero-stats b { font-family: "Outfit", sans-serif; font-size: 26px; font-weight: 800; color: var(--tx); letter-spacing: -0.02em; }
.hero-stats span { font-size: 13px; color: var(--txm); }

/* ---------- browser frame (mirrors product card language) ---------- */
.frame {
  border: 1px solid var(--bd); border-radius: 16px; overflow: hidden;
  background: var(--sf); box-shadow: var(--sc-lg);
}
.frame-top {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: var(--frame-top); border-bottom: 1px solid var(--bd);
}
.frame-dots { display: flex; gap: 6px; }
.frame-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--bdh); display: block; }
.frame-url {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 auto;
  font-size: 12.5px; color: var(--txm); background: var(--sf); border: 1px solid var(--bd);
  padding: 4px 14px; border-radius: 8px; font-family: "DM Sans", sans-serif;
}
.frame-url svg { width: 12px; height: 12px; }
.frame-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--gn); }
.frame-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gn); box-shadow: 0 0 0 3px var(--gng); }
.frame-img { width: 100%; height: auto; display: block; background: var(--sf2); }
.hero-visual { position: relative; }

/* ---------- marquee ---------- */
.marquee { padding: 26px 0; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); background: var(--sf); overflow: hidden; }
.marquee-label { text-align: center; color: var(--txm); font-size: 13px; font-weight: 500; margin-bottom: 16px; }
.mq-mask { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; gap: 12px; width: max-content; animation: mq 34s linear infinite; }
@keyframes mq { to { transform: translateX(-50%); } }
.chip {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--sf2); border: 1px solid var(--bd); color: var(--txd);
  font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 999px;
}
.chip svg { width: 15px; height: 15px; color: var(--txm); }
.chip.live { color: var(--tx); border-color: var(--ac); }
.chip.live svg { color: var(--ac); }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }

/* ---------- generic card grids ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 24px; box-shadow: var(--sc);
}
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { color: var(--txd); font-size: 15px; }

.grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 24px; box-shadow: var(--sc); }
.feat .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--acg); color: var(--ac); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.feat .ic svg { width: 21px; height: 21px; }
.feat h3 { font-size: 17px; margin-bottom: 7px; }
.feat > p { color: var(--txd); font-size: 14.5px; }
.feat-ul { list-style: none; margin: 14px 0 0; padding: 0; }
.feat-ul li { position: relative; padding-left: 20px; font-size: 13.5px; color: var(--txm); margin-top: 6px; }
.feat-ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--acg); border: 2px solid var(--ac); }

/* ---------- voice dictation band ---------- */
.voice-sec { padding: 12px 0 44px; }
.voice-band { display: flex; align-items: center; gap: 24px; max-width: 900px; margin: 0 auto; background: var(--sf); border: 1px solid var(--bd); border-radius: 16px; padding: 26px 30px; box-shadow: var(--sc); }
.voice-band .voice-ic { width: 56px; height: 56px; flex: none; border-radius: 14px; background: var(--acg); color: var(--ac); display: flex; align-items: center; justify-content: center; }
.voice-band .voice-ic svg { width: 28px; height: 28px; }
.voice-band h3 { font-size: 19px; margin-bottom: 6px; }
.voice-band p { color: var(--txd); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 560px) { .voice-band { flex-direction: column; text-align: center; padding: 24px 20px; gap: 16px; } }

/* ---------- product tour rows ---------- */
.tour-row { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; margin-top: 40px; }
.tour-row.flip .tour-copy { order: 2; }
.tour-row:first-of-type { margin-top: 0; }
.t-step { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--txm); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.t-step .tn { width: 24px; height: 24px; border-radius: 8px; background: var(--acg); color: var(--ac); display: inline-flex; align-items: center; justify-content: center; font-family: "Outfit", sans-serif; font-weight: 700; font-size: 13px; }
.tour-copy h3 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 12px; }
.tour-copy > p { color: var(--txd); font-size: 16px; }
.t-feat { list-style: none; margin: 18px 0 0; padding: 0; }
.t-feat li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--txd); margin-top: 10px; }
.t-feat li svg { width: 18px; height: 18px; flex: none; color: var(--gn); margin-top: 2px; }

/* small gallery */
.shot-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.shot-cap { margin-top: 12px; text-align: center; }
.shot-cap b { font-family: "Outfit", sans-serif; font-size: 15px; }
.shot-cap span { display: block; color: var(--txm); font-size: 13.5px; margin-top: 2px; }

/* ---------- verticals ---------- */
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vcard { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 20px; box-shadow: var(--sc); }
.vcard-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vcard-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--sf2); border: 1px solid var(--bd); color: var(--ac); display: flex; align-items: center; justify-content: center; flex: none; }
.vcard-ic svg { width: 18px; height: 18px; }
.vcard-top h3 { font-size: 16px; margin-right: auto; }
.vcard p { color: var(--txd); font-size: 14px; }
.v-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.v-pill.live { background: var(--gng); color: var(--gn); }
.v-pill.soon { background: var(--sf2); color: var(--txm); border: 1px solid var(--bd); }
.v-mode { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; color: var(--txm); }
.v-mode svg { width: 14px; height: 14px; }
.vcard-live { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac), var(--sc); }
.vcard-add { border-style: dashed; background: transparent; }
.vmore-cta { display: inline-block; margin-top: 12px; color: var(--ac); font-weight: 600; font-size: 14px; }

/* ---------- steps ---------- */
.steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.steps li { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 22px; box-shadow: var(--sc); position: relative; }
.steps .num { font-family: "Outfit", sans-serif; font-weight: 800; font-size: 13px; color: var(--ac); }
.steps .ic-top { width: 40px; height: 40px; border-radius: 11px; background: var(--acg); color: var(--ac); display: flex; align-items: center; justify-content: center; margin: 8px 0 12px; }
.steps .ic-top svg { width: 20px; height: 20px; }
.steps h3 { font-size: 17px; margin-bottom: 6px; }
.steps p { color: var(--txd); font-size: 14px; }

/* ---------- AI approve-first ---------- */
.ai-explain { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
.ai-steps { list-style: none; margin: 22px 0 0; padding: 0; }
.ai-steps li { display: flex; gap: 14px; margin-top: 16px; }
.ai-steps .b { width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--acg); color: var(--ac); font-family: "Outfit", sans-serif; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.ai-steps li span:last-child { font-size: 14.5px; color: var(--txd); }
.ai-steps b { display: block; color: var(--tx); font-size: 15px; margin-bottom: 2px; }
.ai-guard { background: var(--sf); border: 1px solid var(--bd); border-radius: 16px; padding: 26px; box-shadow: var(--sc); }
.gh { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.gh svg { width: 22px; height: 22px; color: var(--ac); }
.gh h3 { font-size: 19px; }
.ai-guard > p { color: var(--txd); font-size: 15px; }
.locked { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.locked span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--txd); background: var(--sf2); border: 1px solid var(--bd); border-radius: 10px; padding: 10px 12px; }
.locked svg { width: 15px; height: 15px; color: var(--am); flex: none; }

/* ---------- integrations ---------- */
.int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.int-cat { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 22px; box-shadow: var(--sc); }
.int-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.int-h svg { width: 20px; height: 20px; color: var(--ac); }
.int-h h3 { font-size: 16px; }
.int-cat p { color: var(--txd); font-size: 14px; margin-bottom: 12px; }
.int-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.int-chips span { font-size: 12.5px; color: var(--txm); background: var(--sf2); border: 1px solid var(--bd); padding: 4px 10px; border-radius: 999px; }
.byo { text-align: center; color: var(--txd); font-size: 15px; margin-top: 28px; max-width: 700px; margin-left: auto; margin-right: auto; }

/* ---------- proof / founders ---------- */
.proof-in { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.quote { margin: 0; background: var(--sf); border: 1px solid var(--bd); border-left: 3px solid var(--ac); border-radius: 14px; padding: 26px; box-shadow: var(--sc); }
.quote blockquote { margin: 0; font-size: 18px; line-height: 1.5; color: var(--tx); font-family: "Outfit", sans-serif; font-weight: 500; }
.quote figcaption { margin-top: 14px; color: var(--txm); font-size: 14px; }
.founder-panel { background: var(--sf); border: 1px solid var(--bd); border-radius: 16px; padding: 30px; box-shadow: var(--sc); max-width: 760px; margin: 32px auto 0; text-align: center; }
.founder-panel h3 { font-size: 22px; margin: 6px 0 12px; }
.founder-panel p { color: var(--txd); font-size: 15px; margin-bottom: 20px; }

/* ---------- pricing ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.plan { background: var(--sf); border: 1px solid var(--bd); border-radius: 16px; padding: 26px; box-shadow: var(--sc); display: flex; flex-direction: column; }
.plan-featured { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac), var(--sc-lg); position: relative; }
.plan-tag { position: absolute; top: -12px; left: 26px; background: var(--ac); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.plan-name { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 15px; color: var(--txd); }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin: 8px 0 4px; }
.plan-price .amt { font-family: "Outfit", sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -0.02em; }
.plan-price .per { color: var(--txm); font-size: 15px; }
.plan-for { color: var(--txm); font-size: 14px; margin-bottom: 16px; }
.plan ul { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.plan li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--txd); margin-top: 10px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--gng); }
.plan li::after { content: ""; position: absolute; left: 4px; top: 9px; width: 7px; height: 4px; border-left: 2px solid var(--gn); border-bottom: 2px solid var(--gn); transform: rotate(-45deg); }
.plan-cta { width: 100%; }

.cmp-wrap { overflow-x: auto; margin-top: 36px; border: 1px solid var(--bd); border-radius: 14px; box-shadow: var(--sc); }
.cmp { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--sf); font-size: 14.5px; }
.cmp th, .cmp td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--bd); }
.cmp thead th { background: var(--sf2); font-family: "Outfit", sans-serif; font-size: 13px; color: var(--txd); }
.cmp th.hl { color: var(--ac); }
.cmp .no { color: var(--txm); }
.cmp .col-os { background: var(--acg); font-weight: 600; }
.cmp tr:last-child td { border-bottom: none; }
.yes { display: inline-flex; align-items: center; gap: 6px; color: var(--gn); font-weight: 600; }
.yes svg { width: 15px; height: 15px; }
.os-head { display: inline-flex; align-items: center; gap: 7px; }
.os-mark { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--ac), var(--pp)); display: inline-block; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--sf); border-top: 1px solid var(--bd); }
.cta-in { max-width: 620px; margin: 0 auto; text-align: center; }
.cta-in h2 { font-size: clamp(26px, 4vw, 36px); }
.cta-in p { color: var(--txd); font-size: 17px; margin: 14px 0 24px; }
.signup { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.signup input { flex: 1; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--bd); background: var(--bg); color: var(--tx); font-family: inherit; font-size: 15px; }
.signup input:focus { outline: none; box-shadow: var(--ring); border-color: var(--ac); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.proofstrip { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 26px; }
.ps { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--txd); }
.ps svg { width: 16px; height: 16px; color: var(--gn); }
.ps b { color: var(--tx); }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin: 0 auto; }
details { background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; padding: 4px 20px; margin-top: 12px; box-shadow: var(--sc); }
summary { cursor: pointer; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 16px; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 22px; color: var(--ac); font-weight: 400; line-height: 1; }
details[open] summary::after { content: "\2212"; }
details p { color: var(--txd); font-size: 15px; padding: 0 0 16px; }

/* ---------- footer ---------- */
.footer { background: var(--sf); border-top: 1px solid var(--bd); padding: 40px 0; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.foot-links a { color: var(--txd); font-size: 14px; padding: 6px 10px; border-radius: 8px; }
.foot-links a:hover { background: var(--sf2); color: var(--tx); }
.foot-in > p { width: 100%; color: var(--txm); font-size: 13px; margin-top: 6px; }

.save-note { text-align: center; color: var(--txd); font-size: 15px; margin-top: 26px; }
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.stat { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 22px; text-align: center; box-shadow: var(--sc); }
.stat b { display: block; font-family: "Outfit", sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.02em; }
.stat span { color: var(--txm); font-size: 13px; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .nav-links { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero p.lede { max-width: none; }
  .tour-row, .ai-explain, .proof-in { grid-template-columns: 1fr; gap: 28px; }
  .tour-row.flip .tour-copy { order: 0; }
  .cards3, .grid6, .vgrid, .int-grid, .pricing { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .statband { grid-template-columns: 1fr 1fr; }
  .shot-duo { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .wrap { padding: 0 18px; }
  .band { padding: 52px 0; }
  .hero { padding: 40px 0 52px; }
  .cards3, .grid6, .vgrid, .int-grid, .pricing, .steps, .statband, .locked { grid-template-columns: 1fr; }
  .hero-stats { gap: 22px; }
  .signup { flex-direction: column; }
  .signup .btn { width: 100%; }
  .foot-links { margin-left: 0; }
  .sticky-cta { display: flex !important; }
}

/* sticky mobile CTA */
.sticky-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--bgs); backdrop-filter: blur(12px); border-top: 1px solid var(--bd); }
.sticky-cta span { font-size: 13px; color: var(--txd); }

/* ===== ALIVE: aurora accents, floating UI chips, staggered reveal, gallery ===== */
.aurora { position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; }
.aurora.a1 { width: 420px; height: 420px; top: -120px; right: -80px; background: radial-gradient(circle at 30% 30%, rgba(38,128,235,.28), transparent 68%); animation: drift 22s ease-in-out infinite; }
.aurora.a2 { width: 360px; height: 360px; bottom: -140px; left: -100px; background: radial-gradient(circle at 60% 40%, rgba(124,92,255,.22), transparent 68%); animation: drift 28s ease-in-out infinite reverse; }
:root[data-theme="dark"] .aurora.a1 { background: radial-gradient(circle at 30% 30%, rgba(56,189,248,.30), transparent 68%); }
:root[data-theme="dark"] .aurora.a2 { background: radial-gradient(circle at 60% 40%, rgba(124,92,255,.28), transparent 68%); }
.hero, .cta-band { position: relative; overflow: hidden; }
.hero .wrap, .cta-band .wrap { position: relative; z-index: 2; }
@keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-18px) scale(1.08); } }

.hero-visual { position: relative; z-index: 3; }
.float-chip { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px; background: var(--sf); border: 1px solid var(--bd); box-shadow: var(--sc-lg, 0 12px 34px rgba(15,23,42,.16)); font-size: 12.5px; font-weight: 600; color: var(--tx); white-space: nowrap; animation: floaty 6s ease-in-out infinite; }
.float-chip svg { width: 16px; height: 16px; }
.float-chip .fc-ic { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.float-chip small { display: block; font-weight: 500; font-size: 10.5px; color: var(--txm); }
.fc-green { background: var(--gng); color: var(--gn); }
.fc-blue { background: var(--acg); color: var(--ac); }
.fc-purple { background: rgba(124,92,255,.14); color: var(--pp); }
.fc-tl { top: 12%; left: -34px; animation-delay: .2s; }
.fc-br { bottom: 16%; right: -30px; animation-delay: 1.4s; }
.fc-ml { top: 52%; left: -46px; animation-delay: 2.6s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* staggered reveal for grids */
.stagger > .reveal { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: .07s; }
.stagger > .reveal:nth-child(3) { transition-delay: .14s; }
.stagger > .reveal:nth-child(4) { transition-delay: .21s; }
.stagger > .reveal:nth-child(5) { transition-delay: .28s; }
.stagger > .reveal:nth-child(6) { transition-delay: .35s; }

/* mini screenshot gallery band */
.shot-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 10px; }
.shot-gallery .frame { margin: 0; transition: transform .2s ease, box-shadow .2s ease; }
.shot-gallery .frame:hover { transform: translateY(-4px); box-shadow: var(--sc-lg, 0 18px 44px rgba(15,23,42,.18)); }
.gcap { display: block; margin-top: 10px; font-size: 13px; color: var(--txm); text-align: center; }
.gcap b { color: var(--tx); font-family: "Outfit", sans-serif; }

@media (max-width: 940px) { .shot-gallery { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .float-chip { display: none; } }
@media (prefers-reduced-motion: reduce) { .aurora, .float-chip { animation: none; } }
  

/* ---- service page ---- */
.svc-hero-badges .badge svg { color: var(--ac); }
.run-strip { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.run-strip span { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--txd); background:var(--sf); border:1px solid var(--bd); padding:8px 13px; border-radius:999px; box-shadow:var(--sc); }
.run-strip svg { width:15px; height:15px; color:var(--ac); }
.rel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px; }
.rel-card { display:flex; align-items:center; gap:11px; background:var(--sf); border:1px solid var(--bd); border-radius:13px; padding:15px 16px; box-shadow:var(--sc); transition:transform .14s, border-color .14s, box-shadow .16s; }
.rel-card:hover { transform:translateY(-2px); border-color:var(--ac); box-shadow:var(--sc-lg); }
.rel-ic { width:36px; height:36px; border-radius:10px; background:var(--acg); color:var(--ac); display:flex; align-items:center; justify-content:center; flex:none; font-size:18px; }
.rel-card b { font-family:"Outfit",sans-serif; font-size:14.5px; display:block; }
.rel-card span { font-size:12px; color:var(--txm); }
/* ---- solutions hub ---- */
.sol-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sol-card { display:flex; flex-direction:column; background:var(--sf); border:1px solid var(--bd); border-radius:16px; padding:22px; box-shadow:var(--sc); transition:transform .15s, border-color .15s, box-shadow .18s; }
.sol-card:hover { transform:translateY(-3px); border-color:var(--ac); box-shadow:var(--sc-lg); }
.sol-top { display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.sol-ic { width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--acg),var(--ppg)); color:var(--ac); display:flex; align-items:center; justify-content:center; flex:none; font-size:21px; }
.sol-card h3 { font-size:17px; margin-right:auto; }
.sol-card p { color:var(--txd); font-size:14px; flex:1; }
.sol-more { margin-top:14px; color:var(--ac); font-weight:600; font-size:14px; }
/* ---- integrations page ---- */
.integ-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.integ-cat { background:var(--sf); border:1px solid var(--bd); border-radius:16px; padding:24px; box-shadow:var(--sc); }
.integ-head { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.integ-ic { width:40px; height:40px; border-radius:11px; background:var(--acg); color:var(--ac); display:flex; align-items:center; justify-content:center; flex:none; }
.integ-ic svg { width:20px; height:20px; }
.integ-head h3 { font-size:18px; }
.integ-cat > p { color:var(--txd); font-size:14.5px; margin:6px 0 16px; }
.integ-row { display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-top:1px solid var(--bd); }
.integ-logo { width:34px; height:34px; border-radius:9px; background:var(--sf2); border:1px solid var(--bd); display:flex; align-items:center; justify-content:center; flex:none; font-family:"Outfit",sans-serif; font-weight:800; font-size:14px; color:var(--tx); }
.integ-row .in-body b { font-family:"Outfit",sans-serif; font-size:14.5px; display:inline-flex; align-items:center; gap:8px; }
.integ-row .in-body p { color:var(--txd); font-size:13.5px; margin-top:2px; }
.in-pill { font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px 8px; border-radius:999px; }
.in-live { background:var(--gng); color:var(--gn); }
.in-soon { background:var(--amg); color:var(--am); }
/* ---- pricing page ---- */
.price-toggle-note { text-align:center; color:var(--txm); font-size:14px; margin-top:14px; }
.pill-live { font-family:"Outfit",sans-serif; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:linear-gradient(120deg,var(--gn),var(--ac)); color:#04120b; vertical-align:middle; margin-left:6px; }
.subhero { padding:64px 0 20px; }
@media (max-width:940px) {
  .integ-grid { grid-template-columns:1fr; }
  .sol-grid { grid-template-columns:1fr 1fr; }
  .rel-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px) {
  .sol-grid, .rel-grid { grid-template-columns:1fr; }
  .run-strip span { font-size:13px; }
}

/* ============================================================
   COASTAL LAYER — atmosphere, light, motion.
   Everything below refines the base components above.
   ============================================================ */

/* atmosphere: morning light over water, fixed behind everything */
body { position: relative; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 46% at 82% -8%, rgba(56, 189, 248, 0.10), transparent 62%),
    radial-gradient(56% 42% at -6% 30%, rgba(191, 227, 239, 0.35), transparent 60%),
    radial-gradient(60% 52% at 50% 112%, rgba(45, 212, 191, 0.07), transparent 60%);
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(70% 46% at 82% -8%, rgba(56, 189, 248, 0.08), transparent 62%),
    radial-gradient(60% 52% at 50% 112%, rgba(45, 212, 191, 0.06), transparent 60%);
}
/* fine sand grain — barely there, kills the "flat corporate" feel */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::after { opacity: .05; }

h1, h2, h3, h4 { letter-spacing: -0.025em; }
::selection { background: rgba(56, 189, 248, 0.30); color: var(--tx); }

/* buttons — rounded like beach pebbles, water-blue glow */
.btn { border-radius: 999px; font-family: var(--f-display); font-weight: 700; letter-spacing: .01em; padding: 13px 24px; }
.btn-sm { border-radius: 999px; padding: 9px 18px; }
.btn-primary {
  background: linear-gradient(135deg, var(--grad1), var(--grad2) 60%, var(--ac2));
  box-shadow: 0 10px 26px -10px rgba(14, 165, 233, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--ach), var(--ac) 60%, var(--ac2));
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(14, 165, 233, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-ghost { border-radius: 999px; }
.btn-ghost:hover { border-color: var(--ac); color: var(--ac); background: var(--acg); }

/* nav + brand */
.nav { border-bottom: 1px solid rgba(14, 165, 233, 0.12); }
.brand { color: var(--tx); }
/* .brand-mark styles unified above (SVG file) */
.nav-links a:hover { background: var(--acg); color: var(--ac); }

/* section rhythm — more air */
.band { padding: 92px 0; }
.band.alt {
  background: linear-gradient(180deg, var(--sf), var(--sf2));
  border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd);
}
:root[data-theme="dark"] .band.alt { background: linear-gradient(180deg, var(--sf), var(--bg2)); }
.kicker { color: var(--ach); letter-spacing: .1em; }
.kicker::before { width: 22px; background: linear-gradient(90deg, var(--grad2), var(--grad3)); opacity: 1; }
.sec-title { letter-spacing: -0.03em; }
em { color: var(--ach); }

/* gradient text — gulf water at noon */
h1.hero-h .grad, .grad {
  background: linear-gradient(105deg, var(--grad1), var(--grad2) 48%, var(--grad3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* hero */
.hero { padding: 72px 0 84px; }
h1.hero-h { font-size: clamp(36px, 5.4vw, 60px); }
.badge { border-radius: 999px; border-color: rgba(14, 165, 233, 0.22); box-shadow: 0 2px 10px -2px rgba(12, 74, 110, 0.10); }
.hero-stats b { font-family: var(--f-mono); font-size: 25px; letter-spacing: -0.01em; color: var(--ach); }

/* auroras — gulf light, not neon */
.aurora { opacity: .65; filter: blur(70px); }
.aurora.a1 { background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.34), transparent 68%); }
.aurora.a2 { background: radial-gradient(circle at 60% 40%, rgba(45, 212, 191, 0.26), transparent 68%); }
:root[data-theme="dark"] .aurora.a1 { background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.26), transparent 68%); }
:root[data-theme="dark"] .aurora.a2 { background: radial-gradient(circle at 60% 40%, rgba(45, 212, 191, 0.22), transparent 68%); }

/* browser frame — driftwood-smooth corners, water shadow */
.frame { border-radius: 20px; border-color: var(--bd); box-shadow: 0 30px 70px -24px rgba(12, 74, 110, 0.28), 0 6px 18px rgba(12, 35, 64, 0.06); }
.frame-dots i:nth-child(1) { background: var(--ac2); }
.frame-dots i:nth-child(2) { background: var(--grad3); }
.frame-dots i:nth-child(3) { background: var(--bdh); }

/* cards — lift on a cushion of water */
.card, .feat, .vcard, .int-cat, .steps li, .stat, .integ-cat, .sol-card, .rel-card, .plan, .ai-guard, .quote {
  border-radius: 18px;
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.card:hover, .feat:hover, .vcard:hover, .int-cat:hover, .steps li:hover, .stat:hover {
  transform: translateY(-3px);
  border-color: var(--bdh);
  box-shadow: 0 18px 40px -18px rgba(12, 74, 110, 0.25), 0 4px 12px rgba(12, 35, 64, 0.05);
}
.feat .ic, .steps .ic-top, .integ-ic, .rel-ic, .sol-ic, .vcard-ic {
  background: linear-gradient(140deg, var(--acg), var(--ppg));
  border: 1px solid rgba(14, 165, 233, 0.18);
  color: var(--ach);
  border-radius: 12px;
}
.t-step .tn, .ai-steps .b { background: linear-gradient(140deg, var(--acg), var(--ppg)); color: var(--ach); }

/* marquee chips — shells on a line */
.marquee { background: linear-gradient(180deg, var(--sf), var(--sf2)); padding: 30px 0; }
:root[data-theme="dark"] .marquee { background: linear-gradient(180deg, var(--sf), var(--bg2)); }
.chip { background: var(--sf); border-radius: 999px; box-shadow: var(--sc); }
.chip svg { color: var(--ac); }
.chip.live { border-color: var(--ac); color: var(--tx); background: var(--acg); }
.marquee:hover .mq-track { animation-play-state: paused; }

/* pricing */
.plan { border-radius: 22px; }
.plan-featured {
  border-color: var(--ac);
  box-shadow: 0 0 0 1px var(--ac), 0 30px 70px -28px rgba(14, 165, 233, 0.45);
}
.plan-tag { background: linear-gradient(120deg, var(--grad1), var(--grad2)); border-radius: 999px; }
.plan-price .amt { font-family: var(--f-mono); letter-spacing: -0.03em; }
.stat b { font-family: var(--f-mono); background: linear-gradient(120deg, var(--tx), var(--ach)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cmp .col-os { background: var(--acg); }

/* CTA band — dusk on the bridge: deep navy, aqua horizon.
   `.band.cta-band` (specificity 0,2,0) is required because several pages mark
   the CTA as `<section class="band alt cta-band">`: `.band.alt` (also 0,2,0,
   earlier in this file) would otherwise win the background and leave the
   light CTA text invisible on a light surface. This block sits AFTER
   `.band.alt`, so the specificity tie breaks in its favor. */
.band.cta-band, .cta-band {
  background:
    radial-gradient(80% 90% at 78% -20%, rgba(56, 189, 248, 0.22), transparent 60%),
    radial-gradient(70% 80% at 12% 120%, rgba(45, 212, 191, 0.16), transparent 60%),
    linear-gradient(180deg, #0c2340, #081a30);
  border-top: none;
}
.cta-band .cta-in h2, .cta-band h2 { color: #f2fafd; }
.cta-band .cta-in p, .cta-band p { color: #a9c7db; }
.cta-band .microtrust { color: #7d9cb5; }
.cta-band .microtrust strong { color: #bfe3ef; }
.cta-band .signup input {
  background: rgba(255, 255, 255, 0.07); border-color: rgba(191, 227, 239, 0.22); color: #f2fafd;
}
.cta-band .signup input::placeholder { color: #7d9cb5; }
.cta-band .signup input:focus { border-color: var(--ac2); }
.cta-band .btn-ghost { background: transparent; border-color: rgba(191, 227, 239, 0.32); color: #eaf6fc; }
.cta-band .btn-ghost:hover { border-color: var(--ac2); color: var(--ac2); background: rgba(56, 189, 248, 0.10); }
.cta-band .ps { color: #a9c7db; }
.cta-band .ps b { color: #f2fafd; }
.cta-band .aurora { opacity: .8; }

/* FAQ */
details { border-radius: 16px; transition: border-color .16s ease; }
details:hover { border-color: var(--bdh); }
details[open] { border-color: var(--ac); }
summary::after { color: var(--ac); }

/* footer — quiet shoreline */
.footer { background: linear-gradient(180deg, var(--sf), var(--sf2)); }
:root[data-theme="dark"] .footer { background: linear-gradient(180deg, var(--sf), var(--bg)); }

/* float chips */
.float-chip { border-radius: 14px; }
.fc-purple { background: var(--ppg); color: var(--pp); }

/* shot gallery hover */
.shot-gallery .frame:hover { transform: translateY(-5px) scale(1.005); box-shadow: 0 34px 76px -26px rgba(12, 74, 110, 0.34); }

/* pill-live readable on aqua */
.pill-live { background: linear-gradient(120deg, var(--grad2), var(--grad3)); color: #04263b; }

/* reveal: a touch more travel, water-ease */
.reveal { transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }

/* ============================================================
   TEMPLATE LAYER — classes used by the programmatic SEO pages
   (l/*.html), signup and the older page generation. Same
   coastal system, one stylesheet for every page.
   ============================================================ */

.section-title { font-family: var(--f-display); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.03em; max-width: 780px; margin: 0; }
.section-title.center { margin: 0 auto; text-align: center; }
.section-title em { font-style: normal; color: var(--ach); }
.section-title + .lede { margin-top: 16px; }
.hero .wrap > .lede, .hero-copy .lede { max-width: 620px; }
.hero h1 { font-size: clamp(34px, 5.2vw, 56px); letter-spacing: -0.03em; }
.eyebrow.center { text-align: center; }

.hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--hero-glow); }
.hero-in { position: relative; z-index: 2; }
.hero-in.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-copy { max-width: 620px; }
@media (max-width: 960px) { .hero-in.hero-grid { grid-template-columns: 1fr; gap: 44px; } }

/* staggered load reveal (plays once on paint) */
.load { opacity: 0; transform: translateY(16px); animation: rise .7s cubic-bezier(.22,.61,.36,1) forwards; }
.load.l1 { animation-delay: .05s; } .load.l2 { animation-delay: .13s; } .load.l3 { animation-delay: .21s; }
.load.l4 { animation-delay: .29s; } .load.l5 { animation-delay: .37s; } .load.l6 { animation-delay: .45s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .load { opacity: 1; transform: none; animation: none; } }

.loc-crumb { color: var(--txm); font-size: 13px; margin: 0 0 14px; }
.loc-crumb a { color: var(--txd); }
.loc-crumb a:hover { color: var(--ac); }

.ilinks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ilink {
  display: inline-block; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--bd);
  background: var(--sf); color: var(--txd); font-size: 14px; font-family: var(--f-display); font-weight: 600;
  box-shadow: var(--sc); transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
.ilink:hover { border-color: var(--ac); color: var(--ac); transform: translateY(-2px); }

.divider { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--bd) 18%, var(--bd) 82%, transparent); }
.mesh { position: relative; overflow: hidden; }
.mesh::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 60% at 85% 0%, rgba(56, 189, 248, 0.12), transparent 60%),
    radial-gradient(45% 55% at 5% 100%, rgba(45, 212, 191, 0.09), transparent 60%);
}
.mesh > .wrap { position: relative; z-index: 1; }

/* verticals pills (older generated pages) */
.verticals { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 44px auto 0; max-width: 900px; }
.vert {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--bd); background: var(--sf); font-family: var(--f-display); font-weight: 600; font-size: 15px;
  color: var(--tx); box-shadow: var(--sc); transition: transform .15s ease, border-color .2s ease; cursor: default;
}
.vert:hover { transform: translateY(-3px); border-color: var(--ac); }
.vert svg { width: 18px; height: 18px; color: var(--ac); }
.vert i { font-style: normal; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: linear-gradient(120deg, var(--grad2), var(--grad3)); color: #04263b; }
.vert[data-live="1"] { border-color: color-mix(in srgb, var(--gn) 55%, var(--bd)); }
.vert[data-live="1"] svg { color: var(--gn); }
.vert-more { background: transparent; border-style: dashed; color: var(--txd); box-shadow: none; }
.vsub { max-width: 640px; margin-left: auto; margin-right: auto; }
.microtrust.center { margin-top: 24px; }

/* ---------- dashboard mockup (SEO hero visual) ---------- */
.dash-wrap { position: relative; animation: floaty 7s ease-in-out infinite; }
.dash {
  position: relative; border-radius: 20px; border: 1px solid var(--bd);
  background: linear-gradient(180deg, var(--sf), var(--sf2));
  box-shadow: 0 34px 80px -28px rgba(12, 74, 110, 0.30), 0 6px 18px rgba(12, 35, 64, 0.06); overflow: hidden;
}
.dash::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 50% at 50% -10%, rgba(56, 189, 248, 0.10), transparent 60%); }
.dash-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--bd); background: var(--frame-top); }
.dash-dots { display: flex; gap: 6px; }
.dash-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--bdh); }
.dash-dots i:nth-child(1) { background: var(--ac2); }
.dash-dots i:nth-child(2) { background: var(--grad3); }
.dash-url { margin-left: 8px; font-family: var(--f-body); font-size: 11.5px; color: var(--txm); display: inline-flex; align-items: center; gap: 6px; }
.dash-url .lock { width: 11px; height: 11px; color: var(--gn); }
.dash-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; padding: 16px; }
@media (max-width: 520px) { .dash-body { grid-template-columns: 1fr; } }
.dash-left { display: flex; flex-direction: column; gap: 12px; }
.dash-h { display: flex; align-items: center; justify-content: space-between; }
.dash-h b { font-family: var(--f-display); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.dash-h span { font-size: 10.5px; color: var(--txm); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi { border: 1px solid var(--bd); border-radius: 12px; padding: 10px; background: var(--sf); }
.kpi .n { font-family: var(--f-mono); font-weight: 700; font-size: 17px; color: var(--tx); line-height: 1; }
.kpi .l { font-size: 9.5px; color: var(--txm); margin-top: 5px; text-transform: uppercase; letter-spacing: .06em; }
.kpi .up { color: var(--gn); font-size: 9.5px; font-weight: 700; }
.spark { border: 1px solid var(--bd); border-radius: 12px; padding: 12px; background: var(--sf); }
.spark svg { display: block; width: 100%; height: 52px; }
.joblist { display: flex; flex-direction: column; gap: 7px; }
.jobrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--bd); border-radius: 11px; background: var(--sf); }
.jobrow .av { width: 26px; height: 26px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 12px; background: linear-gradient(140deg, var(--grad1), var(--grad2)); color: #fff; font-weight: 800; font-family: var(--f-display); }
.jobrow .meta { flex: 1; min-width: 0; }
.jobrow .meta b { font-size: 11.5px; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jobrow .meta span { font-size: 10px; color: var(--txm); }
.jobrow .tag { font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; flex: none; }
.tag-live { color: var(--gn); background: var(--gng); border: 1px solid color-mix(in srgb, var(--gn) 40%, transparent); }
.tag-set { color: var(--ach); background: var(--acg); border: 1px solid color-mix(in srgb, var(--ac) 40%, transparent); }
.tag-wait { color: var(--txd); background: var(--sf2); border: 1px solid var(--bd); }
.dash-right { display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--bd); border-radius: 14px; padding: 12px; background: var(--acg); }
.chat-h { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 11.5px; font-weight: 700; }
.chat-h .ai { width: 20px; height: 20px; border-radius: 7px; background: conic-gradient(from 140deg, var(--grad1), var(--grad2), var(--grad3), var(--grad1)); display: grid; place-items: center; }
.chat-h .ai svg { width: 12px; height: 12px; color: #fff; }
.bubble { font-size: 11px; line-height: 1.45; padding: 8px 10px; border-radius: 11px; max-width: 92%; }
.bubble.ai-b { background: var(--sf); border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.me-b { background: var(--sf); border: 1px solid var(--bd); align-self: flex-end; border-bottom-right-radius: 4px; color: var(--txd); }
.chat-actions { display: flex; gap: 6px; margin-top: 2px; }
.chat-actions .mini { font-size: 10px; font-weight: 700; padding: 5px 10px; border-radius: 999px; font-family: var(--f-display); }
.mini.ok { background: linear-gradient(120deg, var(--grad1), var(--grad2)); color: #fff; }
.mini.no { border: 1px solid var(--bd); color: var(--txd); background: var(--sf); }
.typing { display: inline-flex; gap: 3px; padding: 6px 2px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ac); opacity: .5; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
.dash-float { position: absolute; z-index: 2; border: 1px solid var(--bd); background: var(--sf); border-radius: 13px; padding: 9px 12px; box-shadow: var(--sc-lg); display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; }
.dash-float .ico { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.dash-float .ico svg { width: 14px; height: 14px; }
.dash-float b { font-family: var(--f-display); font-size: 12.5px; display: block; }
.dash-float small { color: var(--txm); font-size: 10px; }
.dash-float.f1 { top: -16px; right: 16px; }
.dash-float.f1 .ico { background: var(--gng); color: var(--gn); }
.dash-float.f2 { bottom: -16px; left: 14px; }
.dash-float.f2 .ico { background: var(--acg); color: var(--ac); }
@media (max-width: 960px) { .dash-float { display: none; } }
@media (prefers-reduced-motion: reduce) { .dash-wrap, .typing i { animation: none; } }

/* inline SVG icon helper (replaces emoji chrome) */
.ic-svg { display: inline-flex; align-items: center; justify-content: center; }
.ic-svg svg { width: 22px; height: 22px; }

/* ---------- signup / auth ---------- */
.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 40px 20px; position: relative; overflow: hidden; }
.auth-card { position: relative; z-index: 2; width: 100%; max-width: 460px; background: var(--sf); border: 1px solid var(--bd); border-radius: 24px; padding: 36px 32px; box-shadow: 0 34px 80px -28px rgba(12, 74, 110, 0.30), 0 6px 18px rgba(12, 35, 64, 0.06); }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 800; font-size: 20px; margin-bottom: 6px; color: var(--tx); }
.auth-split {
  position: relative; z-index: 2; width: 100%; max-width: 980px;
  display: grid; grid-template-columns: 1fr 460px; gap: 40px; align-items: center;
}
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; gap: 24px; max-width: 460px; }
  .auth-photo { aspect-ratio: 16 / 10; }
}
.auth-card h1 { font-size: 27px; font-weight: 800; margin: 8px 0 4px; letter-spacing: -0.02em; }
.auth-sub { color: var(--txd); font-size: 14.5px; margin: 0 0 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--txd); margin-bottom: 6px; font-family: var(--f-display); }
.field input, .field select { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; color: var(--tx); font-size: 15px; font-family: var(--f-body); transition: border-color .14s ease, box-shadow .14s ease; }
.field input:focus, .field select:focus { outline: none; border-color: var(--ac); box-shadow: var(--ring); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-cta { width: 100%; margin-top: 6px; }
.auth-foot { text-align: center; color: var(--txm); font-size: 13px; margin: 16px 0 0; }
.auth-foot a { color: var(--ac); font-weight: 600; }
.msg { border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px; }
.msg-err { background: color-mix(in srgb, var(--rd) 10%, transparent); border: 1px solid color-mix(in srgb, var(--rd) 35%, transparent); color: var(--rd); }
.msg-ok { background: var(--gng); border: 1px solid color-mix(in srgb, var(--gn) 40%, transparent); color: var(--gn); }
.trust { display: flex; gap: 18px; justify-content: center; color: var(--txm); font-size: 12px; margin-top: 18px; flex-wrap: wrap; }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 13px; height: 13px; color: var(--gn); }

/* svg sizing inside trade/feature icon boxes */
.sol-ic svg, .rel-ic svg { width: 21px; height: 21px; }
.feat .ic svg { width: 22px; height: 22px; }

/* graceful fallback while product screenshots are not deployed:
   a calm sky panel carrying the honest alt text */
.shot-ph {
  aspect-ratio: 16 / 10; width: 100%;
  background:
    radial-gradient(70% 60% at 78% 0%, rgba(56, 189, 248, 0.14), transparent 62%),
    linear-gradient(160deg, var(--sf2), var(--sf3));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 36px 30px; box-sizing: border-box;
  color: var(--txd); font-family: var(--f-display); font-weight: 500; font-size: 13.5px; line-height: 1.55;
}
.shot-ph-mark {
  width: 30px; height: 30px; border-radius: 10px; flex: none;
  background: conic-gradient(from 140deg, var(--grad1), var(--grad2), var(--grad3), var(--grad1));
  box-shadow: 0 6px 18px -6px rgba(14, 165, 233, 0.55);
  opacity: .9;
}

/* ============================================================
   Real photography (Unsplash · free commercial license)
   Used to bring the service industry and painpoints to life.
   ============================================================ */
.pic {
  position: relative; display: block; overflow: hidden;
  border-radius: 18px; background: var(--sf2);
  border: 1px solid var(--bd);
  box-shadow: 0 18px 40px -22px rgba(12, 74, 110, 0.35);
}
.pic > img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.pic:hover > img { transform: scale(1.03); }
.pic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 55%, rgba(12, 35, 64, 0.55) 100%),
    radial-gradient(120% 60% at 100% 0%, rgba(56, 189, 248, 0.12), transparent 55%);
}
.pic .cap {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 14px;
  letter-spacing: -0.005em; text-shadow: 0 2px 12px rgba(2, 12, 24, 0.55);
  display: flex; align-items: center; gap: 8px; z-index: 1;
}
.pic .cap .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac2); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.28); }
.pic.ratio-4x3 { aspect-ratio: 4 / 3; }
.pic.ratio-16x9 { aspect-ratio: 16 / 9; }
.pic.ratio-1x1 { aspect-ratio: 1 / 1; }
.pic.ratio-3x4 { aspect-ratio: 3 / 4; }

/* pain-point band: three photos above copy, coastal shadow */
.pain-band { padding-top: 20px; }
.pain-grid {
  display: grid; gap: 20px; margin-top: 34px;
  grid-template-columns: repeat(3, 1fr);
}
.pain-card {
  display: flex; flex-direction: column; gap: 14px;
}
.pain-card .pic { aspect-ratio: 4 / 3; }
.pain-card h3 {
  font-family: var(--f-display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em; margin: 4px 0 0;
}
.pain-card p { color: var(--txd); font-size: 14.5px; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .pain-grid { grid-template-columns: 1fr; } }

/* trade strip — asymmetric photo mosaic showing real service work
   9 tiles across 4 columns, with a hero cell spanning 2×2 */
.trade-mosaic {
  display: grid; gap: 14px; margin-top: 34px;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  grid-template-rows: 210px 210px 210px;
  grid-template-areas:
    "a b c d"
    "a e f g"
    "h h i i";
}
.trade-mosaic .pic { aspect-ratio: auto; }
.trade-mosaic .m-a { grid-area: a; }
.trade-mosaic .m-b { grid-area: b; }
.trade-mosaic .m-c { grid-area: c; }
.trade-mosaic .m-d { grid-area: d; }
.trade-mosaic .m-e { grid-area: e; }
.trade-mosaic .m-f { grid-area: f; }
.trade-mosaic .m-g { grid-area: g; }
.trade-mosaic .m-h { grid-area: h; }
.trade-mosaic .m-i { grid-area: i; }
@media (max-width: 1100px) {
  .trade-mosaic {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 190px 190px 190px;
    grid-template-areas: "a a b" "a a c" "d e f" "g h i";
  }
}
@media (max-width: 700px) {
  .trade-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 170px);
    grid-template-areas: "a a" "b c" "d e" "f g" "h i";
  }
}

/* credits note under photo grids */
.cred-note {
  text-align: center; margin: 18px auto 0; max-width: 720px;
  color: var(--txm); font-size: 13.5px;
}
.cred-note a { color: var(--ac); font-weight: 600; }
.cred-note a:hover { color: var(--ach); }

/* wide hero photo band for interior pages (pricing / integrations / signup) */
.photo-band { padding: 8px 0 36px; }
.photo-band .pic {
  aspect-ratio: 21 / 8; border-radius: 22px; box-shadow: var(--sc-lg);
}
@media (max-width: 700px) { .photo-band .pic { aspect-ratio: 4 / 3; } }

/* signup: side-by-side auth card + photo panel */
.auth-photo {
  border-radius: 20px; overflow: hidden; box-shadow: var(--sc-lg);
  aspect-ratio: 4 / 5; position: relative;
}
.auth-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-photo .cap {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  background: rgba(12, 35, 64, .72); backdrop-filter: blur(8px);
  color: #eaf6fc; padding: 8px 12px; border-radius: 999px;
  font-family: var(--f-display); font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
}
.auth-photo .cap .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ac2); box-shadow: 0 0 0 4px rgba(56,189,248,.25); }

/* about page operation photo band */
.about-photo-band { padding-top: 10px; }
.about-photo-grid {
  display: grid; gap: 16px; margin-top: 26px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 320px;
}
.about-photo-grid .pic { aspect-ratio: auto; }
@media (max-width: 900px) {
  .about-photo-grid { grid-template-columns: 1fr; grid-template-rows: 260px 200px 200px; }
}

/* seo local hero photo (subtle, one column) */
.local-photo { margin-top: 22px; aspect-ratio: 21 / 9; border-radius: 20px; }

/* solutions per-trade photo strip */
.sol-strip { margin: 30px 0 6px; }
.sol-strip-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}
.sol-strip-grid .pic { aspect-ratio: 1 / 1; }
@media (max-width: 900px) { .sol-strip-grid { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .pic:hover > img { transform: none; }
  .pic > img { transition: none; }
}

/* graceful fallback tile for any Unsplash image that fails to load
   — matches the coastal aesthetic so a broken CDN never breaks the design */
.pic-ph {
  position: relative; overflow: hidden; border-radius: 18px;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(125, 211, 252, .55), transparent 60%),
    radial-gradient(120% 90% at 90% 90%, rgba(45, 212, 191, .45), transparent 55%),
    linear-gradient(135deg, #0c2340, #0284c7 55%, #2dd4bf);
  color: #eaf6fc;
  min-height: 200px;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 18px 20px;
  box-shadow: var(--sc-lg);
  border: 1px solid rgba(255,255,255,.14);
}
.pic-ph::before {
  content: ""; position: absolute; inset: 0;
  background: url("logo-mark.svg") 88% 20% / 42px no-repeat;
  opacity: .35; filter: brightness(2);
}
.pic-ph span {
  position: relative; z-index: 1;
  font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: .01em;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

/* image credits table */
.cred-table { display: grid; gap: 10px; }
.cred-row {
  display: grid; grid-template-columns: 140px 1.2fr 1.4fr 1fr; gap: 16px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--bd); border-radius: 14px; background: var(--sf);
  font-size: 14.5px;
}
.cred-row.cred-head {
  background: transparent; border: none; padding: 6px 16px;
  font-family: var(--f-display); font-weight: 700; color: var(--txm);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.cred-row img { width: 120px; height: 80px; object-fit: cover; border-radius: 10px; display: block; }
.cred-row a { color: var(--ac); }
.cred-row a:hover { color: var(--ach); }
@media (max-width: 900px) {
  .cred-row { grid-template-columns: 100px 1fr; }
  .cred-row img { width: 100px; height: 70px; }
  .cred-row.cred-head { display: none; }
  .cred-row > span:nth-child(n+3) { grid-column: 1 / -1; }
}

/* >>> WHITE ROOM (brand/_apple.css) >>> */
/* ============================================================
   ARKHOS — "White room" (owner 2026-10-13)
   Owner: "the theme must adapt to the new logo — something more
   like Apple" + reference ~/Downloads/DESIGN(1).md (Apple style).
   The logo is a monochrome platinum vortex, so the system is
   monochrome too: near-white / true-black rooms, graphite ink,
   and NO blue (14-oct: «olvídate del azul — colores de SpaceX»). No gradients, no glows,
   no glass on content, no floating decoration.
   This layer is appended LAST to styles.css and overrides the
   Coastal tokens + components below it. Source of truth:
   arkhos/brand/_apple.css (styles.css is assembled from it).
   ============================================================ */

/* Barlow (SIL OFL 1.1 — /fonts/BARLOW-OFL.txt): the ARKHOS face, DIN family (owner 14-oct). */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/barlow-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("/fonts/barlow-latin-600-normal.woff2") format("woff2"); }

/* Headlines: D-DIN PRO (Datto, SIL OFL 1.1 — D-DIN-OFL.txt) — the DIN that SpaceX uses.
   Owner 14-oct: «SpaceX usa letras más gruesas» + «ese no es el tipo de letra que me gusta» (condensed). */
@font-face { font-family: "D-DIN PRO"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/d-din-pro-400.woff2") format("woff2"); }
@font-face { font-family: "D-DIN PRO"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/d-din-pro-500.woff2") format("woff2"); }
@font-face { font-family: "D-DIN PRO"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/d-din-pro-600.woff2") format("woff2"); }
@font-face { font-family: "D-DIN PRO"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/d-din-pro-700.woff2") format("woff2"); }
/* Headlines: Barlow Semi Condensed in CAPS (SIL OFL 1.1 — BARLOW-OFL.txt), the SpaceX/DIN register.
   Owner 14-oct: Geist «no me gusta» → chose «E · DIN mayúsculas (SpaceX)». Body stays Barlow. */
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-semi-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("/fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); }

:root,
:root[data-theme="light"] {
  --bg: #ffffff;            /* SpaceX white: pure white room (14-oct) */
  --bg2: #fafafa;           /* alternate room — a breath, not a grey band */
  --bgs: rgba(255, 255, 255, 0.8);
  --sf: #f7f7f7;
  --sf2: #fafafa;
  --sf3: #efefef;
  --bd: #e6e6e6;            /* hairline */
  --bdh: #cfcfcf;
  --tx: #000000;            /* ink — 21:1 on white */
  --txd: #333333;           /* 12.6:1 on white */
  --txm: #6e6e6e;           /* 5.1:1 on white, 4.9:1 on #fafafa */
  --ac: #000000;            /* SpaceX: no blue — links are ink (14-oct) */
  --ach: #000000;
  --ac2: #000000;
  --acg: rgba(10, 10, 10, 0.06);
  --act: #000000;           /* THE action fill = ink */
  --act-h: #2a2a2a;
  --gn: #000000;            /* no green either: ticks and "live" are ink */
  --gng: rgba(10, 10, 10, 0.06);
  --am: #6e6e73;
  --amg: rgba(110, 110, 115, 0.08);
  --pp: #000000;
  --ppg: rgba(29, 29, 31, 0.06);
  --rd: #d70015;
  --grad1: #000000;
  --grad2: #000000;
  --grad3: #000000;
  --sc: none;
  --sc-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.28);
  --shadow: var(--sc-lg);
  --ring: 0 0 0 3px rgba(10, 10, 10, 0.2);
  --frame-top: #fafafa;
  --hero-glow: none;
  --r-card: 18px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --f-display: "D-DIN PRO", "Barlow", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-body: "Barlow", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="dark"] {
  --bg: #000000;
  --bg2: #0b0b0c;
  --bgs: rgba(22, 22, 23, 0.8);
  --sf: #1d1d1f;
  --sf2: #161617;
  --sf3: #2c2c2e;
  --bd: #3a3a3c;
  --bdh: #545458;
  --tx: #f5f5f7;            /* 19.3:1 on black */
  --txd: #c7c7cc;           /* 12.6:1 on black, 10.4:1 on #1d1d1f */
  --txm: #98989d;           /* 7.0:1 on black, 5.8:1 on #1d1d1f */
  --ac: #f2f2f2;            /* SpaceX: links are white ink */
  --ach: #f2f2f2;
  --ac2: #f2f2f2;
  --acg: rgba(255, 255, 255, 0.08);
  --act: #f2f2f2;
  --act-h: #ffffff;
  --gn: #f2f2f2;
  --gng: rgba(255, 255, 255, 0.08);
  --am: #98989d;
  --amg: rgba(152, 152, 157, 0.10);
  --pp: #f5f5f7;
  --ppg: rgba(245, 245, 247, 0.06);
  --rd: #ff453a;
  --grad1: #f5f5f7;
  --grad2: #f5f5f7;
  --grad3: #f5f5f7;
  --sc: none;
  --sc-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  --shadow: var(--sc-lg);
  --ring: 0 0 0 3px rgba(255, 255, 255, 0.25);
  --frame-top: #161617;
  --hero-glow: none;
}

/* ---------- Type: the system face, Apple tracking ---------- */
body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: 0.005em;   /* Barlow: never negative tracking on body */
  background: var(--bg);
  color: var(--tx);
}
h1, h2, h3, h4,
.hero-h, .sec-title, .section-title {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--tx);
}
h1, .hero-h { letter-spacing: -0.015em; line-height: 1.02; font-weight: 500; }
h2, .sec-title, .section-title { letter-spacing: -0.012em; line-height: 1.06; font-weight: 500; }
h3, h4 { letter-spacing: -0.005em; line-height: 1.19; }
.lede { color: var(--txd); font-weight: 400; letter-spacing: -0.012em; }
.kicker, .eyebrow {
  font-family: var(--f-body);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 600;
  font-size: 17px;
  color: var(--txm);
  background: none;
  -webkit-text-fill-color: currentColor;
}
/* Gradient headline text → solid ink. One voice. */
.grad, .grad-text, h1 .grad, h2 em, .sec-title em {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
  font-style: normal;
}
a.ilink, .lede a, p a:not(.btn) { color: var(--ac); }
p a:not(.btn):hover { text-decoration: underline; }
.num, .kpi b, .stat b, .plan-price, .hero-stats b { font-variant-numeric: tabular-nums; }

/* ---------- Decoration off: auroras, meshes, glows, floaters ---------- */
.aurora, .mesh, .hero-glow, .float-chip, .dash-float, .spark { display: none !important; }

/* ---------- Global nav: translucent, thin, quiet ---------- */
.nav {
  background: var(--bgs);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--bd) 70%, transparent);
  box-shadow: none;
}
.nav-in { height: 52px; gap: 16px; }
.nav-links { margin-left: 18px; gap: 2px; }
.nav-links a {
  color: var(--tx);
  opacity: .8;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding: 6px 10px;
  border-radius: 980px;
  background: none;
}
.nav-links a:hover { opacity: 1; background: none; color: var(--tx); }
.brand { color: var(--tx); display: inline-flex; align-items: center; }
.brand .brand-logo, .brand-logo { height: 18px; width: auto; display: block; }
.footer .brand-logo { height: 20px; }
.tgl {
  border-radius: 980px;
  border: 1px solid transparent;
  background: none;
  color: var(--tx);
  opacity: .8;
  box-shadow: none;
}
.tgl:hover { opacity: 1; background: var(--sf3); }
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Buttons: pills, one blue fill, outlined second ---------- */
.btn {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.022em;
  border-radius: 980px;
  padding: 11px 22px;
  box-shadow: none;
  transform: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .1s ease-out;
}
.btn:active { transform: scale(.97); }
.btn-sm { font-size: 14px; padding: 7px 15px; border-radius: 980px; }
.btn-primary,
.btn-primary:visited { background: var(--act); color: #fff; border: 1px solid var(--act); box-shadow: none; }
.btn-primary:hover { background: var(--act-h); border-color: var(--act-h); color: #fff; transform: none; box-shadow: none; }
.btn-ghost {
  background: transparent;
  color: var(--ac);
  border: 1px solid var(--ac);
  border-radius: 980px;
}
.btn-ghost:hover { background: var(--ac); color: var(--bg2); border-color: var(--ac); transform: none; }
:root[data-theme="dark"] .btn-ghost:hover { color: #000; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Pills: badges, chips, tags ---------- */
.badge, .chip, .v-pill, .pill-live, .tag-live, .tag-wait, .tag-set, .in-pill {
  border-radius: 980px;
  background: var(--sf);
  border: 1px solid var(--bd);
  color: var(--txd);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.badge svg, .chip svg { color: var(--txm); }
.chip.live svg, .badge .dot, .pill-live .dot { color: var(--gn); }

/* ---------- Surfaces: flat cards on the canvas, no elevation ---------- */
.card, .pain-card, .vcard, .plan, .sol-card, .feat, .rel-card, .integ-row,
.t-feat, .quote, .founder-panel, .auth-card, .faq details, .cmp-wrap, .stat, .kpi,
.ai-steps > *, .steps > *, .cred-table, .integ-cat, .int-cat, .local-photo {
  background: var(--sf);
  border: 1px solid transparent;
  border-radius: var(--r-card);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.card:hover, .pain-card:hover, .vcard:hover, .sol-card:hover, .rel-card:hover, .feat:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--bd);
}
.plan-featured { border: 1px solid var(--tx); }
.pic, .pic img, .about-photo-grid img, .photo-band img { border-radius: var(--r-card); }

/* Rooms alternate like apple.com: canvas → white → canvas. */
.band, section.pricing, section.faq, .verticals, .voice-band, .statband, .proofstrip, .photo-band {
  background: transparent;
}
main > section:nth-of-type(even) { background: var(--bg2); }
.cta-band {
  background: var(--bg2);
  border: 0;
  box-shadow: none;
}
.cta-band::before, .cta-band::after { display: none; }

/* ---------- Product frames: the screenshot IS the hero ---------- */
.frame {
  border-radius: 14px;
  border: 1px solid var(--bd);
  background: var(--sf);
  box-shadow: var(--sc-lg);
  overflow: hidden;
}
.frame-top { background: var(--frame-top); border-bottom: 1px solid var(--bd); }
.frame-dots i { background: var(--bdh) !important; }
.frame-url { background: var(--sf); border: 1px solid var(--bd); color: var(--txm); }
.frame-live { color: var(--gn); }
.frame-img { border-radius: 0; }

/* ---------- Home hero: centered, typographic, product below ---------- */
.hero {
  padding: 88px 0 0;
  background: var(--bg2);
  text-align: center;
  overflow: hidden;
}
.hero .hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  grid-template-columns: none;
}
.hero .hero-copy { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero .badge-row { display: none; }
.hero-mark { width: 48px; height: 48px; color: var(--tx); margin: 0 auto 22px; flex-shrink: 0; aspect-ratio: 1; }
.hero .eyebrow { margin: 0 0 10px; font-size: 21px; color: var(--tx); font-weight: 600; letter-spacing: -0.015em; }
.hero .hero-h { font-size: clamp(40px, 6vw, 76px); max-width: 17ch; margin: 0 auto; }
.hero .lede { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.33; max-width: 34em; margin: 22px auto 0; color: var(--txd); }
.hero .cta-row { justify-content: center; margin-top: 30px; gap: 14px; }
.hero .microtrust { color: var(--txm); font-size: 14px; margin-top: 16px; }
.hero .microtrust strong { color: var(--txd); font-weight: 600; }
.hero .hero-stats {
  justify-content: center;
  gap: 0;
  margin-top: 36px;
  border: 0;
  padding: 0;
}
.hero .hero-stats > div { padding: 0 28px; border-left: 1px solid var(--bd); background: none; text-align: center; }
.hero .hero-stats > div:first-child { border-left: 0; }
.hero .hero-stats b { font-family: var(--f-display); font-weight: 600; font-size: 32px; letter-spacing: -0.02em; color: var(--tx); display: block; }
.hero .hero-stats span { color: var(--txm); font-size: 14px; }
.hero .hero-visual {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 24px;
}
.hero .hero-visual .frame { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }

/* ---------- Section heads ---------- */
.sec-head { text-align: center; }
.sec-title { font-size: clamp(32px, 4.4vw, 56px); }
.sec-head .lede { font-size: clamp(17px, 1.5vw, 21px); color: var(--txd); }

/* ---------- Marquee: quiet text row, no chips glowing ---------- */
.marquee { background: var(--bg); border: 0; }
.marquee-label { color: var(--txm); text-transform: none; letter-spacing: -0.01em; font-weight: 400; }

/* ---------- Footer: flat, typographic, structural ---------- */
.footer { background: var(--bg); border-top: 1px solid var(--bd); color: var(--txm); font-size: 12px; }
.footer a { color: var(--txd); }
.footer a:hover { color: var(--tx); text-decoration: underline; }

/* ---------- Forms ---------- */
input, select, textarea {
  border-radius: 12px;
  border: 1px solid var(--bd);
  background: var(--sf);
  color: var(--tx);
  font-family: var(--f-body);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--act); box-shadow: var(--ring); }

/* ---------- Motion: one easing, honour reduced motion ---------- */
.reveal { transition-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:active { transition: none; transform: none; }
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  .mq-track { animation: none !important; }
}

@media (max-width: 720px) {
  .hero { padding-top: 56px; }
  .hero .hero-stats > div { padding: 0 14px; }
  .hero .hero-stats b { font-size: 24px; }
  .hero .hero-visual { padding: 0 12px; }
  .nav-in { height: 48px; }
}

/* ---------- Pass 2: kill the leftovers of the old voice ---------- */
.kicker::before { display: none; }
.kicker { display: inline-block; color: var(--txm); }
.band.alt, .marquee, .cta-band, main > section { border-top: 0; border-bottom: 0; }
.band { padding: 100px 0; }
.stat b, .kpi b {
  font-family: var(--f-display);
  font-weight: 600;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--tx);
  letter-spacing: -0.02em;
}
.stat span, .kpi span { color: var(--txm); }
.sticky-cta { background: var(--bgs); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
@media (max-width: 720px) { .band { padding: 64px 0; } }
/* No gradient rooms: a section is one flat colour (alternating). */
main > section, main > section::before, main > section::after { background-image: none !important; }
main > section:nth-of-type(odd) { background-color: var(--bg); }
main > section:nth-of-type(even) { background-color: var(--bg2); }
main > section.hero { background-color: var(--bg2); }
/* The old ground (glow + film grain) is gone: the room is a flat colour. */
body::before, body::after { display: none !important; content: none !important; }

/* ============================================================
   PASS 3 (owner 13-oct, 22:24): "MAL DISEÑO" on pain cards,
   tour checklists and the comparison table; buttons = SpaceX
   (rectangle, hairline border, UPPERCASE, arrow only on CTAs
   that take you somewhere).
   ============================================================ */

/* ---------- Buttons: SpaceX rectangles ---------- */
.btn, .btn-sm {
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
  font-size: 14px;
  padding: 14px 26px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.btn-sm { font-size: 12px; padding: 10px 16px; letter-spacing: .07em; }
/* Primary = solid ink (black on light, white on dark); the hairline keeps the SpaceX edge. */
.btn-primary, .btn-primary:visited {
  background: var(--tx);
  border: 1px solid var(--tx);
  color: var(--bg2);
}
.btn-primary:hover { background: transparent; color: var(--tx); border-color: var(--tx); }
/* Secondary = transparent with a hairline. */
.btn-ghost {
  background: transparent;
  color: var(--tx);
  border: 1px solid color-mix(in srgb, var(--tx) 45%, transparent);
}
.btn-ghost:hover { background: var(--tx); color: var(--bg2); border-color: var(--tx); }
:root[data-theme="dark"] .btn-ghost:hover { color: #000; }
/* The arrow — drawn in CSS, only on buttons marked .btn-go (CTAs that navigate). */
.btn-go::after {
  content: "";
  width: 18px;
  height: 10px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s var(--ease);
}
.btn-go:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn-go:hover::after { transform: none; } }

/* ---------- Pain cards: no box — photo, then words, one left edge ---------- */
.pain-card, .pain-card:hover { background: transparent; border: 0; padding: 0; box-shadow: none; }
.pain-card .pic { margin: 0 0 20px; border-radius: var(--r-card); box-shadow: none; }
.pain-card h3 { font-size: 21px; margin: 0 0 8px; }
.pain-card p { font-size: 17px; line-height: 1.47; color: var(--txd); }
.pic::after { display: none; }
.pic .cap { background: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); font-weight: 500; letter-spacing: -.01em; }
.pic .cap .dot { display: none; }

/* ---------- Tour checklists: plain list, hairline rules, no tile ---------- */
.t-feat { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin-top: 22px; }
.t-feat li { margin: 0; padding: 12px 0; border-top: 1px solid var(--bd); font-size: 17px; color: var(--txd); gap: 12px; }
.t-feat li:last-child { border-bottom: 1px solid var(--bd); }
.t-feat li svg { color: var(--tx); width: 16px; height: 16px; margin-top: 4px; }
.tour-row .kicker, .t-step { color: var(--txm); }

/* ---------- Comparison table: typographic, no tinted column ---------- */
.cmp-wrap { border: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.cmp { background: transparent; font-size: 17px; }
.cmp th, .cmp td { padding: 18px 16px; border-bottom: 1px solid var(--bd); }
.cmp thead th { background: transparent; font-family: var(--f-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--txm); border-bottom: 1px solid var(--tx); }
.cmp th.hl { color: var(--tx); }
.cmp .col-os { background: transparent !important; font-weight: 600; color: var(--tx); }
.cmp .no { color: var(--txm); }
.cmp tr:last-child td { border-bottom: 1px solid var(--tx); }
.yes { color: var(--tx); font-weight: 600; }
.yes svg { color: var(--tx); }
.cmp th.hl img, .cmp th.hl .brand-mark, .cmp th.hl svg:not(.cmp-vortex) { display: none; }
/* The ARKHOS mark in table heads / chips = the vortex (was the retired blue square). */
.os-mark {
  width: 16px; height: 16px; border-radius: 0; flex-shrink: 0; aspect-ratio: 1;
  background: currentColor !important;
  -webkit-mask: url("/logo-mark.svg") center / contain no-repeat;
          mask: url("/logo-mark.svg") center / contain no-repeat;
  box-shadow: none !important;
}
.os-head { display: inline-flex; align-items: center; gap: 8px; color: var(--tx); text-transform: none; letter-spacing: 0; font-size: 15px; }

/* FAQ: an Apple list — hairline rows, no boxes, ink "+" */
.faq details, .faq details[open] {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bd) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.faq details:first-of-type { border-top: 1px solid var(--bd) !important; }
.faq summary { font-size: 17px; font-weight: 600; padding: 20px 0; color: var(--tx); }
.faq summary::after, .faq summary svg { color: var(--tx) !important; }
.faq details p { color: var(--txd); font-size: 17px; line-height: 1.47; padding: 0 0 20px; }
/* Step cards: quiet label, no blue */
.t-step, .steps .num, .step-n { color: var(--txm) !important; }
.footer, .footer::before, .footer::after { background-image: none !important; }
.footer { background-color: var(--bg2) !important; }

/* ============================================================
   PASS 4 (owner 14-oct): «olvídate del azul — colores de SpaceX»,
   «esos cuadros están mal diseñados» (AI steps), «mal diseño allí»
   (closing CTA: the old dark-band text colours made the title
   invisible on the light room).
   ============================================================ */

/* ---------- AI loop: SpaceX index rows — big thin numerals, hairlines, no tiles ---------- */
.ai-steps { margin-top: 36px; counter-reset: none; }
.ai-steps > li, .ai-steps > li:hover {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  display: grid; grid-template-columns: 64px 1fr; gap: 0 20px; align-items: baseline;
  margin: 0; padding: 22px 0; border-top: 1px solid var(--bd) !important;
}
.ai-steps > li:last-child { border-bottom: 1px solid var(--bd) !important; }
.ai-steps .b, .t-step .tn {
  width: auto; height: auto; background: none !important; border-radius: 0;
  color: var(--txm) !important; display: block;
  font-family: var(--f-display); font-weight: 300; font-size: 34px; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.ai-steps .b::before { content: "0"; }
.ai-steps li span:last-child { font-size: 17px; line-height: 1.47; color: var(--txd); }
.ai-steps b { font-size: 19px; font-weight: 600; letter-spacing: -0.017em; margin-bottom: 6px; color: var(--tx); }

/* ---------- Closing CTA: the one black room (SpaceX), same in light and dark ---------- */
main > section.cta-band, .band.cta-band, .cta-band {
  background: #000 !important; color: #f2f2f2;
  padding: 120px 0;
}
.cta-band .cta-in h2, .cta-band h2 { color: #f2f2f2; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.03em; line-height: 1.06; max-width: 820px; margin-inline: auto; }
.cta-band .cta-in p, .cta-band p { color: #a8a8a8; }
.cta-band .microtrust { color: #8c8c8c; }
.cta-band .signup input {
  background: transparent; color: #f2f2f2; border: 1px solid #3a3a3a; border-radius: 6px; box-shadow: none;
}
.cta-band .signup input::placeholder { color: #7a7a7a; }
.cta-band .signup input:focus { border-color: #f2f2f2; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.cta-band .btn-primary, .cta-band .btn-primary:visited { background: #f2f2f2; border-color: #f2f2f2; color: #000; }
.cta-band .btn-primary:hover { background: transparent; color: #f2f2f2; border-color: #f2f2f2; }
.cta-band .btn-ghost { color: #f2f2f2; border-color: rgba(242, 242, 242, .45); }
.cta-band .btn-ghost:hover { background: #f2f2f2; color: #000; border-color: #f2f2f2; }
.cta-band .proofstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 860px; margin: 56px auto 0; border-top: 1px solid #262626; padding-top: 32px; }
.cta-band .ps { color: #8c8c8c; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 0 16px; flex-direction: column; gap: 8px; text-align: center; justify-content: flex-start; }
.cta-band .ps + .ps { border-left: 1px solid #262626; }
.cta-band .ps svg { display: none; }
.cta-band .ps b { color: #f2f2f2; font-family: var(--f-display); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; text-transform: none; }
@media (max-width: 720px) {
  .cta-band { padding: 80px 0; }
  .cta-band .proofstrip { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .cta-band .ps:nth-child(odd) { border-left: 0; }
}

/* ---------- No blue anywhere: status ticks and links are ink ---------- */
.ps svg, .chip svg, .t-feat li svg { color: var(--tx); }
a:not(.btn) { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }

/* Signup row: field and button share one height. */
.cta-band .signup { align-items: stretch; }
.cta-band .signup input, .cta-band .signup .btn { height: 52px; }

/* ---------- AI guard: a hairline panel, locks as a plain list ---------- */
.ai-guard { background: transparent !important; border: 1px solid var(--bd) !important; border-radius: 12px !important; box-shadow: none !important; }
.ai-guard .gh svg { color: var(--tx) !important; }
.ai-guard .locked > * { background: transparent !important; border: 0 !important; border-top: 1px solid var(--bd) !important; border-radius: 0 !important; padding-left: 0 !important; color: var(--txd); }

/* ---------- "Live in a day" steps: four columns on one ink rule, no boxes ---------- */
.steps { gap: 0 32px !important; }
.steps > li, .steps > li:hover {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-top: 1px solid var(--tx) !important; padding: 22px 0 0 !important;
}
.steps .num { color: var(--txm) !important; background: none !important; font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.steps .ic-top { display: none !important; }
.steps h3 { font-size: 21px; margin: 14px 0 8px; }
.steps p { font-size: 15px; line-height: 1.47; color: var(--txd); }

/* ---------- Stat band: numerals on hairlines, not tiles ---------- */
.statband { gap: 0 !important; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.statband .stat, .statband .stat:hover { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 28px 12px !important; }
.statband .stat + .stat { border-left: 1px solid var(--bd) !important; }
.statband .stat b { font-size: 40px; font-weight: 500; }
@media (max-width: 720px) { .statband .stat:nth-child(odd) { border-left: 0 !important; } }
@media (max-width: 720px) {
  .statband { display: grid !important; grid-template-columns: 1fr 1fr; }
  .statband .stat:nth-child(n+3) { border-top: 1px solid var(--bd) !important; }
  .statband .stat b { font-size: 32px; }
}

/* Pricing: the "Most popular" tag is an inverse-ink label (was white-on-white in dark). */
.plan-tag { background: var(--tx) !important; color: var(--bg2) !important; border-radius: 4px !important; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.plan li svg, .plan .yes svg { color: var(--tx) !important; }

/* ---------- Portals are PHONES, shown at phone size (owner 14-oct: «exageradamente grande,
   excede el tamaño real de los teléfonos»). Law for every page: any frame holding a
   portal capture becomes a 300px device with a thin ink bezel — never a desktop window. ---------- */
.frame:has(> img[data-shot^="portal-"]) {
  width: min(300px, 78vw);
  margin-inline: auto;
  border-radius: 46px;
  padding: 7px;
  border: 1px solid #d6d6d6;                /* white titanium: a light device on a white room */
  background: linear-gradient(#f4f4f4, #e9e9e9);
  box-shadow: 0 1px 0 #fff inset, 0 40px 80px -48px rgba(0, 0, 0, .22);
  overflow: hidden;
}
:root[data-theme="dark"] .frame:has(> img[data-shot^="portal-"]) {
  border-color: #2e2e2e;                   /* graphite device on the black room */
  background: linear-gradient(#1c1c1c, #121212);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.frame:has(> img[data-shot^="portal-"]) .frame-top { display: none; }
.frame:has(> img[data-shot^="portal-"]) .frame-img {
  border-radius: 39px; display: block; width: 100%; height: auto;
  aspect-ratio: 780 / 1688; object-fit: cover; object-position: top;
  outline: 1px solid rgba(0, 0, 0, .06); outline-offset: -1px;
}
/* The pair sits together, like a product shot — not pushed to the page edges. */
.shot-duo:has(img[data-shot^="portal-"]) { grid-template-columns: repeat(2, 300px); gap: 40px 120px; justify-content: center; }
.shot-duo:has(img[data-shot^="portal-"]) .shot-cap { text-align: center; }
@media (max-width: 760px) { .shot-duo:has(img[data-shot^="portal-"]) { grid-template-columns: 1fr; } }

/* ---------- Photography: ONE art direction — monochrome, cinematic (owner 14-oct: «las imágenes
   sacan de tono todo»). Colour photos fight a black-and-white brand; B&W makes every stock
   frame read as the same series until the commissioned set replaces them. ---------- */
.pic img, .photo-band img, .about-photo-grid img, .local-photo img {
  filter: grayscale(1) contrast(1.08) brightness(.94);
}
.pic .cap {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
}
/* Mosaic: every tile fills its cell edge to edge (no stray gutters). */
.trade-mosaic .pic { width: 100%; height: 100%; margin: 0; border-radius: 10px; }
.trade-mosaic .pic > img { width: 100%; height: 100%; object-fit: cover; }
.pic:hover > img { transform: none; }

/* Stat strips size to what's left in them (fake numbers were removed 14-oct): no empty columns. */
.statband, .cta-band .proofstrip { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 240px)) !important; justify-content: center; }

/* ============================================================
   PASS 5 (owner 14-oct: «métele a todo» — home.works CRO + assembly design,
   in the SpaceX/Apple voice). Blueprint frame, trust bar, fit list,
   migration steps, guarantee, tabbed tour, two-column FAQ.
   ============================================================ */
/* Blueprint rhythm (assembly.com): every room is separated by one hairline. */
@media (min-width: 1000px) {
  main > section { border-top: 1px solid var(--bd); }
  main > section.hero, main > section.cta-band { border-top: 0; }
}
/* Trust bar: three ruled cells, no numbers. */
.trustbar { padding: 0; background: var(--bg); }
.trustbar-in { display: grid; grid-template-columns: repeat(3, 1fr); }
.trustbar .tb { padding: 28px 24px; display: flex; flex-direction: column; gap: 6px; }
.trustbar .tb + .tb { border-left: 1px solid var(--bd); }
.trustbar .tb b { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tx); }
.trustbar .tb span { font-size: 15px; color: var(--txd); }
@media (max-width: 760px) { .trustbar-in { grid-template-columns: 1fr; } .trustbar .tb + .tb { border-left: 0; border-top: 1px solid var(--bd); } }
/* Fit list + migration steps: SpaceX index rows (01 / 02 / 03). */
.fit-list, .move-steps { list-style: none; margin: 40px auto 0; padding: 0; max-width: 860px; }
.fit-list li, .move-steps li { display: grid; grid-template-columns: 72px 1fr; gap: 4px 20px; padding: 24px 0; border-top: 1px solid var(--bd); }
.fit-list li:last-child, .move-steps li:last-child { border-bottom: 1px solid var(--bd); }
.fit-list .fn, .move-steps .fn { grid-row: span 2; font-size: 34px; font-weight: 300; color: var(--txm); line-height: 1; font-variant-numeric: tabular-nums; }
.fit-list b, .move-steps b { font-size: 20px; font-weight: 500; color: var(--tx); }
.fit-list li > span:last-child, .move-steps li > span:last-child { font-size: 16px; color: var(--txd); }
.move-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.move-steps { margin-top: 0; }
@media (max-width: 900px) { .move-grid { grid-template-columns: 1fr; gap: 32px; } }
/* Guarantee (owner 14-oct: «needs better design, no te salgas del diseño»): no box — a SpaceX
   spec row. A giant thin «90» on the left, the promise on the right, one ink rule above. */
.guarantee { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: center;
  padding: 40px 0 0; border-top: 1px solid var(--tx); text-align: left; }
.g-seal { display: flex; flex-direction: column; gap: 10px; }
.g-seal b { font-size: clamp(120px, 14vw, 190px); font-weight: 300; line-height: .8; letter-spacing: -0.04em; color: var(--tx); }
.g-seal span { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--txm); padding-left: 6px; }
.g-copy h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 500; letter-spacing: -0.012em; line-height: 1.06; margin: 12px 0 16px; color: var(--tx); }
.g-copy p { max-width: 560px; margin: 0 0 24px; font-size: 17px; line-height: 1.55; color: var(--txd); }
@media (max-width: 860px) { .guarantee { grid-template-columns: 1fr; gap: 24px; } }
/* Tour as tabs (assembly): one screen at a time on desktop; stacked rows without JS / on phones. */
@media (min-width: 1000px) {
  #tour.tabbed .tour-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--bd); margin: 36px 0 32px; overflow-x: auto; }
  #tour.tabbed .tour-tabs button {
    flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: 14px 10px; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--txm); cursor: pointer; white-space: nowrap;
  }
  #tour.tabbed .tour-tabs button[aria-selected="true"] { color: var(--tx); border-bottom-color: var(--tx); }
  #tour.tabbed .tour-tabs button:focus-visible { outline: 2px solid var(--tx); outline-offset: -2px; }
  #tour.tabbed .tour-row:not(.is-active) { display: none !important; }
  #tour.tabbed .tour-row.is-active { margin-top: 0; }
}
.tour-tabs { display: none; }
/* FAQ in two columns: title left, questions right (assembly). */
@media (min-width: 1000px) {
  #faq .wrap.faq { display: grid; grid-template-columns: 320px 1fr; gap: 0 64px; align-items: start; max-width: 1180px; }
  #faq .wrap.faq > .sec-head { text-align: left; margin: 0 !important; position: sticky; top: 96px; grid-row: 1 / span 30; grid-column: 1; }
  #faq .wrap.faq > .sec-head * { text-align: left; margin-left: 0; }
  #faq .wrap.faq > details { grid-column: 2; }
}
.nav-demo { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tx); text-decoration: none; margin-right: 6px; }
.nav-demo:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 720px) { .nav-demo { display: none; } }

/* ---------- Ask ARKHOS messenger (owner 14-oct: Homeworks-style «más smooth», launcher = logo only) ---------- */
.ask-glyph { display: inline-block; width: 22px; height: 22px; background: currentColor; flex-shrink: 0;
  -webkit-mask: url("/ai-mark.svg") center / contain no-repeat; mask: url("/ai-mark.svg") center / contain no-repeat; }
.ask-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-grid; place-items: center;
  width: 56px; height: 56px; padding: 0; border-radius: 16px; border: 1px solid var(--tx); background: var(--tx); color: var(--bg2);
  cursor: pointer; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45); transition: transform .2s cubic-bezier(.22,.61,.36,1); }
.ask-fab:hover { transform: translateY(-2px); }
.ask-fab:focus-visible { outline: 2px solid var(--tx); outline-offset: 3px; }
.ask-panel { position: fixed; right: 24px; bottom: 24px; z-index: 61; width: min(400px, calc(100vw - 32px)); height: min(680px, calc(100vh - 48px));
  display: flex; flex-direction: column; background: var(--bg2); color: var(--tx); border: 1px solid var(--bdh); border-radius: 24px;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .55); overflow: hidden; }
.ask-panel[hidden], .ask-fab[hidden], .ask-view[hidden] { display: none !important; }
.ask-views { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ask-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
/* Home: an ink hero with the lockup, a big greeting, then soft cards. */
.ask-hero { background: #000; color: #f2f2f2; padding: 22px 24px 64px; }
.ask-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 44px; }
.ask-logo { display: block; width: 124px; height: 14px; background: #f2f2f2;
  -webkit-mask: url("/logo.svg") left center / contain no-repeat; mask: url("/logo.svg") left center / contain no-repeat; }
.ask-hero .ask-x { color: #bdbdbd; } .ask-hero .ask-x:hover { color: #fff; background: #1c1c1c; }
.ask-hi, .ask-q { margin: 0; font-size: 30px; line-height: 1.12; font-weight: 500; letter-spacing: -0.01em; }
.ask-hi { color: #8c8c8c; }
.ask-cards { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; margin-top: -40px; }
.ask-card { position: relative; display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
  padding: 18px 48px 18px 20px; border-radius: 14px; border: 1px solid var(--bd); background: var(--sf);
  color: var(--tx); text-decoration: none; font: inherit; cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 12px 30px -22px rgba(0, 0, 0, .35);
  transition: border-color .18s, transform .18s cubic-bezier(.22,.61,.36,1); }
.ask-card:hover { border-color: var(--tx); transform: translateY(-1px); }
.ask-card > span { font-size: 16px; font-weight: 500; }
.ask-card > small { font-size: 13px; color: var(--txm); }
.ask-card > svg { position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--tx); }
.ask-tags { display: flex; gap: 6px; margin-bottom: 8px; }
.ask-tags i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--bd); border-radius: 6px; color: var(--txd); }
/* Messages + Help bars */
.ask-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--bd); }
.ask-bar > div { flex: 1; min-width: 0; }
.ask-bar b { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ask-bar small { display: block; font-size: 11.5px; color: var(--txm); margin-top: 2px; }
.ask-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--tx); color: var(--bg2); display: grid; place-items: center; flex-shrink: 0; }
.ask-mark .ask-glyph { width: 18px; height: 18px; }
.ask-x { width: 34px; height: 34px; border: 0; background: none; color: var(--txm); font-size: 24px; line-height: 1; cursor: pointer; border-radius: 10px; }
.ask-x:hover { color: var(--tx); background: var(--sf); }
.ask-thread { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ask-msg { font-size: 15px; line-height: 1.55; max-width: 92%; }
.ask-bot a, .ask-empty a { color: var(--tx); text-decoration: underline; text-underline-offset: 3px; }
.ask-you { align-self: flex-end; background: var(--sf3); border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: 14px; }
.ask-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.ask-chip { border: 1px solid var(--bd); background: var(--sf); color: var(--tx); border-radius: 999px; padding: 8px 13px; font: inherit; font-size: 13px; cursor: pointer; }
.ask-chip:hover { border-color: var(--tx); }
.ask-form { display: flex; gap: 8px; align-items: center; margin: 0 14px 14px; padding: 6px 6px 6px 16px; border: 1px solid var(--bdh); border-radius: 16px; background: var(--sf); }
.ask-form:focus-within { border-color: var(--tx); }
.ask-form input, .ask-search input { flex: 1; border: 0 !important; box-shadow: none !important; padding: 8px 0 !important; border-radius: 0 !important; background: transparent !important;
  color: var(--tx); font: inherit; font-size: 15px; outline: none; min-width: 0; width: 100%; }
.ask-form button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--tx); color: var(--bg2); display: grid; place-items: center; cursor: pointer; }
.ask-form button svg { width: 16px; height: 16px; }
.ask-search { margin: 14px 16px 6px; padding: 4px 14px; border: 1px solid var(--bdh); border-radius: 14px; background: var(--sf); }
.ask-faq { padding: 4px 16px 16px; }
.ask-faq-item { border-bottom: 1px solid var(--bd); }
.ask-faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 2px; font-size: 15px; font-weight: 500; cursor: pointer; }
.ask-faq-item summary::-webkit-details-marker { display: none; }
.ask-faq-item summary svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform .2s; color: var(--txm); }
.ask-faq-item[open] summary svg { transform: rotate(90deg); }
.ask-faq-item p { margin: 0 2px 16px; font-size: 14px; line-height: 1.55; color: var(--txd); }
.ask-empty { font-size: 14px; color: var(--txd); padding: 12px 2px; }
/* Tab bar */
.ask-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--bd); background: var(--bg2); }
.ask-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 0 14px; border: 0; background: none;
  color: var(--txm); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.ask-tab svg { width: 22px; height: 22px; }
.ask-tab[aria-current="true"] { color: var(--tx); font-weight: 600; }
.ask-tab:focus-visible, .ask-card:focus-visible, .ask-chip:focus-visible { outline: 2px solid var(--tx); outline-offset: 2px; }
@media (max-width: 720px) { .ask-fab { bottom: 84px; right: 16px; } .ask-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; } }
@media (prefers-reduced-motion: no-preference) { .ask-panel:not([hidden]) { animation: ask-in .26s cubic-bezier(.22,.61,.36,1); } }
@keyframes ask-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* Browser chrome scales with its window (owner 14-oct: «little bit disproportion» — a 1440px
   URL bar on a 360px thumbnail). Law for every .frame: the chrome is sized by the frame's width. */
.frame { container-type: inline-size; }
@container (max-width: 640px) {
  .frame-top { padding: 6px 10px !important; gap: 8px !important; min-height: 0 !important; }
  .frame-dots { gap: 4px !important; }
  .frame-dots i { width: 6px !important; height: 6px !important; }
  .frame-url { font-size: 10px !important; padding: 2px 10px !important; border-radius: 5px !important; }
  .frame-url svg { width: 9px !important; height: 9px !important; }
  .frame-live { font-size: 10px !important; }
}

/* Savings estimate (owner 14-oct): three ruled numerals + a calculator whose assumptions are visible. */
.savecalc { max-width: 860px; margin: 36px auto 0; display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 0; border: 1px solid var(--bd); }
.savecalc label { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 20px; font-size: 13px; color: var(--txd); border-right: 1px solid var(--bd); }
.savecalc input { width: 100%; font: inherit; font-size: 28px; font-weight: 500; color: var(--tx); background: transparent; border: 0 !important; border-bottom: 1px solid var(--bdh) !important; border-radius: 0 !important; padding: 4px 0 !important; box-shadow: none !important; outline: none; }
.savecalc input:focus { border-bottom-color: var(--tx) !important; }
.savecalc .cur { display: flex; align-items: baseline; gap: 4px; font-size: 28px; font-weight: 500; color: var(--tx); }
.savecalc output { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 20px; background: var(--tx); color: var(--bg2); }
.savecalc output b { font-size: 40px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.savecalc output span { font-size: 13px; opacity: .8; }
.save-foot { max-width: 860px; margin: 14px auto 0; font-size: 12.5px; color: var(--txm); text-align: center; }
.save-foot a { color: var(--tx); }
@media (max-width: 760px) { .savecalc { grid-template-columns: 1fr; } .savecalc label { border-right: 0; border-bottom: 1px solid var(--bd); } }
/* Ask ARKHOS help list must not inherit the site FAQ card styling. */
.ask-faq .ask-faq-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--bd) !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
.ask-faq .ask-faq-item summary::after, .ask-faq .ask-faq-item summary::before { content: none !important; display: none !important; }

/* Marquee (owner 14-oct: «los íconos necesitan retoques»): no clip-art — trades and tools as a
   quiet typographic ticker, the way SpaceX lists its vehicles. */
.mq-track .chip { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 0 28px !important; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--txm); position: relative; }
.mq-track .chip svg { display: none !important; }
.mq-track .chip::after { content: ""; position: absolute; right: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--bdh); }
.mq-track .chip.live { color: var(--tx); }
.marquee-label { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 600; color: var(--txm); }
/* Feature / integration icon tiles across the site: hairline glyphs, no tinted tiles. */
:is(.feat, .int-cat, .integ-cat, .sol-card, .vcard) .ic { background: transparent !important; border: 1px solid var(--bd) !important; color: var(--tx) !important; box-shadow: none !important; }
:is(.feat, .int-cat, .integ-cat, .sol-card, .vcard, .tb, .ai-guard) svg :is(path, circle, rect, line, polyline) { stroke-width: 1.5; }

/* ============================================================
   PASS 6 (owner 14-oct: «TODA LA PÁGINA NECESITA SER REDISEÑADA»):
   every template, one grammar — ruled cells instead of grey boxes,
   hairline links instead of pills, editorial blog.
   ============================================================ */
:is(.card, .feat, .rel-card, .sol-card, .vcard, .int-cat, .integ-cat, .quote, .founder-panel, .post-card),
:is(.card, .feat, .rel-card, .sol-card, .vcard, .int-cat, .integ-cat, .quote, .founder-panel, .post-card):hover {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--bd) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px 0 6px !important;
  transform: none !important;
}
:is(.card, .feat, .rel-card, .sol-card, .vcard, .post-card):hover { border-top-color: var(--tx) !important; }
:is(.card, .feat, .rel-card, .sol-card, .vcard, .post-card) :is(h3, h4) { font-weight: 500; letter-spacing: -0.005em; }
.quote { font-size: 19px; line-height: 1.45; color: var(--tx); }
/* Small icon tiles inside cells: a hairline glyph, no tinted square. */
:is(.feat, .sol-card, .vcard, .rel-card, .card) :is(.ic, .vcard-ic) { background: transparent !important; border: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; color: var(--tx) !important; margin-bottom: 10px; }
/* Internal link pills → quiet underlined links. */
.ilinks { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ilink, .ilink:hover { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 2px 0 !important;
  color: var(--tx) !important; text-decoration: underline; text-decoration-color: var(--bdh); text-underline-offset: 4px; font-size: 14.5px; box-shadow: none !important; }
.ilink:hover { text-decoration-color: var(--tx); }
/* Blog: editorial list. */
.post-card { display: block; text-decoration: none; color: var(--tx); }
.post-tag { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--txm) !important; background: none !important; padding: 0 !important; border: 0 !important; }
.post-h2 { font-size: 22px !important; font-weight: 500 !important; line-height: 1.2 !important; margin: 10px 0 8px !important; }
.post-more { font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--txm) !important; }
.post-body { font-size: 18px; line-height: 1.7; }
.post-body h2 { font-size: 26px; font-weight: 500; margin-top: 40px; }
.post-cta { background: transparent !important; border: 0 !important; border-top: 1px solid var(--tx) !important; border-radius: 0 !important; padding: 28px 0 0 !important; box-shadow: none !important; }
/* Small status pills (Live / Rolling out) → caps labels. */
:is(.tag-live, .tag-wait, .tag-set, .soon, .in-pill, .v-pill, .pill-live) { background: transparent !important; border: 1px solid var(--bd) !important; border-radius: 4px !important; color: var(--txd) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px !important; }
.tag-live, .pill-live { color: var(--tx) !important; border-color: var(--tx) !important; }


/* Headlines (owner 14-oct: «E · DIN mayúsculas (SpaceX)»): condensed DIN caps, medium weight, open tracking. */
:is(h1, h2, h3, h4, .hero-h, .sec-title, .section-title) { font-family: var(--f-display) !important; text-transform: uppercase; }
:is(h1, .hero-h) { font-weight: 500 !important; letter-spacing: .02em !important; line-height: 1 !important; }
:is(h2, .sec-title, .section-title, .g-copy h2, .cta-band h2, .guarantee h2) { font-weight: 500 !important; letter-spacing: .025em !important; line-height: 1.04 !important; }
:is(h3, h4) { font-weight: 500 !important; letter-spacing: .04em !important; }
/* Small headings inside rows/cards read better in sentence case at body weight. */
:is(.fit-list, .move-steps) b, .post-h2, .ask-hi, .ask-q, :is(.feat, .card, .rel-card, .sol-card, .vcard, .pain-card, .tour-copy, .ai-steps, .steps, .plan) :is(h3, h4, b) { font-family: var(--f-body); text-transform: none; letter-spacing: -0.005em !important; font-weight: 600 !important; }
.g-seal b, .statband .stat b, .savecalc output b, .cta-band .ps b { font-family: var(--f-display); }


/* Savings (owner 14-oct «confuso»): one ruled row of three; the third number is live. */
.savings { max-width: 1060px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--tx); border-bottom: 1px solid var(--bd); }
.savings .sv { padding: 30px 28px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.savings .sv + .sv { border-left: 1px solid var(--bd); }
.savings .sv b { font-family: var(--f-display); font-size: clamp(40px, 4.6vw, 60px); font-weight: 500; line-height: 1; letter-spacing: .01em; color: var(--tx); font-variant-numeric: tabular-nums; }
.savings .sv > span { font-size: 14px; color: var(--txd); }
.savings .sv-in { font-size: 12.5px !important; color: var(--txm) !important; margin-top: 6px; line-height: 1.9; }
.savings .sv-in input { width: 3.2em; font: inherit; font-weight: 600; color: var(--tx); text-align: center; background: transparent; border: 0 !important; border-bottom: 1px solid var(--tx) !important; border-radius: 0 !important; padding: 0 2px !important; box-shadow: none !important; -moz-appearance: textfield; appearance: textfield; }
.savings .sv-in input::-webkit-outer-spin-button, .savings .sv-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.savings .sv-in input:focus { outline: none; background: var(--sf3); }
@media (max-width: 760px) { .savings { grid-template-columns: 1fr; } .savings .sv + .sv { border-left: 0; border-top: 1px solid var(--bd); } }

/* Voice (owner 14-oct «descuadrado y bizarro»): no floating card — a centered line in the room. */
.voice-sec { background: transparent !important; padding: 56px 0 !important; }
.voice-band { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
.voice-band .voice-ic { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--tx); background: transparent !important; color: var(--tx); display: grid; place-items: center; flex-shrink: 0; aspect-ratio: 1; }
.voice-band .voice-ic svg { width: 18px; height: 18px; }
.voice-band h3 { font-size: clamp(24px, 2.6vw, 32px) !important; margin: 0 0 8px !important; }
.voice-band p { font-size: 16px; line-height: 1.6; color: var(--txd); margin: 0; }

/* Owner 14-oct: «SpaceX usa letras más gruesas» — headlines bold. */
:is(h1, .hero-h, h2, .sec-title, .section-title, .g-copy h2, .cta-band h2, .guarantee h2, h3, h4) { font-weight: 700 !important; }
:is(h1, .hero-h) { letter-spacing: .015em !important; }
.savings .sv b, .g-seal b, .cta-band .ps b { font-weight: 700 !important; }

/* Savings v3 (owner 14-oct «a prueba de tontos»): A + B = C, nothing to read twice. */
.savings { grid-template-columns: 1fr auto 1fr auto 1.1fr !important; align-items: center; border-bottom: 0 !important; }
.savings .sv { border-left: 0 !important; padding: 34px 20px !important; gap: 10px !important; }
.savings .sv-k { font-size: 12px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--txm) !important; }
.savings .sv b small { font-size: .38em; font-weight: 600; margin-left: 4px; color: var(--txm); letter-spacing: 0; }
.savings .sv-note { font-size: 13px !important; color: var(--txd) !important; }
.savings .sv-plus { font-family: var(--f-display); font-size: 40px; font-weight: 400; color: var(--txm); padding: 0 6px !important; align-self: center; }
.savings .sv-total { background: var(--tx); color: var(--bg2); }
.savings .sv-total b, .savings .sv-total .sv-k, .savings .sv-total b small { color: var(--bg2) !important; }
.savings .sv-total .sv-k { opacity: .7; }
@media (max-width: 860px) { .savings { grid-template-columns: 1fr !important; } .savings .sv-plus { padding: 0 !important; text-align: center; font-size: 28px; } }

/* Readable everywhere (owner 14-oct: «letras muy pequeñas»): no body copy under 16px in cells. */
:is(.feat, .card, .rel-card, .sol-card, .vcard, .pain-card, .post-card) p { font-size: 17px !important; line-height: 1.55 !important; color: var(--txd); }
:is(.feat, .card, .rel-card, .sol-card, .vcard) :is(h3, h4) { font-size: 22px !important; margin: 6px 0 10px !important; }
:is(.feat-ul, .t-feat) li, .feat-ul li { font-size: 16px !important; line-height: 1.5; color: var(--txd); }
.feat-ul { list-style: none; padding: 0; margin: 14px 0 0; }
.feat-ul li { position: relative; padding-left: 18px !important; margin-top: 8px; }
.feat-ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1.5px; background: var(--tx); border: 0 !important; border-radius: 0 !important; }
.feat-ul li::after { display: none !important; }
:is(.feat, .card, .rel-card, .sol-card, .vcard) .ic { justify-content: flex-start !important; margin: 0 0 12px !important; display: flex !important; }
:is(.feat, .card, .rel-card, .sol-card, .vcard) .ic svg { width: 22px; height: 22px; }
.lede.small, .lede { font-size: 19px !important; }
.kicker { font-size: 13px !important; }

/* «Get booked…» grid (owner 14-oct: «puede ser más fácil de leer»): one idea per cell —
   title + one sentence. Icons and sub-bullets go (the tour below shows the detail). */
#does .feat .ic, #does .feat .feat-ul { display: none !important; }
#does .grid6 { gap: 0 40px !important; }
#does .feat { padding: 28px 0 30px !important; }
#does .feat h3 { font-family: var(--f-display) !important; text-transform: uppercase; letter-spacing: .03em !important; font-size: 24px !important; font-weight: 700 !important; margin: 0 0 12px !important; }
#does .feat p { font-size: 18px !important; line-height: 1.55 !important; max-width: 34ch; }
/* Logo a touch smaller, with air (owner 14-oct: «muy grande y muy pegado — mejóralo en todas partes»). */
.nav .brand .brand-logo, .nav .brand-logo { height: 15px !important; }
.footer .brand-logo { height: 16px !important; }
.auth-photo img { filter: grayscale(1) contrast(1.08) brightness(.94); }
/* <<< WHITE ROOM <<< */