/* Site On Approval — Variant C "Price Up Front"
   Light, high-contrast direct-response register.
   White/paper ground, near-black ink, one strong accent (approval blue),
   big numbers, big buttons. No JS required. */

:root{
  --ink:#101418;
  --ink2:#1a2129;
  --paper:#ffffff;
  --wash:#f4f6f8;
  --accent:#0b4fd6;
  --accent-d:#083fa8;
  --accent-soft:#e8effe;
  --good:#0e7a3d;
  --mut:#4c565f;
  --line:#dde3e8;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--paper);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
h1,h2,h3{line-height:1.14;letter-spacing:-0.015em}
h2{font-size:clamp(27px,4.2vw,40px);margin-bottom:14px}
.hl{color:var(--accent)}
.hl-light{color:#9dbcf7}
a{color:var(--accent-d)}

/* Header — sticky, price anchor + CTA */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.97);border-bottom:2px solid var(--ink);
}
.header-in{display:flex;align-items:center;gap:22px;padding-top:12px;padding-bottom:12px}
.logo{font-weight:900;font-size:19px;letter-spacing:.1em;color:var(--ink);text-decoration:none;white-space:nowrap}
.logo span{color:var(--accent)}
.logo.small{font-size:15px}
.header-price{
  font-size:14.5px;color:var(--mut);background:var(--accent-soft);
  border:1px solid #c6d6fa;border-radius:999px;padding:5px 13px;white-space:nowrap;
}
.header-price strong{color:var(--accent-d)}
.site-header nav{display:flex;gap:19px;margin-left:auto}
.site-header nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600}
.site-header nav a:hover{color:var(--accent)}
.btn{
  display:inline-block;background:var(--accent);color:#fff;font-weight:800;
  text-decoration:none;padding:14px 26px;border-radius:10px;font-size:16.5px;
  box-shadow:0 5px 0 var(--accent-d);
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.btn:hover{background:var(--accent-d)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--accent-d)}
.btn-small{padding:10px 18px;font-size:14.5px;margin-left:4px;white-space:nowrap}
.btn-big{font-size:20px;padding:17px 34px}

