:root { --blue:#004fd4; --blue-deep:#003ca1; --ink:#132433; --slate:#465966; --muted:#657786; --paper:#f6f8fb; --line:#dce4ec; --green:#2dc76b; --orange:#f26b38; --white:#fff; --radius:1.25rem; --shadow:0 22px 60px rgba(15, 36, 60, .10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--white); font-family:Arial, Helvetica, sans-serif; font-size:16px; font-style:normal!important; line-height:1.55; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; }
.shell { width:min(1120px, calc(100% - 48px)); margin-inline:auto; }
.narrow { width:min(760px, calc(100% - 48px)); }
.site-header { position:sticky; top:0; z-index:20; background:var(--blue); border-bottom:1px solid rgba(255,255,255,.24); box-shadow:0 8px 24px rgba(0,60,161,.22); }
.nav { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; width:174px; }
.brand img { width:174px; }
.site-nav { display:flex; align-items:center; gap:20px; color:#fff; font-size:.86rem; font-weight:700; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav summary:hover, .site-nav summary:focus-visible { color:#fff; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }.text-link:hover, .read-link:hover { color:var(--blue); }
.nav-dropdown { position:relative; } .nav-dropdown summary { cursor:pointer; list-style:none; } .nav-dropdown summary::-webkit-details-marker { display:none; } .nav-dropdown summary::after { content:"⌄"; display:inline-block; margin-left:.35rem; color:#fff; font-size:.85em; transition:transform .2s; } .nav-dropdown[open] summary::after { transform:rotate(180deg); } .nav-dropdown-panel { position:absolute; top:calc(100% + 1rem); left:-1rem; z-index:3; display:grid; width:210px; gap:.2rem; padding:.65rem; border:1px solid var(--line); border-radius:.8rem; background:#fff; box-shadow:0 16px 36px rgba(15,36,60,.13); color:var(--slate); } .nav-dropdown-panel a { padding:.55rem .65rem; border-radius:.45rem; } .site-nav .nav-dropdown-panel a:hover,.site-nav .nav-dropdown-panel a:focus-visible { background:#edf4ff; color:var(--blue); text-decoration:none; } .site-nav .nav-dropdown-panel a[aria-current="page"] { color:var(--blue); }
.portal-link { color:#fff!important; border:1px solid rgba(255,255,255,.7); padding:.58rem .82rem; border-radius:.6rem; }.portal-link:hover,.portal-link:focus-visible { background:#fff; color:var(--blue)!important; text-decoration:none!important; }
.menu-button { display:none; border:0; background:transparent; color:#fff; font:inherit; font-weight:700; }
.eyebrow, .overline { margin:0 0 .8rem; color:var(--blue); font-size:.75rem; font-weight:800; letter-spacing:.14em; line-height:1.2; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-style:normal!important; font-weight:760; letter-spacing:-.045em; line-height:1.05; } h1 { font-size:clamp(2.9rem, 6.2vw, 5.9rem); max-width:850px; margin-bottom:1.45rem; } h2 { font-size:clamp(2.05rem, 4vw, 3.55rem); margin-bottom:1rem; } h3 { font-size:1.32rem; margin-bottom:.65rem; }
.button-row { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.65rem; background:var(--blue); color:#fff; min-height:48px; padding:.75rem 1rem; font-size:.92rem; font-weight:750; transition:transform .2s, background .2s; }
.button:hover { background:var(--blue-deep); transform:translateY(-2px); } .button.quiet { background:transparent; border:1px solid #b8cff8; color:var(--blue); } .button.quiet:hover { background:#edf4ff; } .button.light { background:#fff; color:var(--blue); } .button.light:hover { background:#eaf2ff; } .button.cart { background:#2dc76b; color:#fff; } .button.cart:hover { background:#23ac5a; color:#fff; }
.domain-band { background:var(--blue); color:#fff; } .domain-wrap { display:flex; justify-content:space-between; align-items:center; gap:3rem; padding-block:2.8rem; } .domain-band .eyebrow { color:#a8c9ff; } .domain-band h2 { font-size:2.3rem; margin:0; } .domain-action { display:flex; align-items:center; gap:1.5rem; max-width:570px; } .domain-action p { margin:0; color:#d9e8ff; }
.quick-routes { border-bottom:1px solid var(--line); background:#fff; } .quick-routes-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } .quick-route { display:flex; flex-direction:column; min-height:178px; padding:1.65rem 1.45rem; border-left:1px solid var(--line); color:var(--ink); transition:background .2s,color .2s; } .quick-route:last-child { border-right:1px solid var(--line); } .quick-route:hover,.quick-route:focus-visible { background:#f4f8ff; color:var(--blue); outline:none; } .quick-route p { margin:0 0 .85rem; color:var(--blue); font-size:.71rem; font-weight:850; letter-spacing:.1em; line-height:1.2; text-transform:uppercase; } .quick-route--email p { color:#168346; } .quick-route--websites p { color:#b74518; } .quick-route strong { max-width:15ch; font-size:1.1rem; letter-spacing:-.025em; line-height:1.2; } .quick-route span { margin-top:auto; padding-top:1rem; color:var(--slate); font-size:.86rem; line-height:1.45; }
.section { padding-block:106px; } .section-intro { max-width:700px; margin-bottom:3rem; } .section-intro > p:last-child { max-width:580px; color:var(--slate); font-size:1.08rem; } .section-intro.compact { margin-bottom:2.4rem; }
.service-group { padding:clamp(1.25rem,3vw,2rem); border:1px solid #c8d8e8; border-radius:var(--radius); background:#f8fbff; box-shadow:0 10px 26px rgba(15,36,60,.05); } .service-group-heading { max-width:650px; margin-bottom:1.5rem; } .service-group-heading .eyebrow { margin-bottom:.55rem; } .service-group-heading h3 { margin-bottom:.45rem; font-size:clamp(1.45rem,2.3vw,2rem); } .service-group-heading>p:last-child { margin:0; color:var(--slate); font-size:1rem; } .service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; } .service-alternatives { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin-top:1.25rem; } .service-alternatives .service-group { display:flex; flex-direction:column; } .service-alternatives .service-group--websites { background:#edf5ff; border-color:#c6dcff; } .service-card { min-height:280px; border:1px solid var(--line); border-radius:calc(var(--radius) - .2rem); padding:1.55rem; display:flex; flex-direction:column; background:#fff; transition:transform .2s,box-shadow .2s,border-color .2s; } .service-card-link { color:inherit; text-decoration:none; } .service-card:hover,.service-card:focus-visible { transform:translateY(-5px); border-color:#0067ff; box-shadow:var(--shadow); outline:none; } .service-card.website-card { background:#fff; border-color:#c6dcff; } .service-label { margin:0 0 .85rem; color:var(--blue); font-size:.72rem; font-weight:800; letter-spacing:.08em; line-height:1.25; text-transform:uppercase; } .service-card h3 { font-size:clamp(1.3rem,2vw,1.65rem); } .service-card p:not(.service-label) { color:var(--slate); font-size:.98rem; line-height:1.55; } .service-card-bottom { display:grid; gap:.7rem; margin-top:auto; padding-top:1.35rem; } .service-card-bottom strong { color:var(--ink); font-size:.95rem; } .service-card-action { color:var(--blue); font-size:.95rem; font-weight:800; }
.split-feature { background:var(--paper); } .split-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(3rem,8vw,9rem); } .feature-copy { max-width:500px; } .feature-copy>p:not(.eyebrow) { color:var(--slate); font-size:1.08rem; margin-bottom:1.7rem; } .feature-art { min-height:390px; border-radius:var(--radius); position:relative; overflow:hidden; background:linear-gradient(135deg,#d7e9ff,#fff); }
.promise-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); } .promise-grid article { padding:1.5rem 1.4rem 1rem 0; border-right:1px solid var(--line); } .promise-grid article:not(:first-child) { padding-left:1.4rem; } .promise-grid article:last-child { border:0; } .line-icon { display:flex; align-items:center; justify-content:center; margin-bottom:1.35rem; width:2.3rem; height:2.3rem; border-radius:.65rem; color:var(--blue); background:#e9f2ff; font-weight:800; } .promise-grid p { color:var(--slate); font-size:.94rem; }
.section-heading-row { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2.4rem; } .section-heading-row h2 { margin:0; } .text-link,.read-link { color:var(--blue); font-weight:750; font-size:.92rem; } .journal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; } .journal-grid article { padding-top:1.3rem; border-top:1px solid var(--line); } .date { color:var(--slate); font-size:.78rem; font-weight:650; } .journal-grid h3 { min-height:3.1em; } .journal-grid p:not(.date) { color:var(--slate); font-size:.93rem; } .read-link { display:inline-block; margin-top:.5rem; }
.closing { padding-block:78px; background:var(--ink); color:#fff; } .closing-wrap { display:flex; align-items:center; justify-content:space-between; gap:3rem; } .closing h2 { max-width:650px; margin:0; } .closing .eyebrow { color:#92bdff; }
.plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:stretch; } .plan { position:relative; border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem; display:flex; flex-direction:column; } .plan.recommended { border:2px solid var(--blue); box-shadow:var(--shadow); } .plan-badge { position:absolute; top:-.75rem; padding:.3rem .65rem; border-radius:999px; background:var(--blue); color:#fff; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; } .plan-fit { min-height:3.2em; color:var(--slate); font-size:.91rem; } .price { display:flex; gap:.35rem; align-items:baseline; margin-bottom:1.4rem; } .price strong { font-size:2.5rem; letter-spacing:-.06em; } .price span { color:var(--slate); font-size:.85rem; } .price:has(+ .price-yearly) { margin-bottom:.15rem; } .price-yearly { margin:0 0 1.3rem; color:#1f8a4c; font-size:.86rem; font-weight:700; }.plan ul { padding:0; margin:0 0 1.25rem; list-style:none; color:var(--slate); font-size:.92rem; } .plan li { padding:.52rem 0; border-bottom:1px solid #edf1f5; } .plan-actions { display:grid; gap:.75rem; margin-top:auto; } .plan-actions .button { width:100%; } .plan-details { border-top:1px solid var(--line); } .plan-details summary { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding-top:.8rem; color:var(--blue); cursor:pointer; font-size:.88rem; font-weight:750; list-style:none; } .plan-details summary::-webkit-details-marker { display:none; } .plan-details summary span { display:grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%; background:#e9f2ff; font-size:1rem; transition:transform .2s; } .plan-details[open] summary span { transform:rotate(45deg); } .plan-details-body>p { margin:1rem 0; color:var(--slate); font-size:.86rem; } .modal-metrics { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin:0; } .modal-metrics div { padding:.7rem .75rem; border:1px solid var(--line); border-radius:.65rem; background:#f8fbff; } .modal-metrics dt { margin-bottom:.2rem; color:var(--slate); font-size:.67rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; } .modal-metrics dd { margin:0; color:var(--ink); font-size:.85rem; font-weight:750; } .modal-includes { margin:1rem 0 0; padding:1rem; border-radius:.75rem; background:#edf5ff; } .modal-includes h3 { margin-bottom:.55rem; font-size:.95rem; } .modal-includes ul { display:grid; grid-template-columns:1fr; gap:.4rem; padding:0; margin:0; list-style:none; color:var(--slate); font-size:.83rem; } .modal-includes li::before { content:"✓"; margin-right:.45rem; color:#23ac5a; font-weight:800; }
.plan-note { margin:1.15rem 0 0; color:var(--slate); font-size:.84rem; }
.comparison-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); } .comparison-table { width:100%; min-width:720px; border-collapse:collapse; background:#fff; } .comparison-table th,.comparison-table td { padding:1rem 1.1rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:.92rem; } .comparison-table thead th { color:var(--ink); background:#edf5ff; font-weight:800; } .comparison-table thead th:first-child { width:27%; } .comparison-table tbody th { color:var(--ink); font-weight:750; } .comparison-table td { color:var(--slate); } .comparison-table tr:last-child th,.comparison-table tr:last-child td { border-bottom:0; }
.capability-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } .capability-grid article { padding:1.35rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; } .capability-grid h3 { font-size:1.1rem; } .capability-grid ul { padding:0; margin:0; list-style:none; color:var(--slate); font-size:.9rem; } .capability-grid li { padding:.5rem 0; border-bottom:1px solid #edf1f5; } .capability-grid li:last-child { border-bottom:0; } .capability-grid article>p { margin:0; color:var(--slate); font-size:.92rem; }
.website-package-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:stretch; } .website-package-grid article { display:flex; flex-direction:column; padding:1.7rem; border:1px solid var(--line); border-radius:var(--radius); } .website-package-grid article.featured-package { color:#fff; border-color:var(--blue); background:var(--blue); box-shadow:var(--shadow); } .website-package-grid .featured-package .overline { color:#abd0ff; } .website-package-grid article>p:not(.overline) { color:var(--slate); } .website-package-grid .featured-package>p:not(.overline) { color:#dceaff; } .website-package-grid ul { margin:1rem 0 1.8rem; padding:0; list-style:none; color:var(--slate); font-size:.92rem; } .website-package-grid .featured-package ul { color:#fff; } .website-package-grid li { padding:.5rem 0; border-bottom:1px solid var(--line); } .website-package-grid .featured-package li { border-color:rgba(255,255,255,.24); } .website-package-grid .button { margin-top:auto; }
.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .step-grid article { padding-top:1.25rem; border-top:2px solid #c5dcff; } .step-grid h3 { font-size:1.2rem; } .step-grid p { color:var(--slate); font-size:.92rem; }
.contact-hub { display:grid; grid-template-columns:1.3fr .9fr; gap:1rem; padding-block:72px 96px; } .contact-panel { min-height:335px; padding:clamp(1.6rem,4vw,2.8rem); border-radius:var(--radius); display:flex; flex-direction:column; } .contact-panel h2 { max-width:540px; } .contact-panel p:not(.overline) { max-width:500px; font-size:1.06rem; } .contact-panel .button,.contact-panel .text-link { margin-top:auto; align-self:start; } .contact-support { background:var(--ink); color:#fff; } .contact-support .overline { color:#92bdff; } .contact-support p:not(.overline) { color:#d5e3ec; } .contact-general { border:1px solid #c5dcff; background:#edf5ff; } .contact-general p:not(.overline) { color:var(--slate); } .contact-channels { padding-block:86px; background:var(--blue); color:#fff; } .contact-channels .eyebrow { color:#a8c9ff; } .contact-channels h2 { max-width:440px; } .contact-channels-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,8vw,8rem); align-items:center; } .contact-channels-grid>div>p:not(.eyebrow) { max-width:480px; color:#d9e8ff; font-size:1.05rem; } .contact-channel-list { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .contact-channel-list article { min-height:220px; padding:1.4rem; border:1px solid rgba(255,255,255,.24); border-radius:1rem; background:rgba(255,255,255,.08); } .channel-icon { display:grid; place-items:center; width:2.3rem; height:2.3rem; margin-bottom:1.25rem; border-radius:.65rem; color:var(--blue); background:#fff; font-weight:800; } .contact-channel-list h3 { margin-bottom:.65rem; } .contact-channel-list p { margin:0; color:#d9e8ff; font-size:.92rem; } .contact-channel-list strong { color:#fff; }
.story { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,8vw,9rem); } .story-lead p:not(.eyebrow) { color:var(--slate); font-size:1.05rem; } .timeline { border-left:1px solid var(--line); padding-left:2.3rem; } .timeline article { position:relative; padding-bottom:2.5rem; } .timeline article::before { content:""; position:absolute; width:.75rem; height:.75rem; border-radius:50%; background:var(--blue); left:-2.7rem; top:.2rem; } .timeline span { color:var(--blue); font-size:.8rem; font-weight:800; } .timeline p { color:var(--slate); }
.all-posts { padding-top:70px; } .post-row { display:grid; grid-template-columns:150px 1fr 46px; align-items:start; gap:1.8rem; padding:1.8rem 0; border-top:1px solid var(--line); } .post-row h2 { font-size:1.6rem; margin-bottom:.65rem; } .post-row h2:hover { color:var(--blue); } .post-row p:not(.date) { color:var(--slate); } .round-link { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:var(--blue); background:#e9f2ff; font-weight:800; }
.article-hero { padding:100px 0 70px; background:#f4f8fd; } .article-hero h1 { font-size:clamp(2.7rem,5vw,4.8rem); margin-bottom:0; } .legacy-content { padding-block:70px; color:#263947; } .legacy-content h1,.legacy-content h2,.legacy-content h3,.legacy-content h4 { margin-top:2.3rem; color:var(--ink); } .legacy-content h2 { font-size:2rem; } .legacy-content h3 { font-size:1.42rem; } .legacy-content p,.legacy-content li { font-size:1.04rem; } .legacy-content ul,.legacy-content ol { padding-left:1.4rem; } .legacy-content a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; } .legacy-content img { margin:1.2rem 0; border-radius:.5rem; } .legacy-content table { width:100%; border-collapse:collapse; display:block; overflow-x:auto; } .legacy-content th,.legacy-content td { padding:.6rem; border:1px solid var(--line); text-align:left; } .related-posts { padding:0 0 70px; } .related-posts h2 { margin-bottom:1.4rem; } .related-post-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .related-post-list a { min-height:150px; display:flex; flex-direction:column; gap:.65rem; padding:1.2rem; color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:.7rem; background:#fff; transition:transform .2s ease, border-color .2s ease; } .related-post-list a:hover { transform:translateY(-3px); border-color:var(--blue); } .related-post-list span { color:var(--blue); font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .related-post-list strong { line-height:1.35; } .related-post-list i { margin-top:auto; color:var(--blue); font-style:normal; font-weight:800; } .article-cta { padding-block:40px; background:var(--paper); } .article-cta .narrow { display:flex; align-items:center; justify-content:space-between; gap:2rem; } .article-cta p { margin:0; font-size:1.1rem; font-weight:700; }
.site-footer { padding-top:70px; color:#d2dce4; background:#102431; } .footer-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:2rem; padding-bottom:3rem; } .footer-logo { width:180px; margin-bottom:1rem; } .footer-grid p { max-width:300px; color:#aebdca; font-size:.9rem; } .footer-email { color:#d2dce4!important; line-height:1.7; } .footer-label { color:#fff!important; font-size:.75rem!important; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } .footer-grid a { display:block; margin:.5rem 0; font-size:.88rem; } .footer-grid a:hover { color:#fff; } .footer-bottom { display:flex; gap:1rem; justify-content:space-between; padding:1.3rem 0; color:#95a7b5; border-top:1px solid rgba(255,255,255,.11); font-size:.78rem; }
@media (max-width:1050px) { .hero-services { display:none; } }
@media (max-width:1120px) { .quick-routes-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .quick-route:nth-child(3) { border-left:1px solid var(--line); } .quick-route:nth-child(n+3) { border-top:1px solid var(--line); } }
@media (max-width:900px) { .service-grid,.promise-grid,.capability-grid { grid-template-columns:repeat(2,1fr); } .service-alternatives { grid-template-columns:1fr; } .website-package-grid { grid-template-columns:1fr; } .promise-grid article:nth-child(2) { border-right:0; } .promise-grid article:nth-child(n+3) { border-top:1px solid var(--line); } .split-grid,.story,.contact-hub,.contact-channels-grid { grid-template-columns:1fr; } .feature-art { min-height:300px; } .journal-grid { gap:1rem; } .footer-grid { grid-template-columns:2fr 1fr 1fr; } .footer-grid>div:first-child { grid-column:1/-1; } }
@media (max-width:820px) { .nav { min-height:68px; } .brand,.brand img { width:142px; } .menu-button { display:block; } .site-nav { display:none; position:absolute; top:68px; left:0; right:0; padding:1rem max(16px, calc((100vw - 1120px) / 2)) 1.3rem; background:var(--blue); border-bottom:1px solid rgba(255,255,255,.24); box-shadow:0 15px 30px rgba(0,60,161,.24); align-items:stretch; flex-direction:column; gap:.8rem; } .site-nav.open { display:flex; } .nav-dropdown { width:100%; } .nav-dropdown summary { padding:.25rem 0; } .nav-dropdown-panel { position:static; width:auto; margin:.45rem 0 .1rem; box-shadow:none; } .portal-link { align-self:flex-start; } }
@media (max-width:690px) { .shell,.narrow { width:min(100% - 32px, 1120px); } .quick-routes-grid { width:100%; } .quick-route { min-height:184px; padding:1.35rem 1rem; } .quick-route strong { font-size:1rem; } .quick-route span { font-size:.8rem; } .hero { min-height:auto; } .hero-content { padding-block:84px 76px; } .domain-wrap,.domain-action,.closing-wrap,.article-cta .narrow { align-items:flex-start; flex-direction:column; gap:1.2rem; } .domain-wrap { padding-block:2.2rem; } .section { padding-block:72px; } .service-grid,.plan-grid,.website-package-grid,.journal-grid,.promise-grid,.step-grid,.contact-channel-list,.capability-grid,.related-post-list { grid-template-columns:1fr; } .service-card { min-height:235px; } .promise-grid article,.promise-grid article:not(:first-child) { padding:1.2rem 0; border:0; border-bottom:1px solid var(--line); } .promise-grid article:last-child { border:0; } .section-heading-row { align-items:flex-start; flex-direction:column; } .post-row { grid-template-columns:1fr 42px; gap:.7rem; } .post-row .date { grid-column:1/-1; margin:0; } .footer-grid { grid-template-columns:1fr 1fr; } .footer-grid>div:first-child { grid-column:1/-1; } .footer-bottom { flex-direction:column; } }
.plan-grid { align-items:start; }
.plan-grid { align-items:stretch; }
.plan-actions { display:block; } .plan-actions .button { width:100%; }
.plan-next-step { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-top:1.25rem; padding:1.15rem 1.3rem; border:1px solid #c5dcff; border-radius:var(--radius); background:#edf5ff; } .plan-next-step div { display:grid; gap:.25rem; } .plan-next-step strong { color:var(--ink); font-size:1rem; } .plan-next-step span { color:var(--slate); font-size:.88rem; } .plan-next-step .button { flex:0 0 auto; }
@media (max-width:690px) { .plan-next-step { align-items:flex-start; flex-direction:column; gap:1rem; padding:1.1rem; } }
.table-scroll-hint { display:none; }
@media (max-width:690px) { .table-scroll-hint { display:block; margin:-.35rem 0 .85rem!important; color:var(--blue)!important; font-size:.82rem!important; font-weight:750; } .comparison-table thead th:first-child,.comparison-table tbody th { position:sticky; left:0; z-index:1; background:#fff; } .comparison-table thead th:first-child { z-index:2; background:#edf5ff; } }


/* ===== iStartCloud platform: gradient heroes, domain search, cart and checkout ===== */
:root { --blue-soft:#edf4ff; --red:#d64545; --amber:#a87300; --green-deep:#1f9e53; }
/* Service colours, one pair each, used by the route cards, the home panels and the service pages (DESIGN-REVIEW-DIRECTION.md,
   "Service colours"): the bright one for bars and borders, the ink for text, which keeps small text readable on white. */
:root { --svc-hosting:#004fd4; --svc-hosting-ink:#003ca1; --svc-email:#1f9e53; --svc-email-ink:#16653a; --svc-websites:#f26b38; --svc-websites-ink:#b74518; --svc-domains:#003ca1; --svc-domains-ink:#003ca1; }
.nav { position:relative; }
.cart-pill { order:3; display:inline-flex; gap:.45rem; align-items:center; margin-left:.8rem; background:#fff; color:var(--blue); padding:.55rem .8rem; border-radius:.6rem; font-weight:750; font-size:.86rem; white-space:nowrap; }
.cart-pill:hover { background:#eaf2ff; }
.cart-pill b { background:var(--blue); color:#fff; border-radius:999px; min-width:1.4rem; text-align:center; font-size:.78rem; padding:0 .35rem; }
.cart-pill-total:empty { display:none; } .cart-pill-total { font-size:.8rem; }
@media (max-width:820px) { .cart-pill { margin-left:auto; margin-right:.6rem; } .cart-pill-total { display:none; } .menu-button { order:4; } }

/* Gradient hero used on every page */
.hero { position:relative; display:block; min-height:0; overflow:visible; background:linear-gradient(135deg,#004fd4,#0a2f7a); color:#fff; padding:76px 0 84px; }
.hero h1 { color:#fff; max-width:860px; font-size:clamp(2.4rem,5.4vw,4.6rem); }
.hero .eyebrow { color:#a9c6ff; }
.hero .lead { color:#d6e4ff; font-size:clamp(1.02rem,2vw,1.18rem); max-width:680px; margin-bottom:1.6rem; }
.hero .date { color:#a9c6ff; }
.hero-proof { display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:1.6rem; color:#d6e4ff; font-size:.82rem; font-weight:700; }
.hero-proof span::before { content:""; display:inline-block; width:.48rem; height:.48rem; margin-right:.4rem; border-radius:99px; background:var(--green); }
.button.ghost { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.45); color:#fff; } .button.ghost:hover { background:rgba(255,255,255,.2); }
.button.small { min-height:36px; padding:.4rem .75rem; font-size:.84rem; }
.button.danger { background:#fff; color:var(--red); border:1px solid #f0c4c4; } .button.danger:hover { background:#fdf0f0; transform:none; }
.button[disabled], .button[aria-disabled="true"] { opacity:.45; cursor:not-allowed; transform:none; }
button.button { border:0; cursor:pointer; font:inherit; }
.text-button { border:0; background:none; color:var(--blue); font:inherit; font-weight:700; cursor:pointer; padding:0; }
.text-button.danger { color:var(--red); }

/* Domain search box */
.search { display:flex; gap:8px; background:#fff; padding:8px; border-radius:.9rem; box-shadow:0 22px 60px rgba(4,20,60,.25); max-width:780px; margin-top:14px; }
.search input { flex:1; border:0; outline:0; font:inherit; font-size:1.12rem; padding:.6rem .8rem; color:var(--ink); min-width:0; }
/* Register or transfer, chosen inside the field: a quiet select with its own chevron and a divider before the name. */
.search-mode { flex:none; appearance:none; border:0; border-right:1px solid var(--line); border-radius:.55rem 0 0 .55rem; background:#f1f6ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23004fd4' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .7rem center; color:var(--blue); font:inherit; font-size:.95rem; font-weight:800; padding:.6rem 2rem .6rem .85rem; cursor:pointer; }
.search-mode:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.search-note { margin-top:.9rem; color:#a9c6ff; font-size:.88rem; }

/* Cards, rows and statuses */
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1rem,2.4vw,1.5rem); }
.muted { color:var(--slate); font-size:.9rem; }
.status { font-size:.86rem; font-weight:750; } .status.ok { color:var(--green-deep); } .status.no { color:var(--red); } .status.wait { color:var(--slate); } .status.warn { color:var(--amber); }
.price-tag { font-weight:800; white-space:nowrap; } .price-tag small { font-weight:400; color:var(--slate); }
.spinner { display:inline-block; width:12px; height:12px; border:2px solid #c8d4e0; border-top-color:var(--blue); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-1px; margin-right:5px; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration:2s; } .button:hover { transform:none; } }
.explain { background:var(--blue-soft); border-radius:.65rem; padding:.7rem .9rem; font-size:.88rem; color:var(--slate); }
.notice { border-radius:.65rem; padding:.8rem 1rem; font-size:.92rem; background:#fff7e0; color:#5c4500; border:1px solid #f0dc9c; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:.75rem 1.1rem; border-radius:.65rem; z-index:60; font-size:.92rem; box-shadow:var(--shadow); max-width:calc(100% - 32px); }

.domain-results { padding-block:36px 72px; }
.result-main { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:22px; border-radius:var(--radius); border:2px solid var(--line); background:#fff; }
.result-main.available { border-color:var(--green); } .result-main.taken { border-color:#f0c4c4; }
.result-main .dn { font-size:clamp(1.3rem,3vw,1.7rem); font-weight:800; letter-spacing:-.03em; word-break:break-all; }
.result-main .side { text-align:right; }
.rows { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:12px; }
.row { display:grid; grid-template-columns:minmax(0,1fr) 170px 130px 150px; gap:12px; align-items:center; padding:12px 16px; border-top:1px solid var(--line); }
.row:first-child { border-top:0; } .row.head { font-weight:800; background:var(--paper); font-size:.86rem; }
.row .dn { font-weight:750; word-break:break-all; } .row .dn span { color:var(--blue); } .row .act { text-align:right; }
.group-title { margin:34px 0 4px; font-size:1.3rem; }
.whois { grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px 16px; background:var(--paper); border-radius:.6rem; padding:12px 14px; font-size:.88rem; }
.result-main .whois { flex-basis:100%; }
.whois span { display:block; color:var(--slate); font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.next-bar { position:sticky; top:84px; z-index:5; margin-top:14px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; border:2px solid var(--blue); box-shadow:var(--shadow); }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chips button { border:1px solid var(--line); background:#fff; padding:.45rem .9rem; border-radius:999px; cursor:pointer; font:inherit; font-weight:750; color:var(--slate); font-size:.88rem; }
.chips button.on { background:var(--blue); border-color:var(--blue); color:#fff; }
.price-list .tools { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.price-list .tools input { border:1px solid var(--line); border-radius:.5rem; padding:.5rem .7rem; font:inherit; min-width:0; flex:1; max-width:240px; }
@media (max-width:860px) { .row { grid-template-columns:1fr auto; } .row .pr { text-align:right; } .row.head { display:none; } .price-list .row { grid-template-columns:1fr 1fr 1fr; } }

/* Order progress bar (cart, details, pay) */
.page-head { padding:34px 0 8px; }
.stepper { display:flex; gap:6px; list-style:none; padding:0; margin:18px 0 0; }
.stepper li { flex:1; min-width:0; }
.stepper a, .stepper .st-static { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:.7rem; background:#fff; border:1px solid var(--line); color:var(--slate); font-weight:750; font-size:.88rem; }
.stepper .st-static { color:var(--slate); }
.stepper .num { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--line); font-size:.82rem; flex-shrink:0; }
.stepper li.on a, .stepper li.on .st-static { border-color:var(--blue); color:var(--blue); box-shadow:0 0 0 3px #dbe7ff; }
.stepper li.on .num { background:var(--blue); border-color:var(--blue); color:#fff; }
.stepper li.done .num { background:var(--green); border-color:var(--green); color:#fff; }
@media (max-width:860px) { .stepper .lbl { display:none; } .stepper li.on .lbl { display:inline; } .stepper li.on { flex:3; } }

/* Cart */
.order-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; padding-block:14px 72px; }
.summary { position:sticky; top:96px; }
.step-title { font-size:1.35rem; margin-bottom:12px; }
.step-nav { display:flex; justify-content:space-between; gap:10px; margin-top:22px; padding-top:16px; border-top:1px solid var(--line); flex-wrap:wrap; }
.line-item { padding:14px 0; border-top:1px solid var(--line); } .line-item:first-of-type { border-top:0; }
.li-top { display:flex; justify-content:space-between; gap:12px; } .li-top strong { word-break:break-all; }
.li-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; flex-shrink:0; }
.li-meta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:6px; font-size:.88rem; color:var(--slate); }
.li-meta select, .li-meta input { border:1px solid var(--line); border-radius:.5rem; padding:.4rem .55rem; font:inherit; background:#fff; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:.6rem; overflow:hidden; background:#fff; }
.seg button { border:0; background:none; padding:.5rem .95rem; cursor:pointer; font:inherit; font-weight:750; color:var(--slate); font-size:.88rem; }
.seg button.on { background:var(--blue); color:#fff; }
.mini-search { margin-top:16px; padding:14px; border-radius:.7rem; background:var(--paper); }
.mini-form { display:flex; gap:8px; } .mini-form input { flex:1; min-width:0; border:1px solid var(--line); border-radius:.5rem; padding:.6rem .7rem; font:inherit; }
.own-row { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; } .own-row input { flex:1; min-width:160px; border:1px solid var(--line); border-radius:.5rem; padding:.45rem .6rem; font:inherit; }
.svc-block { border:1px solid var(--line); border-radius:.8rem; padding:14px; margin-top:12px; } .svc-block.dashed { border-style:dashed; }
.svc-head { margin-bottom:6px; word-break:break-all; }
.svc-actions { display:flex; gap:8px; flex-wrap:wrap; }
.picker { margin-top:12px; padding:12px; background:var(--blue-soft); border-radius:.7rem; }
.pick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pick { background:#fff; border:1px solid var(--line); border-radius:.6rem; padding:10px; display:flex; flex-direction:column; gap:4px; font-size:.9rem; }
.addon-list label { display:flex; justify-content:space-between; gap:10px; font-size:.92rem; padding:6px 0; cursor:pointer; }
.rv { border:1px solid var(--line); border-radius:.7rem; padding:0 14px; }
.rv-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); } .rv-row:first-child { border-top:0; } .rv-row .price-tag { text-align:right; }
.totals { border-top:1px solid var(--line); margin-top:12px; padding-top:12px; display:grid; gap:6px; }
.totals div { display:flex; justify-content:space-between; gap:12px; } .totals .today { font-size:1.35rem; font-weight:800; }
.sum-line { display:flex; justify-content:space-between; gap:8px; font-size:.9rem; padding:3px 0; } .sum-line span:first-child { word-break:break-all; }
.empty { text-align:center; padding:40px 20px; }
.modal-bg { position:fixed; inset:0; background:rgba(10,25,45,.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.modal { background:#fff; border-radius:var(--radius); padding:22px; width:min(520px,100%); max-height:90vh; overflow:auto; }
.stack { display:grid; gap:10px; }
.choice { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:.7rem; padding:12px; cursor:pointer; background:#fff; }
.choice.on { border-color:var(--blue); background:var(--blue-soft); }
.choice input[type=text] { width:100%; border:1px solid var(--line); border-radius:.5rem; padding:.55rem; margin-top:8px; font:inherit; }
@media (max-width:860px) { .order-layout { grid-template-columns:1fr; } .summary { position:static; } .pick-grid { grid-template-columns:1fr; } }

/* Checkout form */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:flex; flex-direction:column; gap:4px; font-size:.86rem; font-weight:750; color:var(--slate); }
.field.full { grid-column:1 / -1; }
.field input, .field select { font:inherit; font-weight:400; color:var(--ink); padding:.65rem .7rem; border:1px solid var(--line); border-radius:.5rem; background:#fff; font-size:1rem; }
.field .ferr { color:var(--red); font-weight:750; font-size:.8rem; }
.field .fhint { color:var(--slate); font-weight:400; font-size:.78rem; }
.field.bad input, .field.bad select { border-color:var(--red); background:#fffafa; }
.field.good input, .field.good select { border-color:#9fd9b5; }
.form-section { margin-top:22px; }
.agree { display:flex; gap:10px; margin-top:20px; font-size:.92rem; }
.agree a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; font-weight:700; }
.agree a:hover, .agree a:focus-visible { color:var(--blue-deep); }
.turnstile-box { margin-top:14px; min-height:65px; }
.done-hero { text-align:center; padding:48px 20px; }
.done-hero .stepper { max-width:820px; margin:0 auto 22px; text-align:left; }
.check-mark { width:64px; height:64px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 16px; }
@media (max-width:690px) { .form-grid { grid-template-columns:1fr; } }
.order-layout > *, .form-grid > *, .li-top > div:first-child { min-width:0; }
.seg { flex-wrap:wrap; max-width:100%; }
@media (max-width:600px) {
  .stepper { gap:4px; }
  .stepper a, .stepper .st-static { padding:8px 6px; gap:5px; justify-content:center; font-size:.8rem; }
  .li-top { flex-wrap:wrap; } .li-right { flex-direction:row; align-items:center; width:100%; justify-content:space-between; }
  .seg button { padding:.45rem .7rem; font-size:.82rem; }
  .card { padding:14px; }
}

/* Keep domain actions and package links readable in both order summaries. */
.order-group{padding:14px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.order-group:first-of-type{padding-top:0}
.order-group>strong{display:block;margin-bottom:4px}
.order-group>.muted{margin:6px 0;font-size:.88rem}
.summary-detail{display:block;font-weight:400;color:var(--slate)}
.transfer-note{font-size:.82rem;line-height:1.5}
.summary .transfer-note{margin-top:10px}
.modal{max-height:90vh;overflow-y:auto}
.explain+.explain{margin-top:12px}

.transfer-info{margin:14px 0;color:var(--slate);font-size:.88rem}
.transfer-info summary{cursor:pointer;color:var(--blue);font-weight:600}

.action-label{display:flex;align-items:center;gap:6px;margin:8px 0}
.help-tip{display:inline-block;position:relative;vertical-align:middle;margin-left:6px;text-align:left}
.help-tip summary{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid #9cb3d6;border-radius:50%;color:var(--blue);background:#f4f8ff;font-size:.75rem;font-weight:700;cursor:pointer;list-style:none}
.help-tip summary::-webkit-details-marker{display:none}
.help-tip summary:focus-visible{outline:3px solid #91b5ff;outline-offset:2px}
.help-tip-note{position:absolute;z-index:20;top:26px;left:0;width:280px;max-width:calc(100vw - 80px);padding:12px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 6px 24px #17315b26;color:var(--slate);font-size:.85rem;font-weight:400;line-height:1.5}
@media(max-width:600px){.help-tip-note{position:fixed;left:24px;right:24px;top:auto;bottom:16px;width:auto;max-width:none;margin-top:8px}}

.summary-actions{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.clear-cart-action{border:0;padding:6px 0;background:none;color:#9b4650;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.clear-cart-action:hover{color:#801c29;text-decoration:underline}
.clear-cart-action:focus-visible{outline:3px solid #91b5ff;outline-offset:3px;border-radius:2px}

.clear-confirmation{margin-top:10px;padding:12px;border:1px solid #ead7da;border-radius:8px;background:#fffafb}
.clear-confirmation[hidden]{display:none}
.clear-confirmation p{font-size:.88rem;margin:0 0 10px;color:var(--ink)}
.clear-confirmation .button-row{gap:8px;flex-wrap:wrap}

.existing-domain-form,.existing-domain-options{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fff}
.domain-action-options{border:0;padding:0;margin:14px 0;min-width:0;display:grid;gap:8px}
.domain-action-options legend{padding:0;margin-bottom:8px;font-size:.88rem;font-weight:650;color:var(--ink)}
.domain-action-options .choice{margin:0;font-size:.88rem;line-height:1.5;min-height:44px}
.existing-domain-form .status:empty{display:none}

.item-actions{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0 14px}.item-actions .text-button{font-size:.82rem;min-height:32px}.item-actions .danger{color:#b42336}

/* Hidden controls and filtered rows must stay hidden despite component display rules. */
[hidden]{display:none!important}
.site-nav a[aria-current="page"],.nav-dropdown.is-active>summary{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.nav-dropdown-panel a[aria-current="page"]{background:var(--blue-soft);color:var(--blue);text-underline-offset:4px}
.domain-results--idle{padding-block:0}
.domain-results--idle #next:empty{display:none}
.domain-results--idle:has(#next:empty){display:none}
.domain-pricing{padding-top:28px;padding-bottom:44px}
.price-pagination{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.price-pagination p{margin:0}.price-empty{padding:16px}.mobile-price-label{display:none}
.domain-guidance{padding-bottom:64px}.domain-guidance h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.domain-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:28px 0 40px}
.domain-guide-grid article{padding-top:1.25rem;border-top:2px solid #c5dcff}
.domain-guide-grid h3{font-size:1.2rem;line-height:1.2;letter-spacing:-.025em}.domain-guide-grid p{font-size:.95rem;color:var(--slate);margin:0}
@media(max-width:860px){.price-list .row{grid-template-columns:minmax(0,1fr) repeat(3,auto);gap:10px;font-size:.85rem}}
@media(max-width:690px){.domain-guide-grid{grid-template-columns:1fr;gap:14px}.price-list .row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px;font-size:.8rem}.price-list .row .dn{grid-column:1/-1;font-size:1rem}.mobile-price-label{display:block;color:var(--slate);font-size:.72rem}.domain-pricing{padding-top:20px}.price-pagination{align-items:flex-start}}

@media(max-width:480px){.hero .search{flex-wrap:wrap}.hero .search input{flex:1 1 0;width:auto}.hero .search-mode{padding-right:1.7rem;background-position:right .55rem center}.hero .search>.button{flex-basis:100%;width:100%;min-height:44px}}

/* Distinct service identities and clearer cards on pale surfaces. */
.hero{overflow:hidden}
.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,350px);gap:clamp(2rem,6vw,6rem);align-items:center}
.hero-art{justify-self:end;width:min(100%,250px)}
.hero-art img{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:1.1rem;box-shadow:0 18px 40px rgba(0,20,72,.25)}
.hero:not(.hero--page):not(.hero--task) .hero-art{width:min(100%,300px)}
.service-card,.plan,.capability-grid article{border-color:#c8d8e8;box-shadow:0 10px 26px rgba(15,36,60,.06)}
@media(max-width:860px){.hero-layout{grid-template-columns:1fr}.hero-art{display:none}}

.migration-caveat{font-size:.86rem;line-height:1.6;color:var(--slate);margin:18px 0 24px;scroll-margin-top:100px}.hero-proof a{text-decoration:underline;text-underline-offset:3px}.plan li a[href="#migration-info"]{text-decoration:underline;text-underline-offset:3px}

.promo-control{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.promo-control summary{font-size:.88rem;font-weight:700;cursor:pointer}.promo-control form{margin-top:12px}.promo-control .muted{margin:10px 0;font-size:.8rem}

.ordering-fallback{background:#edf4ff;border-bottom:1px solid #d5e3fa;color:var(--slate)}.ordering-fallback>.shell{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:8px}.ordering-fallback p{margin:0;font-size:.84rem}.ordering-fallback a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;font-weight:700}.ordering-fallback button{flex:none;min-width:36px;min-height:36px;border:0;background:transparent;color:var(--slate);font-size:1.3rem;cursor:pointer}

/* Checkout account guidance and an unbroken order amount. */
.password-feedback meter{display:block;width:100%;height:8px}.password-feedback p{margin:6px 0 0;font-size:.76rem}
.login-recovery .button{white-space:normal;text-align:center;font-weight:700}.login-recovery p{margin:8px 0 0;font-size:.84rem}
.order-amount{white-space:nowrap;font-weight:800;font-variant-numeric:tabular-nums}

.password-requirements{list-style:none;padding:0;margin:6px 0 0;display:grid;grid-template-columns:1fr;gap:3px;font-size:.76rem;line-height:1.4}
.password-requirements li{display:flex;align-items:baseline;gap:7px}.password-requirements li>span:first-child{font-size:.88rem;font-weight:800}.password-requirements .met{color:#087839}.password-requirements .unmet{color:#b42336}
.field.good .ferr{color:#087839}

#form-error:empty{display:none}
.checkout-payment-note{margin-top:24px;margin-bottom:16px}
/* Websites page: guided chooser and enquiry form */
.ongoing-heading { margin:3.2rem 0 1.2rem; font-size:1.35rem; }
.ongoing-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); } .ongoing-grid article { padding:1.5rem 1.6rem 0 0; } .ongoing-grid article+article { padding-left:1.6rem; border-left:1px solid var(--line); }
.ongoing-grid h3 { font-size:1.15rem; margin-bottom:.5rem; } .ongoing-grid p:not(.overline) { color:var(--slate); font-size:.93rem; } .ongoing-grid .overline { margin-bottom:.5rem; color:var(--blue); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.chooser-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.chooser-intro h2 { margin-bottom:1rem; } .chooser-intro>p:not(.eyebrow) { color:var(--slate); font-size:1.05rem; }
.chooser-next { display:grid; gap:1rem; margin:2rem 0 0; padding:0; list-style:none; counter-reset:step; }
.chooser-next li { position:relative; padding-left:2.9rem; color:var(--slate); font-size:.95rem; counter-increment:step; } .chooser-next strong { display:block; color:var(--ink); }
.chooser-next li::before { content:counter(step); position:absolute; left:0; top:.1rem; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:#fff; border:1px solid #c5dcff; color:var(--blue); font-weight:800; font-size:.9rem; }
.chooser-panel { padding:clamp(1.3rem,3.5vw,2.2rem); border:1px solid #c5dcff; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }
.chooser-section { background:var(--paper); }
.chooser { margin:0; }
.chooser-progress { margin:0 0 .6rem; color:var(--blue); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.chooser h3 { font-size:1.55rem; margin-bottom:1.1rem; }
.chooser-options { display:grid; gap:.6rem; margin:0 0 1.2rem; padding:0; list-style:none; }
.chooser-option { display:flex; align-items:center; gap:.8rem; width:100%; min-height:52px; padding:.8rem 1rem; border:1px solid var(--line); border-radius:.75rem; background:#fff; color:var(--ink); font:inherit; font-weight:700; text-align:left; cursor:pointer; transition:border-color .15s, background .15s; }
.chooser-option:hover { border-color:#8fb6f5; background:#f6f9ff; }
.chooser-option:focus-visible { outline:3px solid #8fb6f5; outline-offset:2px; }
.chooser-option[aria-pressed="true"] { border-color:var(--blue); background:#edf4ff; }
.chooser-option::before { content:""; flex:none; width:1.15rem; height:1.15rem; border:2px solid #9db3c8; border-radius:50%; }
.chooser-option[aria-pressed="true"]::before { border-color:var(--blue); background:radial-gradient(circle, var(--blue) 45%, transparent 50%); }
.chooser-options.multi .chooser-option::before { border-radius:.3rem; }
.chooser-options.multi .chooser-option[aria-pressed="true"]::before { background:var(--blue); box-shadow:inset 0 0 0 2px #fff; }
.chooser-nav { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; }
.chooser-nav .button[disabled] { opacity:.45; cursor:not-allowed; transform:none; }
.enquiry-form { display:grid; gap:1.1rem; } .enquiry-form[hidden] { display:none; } .enquiry-form .field>span { color:var(--ink); } .enquiry-form .field input,.enquiry-form .field select,.enquiry-form .field textarea { min-height:46px; background:#fbfcfe; } .enquiry-form .field input:focus,.enquiry-form .field select:focus,.enquiry-form .field textarea:focus { outline:3px solid #cfe0ff; border-color:var(--blue); background:#fff; }
.enquiry-form .field textarea { font:inherit; font-weight:400; color:var(--ink); padding:.65rem .7rem; border:1px solid var(--line); border-radius:.55rem; resize:vertical; }
.enquiry-form .field small { color:var(--muted); font-weight:400; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field-error { margin:0; color:var(--red, #c0392b); font-size:.82rem; font-weight:750; }
.field [aria-invalid="true"] { border-color:var(--red, #c0392b); background:#fffafa; }
.enquiry-answers { padding:1rem 1.1rem; border:1px solid var(--line); border-radius:.85rem; background:#fff; }
.enquiry-answers summary { cursor:pointer; color:var(--ink); font-weight:800; }
.enquiry-answers[open] summary { margin-bottom:.9rem; }
.enquiry-answers .field { margin-bottom:.8rem; }
.enquiry-answers fieldset { border:0; margin:0; padding:0; }
.enquiry-answers legend { margin-bottom:.4rem; }
.check { display:flex; align-items:center; gap:.5rem; padding:.25rem 0; font-weight:600; color:var(--ink); }
.enquiry-summary { padding:1rem 1.1rem; border:1px solid #c5dcff; border-radius:.85rem; background:#edf5ff; }
.enquiry-summary .overline { margin-bottom:.4rem; } .enquiry-summary p:not(.overline) { margin:0 0 .4rem; color:var(--ink); font-weight:700; }
.enquiry-company { position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.enquiry-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; }
.enquiry-actions .button[disabled] { opacity:.6; cursor:progress; transform:none; }
.enquiry-privacy { margin:0; max-width:420px; color:var(--slate); font-size:.84rem; } .enquiry-privacy a { color:var(--blue); text-decoration:underline; }
.enquiry-done { max-width:820px; padding:clamp(1.3rem,4vw,2.2rem); border-radius:var(--radius); background:var(--blue); color:#fff; } .enquiry-done h3 { font-size:1.6rem; } .enquiry-done p { margin:0; color:#d9e8ff; }
@media (max-width:690px) { .field-grid { grid-template-columns:1fr; } .chooser h3 { font-size:1.3rem; } }

.enquiry-status:empty { display:none; }
.enquiry-done { max-width:none; }
@media (max-width:900px) { .chooser-layout,.ongoing-grid { grid-template-columns:1fr; } .ongoing-grid article,.ongoing-grid article+article { padding:1.3rem 0; border-left:0; border-bottom:1px solid var(--line); } }
.chooser-restart { color:var(--slate); font-weight:600; } .chooser-nav .chooser-restart { margin-left:auto; } .enquiry-summary-actions { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
/* Contrast and type scale (2026-10-25). Every text colour here passes WCAG AA (4.5:1) on its background:
   pale text on the brand blue was about 4:1, and white on the bright green buttons about 2.2:1. */
:root { --on-blue:#e3edff; --on-blue-soft:#eef4ff; --action:#26b562; --action-hover:#22a85a; }
.hero .eyebrow, .hero .date, .search-note, .domain-band .eyebrow, .contact-channels .eyebrow, .website-package-grid .featured-package .overline { color:var(--on-blue); }
.hero .lead, .hero-proof, .domain-action p, .contact-channels-grid>div>p:not(.eyebrow), .contact-channel-list p, .website-package-grid .featured-package>p:not(.overline) { color:var(--on-blue-soft); }
.button.cart { background:var(--action); } .button.cart:hover { background:var(--action-hover); }
.price-yearly { color:#16653a; }
/* Calmer headings: big enough to lead, small enough to read the line under them. */
h1 { font-size:clamp(2.2rem,4vw,3.4rem); }
h2 { font-size:clamp(1.75rem,3vw,2.6rem); }
.hero h1 { font-size:clamp(2.2rem,4vw,3.4rem); }
.article-hero h1 { font-size:clamp(2rem,3.4vw,3rem); }
.plan-next-step .button span { color:inherit; }

/* Homepage composition: fewer surface styles, clearer changes of purpose. */
.hero h1 { max-width:620px; }
.hero .lead { max-width:600px; }
.quick-routes { background:#fff; }
.quick-routes .shell { padding-block:2rem 0; }
.quick-routes-intro { padding:0 0 1.45rem; }
.quick-routes-intro h2 { margin:0; font-size:clamp(1.35rem,2vw,1.75rem); }
.quick-route { min-height:156px; padding:1.35rem 1.45rem; }
.quick-route strong { display:block; min-height:2.24em; max-width:15ch; font-size:clamp(1.3rem,1.6vw,1.55rem); line-height:1.12; }
.quick-route span { margin-top:.8rem; padding-top:0; }

.migration-art { display:grid; place-items:center; padding:0; background:transparent; border-radius:0; }
.migration-art img { display:block; width:100%; height:100%; object-fit:contain; }
/* Media panel (home and websites migration): illustration and copy share one panel, so the picture reads as part of the message. */
.media-panel .split-grid { gap:0; align-items:stretch; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 12px 28px rgba(15,36,60,.05); }
.media-panel .migration-art { min-height:0; padding:clamp(2rem,4vw,3.5rem); background:#eaf2fd; }
.media-panel .migration-art img { max-width:440px; height:auto; }
.media-panel .feature-copy { max-width:none; padding:clamp(2rem,4.5vw,4rem); }
@media (min-width:901px) { .media-panel .split-grid { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } .media-panel .split-grid:has(> .feature-copy:first-child) { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); } }
.media-panel .feature-copy h2 { font-size:clamp(2rem,3.2vw,2.75rem); }

.footer-brand { display:inline-block!important; margin:0!important; border-radius:.25rem; }
.footer-brand:focus-visible { outline:2px solid #fff; outline-offset:5px; }

.home-offers { padding-top:72px; background:#f1f7ff; }
/* Each core service is its own white panel with a coloured top bar, matching the route cards above:
   hosting blue, email green, websites orange. Hosting holds its heading and plan cards; email and websites are single panels. */
.home-offers .service-group { --group:var(--svc-hosting); --group-ink:var(--svc-hosting-ink); position:relative; overflow:hidden; padding:clamp(1.5rem,3vw,2.25rem); border:1px solid #d6e2ee; border-radius:var(--radius); background:#fff; box-shadow:0 12px 28px rgba(15,36,60,.06); }
.home-offers .service-group::before { position:absolute; inset:0 0 auto; height:5px; background:var(--group); content:""; }
.home-offers .service-group--email { --group:var(--svc-email); --group-ink:var(--svc-email-ink); }
.home-offers .service-group--websites { --group:var(--svc-websites); --group-ink:var(--svc-websites-ink); }
.home-offers .service-group--single { display:flex; padding:0; }
.home-offers .service-group--single .service-card { flex:1; min-height:0; padding:clamp(1.5rem,3vw,2.25rem); border:0; border-radius:0; background:transparent; box-shadow:none; transform:none; }
.home-offers .service-group--single:hover, .home-offers .service-group--single:focus-within { border-color:var(--group); box-shadow:0 18px 34px rgba(15,36,60,.1); }
.home-offers .service-group .service-label, .home-offers .service-group .service-card-action { color:var(--group-ink); }
.home-offers .service-group-heading h3, .home-offers .service-group--single .service-card h3 { margin-bottom:.45rem; font-size:clamp(1.5rem,2.4vw,1.95rem); }
.home-offers .service-group-heading { max-width:660px; margin-bottom:1.65rem; }
.home-offers .service-group--hosting .service-card { min-height:260px; border-color:#dbe6f2; background:#f6f9fe; box-shadow:none; }
.home-offers .service-group--hosting .service-card:hover, .home-offers .service-group--hosting .service-card:focus-visible { background:#fff; }
/* Three hosting plans stay in one row on tablet (no lone card under a pair), and stack on phones. */
@media (min-width:691px) and (max-width:900px) { .home-offers .service-group--hosting .service-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; } .home-offers .service-group--hosting .service-card { padding:1.15rem; } .home-offers .service-group--hosting .service-label { min-height:2.5em; } }
@media (max-width:690px) { .home-offers .service-group--hosting .service-grid { grid-template-columns:1fr; } .home-offers .service-group--hosting .service-card { min-height:0; } }
.home-offers .service-alternatives { gap:2rem; margin-top:2rem; }


.home-promises { background:#f0faf4; border-block:1px solid #d8eddf; }
.home-promises .section-intro { margin-bottom:2.3rem; }
.home-promises .promise-grid { border-top-color:#c7e2d0; }
.home-promises .promise-grid article { border-right-color:#c7e2d0; }

.faq-section { background:var(--paper); border-top:1px solid var(--line); }
.faq-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(2rem,6vw,5rem); align-items:start; }
.faq-ask { margin:0; color:var(--ink); font-size:.98rem; font-weight:700; } .faq-ask a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.home-faq-list { border-top:1px solid var(--line); }
.home-faq-item { border-bottom:1px solid var(--line); }
.home-faq-item summary { display:flex; justify-content:space-between; gap:1.5rem; padding:1.25rem 0; color:var(--ink); cursor:pointer; font-size:1.05rem; font-weight:800; list-style:none; }
.home-faq-item summary::-webkit-details-marker { display:none; }
.home-faq-item summary::after { flex:none; color:var(--blue); content:"+"; font-size:1.35rem; line-height:.9; }
.home-faq-item[open] summary::after { content:"−"; }
.home-faq-item p { max-width:620px; margin:0 0 1.3rem; color:var(--slate); }

.home-journal { background:#fff; border-top:1px solid #e5ebf1; }
.home-journal .journal-grid article { padding:1.5rem; border:1px solid #dce4ec; border-radius:.9rem; background:#fff; }
.home-journal .journal-grid h3 { min-height:0; }

.closing .button-row { justify-content:flex-end; }
.closing .button.ghost { border-color:rgba(255,255,255,.55); }

@media (max-width:900px) {
  .faq-layout { grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:690px) {
  .quick-routes .shell { width:100%; padding-top:1.4rem; }
  .quick-routes-intro { padding:0 1rem 1.1rem; }
  .quick-route { min-height:178px; }
  .home-offers .service-alternatives { gap:1.5rem; }
  .closing .button-row { justify-content:flex-start; }
}

/* Hosting pages: plans first, open comparison, then included, guidance and questions. */
.service-plans { padding-top:56px; background:#f1f7ff; border-bottom:1px solid #dde9f7; }
.hosting-switch { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:0; }
/* Plan intro, the same shape on every service page: switch and yearly offer, a one-line heading,
   two lead lines (selling point, then who each plan suits) and one pointer to the alternative. */
.plan-intro { margin-bottom:2.4rem; }
.plan-intro-bar { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; margin-bottom:1.75rem; }
.plan-offer { margin:0 0 0 auto; padding:.45rem .95rem; border:1px solid #bfe5cc; border-radius:999px; background:#e6f7ec; color:#16653a; font-size:.9rem; font-weight:800; }
.plan-intro h2 { margin-bottom:.8rem; }
.plan-intro-lead { max-width:720px; margin:0 0 1rem; color:var(--slate); font-size:1.08rem; line-height:1.6; }
.plan-pointer { margin:0; color:var(--ink); font-size:.98rem; font-weight:700; }
.plan-pointer a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:690px) { .plan-offer { margin-left:0; } }
.hosting-switch-label { color:var(--slate); font-size:.86rem; font-weight:700; }
.hosting-switch-options { display:inline-flex; padding:.25rem; border:1px solid #c5dcff; border-radius:999px; background:#fff; }
.hosting-switch a { padding:.4rem 1.05rem; border-radius:999px; color:var(--blue); font-size:.92rem; font-weight:750; }
.hosting-switch a:hover { background:#edf5ff; }
.hosting-switch a[aria-current="page"] { background:var(--blue); color:#fff; }
.control-panel-note { max-width:720px; margin:.9rem 0 0; color:var(--slate); font-size:1.02rem; }
.service-plans .plan { background:#fff; }
.service-plans .plan li { position:relative; padding-left:1.55rem; }
.service-plans .plan li::before { position:absolute; left:0; content:"✓"; color:var(--green-deep); font-weight:800; }
.service-plans .plan li strong { color:var(--ink); }
.plan-compare { margin-top:3.5rem; }
.plan-compare-head h3 { margin:0 0 1rem; font-size:1.45rem; }
.comparison-table col.is-recommended { background:#f3f8ff; }
.comparison-table thead th { vertical-align:bottom; }
.comparison-table thead th span { display:block; margin-top:.2rem; color:var(--blue); font-size:.88rem; font-weight:750; }
.feature-list { margin-top:1rem; }
.feature-list summary { display:inline-flex; align-items:center; gap:.6rem; color:var(--blue); cursor:pointer; font-weight:800; list-style:none; }
.feature-list summary::-webkit-details-marker { display:none; }
.feature-list summary i { display:grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--blue); color:#fff; font-style:normal; transition:transform .2s; }
.feature-list[open] summary i { transform:rotate(45deg); }
.feature-list .capability-grid h4 { margin:0 0 .5rem; font-size:1rem; }
.service-plans .plan-next-step { margin-top:2rem; background:#fff; }
.service-included { background:#f0faf4; border-bottom:1px solid #d8eddf; }
.included-list { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem 1.5rem; margin:0; padding:0; list-style:none; color:var(--ink); font-weight:700; }
.included-list li { position:relative; padding:1rem 0 0 1.6rem; border-top:1px solid #c7e2d0; }
.included-list li::before { position:absolute; left:0; content:"✓"; color:#17663a; }
.included-list a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.wordpress-points { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.wordpress-points article { padding-top:1.25rem; border-top:3px solid var(--blue); }
.wordpress-points h3 { margin:0 0 .5rem; font-size:1.2rem; }
.wordpress-points p { margin:0; color:var(--slate); font-size:1rem; }
.email-features-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:2rem clamp(2rem,6vw,5rem); }
.email-features-layout>div:first-child>p:not(.eyebrow) { color:var(--slate); font-size:1.04rem; }
.email-feature-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem 2rem; margin:0; }
.email-feature-list div { padding-top:1rem; border-top:3px solid var(--blue); }
.email-feature-list dt { color:var(--ink); font-weight:800; }
.email-feature-list dd { margin:.3rem 0 0; color:var(--slate); }
.email-move { grid-column:2; padding:1.3rem 1.4rem; border-left:4px solid var(--orange); background:#fff6f1; }
.email-move h3 { margin:0 0 .35rem; font-size:1.15rem; }
.email-move p { margin:0; color:var(--slate); }
.closing-wrap>div>p:not(.eyebrow) { margin:.75rem 0 0; color:#c9d6e2; }
@media (max-width:900px) { .included-list,.wordpress-points { grid-template-columns:repeat(2,1fr); } .email-features-layout { grid-template-columns:1fr; } .email-move { grid-column:auto; } }
@media (max-width:690px) { .plan-compare { margin-top:2.5rem; } .wordpress-points,.email-feature-list { grid-template-columns:1fr; } .wordpress-points { gap:1.5rem; } .included-list { gap:.8rem 1rem; font-size:.9rem; } }

/* Domains: price chips under the search, then included, prices, guidance, questions. */
.popular-tlds { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 0; padding:0; list-style:none; }
.popular-tlds li { padding:.3rem .7rem; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:rgba(255,255,255,.1); color:#e4eeff; font-size:.84rem; }
.popular-tlds strong { color:#fff; }
.domain-included { background:#f0faf4; border-block:1px solid #d8eddf; }
.included-list--four { grid-template-columns:repeat(4,1fr); }
.domain-pricing { padding-block:88px; background:#f1f7ff; border-bottom:1px solid #dde9f7; }
.domain-pricing .price-list .rows { background:#fff; }
.price-note { max-width:860px; margin:1rem 0 0; color:var(--slate); font-size:.86rem; }
.domain-guidance { padding-bottom:88px; }
.domain-guide-grid { margin:0; }
.faq-section .migration-caveat { margin-top:1.25rem; }

/* Websites: options, why, migration, steps, then the chooser as the action. */
.website-why { background:#f1f7ff; border-block:1px solid #dde9f7; }
.why-points { display:grid; grid-template-columns:repeat(3,1fr); gap:2.25rem 2rem; }
.why-points article { padding-top:1.25rem; border-top:3px solid var(--blue); }
.why-points h3 { margin:0 0 .5rem; font-size:1.2rem; }
.why-points p { margin:0; color:var(--slate); }
.website-migration { background:#fff; }
.migration-rebuild-link { margin:0 0 1.4rem !important; font-size:.96rem !important; }
.website-rebuild { border-block:1px solid #f1ddd4; background:#fffaf7; }
.website-rebuild-paths { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin-bottom:1.25rem; }
.website-rebuild-paths article { padding:1.65rem; border-top:4px solid var(--svc-websites); background:#fff; box-shadow:0 10px 24px rgba(15,36,60,.05); }
.website-rebuild-paths h3,.website-rebuild-examples h3 { margin-bottom:.65rem; font-size:1.3rem; }
.website-rebuild-paths p,.website-rebuild-examples p { margin:0; color:var(--slate); }
.website-rebuild-examples { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:1.25rem; }
.website-rebuild-examples>div,.website-rebuild-examples aside { padding:1.65rem; border:1px solid #ecd8cf; background:#fff; }
.website-rebuild-examples ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem 1.25rem; margin:1rem 0 0; padding:0; list-style:none; color:var(--ink); font-weight:650; }
.website-rebuild-examples li { padding-left:1.1rem; position:relative; }
.website-rebuild-examples li::before { position:absolute; left:0; color:var(--svc-websites-ink); content:"•"; }
.process { background:var(--paper); border-block:1px solid var(--line); }
.chooser-section { background:#f1f7ff; }
.chooser-next li { padding-left:1.7rem; }
.chooser-next li::before { content:"✓"; top:0; width:auto; height:auto; border:0; border-radius:0; background:none; box-shadow:none; color:var(--green-deep); font-weight:800; }
@media (max-width:900px) { .included-list--four,.why-points { grid-template-columns:repeat(2,1fr); } .website-rebuild-examples { grid-template-columns:1fr; } }
@media (max-width:690px) { .why-points,.website-rebuild-paths,.website-rebuild-examples ul { grid-template-columns:1fr; } .website-rebuild-paths article,.website-rebuild-examples>div,.website-rebuild-examples aside { padding:1.35rem; } .domain-pricing { padding-block:64px; } .price-list .tools input { flex-basis:100%; max-width:none; } }

/* No orphaned last words: balance heading lines and keep paragraph endings at two or more words. */
h1, h2, h3, h4, summary { text-wrap:balance; }
p, li, dd { text-wrap:pretty; }
/* Short paragraphs: each sentence starts on its own line (sentence_lines() in bootstrap.php). */
.line { display:block; }

/* Homepage reviews: real HelloPeter quotes, word for word (workspace reviews/hellopeter-reviews.md). */
.home-reviews { background:#f1f7ff; border-block:1px solid #dde9f7; }
.reviews-layout { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr); gap:clamp(2rem,6vw,5rem); align-items:start; }
.reviews-intro>p:not(.eyebrow) { color:var(--slate); font-size:1.04rem; }
.review-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.review { display:flex; flex-direction:column; margin:0; padding:1.6rem; border:1px solid #c8d8e8; border-radius:var(--radius); background:#fff; box-shadow:0 12px 28px rgba(15,36,60,.05); }
.review-stars { margin:0 0 .75rem; color:var(--green-deep); font-size:1rem; letter-spacing:.12em; }
.review blockquote { margin:0 0 1.25rem; }
.review blockquote p { margin:0; color:var(--ink); font-size:1.05rem; line-height:1.6; }
.review figcaption { margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); color:var(--slate); font-size:.9rem; }
.review figcaption strong { color:var(--ink); }
.review figcaption span { display:block; margin-top:.15rem; font-size:.84rem; }
@media (max-width:900px) { .reviews-layout { grid-template-columns:1fr; } }
@media (max-width:690px) { .review-list { grid-template-columns:1fr; } .review { padding:1.25rem; } }
.reviews-link { display:grid; gap:.35rem; margin-top:1.25rem; }
.reviews-link a { color:var(--blue); font-weight:800; }
.reviews-link a:hover { text-decoration:underline; text-underline-offset:3px; }
.reviews-link small { color:var(--muted); font-size:.84rem; }

/* Homepage "Start here": four clear route cards, each with a coloured edge and a named next step. */
.quick-routes { background:linear-gradient(#fff, #f8fbff); border-bottom:1px solid #e3ebf4; }
.quick-routes .shell { padding-block:3rem 3.5rem; }
.quick-routes-intro { padding:0 0 1.6rem; }
.quick-routes-intro h2 { font-size:clamp(1.6rem,2.6vw,2.1rem); }
.quick-routes-grid { gap:1rem; }
.quick-route { --route:var(--svc-hosting); --route-ink:var(--svc-hosting-ink); position:relative; min-height:0; padding:1.6rem 1.45rem 1.35rem; border:1px solid #d6e2ee !important; border-radius:1rem; overflow:hidden; background:#fff; box-shadow:0 10px 24px rgba(15,36,60,.05); transition:transform .2s, box-shadow .2s, border-color .2s; }
.quick-route::before { position:absolute; inset:0 0 auto; height:4px; background:var(--route); content:""; }
.quick-route--email { --route:var(--svc-email); --route-ink:var(--svc-email-ink); }
.quick-route--domains { --route:var(--svc-domains); --route-ink:var(--svc-domains-ink); }
.quick-route--websites { --route:var(--svc-websites); --route-ink:var(--svc-websites-ink); }
.quick-route p { color:var(--route-ink) !important; }
.quick-route:hover, .quick-route:focus-visible { transform:translateY(-3px); border-color:var(--route) !important; background:#fff; color:var(--ink); box-shadow:0 18px 34px rgba(15,36,60,.1); }
.quick-route:focus-visible { outline:3px solid var(--route); outline-offset:3px; }
.quick-route .quick-route-action { display:flex; align-items:center; gap:.5rem; margin-top:auto; padding-top:1.25rem; color:var(--route-ink); font-size:.9rem; font-weight:800; }
@media (max-width:690px) {
  .quick-routes .shell { width:min(100% - 32px, 1120px); padding-block:2.25rem 2.5rem; }
  .quick-routes-intro { padding:0 0 1.2rem; }
  .quick-routes-grid { grid-template-columns:1fr; gap:.75rem; }
  .quick-route { min-height:0; padding:1.2rem 1.1rem 1.1rem; }
  .quick-route strong { min-height:0; max-width:none; font-size:1.2rem; }
  .quick-route span { font-size:.9rem; }
  .quick-route .quick-route-action { padding-top:.9rem; }
}
@media (prefers-reduced-motion:reduce) { .quick-route { transition:none; } .quick-route:hover { transform:none; } }

/* "Like this website?" exit popup (exit-offer.js). Desktop only, so no phone layout is needed beyond a safe max width. */
.exit-offer { width:min(560px, calc(100% - 32px)); max-height:calc(100vh - 48px); padding:2.25rem 2.25rem 2rem; border:0; border-radius:1.25rem; background:#fff; color:var(--ink); box-shadow:0 30px 80px rgba(10,25,45,.35); overflow:auto; }
.exit-offer::backdrop { background:rgba(10,25,45,.55); }
.exit-offer::before { position:absolute; inset:0 0 auto; height:5px; background:linear-gradient(90deg, var(--blue), var(--green), var(--orange)); content:""; }
.exit-offer h2 { margin:.35rem 0 .6rem; font-size:2rem; }
.exit-offer-lead { margin:0 0 1.35rem; color:var(--slate); font-size:1.05rem; }
.exit-offer-close { position:absolute; top:.85rem; right:.85rem; display:grid; place-items:center; width:2.25rem; height:2.25rem; border:0; border-radius:50%; background:#f1f5f9; color:var(--ink); cursor:pointer; font-size:1.4rem; line-height:1; }
.exit-offer-close:hover { background:#e2e8f0; }
.exit-offer-primary { width:100%; justify-content:center; }
.exit-offer-or { display:flex; align-items:center; gap:.85rem; margin:1.4rem 0 1rem; color:var(--muted); font-size:.84rem; font-weight:700; }
.exit-offer-or::before, .exit-offer-or::after { flex:1; height:1px; background:var(--line); content:""; }
.exit-offer-form { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.exit-offer-wide { grid-column:1 / -1; }
.exit-offer-form textarea { font:inherit; font-weight:400; color:var(--ink); padding:.6rem .7rem; border:1px solid var(--line); border-radius:.5rem; resize:vertical; font-size:1rem; }
.exit-offer-form small { color:var(--muted); font-weight:500; }
.exit-offer-form [aria-invalid="true"] { border-color:var(--red); background:#fffafa; }
.exit-offer-status { margin:0; min-height:1.2em; color:var(--slate); font-size:.88rem; }
.exit-offer-status:empty { display:none; }
.exit-offer-actions { display:flex; align-items:center; gap:1rem; }
.exit-offer-dismiss { border:0; background:none; color:var(--slate); cursor:pointer; font:inherit; font-size:.92rem; text-decoration:underline; text-underline-offset:3px; }
.exit-offer-done { margin:0 0 1rem; color:var(--ink); font-size:1.02rem; }

/* Hero sizes by purpose (partials/hero.php): landing (home and future landing pages) is the plain .hero, sized for what
   must show above the fold; page is one fixed height on tablet and desktop for every other page, so moving between
   pages doesn't jump; task stays compact so the cart, checkout and order forms sit above the fold. */
:root { --hero-page:330px; }
@media (min-width:861px) { :root { --hero-page:360px; } }
.hero--page { padding:32px 0; }
.hero--page h1 { max-width:620px; margin-bottom:16px; font-size:clamp(1.95rem,3.3vw,2.8rem); line-height:1.08; }
.hero--page .lead { margin-bottom:22px; }
.hero--page .hero-copy > :last-child { margin-bottom:0; }
@media (min-width:691px) { .hero--page { display:flex; align-items:center; min-height:var(--hero-page); } }
@media (max-width:690px) { .hero--page { padding:36px 0; } }
.hero--task { padding:40px 0 46px; }
.hero--task h1 { margin-bottom:.6rem; font-size:clamp(1.9rem,3.6vw,2.8rem); }

/* Service colours carried from the home page panels to each service's own pages (data-service on <body>, View::serviceFor):
   hosting blue, email green, websites orange, domains dark blue. Kept subtle: a bar under the hero, the recommended plan,
   intro links and FAQ marks; no background tints (owner, 26 October 2026). The blue hero itself is the same on every page. */
[data-service] { --accent:var(--svc-hosting); --accent-ink:var(--svc-hosting-ink); }
[data-service="email"] { --accent:var(--svc-email); --accent-ink:var(--svc-email-ink); }
[data-service="websites"] { --accent:var(--svc-websites); --accent-ink:var(--svc-websites-ink); }
[data-service="domains"] { --accent:var(--svc-domains); --accent-ink:var(--svc-domains-ink); }
/* The bar under the hero uses the accent, except blue services: brand blue would vanish against the blue hero, so they use a light blue. */
[data-service] .hero { box-shadow:inset 0 -5px 0 var(--accent); }
[data-service="hosting"] .hero, [data-service="domains"] .hero { box-shadow:inset 0 -5px 0 #6ea8ff; }
[data-service] .plan.recommended { border-color:var(--accent); }
[data-service] .plan-badge { background:var(--accent-ink); }
[data-service] .plan-pointer a, [data-service] .faq-ask a, [data-service] .home-faq-item summary::after, [data-service] main section:not(.hero) .eyebrow { color:var(--accent-ink); }

/* Websites: the featured package is marked like a recommended plan (white, accent border), not a blue hosting-style panel. */
[data-service="websites"] .website-package-grid article.featured-package { color:var(--ink); border:2px solid var(--accent); background:#fff; }
[data-service="websites"] .website-package-grid .featured-package .overline { color:var(--accent-ink); }
[data-service="websites"] .website-package-grid .featured-package>p:not(.overline) { color:var(--slate); }
[data-service="websites"] .website-package-grid .featured-package ul { color:var(--ink); }
[data-service="websites"] .website-package-grid .featured-package li { border-color:var(--line); }
/* Buttons stay brand blue on every page; the service colour is for borders, labels, tints and links only. */
[data-service="websites"] .website-package-grid .featured-package .button.light { background:var(--blue); color:#fff; }
[data-service="websites"] .website-package-grid .featured-package .button.light:hover { background:var(--blue-deep); }