/* MAKINHOST visual system: minimal palette, editorial spacing, clear actions. */
:root {
  color-scheme: light;
  --navy: #0f0d4a;
  --navy-soft: #201d69;
  --red: #e63946;
  --red-dark: #c92f3b;
  --mist: #eef1f6;
  --mist-light: #f7f8fb;
  --white: #fff;
  --ink: #24233c;
  --muted: #686981;
  --line: #dfe3ec;
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --page-width: 1180px;
  --header-height: 78px;
  --radius: 16px;
  --shadow: 0 20px 60px rgb(15 13 74 / 10%);
  --shadow-soft: 0 8px 30px rgb(15 13 74 / 7%);
  /* Shared aliases keep the existing secondary pages on the MAKINHOST palette. */
  --color-primary: var(--red);
  --color-primary-hover: var(--red-dark);
  --color-navy: var(--navy);
  --color-ink: var(--ink);
  --color-muted: var(--muted);
  --color-soft: var(--mist-light);
  --color-border: var(--line);
  --color-success: var(--navy);
  --color-warning: var(--red);
  --color-danger: var(--red-dark);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 22px;
}
*, *::before, *::after { box-sizing: border-box; }
 [hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 20px); }
body { margin: 0; color: var(--ink); background: var(--white); font: 400 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea { font-family: var(--font); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
::selection { color: var(--white); background: var(--navy); }
.container { width: min(var(--page-width), calc(100% - 48px)); margin-inline: auto; }
.section { padding-block: 104px; }
.section--soft { background: var(--mist-light); }
.lead { color: var(--muted); font-size: 18px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.content-narrow { max-width: 920px; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 16px; transform: translateY(-150%); border-radius: 8px; color: var(--white); background: var(--navy); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 100; height: var(--header-height); border-bottom: 1px solid transparent; background: rgb(255 255 255 / 96%); transition: box-shadow .2s, border-color .2s; backdrop-filter: blur(12px); }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 5px 20px rgb(15 13 74 / 6%); }
.header-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; color: var(--navy); font-size: 19px; font-weight: 800; letter-spacing: -.06em; }
.brand-logo { display: block; width: auto; max-width: 190px; height: 48px; object-fit: contain; }
.brand-mark { display: inline-flex; width: 27px; height: 27px; align-items: end; gap: 3px; padding: 4px; transform: skew(-10deg); border-radius: 7px 7px 7px 3px; background: var(--navy); }
.brand-mark i { width: 4px; border-radius: 3px; background: var(--white); }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 13px; }.brand-mark i:nth-child(3) { height: 18px; background: var(--red); }
.primary-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.primary-nav a { color: var(--navy); font-size: 13px; font-weight: 500; transition: color .18s; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--red); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.language-switch { color: var(--navy); font-size: 13px; font-weight: 600; white-space: nowrap; }
.language-switch-mobile { display: none; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 0 21px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-weight: 700; line-height: 1.2; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button--primary { color: var(--white); background: var(--red); box-shadow: 0 7px 18px rgb(230 57 70 / 18%); }
.button--primary:hover { background: var(--red-dark); box-shadow: 0 9px 24px rgb(230 57 70 / 24%); }
.button--outline { border-color: var(--line); color: var(--navy); background: var(--white); }
.button--outline:hover { border-color: var(--navy); }
.button--large { min-height: 54px; padding-inline: 23px; font-size: 14px; }
.button--small { min-height: 42px; padding-inline: 17px; font-size: 13px; }
.menu-toggle { display: none; }
.hero { position: relative; overflow: hidden; padding-block: 83px 28px; background: linear-gradient(180deg, #fff 0%, #fbfbfd 100%); }
.hero::before { position: absolute; top: -220px; right: -160px; width: 620px; height: 620px; border: 1px solid rgb(15 13 74 / 4%); border-radius: 50%; content: ''; }
.hero-grid { position: relative; display: grid; min-height: 525px; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 24px; }
.hero-copy { position: relative; z-index: 2; padding-block: 34px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 19px; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgb(230 57 70 / 10%); }
h1, h2, h3, p { overflow-wrap: break-word; }
.hero h1 { max-width: 640px; margin: 0; color: var(--navy); font-size: clamp(42px, 5.3vw, 67px); font-weight: 700; line-height: 1.06; letter-spacing: -.065em; }
.hero h1 span { position: relative; white-space: nowrap; }
.hero h1 span::after { position: absolute; right: 2px; bottom: 2px; left: 0; z-index: -1; height: 12px; transform: rotate(-1.5deg); background: rgb(230 57 70 / 17%); content: ''; }
.hero-description { max-width: 540px; margin: 24px 0 16px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.hero-price { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.hero-price strong { color: var(--red); font-size: 20px; font-weight: 800; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.whatsapp-icon { color: #278a62; font-size: 17px; }
.whatsapp-float { position: fixed; z-index: 95; right: 22px; bottom: 22px; display: grid; width: 56px; height: 56px; place-items: center; border: 2px solid var(--white); border-radius: 50%; color: var(--white); background: var(--navy); box-shadow: 0 8px 24px rgb(15 13 74 / 25%); transition: transform .2s, background .2s, box-shadow .2s; }
.whatsapp-float:hover { transform: translateY(-3px); background: var(--navy-soft); box-shadow: 0 12px 28px rgb(15 13 74 / 30%); }
.whatsapp-float svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.blog-section { background: var(--white); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.blog-card { display: flex; flex-direction: column; min-height: 250px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 8px 26px rgb(15 13 74 / 5%); }
.blog-cover { width: calc(100% + 48px); height: 190px; margin: -24px -24px 20px; border-radius: 14px 14px 0 0; object-fit: cover; background: var(--mist); }
.blog-date { margin: 0 0 11px; color: var(--red); font-size: 11px; font-weight: 700; }
.blog-card h3 { margin: 0 0 10px; color: var(--navy); font-size: 19px; line-height: 1.4; }
.blog-excerpt, .blog-content { color: var(--muted); font-size: 13px; }
.blog-excerpt { margin: 0 0 18px; }
.blog-readmore { display: inline-flex; width: fit-content; gap: 8px; margin-top: auto; padding-top: 14px; color: var(--red); font-size: 12px; font-weight: 700; text-decoration: none; }
.blog-readmore:hover { color: var(--red-dark); }
.blog-readmore:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; border-radius: 3px; }
.blog-content { white-space: pre-wrap; margin: 12px 0 0; }
.blog-empty { grid-column: 1 / -1; color: var(--muted); text-align: center; }
.article-page { min-height: 100vh; background: var(--mist-light); }
.article-header { border-bottom: 1px solid var(--line); background: var(--white); }
.article-header-inner { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 18px; }
.article-brand { color: var(--navy); font-size: 18px; font-weight: 800; letter-spacing: .06em; text-decoration: none; }
.article-brand span { color: var(--red); }
.article-back { color: var(--navy); font-size: 13px; font-weight: 650; text-decoration: none; }
.article-back:hover { color: var(--red); }
.article-shell { width: min(820px, calc(100% - 40px)); margin: 54px auto 80px; padding: clamp(24px, 6vw, 64px); border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-soft); }
.article-shell[dir="rtl"] { font-family: 'IBM Plex Sans Arabic', var(--font); }
.article-meta { margin: 0 0 14px; color: var(--red); font-size: 12px; font-weight: 700; }
.article-title { margin: 0; color: var(--navy); font-size: clamp(32px, 6vw, 52px); line-height: 1.14; letter-spacing: -.04em; }
.article-excerpt { margin: 18px 0 0; color: var(--muted); font-size: 18px; line-height: 1.7; }
.article-cover { width: 100%; max-height: 480px; margin: 32px 0; border-radius: 12px; object-fit: cover; background: var(--mist); }
.article-body { color: var(--ink); font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.article-body p { margin: 0 0 20px; }
.article-cta { margin-top: 38px; padding: 24px; border-radius: 12px; background: var(--mist); }
.article-cta p { margin: 0 0 14px; color: var(--navy); font-weight: 650; }
.article-cta a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 18px; border-radius: 8px; color: var(--white); background: var(--red); font-size: 13px; font-weight: 700; text-decoration: none; }
.article-cta a:hover { background: var(--red-dark); }
.article-footer { padding: 24px 20px; color: var(--white); background: var(--navy); text-align: center; font-size: 12px; }
.article-footer p { margin: 0; }
.hero-reassurance { display: flex; align-items: center; gap: 9px; margin: 20px 0 0; color: var(--muted); font-size: 12px; }
.hero-reassurance span { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: var(--navy); background: var(--mist); font-size: 11px; font-weight: 800; }
.hero-art { position: relative; min-height: 500px; }
.art-grid { position: absolute; top: 11%; right: -5%; width: 83%; height: 79%; opacity: .48; background-image: radial-gradient(#cfd2e0 1px, transparent 1px); background-size: 17px 17px; mask-image: linear-gradient(90deg, transparent, #000 35%, #000); }
.browser-window { position: absolute; top: 10%; left: 3%; z-index: 1; width: 84%; overflow: hidden; border: 1px solid #e1e2e9; border-radius: 13px; background: var(--white); box-shadow: 0 28px 70px rgb(15 13 74 / 17%); transform: perspective(1100px) rotateY(-5deg) rotateX(1deg); }
.browser-bar { display: flex; height: 36px; align-items: center; justify-content: space-between; padding-inline: 13px; border-bottom: 1px solid #eeeef2; color: #9999a9; background: #fbfbfc; font-size: 8px; }
.browser-dots { display: flex; gap: 4px; }.browser-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d4d5df; }.browser-dots i:first-child { background: var(--red); }.browser-bar>b { letter-spacing: 2px; }
.demo-site { padding: 0 7.5% 12px; color: #2c3040; font-family: Georgia, 'Times New Roman', serif; }
.demo-nav { display: flex; height: 46px; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0eee9; font-family: var(--font); font-size: 7px; letter-spacing: .11em; }
.demo-nav b { color: var(--navy); }.demo-nav b span { color: var(--red); }.demo-nav div { display: flex; gap: 11px; }.demo-nav i { width: 22px; height: 3px; background: var(--mist); }
.demo-hero { display: grid; min-height: 275px; grid-template-columns: .94fr 1.06fr; align-items: center; padding-block: 28px; }
.demo-hero small { color: var(--navy-soft); font-family: var(--font); font-size: 6px; letter-spacing: .2em; }
.demo-hero strong { display: block; margin-top: 12px; color: #24243a; font-size: clamp(23px, 3vw, 38px); font-weight: 400; line-height: 1.03; letter-spacing: -.05em; }
.demo-hero em { color: var(--red); font-weight: 400; }.demo-hero p { max-width: 150px; margin: 11px 0 14px; color: var(--muted); font-family: var(--font); font-size: 7px; line-height: 1.5; }
.demo-link { color: #343446; font-family: var(--font); font-size: 7px; }.demo-link b { margin-left: 7px; color: var(--red); font-size: 11px; }
.demo-still-life { position: relative; height: 205px; overflow: hidden; background: var(--mist); }
.still-sun { position: absolute; top: 22px; right: 29px; width: 100px; height: 100px; border-radius: 50%; background: #d7d6e8; }
.vase { position: absolute; z-index: 1; bottom: 23px; display: block; border-radius: 48% 48% 23% 23%; background: #a46f58; }
.vase--one { left: 26px; width: 63px; height: 107px; background: var(--navy); }.vase--one::before { position: absolute; top: -22px; left: 23px; width: 18px; height: 33px; border-radius: 5px 5px 0 0; background: inherit; content: ''; }
.vase--two { left: 102px; width: 56px; height: 74px; background: #c9c8df; }.vase--two::before { position: absolute; top: -12px; left: 20px; width: 16px; height: 21px; border-radius: 4px 4px 0 0; background: inherit; content: ''; }
.vase--three { right: 18px; width: 39px; height: 55px; background: var(--red); }.vase--three::before { position: absolute; top: -8px; left: 13px; width: 13px; height: 14px; background: inherit; content: ''; }
.demo-footer { display: flex; justify-content: space-between; padding-top: 9px; border-top: 1px solid #f0eee9; color: #9996a0; font-family: var(--font); font-size: 6px; }
.phone-mockup { position: absolute; right: 1%; bottom: 8%; z-index: 3; width: 125px; height: 247px; padding: 7px; border: 1px solid #d8d8df; border-radius: 22px; background: #fff; box-shadow: 0 18px 45px rgb(15 13 74 / 18%); transform: rotate(3deg); }
.phone-speaker { position: absolute; z-index: 1; top: 10px; left: calc(50% - 12px); width: 24px; height: 4px; border-radius: 5px; background: #b8b8c0; }
.phone-screen { height: 100%; overflow: hidden; border-radius: 16px; background: #fff; font-family: Georgia, serif; }
.phone-top { position: relative; padding: 19px 10px 9px; color: var(--navy); font-family: var(--font); font-size: 7px; line-height: 1.1; letter-spacing: .1em; }.phone-top b { color: #9c735e; }.phone-top span { position: absolute; top: 23px; right: 10px; font-size: 14px; }
.phone-image { position: relative; height: 100px; overflow: hidden; background: var(--mist); }.phone-image span { position: absolute; right: 14px; bottom: 12px; width: 45px; height: 69px; border-radius: 40% 40% 20% 20%; background: var(--navy); }.phone-image span::before { position: absolute; top: -12px; left: 16px; width: 13px; height: 20px; border-radius: 4px 4px 0 0; background: inherit; content: ''; }.phone-image i { position: absolute; top: 12px; right: 16px; width: 46px; height: 46px; border-radius: 50%; background: #d7d6e8; }
.phone-screen>small { display: block; margin: 11px 8px 5px; color: var(--navy-soft); font-family: var(--font); font-size: 5px; letter-spacing: .1em; }.phone-title { display: block; margin-inline: 8px; color: var(--navy); font-size: 14px; font-weight: 400; line-height: 1.12; }.phone-cta { display: flex; justify-content: space-between; margin: 10px 8px 0; padding-bottom: 5px; border-bottom: 1px solid var(--line); color: var(--navy); font-family: var(--font); font-size: 5px; }.phone-cta span { color: var(--red); }
.float-note { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #ececf2; border-radius: 10px; background: #fff; box-shadow: var(--shadow-soft); }.float-note--responsive { top: 7%; right: 3%; }.float-note--seo { bottom: 10%; left: 0; }.float-note b, .float-note small { display: block; }.float-note b { color: var(--navy); font-size: 9px; }.float-note small { max-width: 145px; color: var(--muted); font-size: 7px; line-height: 1.35; }.float-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; color: var(--navy); background: var(--mist); font-size: 16px; font-weight: 700; }.float-icon--red { color: var(--red); background: #fff0f1; }
.art-spark { position: absolute; color: var(--red); font-size: 18px; }.art-spark--one { top: 19%; left: 0; }.art-spark--two { right: 0; bottom: 26%; color: var(--navy); font-size: 13px; }.art-caption { position: absolute; right: 22%; bottom: 0; margin: 0; color: #9999a9; font-size: 10px; letter-spacing: .04em; }
.hero-bottom { display: flex; align-items: center; gap: 18px; padding-top: 24px; color: #8a8a9b; font-size: 10px; }.hero-bottom-rule { height: 1px; flex: 1; background: var(--line); }
.section-heading { max-width: 680px; margin: 0 auto 48px; text-align: center; }.section-heading .eyebrow { justify-content: center; }.section-heading h2, .why-copy h2, .faq-intro h2, .contact-copy h2 { margin: 0; color: var(--navy); font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; line-height: 1.16; letter-spacing: -.05em; }.section-heading>p:last-child { max-width: 570px; margin: 15px auto 0; color: var(--muted); font-size: 14px; }
.benefits-section { padding-top: 98px; }.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.benefit-card { min-height: 215px; padding: 25px 23px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); transition: transform .2s, box-shadow .2s, border-color .2s; }.benefit-card:hover { transform: translateY(-4px); border-color: #c9cbe0; box-shadow: var(--shadow-soft); }.icon-tile { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; color: var(--navy); background: var(--mist); }.icon-tile svg { width: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }.benefit-card h3 { margin: 19px 0 7px; color: var(--navy); font-size: 15px; letter-spacing: -.02em; }.benefit-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.offers-section { background: var(--mist-light); }.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 18px; }.loading-message { grid-column: 1/-1; text-align: center; color: var(--muted); }.price-card { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: 29px 27px 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 5px 18px rgb(15 13 74 / 3%); }.price-card--featured { z-index: 1; border-color: var(--navy); color: var(--white); background: var(--navy); box-shadow: 0 20px 45px rgb(15 13 74 / 19%); transform: translateY(-9px); }.plan-badge { position: absolute; top: -13px; right: 20px; padding: 5px 11px; border-radius: 100px; color: var(--white); background: var(--red); font-size: 9px; font-weight: 800; letter-spacing: .1em; }.plan-name { margin: 0 0 4px; color: var(--navy); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.price-card--featured .plan-name { color: #fff; }.plan-description { min-height: 43px; margin: 0; color: var(--muted); font-size: 12px; }.price-card--featured .plan-description { color: #d3d2e4; }.plan-price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 2px; color: var(--navy); font-size: 37px; font-weight: 800; line-height: 1.1; letter-spacing: -.06em; }.plan-price span { font-size: 12px; font-weight: 600; letter-spacing: 0; }.price-card--featured .plan-price { color: var(--white); }.plan-timing { margin: 0 0 17px; color: var(--muted); font-size: 10px; }.price-card--featured .plan-timing { color: #bcbad4; }.plan-divider { height: 1px; margin-bottom: 14px; background: var(--line); }.price-card--featured .plan-divider { background: rgb(255 255 255 / 20%); }.plan-list { display: grid; flex: 1; align-content: start; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; }.plan-list li { display: flex; gap: 9px; color: var(--ink); font-size: 11px; line-height: 1.5; }.plan-list li::before { flex: 0 0 auto; color: var(--red); content: '✓'; font-size: 12px; font-weight: 800; }.price-card--featured .plan-list li { color: #f1f0f7; }.price-card--featured .plan-list li::before { color: #ff737d; }.plan-footer { margin-top: auto; }.plan-footer .button { width: 100%; min-height: 45px; font-size: 12px; }.price-card--featured .button--primary { border-color: #fff; color: var(--navy); background: var(--white); box-shadow: none; }.price-card--featured .button--primary:hover { color: var(--white); background: var(--red); border-color: var(--red); }.pricing-footnote { margin: 24px 0 0; text-align: center; color: var(--muted); font-size: 11px; }
.comparison-section { background: #fff; }.comparison-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 5px 20px rgb(15 13 74 / 3%); }.comparison-table { width: 100%; min-width: 650px; border-collapse: collapse; text-align: center; }.comparison-table th, .comparison-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 12px; }.comparison-table tr:last-child td { border: 0; }.comparison-table th { color: var(--navy); background: #fafbfc; font-size: 11px; }.comparison-table th:first-child, .comparison-table td:first-child { width: 36%; text-align: left; }.comparison-table th:nth-child(3) { color: var(--white); background: var(--navy); }.comparison-table td:nth-child(3) { color: var(--navy); background: #f0eff7; font-weight: 700; }.comparison-table td:first-child { color: var(--ink); font-weight: 600; }.comparison-table .yes { color: var(--navy); font-weight: 700; }.comparison-table .no { color: #8a8a9b; }.comparison-table .optional { color: var(--muted); font-size: 10px; }
.why-section { background: var(--mist); }.why-grid { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 92px; }.why-visual { position: relative; min-height: 420px; }.why-card { position: absolute; width: 76%; height: 300px; padding: 28px; border: 1px solid rgb(15 13 74 / 9%); border-radius: 13px; box-shadow: var(--shadow); }.why-card--back { top: 18px; left: 9px; transform: rotate(-7deg); color: var(--navy); background: #fff; }.why-card--back>span, .why-card--front small { font-size: 9px; font-weight: 700; letter-spacing: .15em; }.why-lines { display: grid; gap: 9px; margin-top: 46px; }.why-lines i { height: 5px; border-radius: 4px; background: var(--mist); }.why-lines i:nth-child(1) { width: 70%; background: #d9d8e8; }.why-lines i:nth-child(2) { width: 88%; }.why-lines i:nth-child(3) { width: 52%; }.why-blocks { display: flex; gap: 8px; margin-top: 27px; }.why-blocks b { width: 53px; height: 55px; border-radius: 7px; background: #f3edf0; }.why-blocks b:nth-child(2) { background: #ecebf4; }.why-blocks b:nth-child(3) { background: #eee5da; }.why-card--front { top: 85px; left: 65px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: var(--navy); transform: rotate(5deg); }.why-mark { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgb(255 255 255 / 30%); border-radius: 9px; color: #fff; font-size: 19px; font-weight: 700; }.why-card--front strong { font-size: 25px; font-weight: 600; line-height: 1.2; letter-spacing: -.04em; }.why-card--front small { color: #aaa8c4; }.why-rule { height: 1px; background: rgb(255 255 255 / 25%); }.why-stamp { position: absolute; right: -6px; bottom: 37px; display: grid; width: 92px; height: 92px; place-items: center; transform: rotate(10deg); border: 1px solid var(--red); border-radius: 50%; color: var(--red); background: #fff; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .08em; }.why-copy h2 { margin-bottom: 16px; }.why-copy>.eyebrow { margin-bottom: 12px; }.why-lead { max-width: 500px; margin: 0 0 25px; color: var(--muted); font-size: 13px; }.why-list { display: grid; gap: 17px; margin: 0; padding: 0; list-style: none; }.why-list li { display: flex; gap: 14px; align-items: flex-start; }.why-list li>span { color: var(--red); font-size: 10px; font-weight: 800; }.why-list b, .why-list small { display: block; }.why-list b { color: var(--navy); font-size: 13px; }.why-list small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.process-section { overflow: hidden; }.process-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 0; padding: 16px 0 0; list-style: none; }.process-grid::before { position: absolute; top: 29px; right: 10%; left: 10%; height: 1px; background: var(--line); content: ''; }.process-step { position: relative; }.step-number { display: block; margin-bottom: 22px; color: #aaaaba; font-size: 10px; font-weight: 700; letter-spacing: .1em; }.step-dot { position: absolute; top: 8px; left: 35px; width: 13px; height: 13px; border: 3px solid var(--white); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1px var(--red); }.process-step h3 { margin: 0 0 8px; color: var(--navy); font-size: 15px; line-height: 1.4; }.process-step p { max-width: 230px; margin: 0; color: var(--muted); font-size: 12px; }
.extras-section { background: var(--mist-light); }.extras-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.extra-card { min-height: 132px; padding: 19px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.extra-card>span { color: #aaaaba; font-size: 9px; font-weight: 700; }.extra-card h3 { margin: 12px 0 7px; color: var(--navy); font-size: 12px; line-height: 1.45; }.extra-card p { margin: 0; color: var(--muted); font-size: 11px; }.extra-card p b { color: var(--red); }.extras-note { margin: 17px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 86px; }.faq-intro .eyebrow { margin-bottom: 12px; }.faq-intro>p:not(.eyebrow) { margin: 15px 0 23px; color: var(--muted); font-size: 13px; }.text-link { color: var(--red); font-size: 12px; font-weight: 700; }.text-link span { margin-left: 7px; }.faq-list { border-top: 1px solid var(--line); }.faq-item { border-bottom: 1px solid var(--line); }.faq-item summary { display: flex; min-height: 57px; align-items: center; justify-content: space-between; gap: 18px; color: var(--navy); cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary span { position: relative; width: 18px; height: 18px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; }.faq-item summary span::before, .faq-item summary span::after { position: absolute; top: 8px; left: 5px; width: 6px; height: 1px; background: var(--navy); content: ''; }.faq-item summary span::after { transform: rotate(90deg); transition: transform .2s; }.faq-item[open] summary span::after { transform: rotate(0); }.faq-item>p { max-width: 680px; margin: -2px 35px 18px 0; color: var(--muted); font-size: 12px; }
.contact-section { color: var(--white); background: var(--navy); }.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 82px; }.contact-copy { padding-top: 25px; }.contact-copy .eyebrow { color: #ff747e; }.contact-copy h2 { max-width: 430px; color: var(--white); }.contact-copy>p:not(.eyebrow) { max-width: 400px; margin: 19px 0 25px; color: #c2c1d5; font-size: 13px; }.contact-trust { display: flex; align-items: flex-start; gap: 11px; color: #fff; font-size: 12px; font-weight: 600; }.contact-check { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--red); }.contact-trust small { display: block; margin-top: 3px; color: #aaa8c4; font-size: 10px; font-weight: 400; }.contact-alt { display: grid; gap: 8px; margin-top: 26px; color: #d3d2e4; font-size: 12px; }.contact-alt a { color: #fff; }
.quote-form { padding: 28px; border-radius: 13px; color: var(--ink); background: #fff; box-shadow: 0 20px 60px rgb(0 0 0 / 15%); }.form-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 19px; }.form-heading>span { color: var(--navy); font-size: 18px; font-weight: 700; letter-spacing: -.03em; }.form-heading small { color: var(--muted); font-size: 9px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }.form-grid label { display: grid; gap: 6px; color: var(--navy); font-size: 10px; font-weight: 700; }.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-height: 42px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; outline: none; font-size: 11px; font-weight: 400; }.form-grid input::placeholder, .form-grid textarea::placeholder { color: #a1a1b0; }.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgb(15 13 74 / 8%); }.form-grid textarea { resize: vertical; }.form-wide { grid-column: 1/-1; }.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }.consent-label { display: flex; align-items: flex-start; gap: 9px; margin: 15px 0; color: var(--muted); font-size: 9px; line-height: 1.5; }.consent-label input { width: 14px; height: 14px; flex: 0 0 auto; margin: 0; accent-color: var(--red); }.button--submit { width: 100%; min-height: 47px; font-size: 12px; }.button:disabled { transform: none; cursor: not-allowed; opacity: .62; }.form-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: 10px; text-align: center; }.form-status.is-error { color: var(--red-dark); }.form-status.is-success { color: var(--navy); }.form-status a { text-decoration: underline; }
.consent-label a { color: var(--red-dark); text-decoration: underline; }
.site-footer { color: #d6d5e4; background: #0b0a38; }.footer-main { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 50px; padding-block: 57px 42px; }.brand--light { color: #fff; }.brand--light .brand-mark { background: #fff; }.brand--light .brand-mark i { background: var(--navy); }.brand--light .brand-mark i:nth-child(3) { background: var(--red); }.footer-brand-col>p { max-width: 280px; margin: 17px 0 23px; color: #b1b0c7; font-size: 11px; }.footer-signoff { color: #fff; font-size: 10px; font-weight: 600; }.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }.footer-links h2 { margin: 4px 0 5px; color: #fff; font-size: 11px; }.footer-links>a, .footer-links>span { color: #b1b0c7; font-size: 10px; }.footer-links>a:hover { color: #fff; }.footer-bottom { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgb(255 255 255 / 12%); color: #9594b1; font-size: 9px; }.footer-bottom>div { display: flex; gap: 20px; }.footer-bottom a:hover { color: #fff; }.back-top { color: #d6d5e4; }