:root { color-scheme:light; --ink:#141424; --muted:#707a8c; --brand:#7c3aed; --brand-dark:#6425d0; --line:#e4e7ee; --soft:#f5f1ff; --shadow:0 10px 35px #24164208; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; color:var(--ink); background:radial-gradient(ellipse at 10% 7%,#ede5ff99,transparent 38%),radial-gradient(ellipse at 100% 45%,#edefff80,transparent 40%),#f7f8fc; font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
a { color:inherit; text-decoration:none; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
:is(a,button,input,summary):focus-visible { outline:3px solid #b59af3; outline-offset:4px; }
button { cursor:pointer; }
button:disabled { cursor:default; }
p,h1,h2,h3 { margin:0; }
.icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.skip-link { position:fixed; top:-70px; left:16px; z-index:100; padding:10px 20px; border-radius:10px; background:#fff; color:var(--brand); }
.skip-link:focus { top:12px; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid #e2e8f0dc; background:#ffffffdf; backdrop-filter:blur(22px) saturate(165%); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1380px; min-height:88px; margin:auto; padding:12px 32px; }
.brand { display:inline-flex; align-items:center; flex-shrink:0; gap:12px; color:#151128; font-size:34px; font-weight:850; line-height:1; letter-spacing:-1.3px; }
.brand b { color:var(--brand); font-weight:inherit; }
.brand-mark { display:flex; width:58px; height:58px; border-radius:15px; background:linear-gradient(145deg,#fff,#f2edff); box-shadow:0 0 0 1px #7c3aed2e,0 8px 22px #7c3aed20; }
.brand-mark img { width:100%; height:100%; object-fit:contain; }
.site-nav { display:flex; justify-content:center; gap:4px; padding:5px; border:1px solid #e8eaf0; border-radius:16px; background:#f5f6fa; }
.site-nav a { display:flex; align-items:center; justify-content:center; padding:10px 14px; border:1px solid transparent; border-radius:11px; color:#5f6879; font-size:12px; font-weight:650; white-space:nowrap; }
.site-nav a[aria-current=page] { border-color:#ebe6f5; background:#fff; color:var(--brand); box-shadow:0 4px 14px #261b4a12; }
.site-nav a:hover { color:var(--brand); background:#fff; }
.telegram-link { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:10px 14px; border:1px solid #b9e1f8; border-radius:14px; background:linear-gradient(145deg,#f5fbff,#e8f6ff); color:#087bb5; font-size:12px; font-weight:700; white-space:nowrap; }
.telegram-link:hover { background:#e1f4ff; }
.telegram-link .icon { width:17px; height:17px; }
.page { max-width:1344px; padding:0 32px; margin:auto; }
.eyebrow { color:var(--brand); text-transform:uppercase; letter-spacing:1.5px; font-size:11px; font-weight:800; line-height:1.5; }
.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; padding:54px 0 48px; }
.hero-copy { padding:0 0 12px; text-align:left; }
.hero-title { --title-intro:58px; --title-accent:52px; --title-promise:34px; width:fit-content; max-width:100%; margin:18px 0 24px; text-align:center; }
.hero-title > span { display:block; }
.hero-title__intro { text-align:left; color:#1b182c; font-size:var(--title-intro); line-height:1.16; font-weight:900; letter-spacing:-1.6px; }
.hero-title__accent { width:fit-content; max-width:100%; margin:7px auto 0; padding:5px 14px 8px; border:1px solid #e5d5f8; border-radius:12px; background:linear-gradient(110deg,#eee3ffcc,#f5efff80); color:var(--brand); font-size:var(--title-accent); line-height:1.08; font-weight:850; letter-spacing:-1.8px; }
.hero-title > .hero-title__promise { width:fit-content; max-width:100%; margin:14px auto 0; color:#5b556e; font-size:var(--title-promise); line-height:1.3; font-weight:750; letter-spacing:-.8px; }
.hero-lead { max-width:510px; color:#657084; font-size:16px; line-height:1.85; margin-inline:0; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:22px; margin-top:27px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:50px; padding:14px 21px; border:1px solid transparent; border-radius:13px; font-size:13px; font-weight:750; line-height:1.5; transition:background .15s,box-shadow .15s; }
.button-primary { background:linear-gradient(120deg,#8b4ef8,#6d28d9); color:#fff; box-shadow:0 6px 18px #7c3aed20; }
.button-primary:hover { background:var(--brand-dark); box-shadow:0 6px 22px #7c3aed33; }
.text-link { display:inline-flex; align-items:center; gap:10px; color:var(--brand-dark); font-size:13px; font-weight:650; }
.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.hero-facts { display:flex; flex-wrap:wrap; justify-content:flex-start; margin-inline:0; gap:11px 17px; max-width:530px; margin-top:26px; color:#738092; font-size:11px; }
.hero-facts span { display:flex; align-items:center; gap:5px; }
.hero-facts .icon { width:14px; height:14px; color:#159975; }
.hero-example { position:relative; min-width:0; padding:19px; border:1px solid #e4d9f7; border-radius:26px; background:#fff9; box-shadow:0 15px 45px #3621660a; }
.example-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 17px; font-size:13px; font-weight:650; }
.example-topline a { display:flex; padding:6px; border-radius:9px; background:#f0e9ff; color:var(--brand); }
.example-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.example-card { position:relative; min-width:0; padding:7px 7px 13px; border:1px solid #e9eaf0; border-radius:17px; background:#fff; }
.example-card.after { border-color:#ceb8fa; box-shadow:0 6px 20px #7c3aed0c; }
.example-label { display:inline-flex; margin:2px 4px 8px; padding:4px 9px; border:1px solid #e4e7ee; border-radius:7px; background:#ffffffef; color:#647083; font-size:10px; font-weight:750; }
.after .example-label { border-color:#ffffff70; background:#7c3aed; color:#fff; }
.example-image { overflow:hidden; height:250px; border-radius:12px; background:#f2f3f8; }
.example-image img { display:block; width:100%; height:100%; object-fit:contain; }
.example-card p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; min-height:58px; padding:0 5px; margin-top:12px; font-size:11px; font-weight:600; line-height:1.7; }
.before p { color:#7a8292; font-weight:400; }
.example-caption { display:flex; align-items:center; gap:4px; padding:0 5px; margin-top:8px; font-size:10px; color:#8790a0; }
.after .example-caption { color:var(--brand); }
.example-caption .icon { width:13px; height:13px; }
.example-footer { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:17px; color:#766289; font-size:11px; }
.example-footer:hover { color:var(--brand); }
.example-footer .icon { width:15px; height:15px; }
.pricing-section { padding-top:10px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; margin-bottom:24px; }
h2 { font-size:32px; line-height:1.25; letter-spacing:-1.1px; font-weight:800; }
.section-heading .eyebrow { margin-bottom:9px; }
.section-heading > p { flex-shrink:0; color:var(--muted); font-size:12px; line-height:1.8; }
.calculator { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:26px; padding:26px; border:1px solid #e1dfea; border-radius:28px; background:linear-gradient(120deg,#faf8ff,#fff 55%); box-shadow:var(--shadow); }
.calculator-controls { min-width:0; }
.mode-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:0; border:0; }
legend { padding:0; margin-bottom:12px; color:#343d50; font-size:12px; font-weight:750; }
.mode-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:17px 18px; border:1px solid var(--line); border-radius:16px; background:#fff; cursor:pointer; }
.mode-card:has(input:checked) { border-color:#9560fa; background:#f8f5ff; box-shadow:0 0 0 3px #7c3aed09; }
.mode-card input { position:absolute; top:21px; right:18px; width:17px; height:17px; margin:0; opacity:0; }
.mode-card:has(input:focus-visible) { outline:3px solid #b59af3; outline-offset:4px; }
.mode-heading { display:flex; align-items:center; gap:9px; font-size:13px; }
.mode-heading .icon { width:18px; height:18px; color:var(--brand); }
.mode-heading i { width:17px; height:17px; flex-shrink:0; margin-left:auto; border:1px solid #d5d9e4; border-radius:50%; background:#fff; }
.mode-card:has(input:checked) .mode-heading i { border:5px solid var(--brand); }
.mode-description { margin-top:5px; color:var(--muted); font-size:11px; }
.mode-price { margin-top:14px; font-size:30px; font-weight:800; line-height:1.3; letter-spacing:-1px; }
.mode-price small { color:#71798a; font-size:11px; font-weight:500; letter-spacing:0; }
.mode-analytics { margin-top:5px; color:var(--brand-dark); font-size:11px; }
.included { display:flex; align-items:flex-start; gap:8px; padding:14px 2px 20px; color:#738092; font-size:11px; line-height:1.8; }
.included .icon { width:15px; height:15px; margin-top:2px; color:#159975; }
.quantity-control { padding:19px; border:1px solid var(--line); border-radius:16px; background:#f7f8fc; }
.quantity-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.quantity-heading > label { font-size:12px; font-weight:750; }
.quantity-input { display:flex; align-items:center; padding:8px 10px; border:1px solid #d9c8fc; border-radius:11px; background:#fff; }
.quantity-input input { width:80px; padding:0; border:0; outline:none; background:transparent; color:var(--ink); font-size:15px; font-weight:750; text-align:right; }
.quantity-input:focus-within { outline:3px solid #c8afff; outline-offset:2px; }
.quantity-input span { margin-left:8px; color:#8c94a3; font-size:10px; font-weight:600; }
#quantityRange { --progress:50%; display:block; width:100%; height:6px; margin:25px 0 13px; border-radius:6px; background:linear-gradient(to right,var(--brand) var(--progress),#e1e4ed var(--progress)); appearance:none; -webkit-appearance:none; cursor:pointer; }
#quantityRange::-webkit-slider-thumb { width:20px; height:20px; border:4px solid #fff; border-radius:50%; background:var(--brand); box-shadow:0 2px 7px #7c3aed66; appearance:none; -webkit-appearance:none; }
#quantityRange::-moz-range-thumb { width:12px; height:12px; border:4px solid #fff; border-radius:50%; background:var(--brand); box-shadow:0 2px 7px #7c3aed66; }
.range-scale { display:flex; justify-content:space-between; color:#909aac; font-size:9px; font-weight:650; }
.presets { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin-top:15px; }
.presets button { min-height:34px; padding:6px; border:1px solid #e0e4ed; border-radius:8px; background:#fff; color:#657084; font-size:11px; font-weight:650; white-space:nowrap; }
.presets button[aria-pressed=true] { border-color:#9b6aff; background:#f0eaff; color:var(--brand); }
.presets button:hover { border-color:var(--brand); color:var(--brand); }
.analytics-option { position:relative; display:flex; align-items:center; gap:12px; margin-top:16px; padding:16px; border:1px solid #edc879; border-radius:16px; background:linear-gradient(110deg,#fff9e9,#fff); cursor:pointer; }
.analytics-option > input { position:absolute; left:16px; width:42px; height:26px; opacity:0; }
.switch { flex:0 0 42px; height:26px; padding:3px; border:1px solid #d4c5f5; border-radius:20px; background:#dfe1e9; }
.switch::after { content:""; display:block; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0002; transition:transform .15s; }
.analytics-option input:checked + .switch { border-color:var(--brand); background:var(--brand); }
.analytics-option input:checked + .switch::after { transform:translateX(16px); }
.analytics-option input:focus-visible + .switch { outline:3px solid #b59af3; outline-offset:3px; }
.analytics-option strong { display:block; font-size:12px; line-height:1.5; }
.analytics-option small { display:block; margin-top:4px; color:#7b8495; font-size:10px; line-height:1.7; }
.analytics-option b { margin-left:auto; padding:6px 8px; border-radius:8px; background:#fff1d8; color:#b56a04; font-size:10px; white-space:nowrap; }
.estimate { position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; padding:28px; border-radius:22px; background:radial-gradient(ellipse at 100% 0%,#6e44ae88,transparent 55%),linear-gradient(145deg,#261341,#131426 85%); color:#fff; box-shadow:0 14px 28px #251b3b19; }
.estimate::before { position:absolute; right:-140px; bottom:-180px; width:340px; height:340px; border:30px solid #ffffff03; border-radius:50%; box-shadow:0 0 0 28px #ffffff02,0 0 0 55px #ffffff02; content:""; pointer-events:none; }
.estimate > * { position:relative; }
.estimate-heading { display:flex; align-items:center; gap:11px; }
.estimate-icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid #ffffff20; border-radius:12px; background:#ffffff09; color:#c3adfa; }
.estimate-heading p { margin-bottom:2px; color:#b3a1ce; font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.8px; }
.estimate-heading h3 { font-size:12px; font-weight:700; }
.estimate-live { margin-top:26px; }
.estimate-total { display:block; font-size:clamp(30px,3.6vw,50px); font-weight:850; line-height:1.2; letter-spacing:-2px; overflow-wrap:anywhere; }
.estimate-total > span { font-size:.65em; }
.estimate-live > p { margin-top:5px; color:#8ee6cb; font-size:12px; font-weight:650; }
.estimate-details { margin:25px 0 0; border-top:1px solid #ffffff1b; }
.estimate-details > div { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; }
.estimate-details dt { color:#b0a4c2; font-size:11px; }
.estimate-details dd { margin:0; font-size:11px; font-weight:650; text-align:right; }
.estimate-details > .estimate-unit { border-top:1px dashed #ffffff18; border-bottom:1px solid #ffffff1b; }
.estimate-unit dd { color:#c4a9ff; font-size:15px; }
.estimate-note { margin:14px 0 25px; color:#a59ab8; font-size:10px; line-height:1.8; }
.estimate-action { width:100%; margin-top:auto; background:#fff; color:#211832; font-size:12px; }
.estimate-action:hover { background:#eee6ff; }
.estimate-account { display:block; margin-top:12px; text-align:center; color:#c5b7dc; font-size:10px; }
.estimate-account:hover { color:#fff; text-decoration:underline; }
.workflow { padding:32px 0 34px; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:0; padding:0; list-style:none; }
.steps li { display:flex; gap:16px; padding-top:20px; border-top:1px solid #dfe1ea; }
.steps li > span { display:inline-flex; align-items:center; justify-content:center; flex:0 0 38px; height:38px; border:1px solid #e5dbfb; border-radius:12px; background:#f0eaff; color:var(--brand); font-size:12px; font-weight:700; }
.steps h3 { margin:1px 0 7px; font-size:14px; font-weight:750; }
.steps p { max-width:300px; color:var(--muted); font-size:12px; line-height:1.9; }
.help-section { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:64px; padding:28px 0 56px; }
.faq > .eyebrow { margin-bottom:9px; }
.faq h2 { margin-bottom:20px; }
.faq details { border-top:1px solid #dfe2eb; }
.faq details:last-child { border-bottom:1px solid #dfe2eb; }
.faq summary { position:relative; padding:19px 30px 19px 0; font-size:13px; font-weight:650; line-height:1.6; list-style:none; cursor:pointer; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { position:absolute; right:4px; top:14px; content:"+"; color:#9888b4; font-size:23px; font-weight:400; }
.faq details[open] summary::after { content:"−"; }
.faq details[open] summary { color:var(--brand-dark); }
.faq details > p { padding:0 24px 19px 0; color:var(--muted); font-size:12px; line-height:1.95; }
.faq details a { color:var(--brand-dark); text-decoration:underline; text-underline-offset:3px; }
.contact-card { align-self:start; padding:32px; border:1px solid #e1d7f5; border-radius:24px; background:radial-gradient(circle at 100% 0,#e9dcff,#faf8ff 70%); box-shadow:var(--shadow); }
.contact-icon { display:flex; align-items:center; justify-content:center; width:46px; height:46px; margin:0 auto 24px; border:1px solid #dfd1fa; border-radius:14px; background:#fff9; color:var(--brand); }
.contact-icon .icon { width:24px; height:24px; }
.contact-card h2 { font-size:30px; line-height:1.25; text-align:center; }
.contact-card > p { margin:18px 0 22px; color:var(--muted); font-size:12px; line-height:1.9; }
.contact-card .button { width:100%; }
.contact-note { display:block; margin-top:13px; color:#8b8299; font-size:10px; text-align:center; }
.contact-direct { display:block; margin-top:16px; color:#7954af; font-size:11px; text-align:center; }
.contact-direct:hover { text-decoration:underline; }
.site-footer { border-top:1px solid #e3e5ef; background:#fff6; }
.site-footer > div { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; max-width:1344px; padding:24px 32px; margin:auto; color:#7a8393; font-size:10px; }
.site-footer strong { color:#54465e; font-weight:700; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:22px; }
.site-footer a:hover { color:var(--brand); }
.noscript-note { padding:15px; color:#7c6040; font-size:12px; }
.tariff-note { margin:16px 12px 0; color:#737c8e; font-size:11px; line-height:1.9; }
.tariff-note strong { color:#4f5667; font-weight:650; }
@media(min-width:1440px) { .hero { gap:78px; } }
@media(max-width:1100px) {
  .header-inner { padding:12px 24px; gap:18px; }
  .brand { font-size:28px; gap:10px; }
  .brand-mark { width:46px; height:46px; }
  .site-nav a { padding:10px 11px; }
  .hero { gap:32px; padding:38px 0; }
  .hero-title { --title-intro:48px; --title-accent:43px; --title-promise:30px; }
  .hero-lead { font-size:14px; }
  .hero-actions { gap:16px; }
  .hero-example { padding:14px; }
  .example-image { height:215px; }
  .calculator { grid-template-columns:minmax(0,1fr) 300px; gap:20px; padding:20px; }
  .estimate { padding:23px; }
  .analytics-option { flex-wrap:wrap; gap:10px; padding:14px; }
  .analytics-option > span:not(.switch) { flex:1; }
  .analytics-option b { margin-left:52px; }
  .section-heading > p { max-width:240px; }
  .help-section { grid-template-columns:minmax(0,1fr) 330px; gap:36px; }
}
@media(max-width:900px) {
  .header-inner { flex-wrap:wrap; gap:12px; }
  .site-nav { order:3; flex-basis:100%; }
  .site-nav a { flex:1; }
  html { scroll-padding-top:155px; }
  .page { padding:0 24px; }
  .hero { grid-template-columns:1fr 1fr; gap:24px; }
  .hero-title { --title-intro:clamp(38px,5.1vw,44px); --title-accent:clamp(34px,4.6vw,40px); --title-promise:26px; }
  .hero-lead { font-size:13px; }
  .hero-actions { margin-top:20px; }
  .hero-actions .button { padding:12px 15px; font-size:12px; }
  .hero-facts { margin-top:18px; font-size:10px; }
  .example-image { height:190px; }
  .example-topline { font-size:11px; }
  .example-card p { font-size:10px; }
  .example-label { top:12px; left:11px; font-size:8px; padding:3px 6px; }
  .example-footer { font-size:10px; }
  .section-heading { align-items:flex-start; }
  h2 { font-size:28px; }
  .section-heading > p { display:none; }
  .calculator { grid-template-columns:1fr 280px; gap:16px; padding:18px; }
  .mode-card { padding:14px; }
  .mode-heading { gap:7px; font-size:11px; }
  .mode-heading .icon { display:none; }
  .mode-price { font-size:27px; }
  .mode-price small { font-size:9px; }
  .mode-description,.mode-analytics { font-size:10px; }
  .quantity-control { padding:14px; }
  .presets { grid-template-columns:repeat(3,1fr); }
  .quantity-heading { flex-wrap:wrap; }
  .quantity-input input { width:65px; }
  .estimate { padding:21px; }
  .estimate-total { font-size:38px; }
  .steps { gap:16px; }
  .steps li { flex-direction:column; gap:12px; }
  .steps li > span { flex:0 0 38px; width:38px; }
  .help-section { grid-template-columns:1fr 300px; gap:24px; }
  .contact-card { padding:25px; }
  .contact-card h2 { font-size:27px; }
}
@media(max-width:700px) {
  .hero { grid-template-columns:1fr; gap:27px; padding:32px 0; }
  .hero-title { --title-intro:56px; --title-accent:50px; --title-promise:32px; }
  .hero-copy { padding:0; }
  .hero-lead { max-width:530px; font-size:14px; }
  .hero-actions { gap:20px; }
  .hero-example { max-width:540px; width:100%; justify-self:center; }
  .example-image { height:230px; }
  .example-card p { min-height:50px; font-size:11px; }
  .example-caption { font-size:10px; }
  .example-label { font-size:9px; }
  .calculator { grid-template-columns:1fr; padding:18px; }
  .mode-heading { font-size:13px; }
  .mode-heading .icon { display:block; }
  .mode-price { font-size:30px; }
  .mode-price small { font-size:10px; }
  .quantity-input input { width:85px; }
  .analytics-option { flex-wrap:nowrap; }
  .analytics-option b { margin-left:auto; }
  .estimate { padding:25px; }
  .estimate-live { margin-top:20px; }
  .estimate-total { font-size:48px; }
  .estimate-details { margin-top:19px; }
  .estimate-note { margin-bottom:22px; }
  .estimate-account { font-size:11px; }
  .steps { grid-template-columns:1fr; gap:18px; }
  .steps li { flex-direction:row; padding-top:16px; }
  .steps p { max-width:none; }
  .workflow { padding:36px 0 28px; }
  .workflow .section-heading { flex-direction:column; gap:14px; }
  .help-section { grid-template-columns:1fr; gap:28px; padding:18px 0 34px; }
  .faq summary { font-size:13px; }
  .faq details > p { font-size:13px; }
  .contact-card { padding:28px; }
  .contact-card h2 br { display:none; }
  .contact-card > p { font-size:13px; }
  .contact-icon { margin-bottom:18px; }
  .contact-card .button { max-width:350px; }
  .contact-note,.contact-direct { text-align:left; }
  .site-footer > div { justify-content:center; text-align:center; padding:22px 20px; }
  .site-footer nav { justify-content:center; gap:17px; }
}
@media(max-width:520px) {
  .header-inner { padding:12px 16px; gap:12px; }
  .brand { gap:8px; font-size:23px; letter-spacing:-.8px; }
  .brand-mark { width:38px; height:38px; border-radius:11px; }
  .telegram-link { width:38px; min-height:38px; padding:8px; border-radius:11px; }
  .telegram-link > span { display:none; }
  .site-nav a { padding:9px 10px; font-size:11px; }
  .page { padding:0 16px; }
  .hero { padding:28px 0 30px; gap:24px; }
  .eyebrow { font-size:10px; letter-spacing:1.1px; }
  .hero-title { --title-intro:clamp(36px,10vw,50px); --title-accent:clamp(32px,8.9vw,45px); --title-promise:clamp(24px,6.7vw,30px); margin:15px 0 22px; }
  .hero-title__intro { letter-spacing:-1px; }
  .hero-title__accent { margin-top:8px; padding:5px 10px 7px; border-radius:10px; letter-spacing:-2px; }
  .hero-title > .hero-title__promise { margin-top:15px; }
  .hero-lead { font-size:13px; line-height:1.9; }
  .hero-actions { gap:16px; }
  .hero-actions .button { font-size:12px; }
  .hero-actions .text-link { font-size:11px; }
  .hero-facts { gap:9px 13px; font-size:9px; }
  .hero-example { padding:13px; border-radius:22px; }
  .example-topline { margin-bottom:11px; }
  .example-pair { gap:9px; }
  .example-image { height:205px; }
  .example-card { padding:5px 5px 10px; border-radius:13px; }
  .example-card p { min-height:51px; font-size:10px; }
  .example-caption { font-size:8px; }
  .example-label { font-size:8px; }
  .example-footer { margin-top:12px; font-size:9px; }
  .example-footer .icon { width:13px; height:13px; }
  .section-heading { margin-bottom:19px; }
  h2 { font-size:27px; letter-spacing:-.9px; }
  .calculator { padding:13px; border-radius:22px; }
  .mode-options { gap:9px; }
  .mode-card { padding:14px 12px; border-radius:13px; }
  .mode-heading { gap:5px; font-size:11px; }
  .mode-heading .icon { width:14px; height:14px; }
  .mode-heading i { width:15px; height:15px; }
  .mode-description { font-size:9px; }
  .mode-price { font-size:28px; }
  .mode-price small { font-size:9px; }
  .mode-analytics { font-size:9px; }
  .included { padding:13px 2px 16px; font-size:10px; }
  .quantity-heading > label { font-size:11px; }
  .quantity-input input { width:65px; }
  .analytics-option { flex-wrap:wrap; gap:10px; padding:13px; }
  .analytics-option strong { font-size:11px; }
  .analytics-option > span:not(.switch) { flex:1 1 calc(100% - 55px); }
  .analytics-option small { font-size:10px; }
  .analytics-option b { margin-left:52px; }
  .estimate { padding:23px; border-radius:17px; }
  .estimate-total { font-size:46px; }
  .estimate-details dt,.estimate-details dd { font-size:12px; }
  .estimate-unit dd { font-size:15px; }
  .estimate-note { font-size:11px; }
  .contact-card h2 { font-size:28px; }
}
@media(max-width:374px) {
  .brand { font-size:21px; }
  .site-nav a { padding:8px; font-size:10px; }

  .hero-actions { gap:14px; }
  .hero-actions .button { padding:12px; font-size:11px; }
  .hero-actions .text-link { font-size:10px; }
  .example-image { height:170px; }
  .example-card p { font-size:9px; }
  .mode-heading .icon { display:none; }
  .mode-price { font-size:25px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }

/* The free trial precedes the process and the paid estimate. */
.trial-banner { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:25px 28px; border:1px solid #dfd0fa; border-radius:23px; background:linear-gradient(115deg,#f1eaff,#ffffffdb 75%); box-shadow:var(--shadow); }
.trial-copy { max-width:790px; }
.trial-badge { display:inline-flex; align-items:center; gap:6px; margin-bottom:9px; color:#6a35b7; font-size:11px; font-weight:750; }
.trial-badge .icon { width:16px; height:16px; color:#159975; }
.trial-copy h2 { font-size:27px; }
.trial-copy p { margin-top:10px; color:#647084; font-size:13px; line-height:1.85; }
.trial-copy small { display:block; margin-top:8px; color:#818a9a; font-size:10px; line-height:1.7; }
.trial-action { flex-shrink:0; text-align:center; }
.trial-action > span { display:block; margin-top:9px; color:#818a9a; font-size:10px; }
.recommend-badge { display:inline-flex; vertical-align:middle; margin:3px 0 3px 5px; padding:3px 7px; border-radius:7px; background:#7c3aed; color:#fff; font-size:9px; font-style:normal; font-weight:750; letter-spacing:.3px; text-transform:uppercase; }
@media(max-width:900px) { .trial-banner { align-items:flex-start; gap:22px; } .trial-action .button { max-width:205px; padding:12px 15px; font-size:12px; } }
@media(max-width:700px) { .trial-banner { flex-direction:column; gap:20px; padding:23px; } .trial-copy h2 { font-size:25px; } .trial-action { width:100%; } .trial-action .button { max-width:none; width:100%; } .trial-copy p { font-size:13px; } .workflow { padding:30px 0; } }
@media(max-width:374px) { .trial-banner { padding:19px; } .trial-badge { font-size:10px; } .trial-copy h2 { font-size:24px; } }