/* HostingPR V1 — Brand System
   Locked palette + Montserrat. Zero external calls (self-host font, see README_BUILD.md).
   Honors V1_SCOPE §13 (brand mark now exists) + Master Guide §8 (calm, clean, trustworthy). */

:root {
  /* Brand palette (from brand identity sheet) */
  --navy-darkest: #0D1B2A;
  --navy:         #1E3A5F;
  --cyan:         #27B6E6;
  --steel:        #B6C4D6;
  --ink:          #1A1F26;

  /* Semantic */
  --bg:           #ffffff;
  --bg-alt:       #f4f7fb;
  --bg-dark:      var(--navy-darkest);
  --text:         #16202b;
  --text-soft:    #4a5a6b;
  --text-ondark:  #e8eef6;
  --line:         #dfe7f1;
  --cyan-ink:     #0e7fb0;   /* darker cyan for accessible text-on-white */

  --radius:   14px;
  --radius-lg:22px;
  --shadow:   0 1px 3px rgba(13,27,42,.08), 0 1px 2px rgba(13,27,42,.05);
  --shadow-lg:0 18px 40px rgba(13,27,42,.14), 0 6px 14px rgba(13,27,42,.08);
  --grad:     linear-gradient(135deg, var(--navy) 0%, var(--navy-darkest) 60%);
  --grad-cyan:linear-gradient(135deg, var(--cyan) 0%, #1693c4 100%);

  --font: 'Montserrat', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; color: var(--navy-darkest); }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: 1.3rem; font-weight: 700; }
p  { color: var(--text-soft); }
a  { color: var(--cyan-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 5rem 0; }
.section--alt { background: var(--bg-alt); }
.eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan-ink); margin-bottom: .9rem;
}
.lead { font-size: 1.15rem; max-width: 640px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 1rem; border: 0;
  padding: .9rem 1.6rem; border-radius: 100px; transition: transform .15s, box-shadow .15s, background .15s;
}
.btn--primary { background: var(--grad-cyan); color: #fff; box-shadow: 0 6px 18px rgba(39,182,230,.35); }
.btn--primary:hover { transform: translateY(-2px); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--navy-darkest); border: 2px solid var(--line); }
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan-ink); text-decoration: none; }
.btn--ondark { background: #fff; color: var(--navy-darkest); }

/* Logo lockup */
.logo { display: inline-flex; align-items: center; gap: .6rem; }
.logo svg, .logo img { width: 38px; height: 38px; display: block; object-fit: contain; }
.logo-word { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; }
.logo-word .pr { color: var(--cyan); }
.logo-word.on-dark { color: #fff; }
.logo-word.on-light { color: var(--navy-darkest); }

/* Header / nav */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-links { display: flex; gap: 1.5rem; align-items: center; }
.nav-links a { color: var(--text); font-weight: 600; font-size: .95rem; }
.nav-links a:hover { color: var(--cyan-ink); text-decoration: none; }
@media (max-width: 760px){ .nav-links .hide-sm { display:none; } }

/* Hero */
.hero { background: var(--grad); color: var(--text-ondark); position: relative; overflow: hidden; }
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 82% 18%, rgba(39,182,230,.30), transparent 42%),
    radial-gradient(circle at 12% 90%, rgba(39,182,230,.12), transparent 45%);
}
.hero .wrap { position: relative; padding: 5.5rem 1.25rem 5rem; }
.hero h1 { color: #fff; max-width: 14ch; }
.hero h1 .accent { color: var(--cyan); }
.hero .lead { color: var(--steel); margin: 1.4rem 0 2.2rem; font-size: 1.25rem; }
.hero-cta { display: flex; gap: .9rem; flex-wrap: wrap; }
.hero-trust { margin-top: 2.4rem; color: var(--steel); font-size: .9rem; display:flex; gap:1.4rem; flex-wrap:wrap; }
.hero-trust span { display:inline-flex; align-items:center; gap:.4rem; }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 1.2rem; }
.pillar { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow); }
.pillar .ic { width:46px;height:46px;border-radius:12px;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--cyan-ink); }
.pillar h3 { margin-bottom:.4rem; }
.pillar p { font-size:.95rem; }

/* Lenses */
.lens-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.4rem; }
.lens { background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem; }
.lens .tag { font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-ink); }
.lens h3 { margin:.5rem 0 .6rem; }
.lens p { font-size:.96rem; }

