/* Shared DNSly surfaces, typography and page composition. */
.dnsly-site { background: #f7f9fc; color: #1b2c47; }
.app-main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; min-width: 0; }
.page-kicker { display: block; color: #587199; font-size: 11px; line-height: 1.6; font-weight: 650; letter-spacing: 1.3px; text-transform: uppercase; }
.dnsly-site .ui-button { min-height: 44px; border-radius: 11px; font-size: 13px; font-weight: 600; padding: 12px 18px; }
.dnsly-site .ui-button-primary { box-shadow: 0 4px 9px #245ddd17; }
.dnsly-site .ui-button-secondary { border-color: #dce5f1; color: #384f71; }
.home-page { max-width: 1100px; margin: auto; }
.home-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 70px; padding: 72px 0 66px; }
.hero-copy h1 { margin: 18px 0 20px; font-size: clamp(38px,4.1vw,56px); font-weight: 740; line-height: 1.12; letter-spacing: -2.4px; color: #1a2a43; }
.hero-copy h1 > span { color: #245ddd; }
.hero-copy > p { max-width: 460px; font-size: 16px; line-height: 1.8; color: #66758b; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-note { font-size: 12px; color: #7a879a; margin-top: 16px; }
.host-preview { position: relative; min-width: 0; border: 1px solid #e0e8f5; border-radius: 23px; padding: 25px; background: linear-gradient(145deg,#fff 55%,#f1f5ff); box-shadow: 0 22px 55px #203a6410, 0 3px 9px #203a6405; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 23px; border-bottom: 1px solid #e7edf7; }
.preview-heading > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #5c7193; }
.preview-heading .dnsly-icon { width: 18px; height: 18px; }
.preview-badge { padding: 4px 7px; border: 1px solid #e3eaf4; border-radius: 6px; background: #fff; font-size: 10px; color: #78869a; }
.preview-address { margin-top: 23px; }
.preview-address > span,.preview-ip > div > span { display: block; font-size: 11px; color: #7c8ba1; margin-bottom: 7px; }
.preview-address > strong { display: block; font-size: clamp(24px,2.6vw,34px); line-height: 1.2; letter-spacing: -1px; color: #245ddd; font-weight: 650; }
.preview-address strong > span { color: #8899b3; font-weight: 450; }
.preview-route { display: flex; align-items: center; gap: 0; margin: 20px 0; }
.route-dot { width: 8px; height: 8px; border: 2px solid #a9bde3; background: #fff; border-radius: 50%; }
.route-line { flex: 1; border-top: 1px dashed #c5d4ed; }
.route-destination { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #e3eafa; border-radius: 50%; background: #fff; color: #839bc2; }
.route-destination .dnsly-icon { width: 16px; height: 16px; }
.preview-ip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px; border: 1px solid #e1e9f6; border-radius: 12px; background: #fff; }
.preview-ip strong { color: #384d70; font: 500 15px ui-monospace,monospace; }
.preview-mode { display: flex; align-items: center; gap: 5px; color: #557299; font-size: 11px; padding: 5px 7px; border-radius: 6px; background: #f1f5fc; }
.preview-mode .dnsly-icon { width: 13px; height: 13px; }
.preview-caption { margin-top: 16px; font-size: 11px; color: #7c8ba1; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.section-heading h2 { margin-top: 8px; color: #24354e; font-size: 27px; line-height: 1.3; font-weight: 650; letter-spacing: -.8px; }
.section-heading > p { color: #7e8b9f; font-size: 12px; padding-bottom: 4px; }
.section-heading .text-link { margin: 0 0 4px; }
.home-tools { padding: 32px 0 48px; border-top: 1px solid #e2e9f4; }
.tool-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.home-tool-card { display: block; padding: 24px; border: 1px solid #e0e7f2; border-radius: 18px; background: #fff; box-shadow: 0 3px 9px #1a345004; transition: border-color .15s,box-shadow .15s; }
.home-tool-card:hover { border-color: #bacdea; box-shadow: 0 9px 24px #1a34500a; }
.tool-card-top { display: flex; justify-content: space-between; align-items: center; }
.tool-card-top .feature-icon { width: 46px; height: 46px; margin-bottom: 0; border-radius: 13px; }
.card-arrow { color: #a2b2c8; width: 17px; height: 17px; }
.home-tool-card h3 { margin: 21px 0 8px; font-size: 17px; font-weight: 650; letter-spacing: -.3px; color: #263752; }
.home-tool-card p { color: #76849a; font-size: 13px; line-height: 1.75; }
.how-section { padding: 36px 0 45px; scroll-margin-top: 24px; }
.step-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px; padding: 22px 0; }
.step-number { display: block; margin-bottom: 18px; color: #90a8ce; font: 500 13px ui-monospace,monospace; }
.step-grid h3 { color: #2b3d58; font-size: 16px; font-weight: 650; margin-bottom: 10px; }
.step-grid p { color: #74839a; font-size: 13px; line-height: 1.8; }
.how-note { padding-top: 16px; border-top: 1px solid #e3eaf3; font-size: 12px; color: #7c8ba1; }
.home-guide { display: flex; align-items: center; gap: 20px; padding: 28px; margin: 8px 0 20px; border: 1px solid #dce7f8; border-radius: 19px; background: #eef4ff; }
.guide-icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 12px; background: #ffffff99; color: #5479b7; border: 1px solid #dce6f7; }
.home-guide h2 { font-size: 18px; font-weight: 650; color: #334f7a; letter-spacing: -.3px; }
.home-guide p { font-size: 12px; line-height: 1.75; color: #6d83a3; margin-top: 6px; }
.home-guide .ui-button { flex: 0 0 auto; margin-left: auto; background: #fff; }
.tool-page { max-width: 980px; margin: auto; padding: 48px 0 32px; }
.tool-intro { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.tool-intro .feature-icon { flex: 0 0 56px; width: 56px; height: 56px; margin: 0; }
.tool-intro h1 { margin-top: 4px; font-size: 34px; line-height: 1.3; font-weight: 700; letter-spacing: -1px; color: #24354e; }
.tool-intro p { color: #74839a; font-size: 14px; line-height: 1.7; margin-top: 8px; }
.tool-form-card { border: 1px solid #e0e8f3; background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 4px 14px #20375004; }
.dns-query-form { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,.65fr) minmax(0,1fr) auto; gap: 14px; align-items: end; }
.ip-query-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: end; }
.tool-form-card label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: #526782; }
.tool-form-card input,.tool-form-card select { width: 100%; min-width: 0; height: 44px; padding: 10px 12px; border: 1px solid #dce4f0; border-radius: 10px; background: #fbfcfe; color: #334761; font-size: 13px; }
.tool-form-card input::placeholder { color: #94a2b5; }
.tool-form-card input:focus,.tool-form-card select:focus { background: #fff; outline: 2px solid #aac4f3; outline-offset: 2px; }
.tool-results { margin-top: 24px; min-width: 0; overflow-wrap: anywhere; }
.tool-results:empty { display: none; }
.dns-result-card,.ip-result-card { padding: 24px; border: 1px solid #e0e8f3; border-radius: 18px; background: #fff; }
.dns-record-group { padding: 15px 0; border-top: 1px solid #e8edf5; }
.dns-record-group li { background: #f6f8fc; border: 1px solid #e9eef7; padding: 10px 12px; border-radius: 8px; margin-top: 7px; font-size: 12px; color: #506784; }
.ip-result-card h2 { font-size: 18px; line-height: 1.6; color: #526a8b; overflow-wrap: anywhere; }
.ip-result-card li { padding: 12px; border: 1px solid #e8eef6; background: #f8faff; border-radius: 10px; line-height: 1.7; }
.ip-result-card li > span { display: block; }
.ip-result-card li > span:first-child { font-size: 11px; color: #7b8ba3; font-weight: 500; }
.ip-result-card li > span:last-child { font-size: 13px; color: #435d82; }
.ip-result-card iframe { border-radius: 12px; }
.login-page,.contact-page { max-width: 540px; margin: 58px auto 24px; }
.login-card,.contact-card { padding: 40px; border: 1px solid #e0e8f3; border-radius: 23px; background: linear-gradient(150deg,#f3f7ff,#fff 45%); box-shadow: 0 15px 45px #243e6408; }
.login-card h1,.contact-card h1 { margin: 14px 0 18px; font-size: 31px; line-height: 1.25; font-weight: 700; color: #263b59; letter-spacing: -1px; }
.login-card > p,.contact-card > p { font-size: 14px; color: #74839a; line-height: 1.85; }
.login-card > a[href="/auth/google"] { margin-top: 10px; padding: 14px; border-radius: 11px; border-color: #dce5f3; background: #fff; font-size: 13px; box-shadow: 0 2px 5px #20375004; }
.login-help { display: block; margin-top: 24px; text-align: center; color: #7185a3; font-size: 12px; }
.contact-card .feature-icon { margin-bottom: 22px; }
.contact-email { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding: 18px; border: 1px solid #dce7f7; border-radius: 12px; background: #f0f5ff; color: #245ddd; font-size: 20px; font-weight: 600; letter-spacing: -.5px; }
.contact-email .dnsly-icon { width: 19px; height: 19px; }
.contact-card .contact-note { font-size: 12px; color: #8391a6; margin-top: 22px; }
.document-page { max-width: 820px; margin: 42px auto 24px; }
.document-card { padding: 36px 42px; border: 1px solid #e1e8f3; border-radius: 20px; background: #fff; }
.document-card h1 { color: #263b59; font-size: 30px; line-height: 1.3; font-weight: 700; letter-spacing: -.8px; margin-bottom: 26px; }
.document-card h2 { color: #344d70; font-size: 18px; font-weight: 650; line-height: 1.5; margin-top: 30px; scroll-margin-top: 20px; }
.document-card h3 { color: #526a8a; font-size: 14px; line-height: 1.6; margin-top: 23px; font-weight: 600; }
.document-card p,.document-card li { color: #728199; font-size: 14px; line-height: 1.9; }
.document-card strong { color: #4f6380; font-weight: 600; }
.document-card pre { max-width: 100%; overflow-x: auto; padding: 18px; border: 1px solid #e2e9f4; border-radius: 12px; background: #f6f8fc; color: #4b6587; font-size: 12px; line-height: 1.8; margin: 16px 0; }
.guide-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding-bottom: 25px; border-bottom: 1px solid #e8edf5; }
.guide-index a { padding: 7px 10px; border-radius: 8px; background: #f1f5fc; color: #627ca4; font-size: 11px; }
.guide-index a:hover { background: #e5edfa; color: #245ddd; }
.account-page { padding: 42px 0 24px; }
.account-page h1 { color: #263b59; letter-spacing: -1px; }
.account-page h2 { font-size: 19px; color: #344d70; letter-spacing: -.3px; }
.account-page .rounded-2xl { border-radius: 18px; border-color: #e1e8f3; box-shadow: 0 3px 9px #1a345004; }
.account-page input:not([type="radio"]):not([type="hidden"]),.account-page select { min-width: 0; background: #fbfcfe; border-color: #dce5f1; }
.account-page .grid > * { min-width: 0; }
.account-page [id^="token-"] { overflow-wrap: anywhere; }
.legacy-page { max-width: 980px; margin: 42px auto; }
.legacy-card { padding: 30px; background: #fff; border: 1px solid #e0e8f3; border-radius: 20px; }
.legacy-card h2 { font-size: 27px; font-weight: 650; margin-bottom: 24px; color: #263b59; }
.legacy-card h3 { font-size: 18px; font-weight: 600; margin: 20px 0; color: #526782; }
.legacy-card label { font-size: 13px; color: #6a7e9d; }
.legacy-card input { padding: 9px 12px; max-width: 100%; border: 1px solid #dce5f1; border-radius: 8px; }
.legacy-card button { padding: 9px 13px; border: 1px solid #dce5f1; border-radius: 8px; color: #385f9f; background: #f3f7ff; font-size: 13px; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.legacy-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legacy-card :is(td,th) { text-align: left; padding: 13px; border-bottom: 1px solid #e6ecf5; }
.error-page { margin: 36px auto 0; }
.myip-page { padding-top: 42px; }
.connection-card,.info-panel { box-shadow: 0 4px 14px #20375004; border-color: #e0e8f3; }
.site-footer { margin-top: 60px; }
.site-footer-inner { padding-top: 30px; padding-bottom: 30px; }
@media (max-width: 999px) {
 .home-hero { gap: 32px; padding-top: 48px; }
 .dns-query-form { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
 .query-domain { grid-column: 1 / -1; }
 .query-submit { grid-column: 1 / -1; }
 .ip-query-form .query-submit { grid-column: auto; }
 .home-guide { flex-wrap: wrap; }
 .home-guide .ui-button { margin-left: 64px; }
}
@media (max-width: 699px) {
 .app-main { padding: 0 18px; }
 .home-hero { grid-template-columns: minmax(0,1fr); gap: 30px; padding: 35px 0 38px; }
 .hero-copy h1 { font-size: 42px; letter-spacing: -1.9px; margin: 13px 0 16px; }
 .hero-copy > p { font-size: 14px; line-height: 1.8; }
 .hero-actions { margin-top: 22px; gap: 8px; }
 .hero-actions .ui-button { flex: 1; padding: 11px 12px; }
 .host-preview { padding: 20px; border-radius: 19px; }
 .preview-heading { padding-bottom: 18px; }
 .preview-address { margin-top: 18px; }
 .preview-address > strong { font-size: 29px; }
 .preview-route { margin: 14px 0; }
 .section-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 20px; }
 .section-heading h2 { font-size: 24px; letter-spacing: -.6px; }
 .section-heading > p { display: none; }
 .tool-card-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
 .home-tools { padding: 27px 0 32px; }
 .home-tool-card { padding: 20px; border-radius: 16px; }
 .home-tool-card h3 { margin-top: 16px; }
 .how-section { padding: 24px 0; }
 .step-grid { grid-template-columns: minmax(0,1fr); gap: 22px; padding: 5px 0 22px; }
 .step-grid article { padding-left: 38px; position: relative; }
 .step-number { position: absolute; top: 4px; left: 0; }
 .step-grid h3 { font-size: 15px; margin-bottom: 5px; }
 .home-guide { padding: 21px; gap: 14px; border-radius: 16px; }
 .home-guide > div:nth-child(2) { flex: 1; min-width: 160px; }
 .home-guide h2 { font-size: 16px; }
 .home-guide .ui-button { margin-left: 0; width: 100%; }
 .tool-page { padding: 28px 0 16px; }
 .tool-intro { gap: 13px; align-items: flex-start; margin-bottom: 20px; }
 .tool-intro .feature-icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 11px; margin-top: 4px; }
 .tool-intro .dnsly-icon { width: 23px; height: 23px; }
 .tool-intro h1 { font-size: 27px; letter-spacing: -.8px; }
 .tool-intro p { font-size: 13px; margin-top: 6px; }
 .tool-form-card { padding: 18px; border-radius: 15px; }
 .tool-form-card input,.tool-form-card select { font-size: 16px; }
 .dns-query-form { gap: 15px 10px; }
 .query-resolver { grid-column: 1 / -1; }
 .query-type { grid-column: 1 / -1; }
 .ip-query-form { grid-template-columns: minmax(0,1fr); }
 .ip-query-form .query-submit { grid-column: 1 / -1; }
 .tool-results { margin-top: 18px; }
 .dns-result-card,.ip-result-card { padding: 18px; border-radius: 15px; }
 .ip-result-card h2 { font-size: 16px; }
 .login-page,.contact-page { margin-top: 30px; }
 .login-card,.contact-card { padding: 27px 23px; border-radius: 19px; }
 .login-card h1,.contact-card h1 { font-size: 28px; }
 .contact-email { font-size: 19px; padding: 14px; }
 .document-page { margin-top: 27px; }
 .document-card { padding: 25px 21px; border-radius: 17px; }
 .document-card h1 { font-size: 27px; }
 .document-card p,.document-card li { font-size: 13px; }
 .document-card pre { padding: 14px; font-size: 11px; }
 .account-page { padding-top: 27px; }
 .legacy-page { margin-top: 27px; }
 .legacy-card { padding: 21px; }
 .myip-page { padding-top: 26px; }
 .site-footer { margin-top: 38px; }
 .site-footer nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 4px 18px; padding-top: 0; }
 .site-footer nav a { padding: 7px 0; }
}
@media (prefers-reduced-motion: reduce) { .home-tool-card { transition: none; } }
/* Long IPv6 addresses and host metadata stay inside small account screens. */
.account-page .rounded-full { max-width: 100%; overflow-wrap: anywhere; }
.app-main > .account-page { padding: 42px 0 24px; }
@media (max-width: 699px) {
 .app-main > .account-page { padding-top: 27px; }
 .account-page .account-stats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
 .account-stats > article { padding: 14px 11px; border-radius: 13px; }
 .account-stats > article > p:first-child { min-height: 32px; font-size: 11px; line-height: 1.5; }
 .account-stats > article > p:nth-child(2) { font-size: 25px; margin-top: 6px; }
 .account-stats > article > p:last-child { font-size: 10px; line-height: 1.6; }
 .account-stats > article:last-child > p:last-child { display: none; }
}

/* Centered hero: the original composition with the new shared finish. */
.home-hero-balanced { display: block; position: relative; text-align: center; padding: 60px 24px 48px; background:
 radial-gradient(ellipse 32% 38% at 33% 38%, #60a5fa24 0%, #60a5fa00 100%),
 radial-gradient(ellipse 28% 38% at 69% 43%, #818cf822 0%, #818cf800 100%),
 radial-gradient(ellipse 30% 24% at 48% 72%, #f472b619 0%, #f472b600 100%); }
.home-hero-balanced .hero-copy { max-width: 740px; margin: 0 auto; }
.home-hero-balanced .hero-copy h1 { font-size: clamp(36px,4.1vw,54px); letter-spacing: -1.9px; line-height: 1.17; margin-top: 15px; }
.home-hero-balanced .hero-copy > p { max-width: 590px; margin: 0 auto; font-size: 16px; line-height: 1.8; }
.home-hero-balanced .hero-actions { justify-content: center; margin-top: 25px; }
.home-hero-balanced .hero-note { margin-top: 13px; }
.hero-domain-example { display: inline-flex; align-items: center; gap: 13px; margin-top: 24px; padding: 9px 13px; background: #ffffffc9; border: 1px solid #dfe7f5; border-radius: 10px; box-shadow: 0 2px 5px #203a6403; }
.hero-domain-example > span:first-child { font-size: 10px; color: #8696ad; padding-right: 12px; border-right: 1px solid #e3eaf5; }
.hero-domain-example > span:last-child { display: inline-flex; align-items: center; font-size: 13px; color: #4168aa; font-weight: 550; }
.hero-domain-example .dnsly-icon { width: 15px; height: 15px; margin-right: 8px; color: #849dc5; }
.example-domain-suffix { color: #8a9dbb; font-weight: 450; }
@media (max-width: 699px) {
 .home-hero-balanced { padding: 35px 0 34px; }
 .home-hero-balanced .hero-copy h1 { font-size: 35px; letter-spacing: -1.3px; line-height: 1.2; margin: 13px 0 17px; }
 .home-hero-balanced .hero-copy > p { max-width: 390px; font-size: 14px; }
 .home-hero-balanced .hero-actions { margin-top: 22px; }
 .home-hero-balanced .hero-actions .ui-button { flex: 0 1 auto; padding: 11px 17px; }
 .hero-domain-example { margin-top: 20px; }
}

/* Let the hero colors dissolve into the page without a dividing rule. */
.home-page .home-tools { border-top: 0; }