/* Contact forms and the payment table. Loaded after pages.css. */
/* Hero: line the left-hand text up with the top of the form. */
.home-hero .home-grid { align-items: start; }
.home-hero .home-copy { padding-top: 8px; }
.enquiry { display: grid; gap: 14px; max-width: 560px; margin: 12px 0 28px; }
.enquiry label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.enquiry input, .enquiry select, .enquiry textarea {
  width: 100%; padding: 12px; border: 1px solid #c7c3e6; border-radius: 10px;
  font: inherit; background: #fff; color: var(--text);
}
.enquiry textarea { resize: vertical; }
.enquiry .row2 { display: grid; gap: 14px; }
@media (min-width: 600px) { .enquiry .row2 { grid-template-columns: 1fr 1fr; } }
.enquiry .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { min-height: 1.4em; margin: 0; font-weight: 600; }
.form-msg.ok { color: #047857; }
.form-msg.err { color: #b91c1c; }

.pay-table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; background: var(--panel); border-radius: 12px; overflow: hidden; }
.pay-table th, .pay-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #ddd9f5; }
.pay-table th { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pay-table td:last-child, .pay-table th:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
.pay-table tr:last-child td { border-bottom: 0; }

/* Hero checklist: white tick marks on the gradient circles. */
.home-hero .ticks li::before { color: #ffffff; text-shadow: 0 1px 2px rgba(15, 11, 46, .3); }

/* ---- Content and interactive parts ---- */
.check-list { list-style: none; padding: 0; margin: 12px 0 20px; display: grid; gap: 8px; }
.check-list li { position: relative; padding-left: 28px; line-height: 1.5; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #7c3aed; font-weight: 800; }
.cards .card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.cards .card h3 a { color: var(--text); text-decoration: none; }
.cards .card h3 a:hover { text-decoration: underline; }
.prose ol, .prose ul { padding-left: 22px; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.planner { display: grid; gap: 10px; max-width: 520px; margin: 12px 0 24px; }
.planner label, .calc label, .faq-tools label { font-weight: 600; }
.planner select, .faq-tools input {
  width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #c7c3e6; font: inherit; background: #fff; color: var(--text);
}

.calc { max-width: 640px; margin: 12px 0 24px; background: var(--panel); border-radius: 16px; padding: 20px; }
.calc input[type=range] { width: 100%; accent-color: #7c3aed; margin: 8px 0; }
.calc-out { font-weight: 700; font-size: 1.2rem; margin: 6px 0 12px; }
.calc-grid { display: grid; gap: 12px; }
@media (min-width: 600px) { .calc-grid { grid-template-columns: 1fr 1fr; } }
.calc-box { background: #fff; border-radius: 12px; padding: 14px 16px; }
.calc-box h3 { margin: 0; font-size: 1rem; }
.calc-total { font-size: 1.6rem; font-weight: 800; margin: 4px 0; }

.faq-tools { display: grid; gap: 6px; margin-bottom: 14px; }
.faq-tools input { max-width: 420px; }
.faq-list details[hidden], #faq-list details[hidden] { display: none; }

.copy-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.copy-btn { width: auto; }

.site-foot .foot-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) { .site-foot .foot-grid { grid-template-columns: 1.3fr repeat(5, 1fr); } }

/* ---- Pictures ---- */
.card-art { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 12px; margin: 0 0 14px; }
.page-art { display: block; width: 100%; max-width: 560px; height: auto; border-radius: 18px; margin: 18px 0 24px; box-shadow: 0 20px 50px -24px rgba(79, 70, 229, .45); }
.hero-art { max-width: 560px; margin: 24px 0 0; }
.card, .step-card { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) { .card:hover, .step-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(79, 70, 229, .45); } }
.band { padding-top: 0; }
.band-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .band-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .band-grid { grid-template-columns: repeat(6, 1fr); } }
.band-item { position: relative; display: block; border-radius: 14px; overflow: hidden; }
.band-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.band-item:hover img { transform: scale(1.05); }
.band-item span { position: absolute; left: 10px; bottom: 10px; background: rgba(15, 11, 46, .85); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }

/* The one package fills the width, with the features in two columns on desktop. */
.pricing { display: block !important; }
.pricing .plan { width: 100%; max-width: none; }
.pricing .plan ul { columns: 2; column-gap: 24px; }
@media (max-width: 600px) { .pricing .plan ul { columns: 1; } }

/* ---------- Customer account ---------- */
.acct { display: grid; gap: 18px; }
.acct-msg:empty { display: none; }
.acct-msg { margin: 0; padding: 14px 18px; border-radius: 12px; background: #eef2ff; color: #1e1b4b; font-weight: 700; font-size: 1.12rem; border-left: 5px solid #4f46e5; }
.acct-msg.bad { background: #fff1f2; color: #881337; border-left-color: #e11d48; }
.acct-login p, .acct-site p { font-size: 1.12rem; }
.acct-form { max-width: 480px; }
.acct-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.acct-top p { margin: 0; font-size: 1.12rem; }
.acct-out, .acct-copy { font: inherit; font-weight: 800; color: #4f46e5; background: none; border: 2px solid #c7d2fe; border-radius: 10px; padding: 6px 14px; cursor: pointer; }
.acct-out:hover, .acct-copy:hover { border-color: #4f46e5; }
.acct-copy { font-size: .95rem; padding: 3px 10px; margin-left: 6px; vertical-align: middle; }
.acct-sites { display: grid; gap: 22px; }
.acct-site { position: relative; display: grid; gap: 18px 28px; padding: 24px; background: #fff; color: #0f0b2e; border-radius: 18px; border: 2px solid #e0e7ff; box-shadow: 0 22px 50px -32px rgba(79, 70, 229, .55); overflow: hidden; }
.acct-site::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, #4f46e5, #7c3aed, #22d3ee, #f472b6, #4f46e5); background-size: 200% 100%; animation: acct-flow 6s linear infinite; }
@keyframes acct-flow { to { background-position: 200% 0; } }
.acct-site h2 { margin: 0; font-size: clamp(1.5rem, 4.5vw, 2.1rem); }
.acct-site p { margin: 0 0 10px; color: #0f0b2e; }
.acct-status { font-size: 1.15rem; }
.acct-bar { height: 10px; border-radius: 10px; background: #eef2ff; overflow: hidden; margin: 0 0 16px; max-width: 420px; }
.acct-bar i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, #4f46e5, #7c3aed, #f472b6); }
.acct-addr a { word-break: break-all; font-size: 1.2rem; }
.acct-note { color: #3f3b63 !important; }
.acct-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.acct-link { font-weight: 800; color: #4f46e5; }
.acct-thumb { display: block; width: 220px; height: 150px; border-radius: 12px; overflow: hidden; border: 2px solid #e0e7ff; position: relative; justify-self: start; }
.acct-thumb iframe { width: 880px; height: 600px; border: 0; transform: scale(.25); transform-origin: 0 0; pointer-events: none; background: #fff; }
.acct-change { margin: 0; max-width: none; border-top: 2px solid #eef2ff; padding-top: 16px; grid-column: 1 / -1; }
.acct-change .btn { justify-self: start; }
.acct-sub { font-weight: 800; margin: 6px 0 0 !important; }
.acct-changes { margin: 0; padding-left: 20px; font-size: 1.05rem; }
.acct-changes li { margin: 4px 0; white-space: pre-wrap; }
.acct-changes span { font-weight: 700; color: #4f46e5; }
@media (min-width: 760px) { .acct-site { grid-template-columns: 1fr 220px; } .acct-thumb { align-self: start; margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .acct-site::before { animation: none; } }
.acct-change .form-msg:empty { display: none; }
.acct-plan { margin-top: 18px; padding-top: 16px; border-top: 2px solid #eef2ff; display: grid; gap: 10px; }
.acct-plan p { margin: 0; }
.acct-plan .btn { justify-self: start; }
.acct-plan .form-msg:empty { display: none; }
.acct-plans { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.acct-plans label { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 2px solid #e0e7ff; border-radius: 12px; cursor: pointer; font-size: 1.12rem; color: #0f0b2e; }
.acct-plans label:has(input:checked) { border-color: #4f46e5; background: #f5f3ff; }
.acct-plans input { width: 22px; height: 22px; margin-top: 3px; accent-color: #4f46e5; flex: none; }
.acct-plans b { display: block; font-size: 1.2rem; text-transform: uppercase; }
.acct-small { font-size: 1rem !important; color: #3f3b63 !important; }
.acct-warn { padding: 12px 14px; border-radius: 10px; background: #fff1f2; color: #881337 !important; font-weight: 700; border-left: 5px solid #e11d48; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 600px) { .acct-plans { grid-template-columns: 1fr 1fr; } }
.acct-plan > .acct-sub:first-child { font-size: clamp(1.3rem, 4vw, 1.6rem); font-weight: 900; text-transform: uppercase; background: linear-gradient(90deg, #4f46e5, #7c3aed, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
@media (max-width: 759px) { .acct-thumb { display: none; } }
/* AI editor */
.ai { grid-column: 1 / -1; position: relative; padding: 22px 20px; border-radius: 16px; color: #fff; background: linear-gradient(150deg, #1e1b4b, #0f0b2e 60%, #2a1052); box-shadow: 0 24px 50px -30px rgba(124, 58, 237, .9); overflow: hidden; }
.ai::before { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, .35), transparent 70%); animation: ai-float 7s ease-in-out infinite alternate; pointer-events: none; }
@keyframes ai-float { to { transform: translate(-60px, 50px); } }
.ai > * { position: relative; }
.acct-site .ai p { color: #f5f3ff; margin: 0 0 10px; }
.ai-title { font-size: clamp(1.4rem, 4vw, 1.9rem) !important; font-weight: 900; text-transform: uppercase; line-height: 1.1; background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.ai-form { display: grid; gap: 10px; }
.ai-form textarea { width: 100%; font: inherit; font-size: 1.12rem; padding: 14px; border-radius: 12px; border: 2px solid #6d5fd8; background: #fff; color: #0f0b2e; resize: vertical; }
.ai-form .btn { justify-self: start; }
.acct-site .ai .ai-try { font-size: 1rem; color: #c7d2fe; }
.ai-eg { font: inherit; font-weight: 700; color: #a5f3fc; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acct-site .ai .form-msg { color: #fde68a; font-weight: 700; margin: 0; }
.ai-bar { height: 10px; border-radius: 10px; background: rgba(255,255,255,.12); overflow: hidden; }
.ai-bar i { display: block; width: 40%; height: 100%; border-radius: 10px; background: linear-gradient(90deg, #22d3ee, #7c3aed, #f472b6); animation: ai-run 1.4s ease-in-out infinite; }
@keyframes ai-run { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.acct-site .ai .ai-note { font-weight: 800; font-size: 1.15rem; color: #fff; }
.ai-frame { border-radius: 12px; overflow: hidden; border: 3px solid #22d3ee; background: #fff; }
.ai-frame iframe { display: block; width: 100%; height: 460px; border: 0; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.ai .acct-out { color: #fff; border-color: rgba(255,255,255,.4); }
.ai-undo { margin-top: 12px; font: inherit; font-weight: 800; color: #a5f3fc; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.acct-ask { grid-column: 1 / -1; }
.acct-ask summary { cursor: pointer; font-weight: 800; color: #4f46e5; font-size: 1.05rem; }
.acct-ask[open] summary { margin-bottom: 10px; }
.acct-ask .acct-change { border-top: 0; padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .ai::before, .ai-bar i { animation: none; } }
.ai [hidden] { display: none !important; }
.ai-try { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 1rem; color: #c7d2fe; }
.ai-try span { font-weight: 800; color: #fff; }
.ai-eg { text-align: left; }
/* Domain chooser */
.acct-dom { margin-top: 18px; padding-top: 16px; border-top: 2px solid #eef2ff; display: grid; gap: 10px; }
.acct-dom p { margin: 0; }
.acct-dom .acct-sub { font-size: clamp(1.3rem, 4vw, 1.6rem); font-weight: 900; text-transform: uppercase; background: linear-gradient(90deg, #4f46e5, #7c3aed, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.acct-dom-row { display: flex; gap: 10px; flex-wrap: wrap; }
.acct-dom-row input { flex: 1 1 200px; font: inherit; font-size: 1.12rem; padding: 12px 14px; border-radius: 12px; border: 2px solid #c7d2fe; color: #0f0b2e; }
.acct-dom .form-msg:empty { display: none; }
.acct-dom-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acct-dom-results:empty { display: none; }
.acct-dom-pick { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; font: inherit; font-size: 1.12rem; padding: 12px 16px; border-radius: 12px; border: 2px solid #34d399; background: #ecfdf5; color: #064e3b; cursor: pointer; text-align: left; }
.acct-dom-pick span { font-weight: 800; color: #047857; }
.acct-dom-pick:hover { background: #d1fae5; }
.acct-dom-taken { display: block; padding: 10px 16px; border-radius: 12px; background: #f5f5f4; color: #57534e; font-size: 1.05rem; }
.acct-site > *, .acct-site-main, .acct-site-main > * { min-width: 0; }
.acct-dom-row input { min-width: 0; }
@media (max-width: 420px) { .acct-dom-row .btn { flex: 1 1 100%; } .acct-dom-pick { flex-wrap: wrap; } }
.acct-dom-results, .acct-dom-results li { padding-left: 0 !important; margin-left: 0 !important; list-style: none !important; }
.acct-dom-results li::before { content: none !important; display: none !important; }
/* Domain owner details */
.acct-owner { margin-top: 12px; padding: 18px; border-radius: 14px; border: 2px solid #c7d2fe; background: #f8f7ff; display: grid; gap: 12px; }
.acct-owner p { margin: 0; }
.acct-owner-title { font-size: 1.2rem; }
.acct-owner-type { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.acct-owner-type label { display: flex; gap: 10px; align-items: center; font-size: 1.08rem; font-weight: 700; color: #0f0b2e; }
.acct-owner-type input { width: 20px; height: 20px; accent-color: #4f46e5; }
.acct-owner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.acct-owner label { display: grid; gap: 4px; font-weight: 700; color: #0f0b2e; font-size: 1rem; }
.acct-owner-grid .wide { grid-column: 1 / -1; }
.acct-owner input:not([type=radio]) { font: inherit; font-size: 1.08rem; padding: 10px 12px; border-radius: 10px; border: 2px solid #c7d2fe; color: #0f0b2e; background: #fff; min-width: 0; }
.acct-owner .btn { justify-self: start; }
.acct-owner .form-msg:empty { display: none; }
.acct-owner [hidden] { display: none !important; }
@media (max-width: 480px) { .acct-owner-grid { grid-template-columns: 1fr; } }
.acct-owner .acct-owner-type label { display: flex; grid-template-columns: none; }
/* Own domain + moving */
.acct-have summary, .acct-move summary { cursor: pointer; font-weight: 800; color: #4f46e5; font-size: 1.05rem; }
.acct-have[open] summary, .acct-move[open] summary { margin-bottom: 10px; }
.acct-own { display: grid; gap: 10px; }
.acct-own p { margin: 0; }
.acct-own-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 1.08rem; color: #0f0b2e; }
.acct-own code, .acct-code code { font-size: 1.02rem; background: #eef2ff; color: #312e81; padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.acct-own-status { font-weight: 800; padding: 10px 14px; border-radius: 10px; background: #fff7ed; color: #9a3412 !important; }
.acct-own-status.ok { background: #ecfdf5; color: #065f46 !important; }
.acct-move { margin-top: 14px; padding-top: 12px; border-top: 2px solid #eef2ff; }
.acct-move p { margin: 0 0 8px; }
.acct-code code { font-size: 1.3rem; display: inline-block; padding: 8px 12px; }
.acct-dom-row input[name=ips], .acct-dom-row input[name=owndomain] { flex: 1 1 180px; font: inherit; font-size: 1.08rem; padding: 10px 12px; border-radius: 10px; border: 2px solid #c7d2fe; min-width: 0; }
.acct-own code { white-space: nowrap; word-break: normal; }