/* Hero — light, price is the first content block */
.hero{background:var(--paper);padding:56px 0 60px;border-bottom:1px solid var(--line)}
.eyebrow{
  color:var(--accent-d);font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  font-size:12.5px;margin-bottom:18px;
}
.eyebrow.light{color:#9dbcf7}
.hero h1{font-size:clamp(32px,5.4vw,54px);font-weight:900;max-width:900px}
.hero-sub{font-size:clamp(17px,2.3vw,20.5px);color:var(--mut);max-width:760px;margin:20px 0 8px}
.price-q{font-size:clamp(24px,3.6vw,34px);margin:30px 0 20px}

/* Pricing cards */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.price-card{
  border:2px solid var(--ink);border-radius:var(--radius);padding:30px 28px 26px;
  background:#fff;display:flex;flex-direction:column;position:relative;
}
.price-card.featured{border-color:var(--accent);box-shadow:0 10px 34px rgba(11,79,214,.16)}
.price-badge{
  position:absolute;top:-14px;left:20px;right:20px;text-align:center;
  background:var(--accent);color:#fff;font-weight:800;font-size:13px;
  padding:6px 12px;border-radius:999px;letter-spacing:.02em;
}
.price-label{letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:var(--mut);font-weight:800}
.price-card.featured .price-label{color:var(--accent-d);margin-top:8px}
.price-num{font-size:clamp(56px,7vw,72px);font-weight:900;line-height:1.02;margin:6px 0 2px;letter-spacing:-0.03em}
.price-down{font-size:17px;color:var(--ink);margin-bottom:6px}
.price-down strong{color:var(--accent-d);font-size:19px}
.ticks{list-style:none;margin:14px 0 20px}
.ticks li{padding:8px 0 8px 30px;position:relative;font-size:16.5px;border-bottom:1px solid var(--line)}
.ticks li:last-child{border-bottom:none}
.ticks li::before{content:"✓";position:absolute;left:2px;color:var(--good);font-weight:900}
.btn-card{margin-top:auto;text-align:center}
.price-terms{margin-top:16px;font-size:14.5px;color:var(--mut);text-align:center}

/* Terms strip — dark band, repeated */
.terms-strip{background:var(--ink);color:#fff}
.terms-in{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;
  padding-top:15px;padding-bottom:15px;font-weight:800;font-size:16px;letter-spacing:.01em;
}
.terms-in .dot{color:var(--accent);font-weight:900}

/* Sections */
.section{padding:64px 0}
.section-tint{background:var(--wash)}
.section-dark{background:var(--ink2);color:#fff}
.section-sub{font-size:17.5px;color:var(--mut);max-width:760px;margin-bottom:8px}
.section-sub.wide{max-width:860px}
.section-dark .section-sub,.section-sub.light{color:#c3ccd4}

/* FAQ — open-by-default <details>, no JS */
.faq{margin-top:30px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{
  cursor:pointer;font-weight:800;font-size:19px;padding:16px 34px 16px 2px;position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:12px;font-size:26px;font-weight:900;color:var(--accent);
}
.faq details[open ] summary::after{content:"–"}
.faq details p{font-size:16.5px;color:#333c44;padding:0 34px 20px 2px;max-width:820px}
.faq-cta{margin-top:34px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.faq-cta p{font-size:16px;color:var(--mut)}
.faq-cta a[href^="mailto"]{font-weight:700}

/* Portfolio cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.card{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;
  border-radius:var(--radius);padding:24px 22px;min-height:196px;color:#fff;
  transition:transform .15s ease;
}
.card:hover{transform:translateY(-3px)}
.card-domain{font-weight:800;font-size:19px;letter-spacing:.01em;word-break:break-word}
.card-desc{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.88)}
.card-go{margin-top:auto;font-weight:700;font-size:14px;color:#fff}
.c1{background:#275e63}.c2{background:#31456e}.c3{background:#4a3a63}
.c4{background:#71384f}.c5{background:#5d5230}.c6{background:#37543a}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.step{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:26px 24px}
.step-num{color:var(--accent-d);font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:12.5px}
.step h3{font-size:21px;margin:10px 0 10px}
.step p{font-size:15.5px;color:#454e56}

/* Preview + final CTA */
.preview-in .btn{margin-top:24px}
.cta-final{background:var(--accent-soft);border-top:2px solid var(--accent)}
.cta-in{text-align:center}
.cta-in h2{font-size:clamp(30px,5vw,46px)}
.cta-sub{font-size:18px;font-weight:700;color:var(--ink);margin:6px auto 28px}
.cta-note{margin-top:20px;font-size:15px;font-weight:700;color:var(--accent-d)}

/* Footer */
footer{border-top:1px solid var(--line);padding:34px 0 42px;background:var(--paper)}
.footer-in{display:flex;flex-direction:column;gap:6px}
footer p{color:var(--mut);font-size:14.5px}
footer a{font-weight:600;text-decoration:none}
footer a:hover{text-decoration:underline}

/* Mobile */
@media (max-width:880px){
  .price-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .site-header nav{display:none}
  .header-price{display:none}
  .header-in{gap:12px}
  .btn-small{margin-left:auto}
  .price-card.featured{margin-top:12px}
}
@media (max-width:540px){
  .logo{font-size:15.5px;letter-spacing:.06em}
  .btn-small{padding:9px 13px;font-size:13.5px}
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
  .hero{padding:40px 0 44px}
  .section{padding:46px 0}
  .terms-in{font-size:14.5px;gap:6px 10px}
  .btn-big{font-size:18px;padding:15px 26px}
  .faq summary{font-size:17.5px}
}