/* Pricing */
.price-card { max-width: 480px; margin: 0 auto; background:#fff; border:2px solid var(--cyan); border-radius:var(--radius-lg); padding:2.4rem; text-align:center; box-shadow:var(--shadow-lg); }
.price-card .name { font-weight:700; color:var(--navy); letter-spacing:.04em; text-transform:uppercase; font-size:.85rem; }
.price-card .amt { font-size:3rem; font-weight:800; color:var(--navy-darkest); line-height:1; margin:.5rem 0; }
.price-card .amt small { font-size:1rem; font-weight:500; color:var(--text-soft); }
.price-card .setup { color:var(--text-soft); margin-bottom:1.4rem; }
.price-list { list-style:none; text-align:left; margin:1.4rem 0; display:grid; gap:.6rem; }
.price-list li { display:flex; gap:.6rem; align-items:flex-start; font-size:.96rem; color:var(--text); }
.price-list li::before { content:'✓'; color:var(--cyan-ink); font-weight:800; }
.price-note { font-size:.82rem; color:var(--text-soft); margin-top:1rem; }

/* 3-tier pricing */
.tiers { display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1.5rem; align-items:start; }
.tier { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow); position:relative; }
.tier.featured { border:2px solid var(--cyan); box-shadow:var(--shadow-lg); }
.tier .name { font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; }
.tier .amt { font-size:2.4rem; font-weight:800; color:var(--navy-darkest); line-height:1; margin:.5rem 0; }
.tier .amt small { font-size:.9rem; font-weight:500; color:var(--text-soft); }
.tier .amt--custom { font-size:2rem; color:var(--cyan-ink); }
.tier .setup { color:var(--text-soft); font-size:.9rem; margin-bottom:1.2rem; }
.tier .price-list { margin:1.2rem 0; }
.tier .badge { display:inline-block; background:var(--grad-cyan); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.25rem .8rem; border-radius:100px; margin-bottom:.6rem; }
.tier .badge--soft { background:var(--bg-alt); color:var(--cyan-ink); border:1px solid var(--line); }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem; counter-reset: s; }
.step { background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem; position:relative; }
.step::before { counter-increment:s; content:counter(s); position:absolute; top:-16px; left:1.4rem; width:34px;height:34px;border-radius:50%;background:var(--grad-cyan);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow); }
.step h3 { margin:.6rem 0 .3rem; font-size:1.1rem; }
.step p { font-size:.92rem; }

/* Form */
.form-card { background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:2.2rem;box-shadow:var(--shadow-lg); max-width:640px; }
.field { margin-bottom:1.1rem; }
.field label { display:block; font-weight:600; font-size:.92rem; margin-bottom:.4rem; color:var(--text); }
.field .req { color:var(--cyan-ink); }
.field input, .field select, .field textarea {
  width:100%; font-family:inherit; font-size:1rem; padding:.75rem .9rem;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { outline:2px solid var(--cyan); border-color:var(--cyan); }
.field textarea { min-height:96px; resize:vertical; }
.checks { display:flex; flex-wrap:wrap; gap:.6rem; }
.check-pill { display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--line); border-radius:100px; padding:.4rem .9rem; font-size:.9rem; cursor:pointer; }
.check-pill input { width:auto; }
.consent { display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--text-soft); }
.consent input { width:auto; margin-top:.25rem; }
.form-note { font-size:.82rem; color:var(--text-soft); margin-top:.8rem; }
.form-status { margin-top:1rem; padding:.9rem 1rem; border-radius:10px; font-weight:600; display:none; }
.form-status.ok { display:block; background:#e6f7ee; color:#0c6b3f; }
.form-status.err{ display:block; background:#fdeaea; color:#9a2222; }

/* Footer */
.site-footer { background: var(--navy-darkest); color: var(--steel); padding: 3rem 0 2rem; }
.site-footer a { color: var(--steel); }
.site-footer a:hover { color: #fff; }
.foot-grid { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start; }
.foot-links { display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.9rem; }
.foot-meta { font-size:.82rem; color:#6f8095; margin-top:1.6rem; }

/* utility */
.center { text-align:center; }
.mt-2 { margin-top:1.4rem; }
.mb-2 { margin-bottom:1.4rem; }
.section-head { max-width:680px; margin-bottom:2.4rem; }
.section--alt .pillar, .section--alt .step { background:#fff; }
[hidden]{ display:none !important; }