/* Hostmivo public design layer. Loaded after app.css so page markup stays unchanged. */
:root {
    --heading: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
    --ink: #0f1b2e;
    --muted: #55617a;
    --line: #e7ebf1;
    --soft: #f6f8fb;
    --blue: #2563d4;
    --blue-dark: #1b4bb0;
    --night: #0d1a2d;
    --shadow-card: 0 1px 2px #0f1b2e0a, 0 8px 24px #0f1b2e0d;
}

body { color: var(--muted); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--ink); font-weight: 800; letter-spacing: -.025em; }
h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.08; }
h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; }
h3 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.eyebrow, .hero .eyebrow, .hero-marker { display: none; }
.section { padding: 96px 0; }
.section-heading { margin-bottom: 48px; }

.button { gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 9px; font-size: 15px; font-weight: 600; box-shadow: 0 1px 2px #0f1b2e14; }
.button-small { min-height: 42px; padding: 9px 18px; font-size: 14px; }
.button-outline { color: var(--ink); border-color: #d4dbe5; }
.button-outline:hover { color: #fff; background: var(--ink); border-color: var(--ink); }

/* Header */
.topbar { background: var(--night); color: #c5cfdc; font-size: 13px; }
.topbar a { color: #dfe6ef; }
.site-header { position: sticky; top: 0; box-shadow: 0 1px 0 var(--line); }
#primary-navigation > a, .nav-dropdown > a { font-size: 15px; font-weight: 500; color: var(--ink); }

/* Hero */
.hero { background: var(--night); }
.hero-image { opacity: .55; }
.hero::before { background: linear-gradient(90deg, #0d1a2df7 0%, #0d1a2de0 42%, #0d1a2d55 100%); }
.hero-inner { min-height: 640px; }
.hero h1 { max-width: 640px; color: #fff; font-size: clamp(40px, 5.2vw, 66px); letter-spacing: -.035em; }
.hero h1 span { color: inherit; }
.hero-description { max-width: 520px; color: #c9d4e3; font-size: 18px; line-height: 1.6; }
.hero-price { margin-top: 30px; color: #c9d4e3; font-size: 15px; }
.hero-price strong { margin: 2px 0 26px; color: #fff; font: 800 42px/1.2 var(--heading); letter-spacing: -.03em; }
.hero-price strong span { margin-left: 3px; color: #c9d4e3; font: 400 16px var(--body); letter-spacing: 0; }
.hero-secondary { color: #fff; font-size: 15px; }
.hero-secondary:hover { color: #ffb976; }
.hero-note { color: #a9b6c7; font-size: 13px; }

.benefit-strip { border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
.benefit-strip .container { font-size: 15px; font-weight: 500; color: var(--ink); }

/* Features */
.features { gap: 24px; text-align: left; }
.features article { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-card); }
.features article > img { height: 60px; margin: 0 0 22px; }
.features h3 { font-size: 21px; }
.features p { font-size: 16px; }
.features .text-link { margin-top: auto; font-size: 15px; font-weight: 600; }

/* Domain band */
.domain-band { padding: 72px 0; background: var(--night); color: #c9d4e3; }
.domain-band h2 { font-size: clamp(28px, 3vw, 38px); }
.domain-band p { font-size: 16px; }
.domain-search { min-height: 64px; border: 0; border-radius: 12px; }
.domain-search input { font-size: 16px; }
.domain-extensions { font-size: 14px; margin-top: 20px; }
.domain-extensions b { font-size: 20px; letter-spacing: -.02em; }
.domain-band .domain-disclaimer { font-size: 13px; color: #a9b6c7; }

/* Plans */
.demo-note { font-size: 14px; }
.plans { gap: 20px; margin-top: 40px; }
.plan, .plan:first-child, .plan:last-child { padding: 30px 26px 28px; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); text-align: left; }
.plan > img { display: none; }
.plan h3 { display: block; min-height: 0; margin-bottom: 6px; font-size: 22px; }
.plan-description { min-height: 48px; font-size: 14px; line-height: 1.5; }
.plan-price { color: var(--ink); font-size: 46px; font-weight: 800; letter-spacing: -.03em; }
.plan-price sup { font-size: 22px; font-weight: 700; top: -14px; }
.plan-price > span { color: var(--muted); font-size: 15px; letter-spacing: 0; }
.plan-billing { font-size: 13px; color: var(--muted); }
.plan li { font-size: 15px; }
.plan .button { min-height: 46px; font-size: 15px; }
.plan.featured { border: 2px solid var(--blue); box-shadow: 0 12px 34px #2563d41f; }
.plan-ribbon { top: -13px; right: auto; bottom: auto; left: 24px; padding: 3px 10px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: capitalize; }
.featured .plan-price { color: var(--ink); }
.package-footnote { font-size: 13px; }

/* Images and lists */
.service-photo { padding: 0; }
.service-photo::after { display: none; }
.service-photo > img { border-radius: 16px; }
.service-links a { padding: 14px 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.text-link { font-weight: 600; }

/* Inner pages */
.page-banner { padding: 28px 0 72px; background: var(--night); }
.page-banner::after { display: none; }
.page-banner h1 { max-width: 820px; color: #fff; font-size: clamp(34px, 4.4vw, 54px); letter-spacing: -.03em; }
.page-banner p:last-child { color: #c9d4e3; font-size: 18px; line-height: 1.6; }
.breadcrumbs { margin-bottom: 40px; color: #a9b6c7; font-size: 14px; }
.breadcrumbs a { color: #dfe6ef; }

/* Footer */
.site-footer { background: var(--night); color: #c9d4e3; }
.site-footer h3 { color: #fff; font-size: 16px; letter-spacing: -.01em; }
.footer-intro p { font-size: 15px; }
.footer-grid > div:not(:first-child) a { color: #c9d4e3; font-size: 15px; }
.footer-grid > div:not(:first-child) a:hover { color: #fff; }
.footer-bottom { border-top-color: #ffffff1f; color: #a9b6c7; font-size: 13px; }
.preview-label { display: none; }
.footer-intro img { filter: brightness(0) invert(1); }

@media (max-width: 760px) {
    .section { padding: 64px 0; }
    .hero-inner { min-height: 0; padding-block: 64px; }
    .site-header { position: relative; }
    .plan-description { min-height: 0; }
}