/* The diagram is the page's main visual: provider changes, a managed record, unchanged DNS. */
.home-page { --home-ink:#152e4b; --home-blue:#315bed; --home-muted:#50627a; color:var(--home-ink); }
.home-page .container { width:min(1200px,calc(100% - 96px)); }
.home-page h1,.home-page h2,.home-page h3 { color:var(--home-ink); font-weight:600; letter-spacing:-.045em; }
.home-page p { color:var(--home-muted); }
.home-page .button { background:var(--home-blue); border-radius:7px; min-height:52px; padding:12px 26px; font-size:16px; font-weight:650; }
.home-page .button:hover { background:#2347c9; }
.product-hero { padding-top:66px; }
.product-intro { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:72px; }
.product-intro h1 { font-size:clamp(62px,6.6vw,90px); line-height:1.02; }
.product-pitch p { font-size:17px; line-height:1.7; max-width:450px; }
.product-pitch p+p { margin-top:12px; }
.product-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:26px; }
.product-price-link { font-size:15px; font-weight:650; line-height:1.5; }
.product-price-link span { display:block; font-size:12px; font-weight:400; color:var(--home-muted); }
.product-price-link:hover { text-decoration:underline; }
.spf-illustration { margin:42px 0 0; padding-top:22px; position:relative; }
.spf-scene { min-height:326px; display:grid; grid-template-columns:210px 1fr 220px .8fr 242px; align-items:center; position:relative; }
.spf-scene:before { content:""; position:absolute; inset:20px 20% -25px; z-index:-1; background:radial-gradient(ellipse at center,#edf3ff 0,transparent 70%); }
.diagram-label { font-size:13px; font-weight:550; margin-bottom:18px; }
.provider-side,.domain-side { position:relative; }
.provider-side .diagram-label { margin-bottom:12px; }
.provider { height:72px; display:flex; align-items:center; gap:14px; position:relative; margin-top:18px; }
.provider:first-of-type { margin-top:0; }
.provider strong { font-size:15px; font-weight:600; display:block; }
.service-icon { width:45px; height:45px; display:grid; place-items:center; border:1px solid #d7e2f1; border-radius:12px; background:#fff; box-shadow:0 4px 8px #193b6010; color:#5977b0; }
.service-icon svg { width:23px; height:23px; }
.provider-news .service-icon { color:#977136; border-color:#ebdfc8; }
.provider-app .service-icon { color:#49796d; border-color:#d9e7e2; }
.server-set { --server-width:24px; display:flex; gap:5px; margin-top:8px; height:10px; }
.server-set i { display:block; width:var(--server-width); height:5px; border-radius:2px; background:#c8d5e5; transition:background .25s; }
.server-set .new-server { width:0; opacity:0; background:var(--home-blue); transition:width .35s,opacity .35s; }
.provider-change { position:absolute; top:52px; left:59px; font-size:11px; font-weight:650; color:var(--home-blue); opacity:0; transform:translateY(4px); transition:opacity .25s,transform .25s; }
.provider-connections { position:relative; height:270px; margin-top:40px; }
.provider-connections svg { width:100%; height:100%; overflow:visible; }
.provider-connections .mobile-connections { display:none; }
.provider-connections path { stroke:#c8d5e5; fill:none; stroke-width:1.5; vector-effect:non-scaling-stroke; transition:stroke .3s; }
.emailmetry-engine { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; min-height:300px; padding-top:22px; }
.engine-core { width:96px; height:96px; background:var(--home-blue); border-radius:25px; display:grid; place-items:center; color:white; box-shadow:0 4px 0 #2447c1,0 14px 32px #315bed2b; z-index:1; transform:rotate(-8deg); }
.engine-core svg { width:53px; height:53px; transform:rotate(8deg); }
.emailmetry-engine>strong { font-size:24px; font-weight:750; letter-spacing:-.05em; margin-top:24px; z-index:1; }
.engine-status { font-size:12px; margin-top:7px; color:#546a86; z-index:1; text-align:center; }
.engine-rings { position:absolute; top:42px; left:50%; width:210px; height:210px; transform:translateX(-50%); pointer-events:none; }
.engine-rings span { position:absolute; inset:0; border:1px solid #d8e3fa; border-radius:50%; }
.engine-rings span+span { inset:18px; border-style:dashed; border-color:#cfdbf3; }
.domain-connection { position:relative; height:1px; background:#9eb6df; margin-top:8px; }
.domain-connection:after { content:""; position:absolute; left:0; top:-3px; width:7px; height:7px; border-top:1px solid #9eb6df; border-right:1px solid #9eb6df; transform:rotate(-135deg); }
.domain-connection>span { position:absolute; left:50%; top:-28px; transform:translateX(-50%); white-space:nowrap; color:#637894; font-size:11px; }
.domain-side { margin-top:0; padding-left:14px; }
.domain-drawing { background:white; border:1px solid #ccdaeb; border-radius:10px; box-shadow:0 8px 28px #18385609; }
.domain-drawing-top { padding:20px 17px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #e3eaf2; }
.domain-drawing-top strong { font-size:15px; letter-spacing:-.02em; font-weight:600; }
.domain-mark { display:flex; color:#7890b1; }
.domain-mark svg { width:19px; height:19px; }
.dns-entry { padding:17px; }
.dns-entry>span { font-size:12px; color:#637894; }
.dns-entry>div { display:flex; align-items:center; gap:8px; margin-top:10px; }
.dns-entry strong { font-size:14px; font-weight:550; }
.record-mark { display:flex; color:var(--home-blue); }
.record-mark svg { width:21px; height:21px; }
.record-check { margin-left:auto; display:flex; color:#438066; }
.record-check svg { width:19px; height:19px; }
.home-page .dns-status { font-size:12px; color:#4c7463; display:flex; gap:6px; align-items:center; margin-top:14px; min-height:21px; }
.dns-status svg { width:17px; height:17px; }
.diagram-caption { margin:24px 0 0; padding:22px 0 26px; border-bottom:1px solid #dce5ef; color:var(--home-muted); font-size:14px; line-height:1.75; }
.product-keeps { display:flex; align-items:center; gap:32px; padding:20px 0 42px; color:#65748a; font-size:12px; }
.product-keeps a { margin-left:auto; text-decoration:underline; text-underline-offset:4px; color:var(--home-ink); }
.provider.is-active .new-server { width:var(--server-width); opacity:1; }
.provider.is-active .old-server { background:#e6ebf2; }
.provider.is-active .provider-change { opacity:1; transform:none; }
.is-changing .engine-core { animation:engine-update 700ms 850ms ease-in-out; }
.is-updated .engine-status { color:#367055; }
@keyframes engine-update { 50% { transform:rotate(0) scale(1.06); box-shadow:0 4px 0 #2447c1,0 0 0 12px #315bed12; } }
.product-setup { background:#f4f7fc; padding:70px 0; }
.setup-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.home-page h2 { font-size:42px; line-height:1.12; }
.plain-link { display:inline-block; font-size:15px; font-weight:600; text-decoration:underline; text-underline-offset:5px; margin-top:25px; }
.setup-instructions { margin:0; padding:0; list-style:none; display:grid; gap:30px; }
.setup-instructions li { display:flex; gap:20px; align-items:flex-start; }
.setup-number { font-size:14px; color:#7587a0; line-height:27px; width:20px; flex-shrink:0; }
.home-page .setup-instructions h3 { font-size:21px; letter-spacing:-.025em; line-height:1.3; }
.setup-instructions p { font-size:16px; line-height:1.75; margin-top:9px; max-width:430px; }
.product-pricing { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding-block:82px; }
.product-licences>p { margin-top:21px; max-width:360px; font-size:16px; line-height:1.8; }
.product-rates { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-content:start; }
.home-page .product-rates h3 { font-size:16px; letter-spacing:0; margin:5px 0 14px; }
.home-page .rate-number { font-size:52px; line-height:1.2; letter-spacing:-.05em; color:var(--home-ink); }
.rate-number span { font-size:14px; font-weight:400; letter-spacing:0; margin-left:7px; white-space:nowrap; }
.product-rates>div>p:not(.rate-number) { font-size:13px; margin-top:13px; }
.annual-saving { display:inline-block; margin-top:14px; color:#3e735b; font-size:12px; }
.product-rates .rates-note { grid-column:1/-1; font-size:12px; border-top:1px solid #dce5ef; padding-top:18px; margin-top:6px; }
.product-questions { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding-block:16px 80px; }
.home-page .product-questions h2 { font-size:30px; letter-spacing:-.035em; }
.product-questions details { border-bottom:1px solid #dce5ef; }
.product-questions details:first-child { border-top:1px solid #dce5ef; }
.product-questions summary { cursor:pointer; list-style:none; padding:21px 24px 21px 0; font-size:16px; font-weight:550; position:relative; line-height:1.5; }
.product-questions summary::-webkit-details-marker { display:none; }
.product-questions summary:after { content:"+"; position:absolute; right:0; top:21px; font-size:20px; font-weight:400; color:#7487a0; line-height:1.2; }
.product-questions details[open] summary:after { content:"−"; }
.product-questions details p { font-size:15px; padding-bottom:22px; line-height:1.8; }
.product-questions details a { text-decoration:underline; }
.product-finish { background:#e9f0fd; padding-block:48px; }
.product-finish>.container { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.home-page .product-finish h2 { font-size:32px; }

@media(min-width:1450px) { .product-hero { padding-top:82px; }.spf-illustration { margin-top:56px; } }
@media(max-width:1100px) {
  .home-page .container { width:calc(100% - 64px); }
  .product-intro { gap:40px; grid-template-columns:1.2fr 1fr; }
  .product-intro h1 { font-size:70px; }
  .spf-scene { grid-template-columns:190px 1fr 170px .65fr 216px; }
  .engine-rings { width:180px;height:180px;top:55px; }
  .engine-core { width:84px;height:84px; }
  .provider strong { font-size:14px; }
  .domain-side { padding-left:8px; }
  .domain-drawing-top { padding:17px 12px;gap:8px; }
  .dns-entry { padding:15px 12px; }
  .domain-drawing-top strong { font-size:14px; }
  .setup-layout,.product-pricing,.product-questions { gap:48px; }
}
@media(max-width:800px) {
  .product-hero { padding-top:42px; }
  .product-intro { grid-template-columns:1fr; gap:24px; }
  .product-intro h1 { font-size:68px; }
  .product-pitch { max-width:580px; }
  .product-pitch p { max-width:none; }
  .spf-scene { grid-template-columns:162px 1fr 150px .5fr 187px;min-height:285px; }
  .service-icon { width:34px;height:38px;border-radius:8px; }
  .provider { gap:8px; }
  .provider strong { font-size:12px; }
  .server-set { --server-width:20px; }
  .provider-change { left:42px; }
  .domain-drawing-top strong { font-size:12px; }
  .domain-drawing-top { gap:6px;padding:16px 10px; }
  .engine-rings { width:150px;height:150px;top:62px; }
  .emailmetry-engine>strong { font-size:21px; }
  .engine-status { font-size:11px; }
  .diagram-caption { font-size:13px; }
    .product-keeps { gap:14px;flex-wrap:wrap; }
  .product-keeps a { margin-left:0; }
}
@media(max-width:650px) {
  .home-page .container { width:calc(100% - 40px); }
  .product-intro h1 { font-size:clamp(40px,12.4vw,60px); }
  .product-pitch p { font-size:16px; }
  .product-actions { gap:22px; }
  .product-price-link { font-size:14px; }
  .spf-illustration { margin-top:32px;padding-top:0; }
  .spf-scene { display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 72px auto;gap:0;min-height:0; }
  .provider-side { grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px;column-gap:0; }
  .provider-side .diagram-label { grid-column:1/-1;margin:0; }
  .provider { height:86px;margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center; }
  .provider strong { font-size:12px;white-space:nowrap; }
  .service-icon { width:35px;height:35px;border-radius:9px; }
  .service-icon svg { width:20px;height:20px; }
  .server-set { margin-top:6px;gap:4px;justify-content:center; }
  .server-set { --server-width:17px; }
  .provider-change { top:90px;left:50%;font-size:10px;white-space:nowrap;transform:translate(-50%,4px); }
  .provider.is-active .provider-change { transform:translate(-50%,0); }
  .provider-connections { grid-column:1/-1;height:72px;margin:0; }
  .provider-connections .desktop-connections { display:none; }
  .provider-connections .mobile-connections { display:block; }
    .emailmetry-engine { grid-column:1;grid-row:3;padding:0;min-height:208px;justify-content:flex-start; }
  .engine-core { width:67px;height:67px;border-radius:18px; }
  .engine-core svg { width:38px;height:38px; }
  .engine-rings { top:-13px;width:120px;height:120px;left:50%; }
  .emailmetry-engine>strong { font-size:21px;margin-top:22px; }
  .engine-status { font-size:12px;max-width:138px;min-height:40px; }
  .domain-side { grid-column:2;grid-row:3;padding:0;margin-top:0;align-self:start; }
  .domain-side .diagram-label { margin:0;font-size:11px;position:absolute;top:-30px;left:0; }
  .domain-drawing-top { padding:11px 9px;gap:6px; }
  .domain-drawing-top strong { font-size:12px; }
  .domain-mark svg { width:14px;height:14px; }
  .dns-entry { padding:10px 9px; }
  .dns-entry>span { font-size:10px; }
  .dns-entry>div { gap:5px;margin-top:7px; }
  .dns-entry strong { font-size:11px; }
  .record-mark svg { width:17px;height:17px; }
  .record-check svg { width:15px;height:15px; }
  .domain-connection { position:absolute;left:calc(25% + 44px);right:50%;top:221px;margin:0; }
  .home-page .dns-status { font-size:11px;gap:3px;align-items:flex-start;margin-top:10px;line-height:1.6; }
  .dns-status svg { width:14px;height:14px; }
  .domain-connection>span { display:none; }
  .diagram-caption { margin-top:0;padding:2px 0 20px;font-size:13px; }
    .product-keeps { padding:19px 0 32px;display:block;font-size:12px;line-height:1.9; }
  .product-keeps span { display:block; }
  .product-keeps a { display:inline-block;margin-top:11px; }
  .product-setup { padding:42px 0; }
  .setup-layout,.product-pricing,.product-questions { grid-template-columns:1fr;gap:34px; }
  .home-page h2 { font-size:34px; }
  .plain-link { margin-top:20px;font-size:14px; }
  .setup-instructions { gap:25px; }
  .setup-instructions li { gap:13px; }
  .home-page .setup-instructions h3 { font-size:20px; }
  .setup-instructions p { font-size:15px;margin-top:8px; }
  .product-pricing { padding-block:48px; }
  .product-licences>p { font-size:15px;max-width:390px;margin-top:18px; }
  .product-rates { gap:18px; }
  .home-page .rate-number { font-size:45px; }
  .rate-number span { display:block;margin:7px 0 0;font-size:13px; }
  .product-rates>div>p:not(.rate-number) { max-width:150px; }
  .product-questions { padding-block:0 48px;gap:24px; }
  .home-page .product-questions h2 { font-size:28px; }
  .product-questions summary { font-size:15px;padding-block:19px; }
  .product-finish { padding-block:35px; }
  .product-finish>.container { align-items:flex-start;flex-direction:column;gap:23px; }
  .home-page .product-finish h2 { font-size:29px;max-width:290px; }
}
@media(max-width:360px) {
  .product-intro h1 { font-size:40px; }
  .product-actions { gap:18px; }
  .home-page .button { padding-inline:20px;font-size:15px; }
  .product-price-link { font-size:12px; }
  .product-price-link span { font-size:10px; }
  .provider-side { row-gap:8px; }
  .provider strong { font-size:11px; }
  .domain-drawing-top strong { font-size:11px; }
  .domain-mark { display:none; }
  .home-page .dns-status { font-size:10px; }
  .emailmetry-engine>strong { font-size:18px; }
  .engine-rings { width:107px;height:107px;top:-8px; }
}
@media(prefers-reduced-motion:reduce) {
  .spf-illustration *,.spf-illustration *:before,.spf-illustration *:after { animation:none!important;transition:none!important; }
}

.provider-connections .update-flow { stroke:var(--home-blue); stroke-width:3; stroke-linecap:round; stroke-dasharray:12 112; stroke-dashoffset:12; opacity:0; }
.is-changing .update-flow.is-active { animation:provider-flow 1050ms ease-in-out forwards; }
@keyframes provider-flow { 0% { stroke-dashoffset:12;opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { stroke-dashoffset:-100;opacity:0; } }