/* Hostular — the public website (Phase 27).
   The approved design's own tokens and components, as plain CSS: a floating
   glass nav over deep jade bands that carry the product, with the body
   sections in the viewer's theme between them. Palette and type are
   Hostular's own tokens, so the shop and the panel are one product. Colours
   live only here, as tokens on :root, and both themes follow the viewer's
   prefers-color-scheme. */

:root {
    --bg: #f3f5fa; --bg-subtle: #eaeef6; --surface: #ffffff; --surface-2: #f5f7fb;
    --line: #e1e6ef; --line-strong: #c9d1df;
    --fg: #0d1322; --fg-2: #454e63; --fg-3: #667089;
    --primary: #0b7d70; --primary-hover: #096a5f; --primary-text: #0a7267; --primary-fg: #ffffff;
    --warning: #a84d08; --success: #13703a; --danger: #c12424;
    --tint: rgb(11 125 112 / 0.09); --tint-2: rgb(11 125 112 / 0.16);
    --renew-bg: rgb(168 77 8 / 0.08); --renew-line: rgb(168 77 8 / 0.22);
    --ok-bg: rgb(19 112 58 / 0.08); --ok-line: rgb(19 112 58 / 0.22);
    --no-bg: rgb(193 36 36 / 0.06);
    --shadow: 0 1px 2px rgb(13 19 34 / 0.04), 0 18px 40px -24px rgb(13 19 34 / 0.22);

    --deep: #041714; --deep-2: #082420; --deep-3: #0c302b;
    --deep-fg: #e7f5f2; --deep-fg-2: #9cc3bc; --deep-fg-3: #6f9a93;
    --deep-line: rgb(157 196 189 / 0.16); --deep-line-2: rgb(157 196 189 / 0.28);
    --jade: #2dd4bf; --jade-2: #5eead4; --jade-ink: #032622; --mint: #a7f3d0;
    --amber: #fbbf24; --rose: #f87171;
    --glass: rgb(8 36 32 / 0.62);
    --term-bg: #010907;

    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #070b13; --bg-subtle: #0a101b; --surface: #0e1522; --surface-2: #131c2c;
        --line: rgb(148 163 184 / 0.14); --line-strong: rgb(148 163 184 / 0.28);
        --fg: #e9eef8; --fg-2: #aab4c8; --fg-3: #8490a7;
        --primary: #2dd4bf; --primary-hover: #5eead4; --primary-text: #40dcc8; --primary-fg: #04211d;
        --warning: #fbbf24; --success: #4ade80; --danger: #f87171;
        --tint: rgb(45 212 191 / 0.11); --tint-2: rgb(45 212 191 / 0.2);
        --renew-bg: rgb(251 191 36 / 0.09); --renew-line: rgb(251 191 36 / 0.24);
        --ok-bg: rgb(74 222 128 / 0.09); --ok-line: rgb(74 222 128 / 0.24);
        --no-bg: rgb(248 113 113 / 0.08);
        --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 18px 40px -24px rgb(0 0 0 / 0.7);
        --deep: #020c0a;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #070b13; --bg-subtle: #0a101b; --surface: #0e1522; --surface-2: #131c2c;
    --line: rgb(148 163 184 / 0.14); --line-strong: rgb(148 163 184 / 0.28);
    --fg: #e9eef8; --fg-2: #aab4c8; --fg-3: #8490a7;
    --primary: #2dd4bf; --primary-hover: #5eead4; --primary-text: #40dcc8; --primary-fg: #04211d;
    --warning: #fbbf24; --success: #4ade80; --danger: #f87171;
    --tint: rgb(45 212 191 / 0.11); --tint-2: rgb(45 212 191 / 0.2);
    --renew-bg: rgb(251 191 36 / 0.09); --renew-line: rgb(251 191 36 / 0.24);
    --ok-bg: rgb(74 222 128 / 0.09); --ok-line: rgb(74 222 128 / 0.24);
    --no-bg: rgb(248 113 113 / 0.08);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 18px 40px -24px rgb(0 0 0 / 0.7);
    --deep: #020c0a;
    color-scheme: dark;
}

@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--deep); }

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
svg.i { width: 20px; height: 20px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; background: var(--jade); color: var(--jade-ink); font-weight: 600; padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }

.band { width: 100%; position: relative; }
.band.deep { background: var(--deep); color: var(--deep-fg); overflow: hidden; }
.band.sub { background: var(--bg-subtle); }
.inner { position: relative; max-width: 1220px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 980px; }
.pad { padding-block: 84px; }
@media (max-width: 640px) { .pad { padding-block: 60px; } }

/* the deep backdrop: a soft jade glow, no dots */
.backdrop { position: absolute; inset: 0; pointer-events: none; }
.backdrop::after { content: ""; position: absolute; width: 760px; height: 760px; max-width: 160vw; left: 58%; top: -280px; transform: translateX(-50%); background: radial-gradient(circle, rgb(45 212 191 / 0.22), transparent 62%); filter: blur(10px); }
.backdrop.low::after { top: auto; bottom: -420px; left: 50%; }

/* ---------- section heads ---------- */
.head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 760px; }
.head.center { justify-items: center; text-align: center; margin-inline: auto; }
.head.flush { margin-bottom: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-text); background: var(--tint); border: 1px solid var(--tint-2); border-radius: 999px; padding: 5px 12px; justify-self: start; }
.head.center .eyebrow { justify-self: center; }
.band.deep .eyebrow { color: var(--jade); background: rgb(45 212 191 / 0.08); border-color: rgb(45 212 191 / 0.22); }
.head h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 700; line-height: 1.08; }
.head p { color: var(--fg-2); font-size: 1.06rem; max-width: 60ch; }
.band.deep .head p { color: var(--deep-fg-2); }
.grad { background: linear-gradient(100deg, var(--jade) 10%, var(--mint) 55%, var(--jade-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- promotion ---------- */
.promo { position: relative; z-index: 21; background: var(--jade); color: var(--jade-ink); font-size: 14px; font-weight: 500; text-align: center; padding: 9px 16px; padding-top: calc(9px + env(safe-area-inset-top, 0px)); }
.promo time { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }

/* ---------- glass nav ---------- */
.navwrap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); height: 0; }
.nav { max-width: 1180px; margin: 0 auto; top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--deep-line-2); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); color: var(--deep-fg); box-shadow: 0 10px 30px -14px rgb(0 0 0 / 0.5); position: relative; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: inherit; text-decoration: none; padding: 0; min-width: 0; }
.mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(140deg, var(--jade-2), #0f9e8c); display: grid; place-items: center; color: #022420; font-size: 15px; font-weight: 800; box-shadow: 0 0 18px -2px rgb(45 212 191 / 0.55); flex: none; }
/* One line, always: the nav floats over the page at a fixed height, so a long
   site name that wrapped would lie over the heading beneath it. The whole name
   is still read out, and printed in full in the footer. */
.brand .word { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navlinks { display: flex; gap: 2px; align-items: center; }
.navlinks a, .navlinks span.off { color: var(--deep-fg-2); font-size: 14.5px; padding: 8px 12px; border-radius: 10px; white-space: nowrap; text-decoration: none; }
.navlinks a:hover { color: var(--deep-fg); background: rgb(255 255 255 / 0.06); }
.navlinks a[aria-current="page"] { color: var(--deep-fg); }
.navlinks a.cta { background: var(--jade); color: var(--jade-ink); font-weight: 600; margin-left: 4px; }
.navlinks a.cta:hover { background: var(--jade-2); }
.navlinks a:focus-visible, .brand:focus-visible, .menu summary:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

/* the phone's menu: a <details>, so it opens without JavaScript */
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--deep-fg); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: rgb(255 255 255 / 0.06); }
.menu summary svg { width: 22px; height: 22px; }
.menu[open] summary { background: rgb(255 255 255 / 0.08); }
.menu .sheet { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: grid; gap: 2px; padding: 8px; border-radius: 16px; background: var(--deep-2); border: 1px solid var(--deep-line-2); box-shadow: 0 20px 40px -16px rgb(0 0 0 / 0.6); }
.menu:not([open]) .sheet { display: none; }
.menu .sheet a { color: var(--deep-fg); text-decoration: none; padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.menu .sheet a:hover, .menu .sheet a:focus-visible { background: rgb(255 255 255 / 0.06); outline: none; }
.menu .sheet a.cta { background: var(--jade); color: var(--jade-ink); font-weight: 600; text-align: center; margin-top: 6px; }
@media (max-width: 760px) {
    .navlinks .wide { display: none; }
    .menu { display: block; }
}
@media (max-width: 340px) { .brand .word { display: none; } }

/* ---------- buttons ---------- */
.btn { font-family: var(--font-sans); font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; text-align: center; text-decoration: none; }
.btn svg { width: 17px; height: 17px; }
.btn.glow { background: var(--jade); color: var(--jade-ink); box-shadow: 0 0 0 1px rgb(94 234 212 / 0.4) inset, 0 10px 34px -10px rgb(45 212 191 / 0.7); }
.btn.glow:hover { background: var(--jade-2); }
.btn.ghost { border-color: var(--deep-line-2); color: var(--deep-fg); background: rgb(255 255 255 / 0.03); }
.btn.ghost:hover { background: rgb(255 255 255 / 0.07); }
.btn.jade { background: var(--primary); color: var(--primary-fg); width: 100%; }
.btn.jade:hover { background: var(--primary-hover); }
.btn.soft { background: var(--surface-2); color: var(--fg); border-color: var(--line); width: 100%; }
.btn.soft:hover { border-color: var(--primary); color: var(--primary-text); }
.btn.auto { width: auto; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.btn.off { opacity: 0.55; cursor: not-allowed; }

/* ---------- hero ---------- */
.hero { display: grid; gap: 48px; padding-block: 132px 40px; align-items: center; }
@media (min-width: 1000px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-block: 148px 56px; } }
.hero-copy { display: grid; gap: 24px; justify-items: start; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--deep-fg-2); border: 1px solid var(--deep-line-2); background: rgb(255 255 255 / 0.03); border-radius: 999px; padding: 5px 14px 5px 6px; max-width: 100%; }
.pill b { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jade-ink); background: var(--jade); border-radius: 999px; padding: 3px 9px; font-weight: 600; flex: none; }
.hero h1 { font-size: clamp(2.5rem, 6.6vw, 4.6rem); line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.hero .sub { font-size: clamp(1.04rem, 2.2vw, 1.2rem); color: var(--deep-fg-2); max-width: 50ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { font-size: 13.5px; color: var(--deep-fg-3); display: flex; gap: 8px 20px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.hero-note li { display: inline-flex; gap: 6px; align-items: center; }
.hero-note svg { width: 15px; height: 15px; color: var(--jade); }

/* a page's own deep header */
.phead { padding-block: 132px 56px; display: grid; gap: 18px; justify-items: start; }
.phead.center { justify-items: center; text-align: center; }
.phead h1 { font-size: clamp(2.2rem, 5.6vw, 3.8rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; }
.phead p { color: var(--deep-fg-2); max-width: 56ch; }

/* the product, in the hero */
.mock { position: relative; border-radius: 20px; background: linear-gradient(180deg, rgb(12 48 43 / 0.92), rgb(6 30 27 / 0.94)); border: 1px solid var(--deep-line-2); box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(45 212 191 / 0.06) inset; overflow: hidden; min-width: 0; margin: 0; }
.mock::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgb(94 234 212 / 0.55), transparent 35%, transparent 70%, rgb(94 234 212 / 0.25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.mock-bar { display: flex; gap: 7px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--deep-line); }
.mock-bar .d { width: 10px; height: 10px; border-radius: 999px; background: var(--deep-line-2); }
.mock-bar .url { margin-left: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--deep-fg-3); background: rgb(0 0 0 / 0.25); border-radius: 7px; padding: 3px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mock-body { padding: 20px; display: grid; gap: 16px; }
.mock-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; flex-wrap: wrap; }
.mock-site { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.mock-sub { font-size: 12.5px; color: var(--deep-fg-3); }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--jade); background: rgb(45 212 191 / 0.1); border: 1px solid rgb(45 212 191 / 0.25); border-radius: 999px; padding: 4px 10px; }
.live i { width: 7px; height: 7px; border-radius: 999px; background: var(--jade); box-shadow: 0 0 0 0 rgb(45 212 191 / 0.6); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(45 212 191 / 0.55); } 80%, 100% { box-shadow: 0 0 0 8px rgb(45 212 191 / 0); } }
.mock-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mock-stats div { background: rgb(0 0 0 / 0.22); border: 1px solid var(--deep-line); border-radius: 12px; padding: 11px 12px; display: grid; gap: 2px; min-width: 0; }
.mock-stats .k { font-size: 11.5px; color: var(--deep-fg-3); overflow: hidden; text-overflow: ellipsis; }
.mock-stats .v { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.mock-rows { display: grid; border: 1px solid var(--deep-line); border-radius: 12px; overflow: hidden; }
.mr { display: flex; justify-content: space-between; gap: 12px; padding: 10px 13px; font-size: 13px; border-top: 1px solid var(--deep-line); }
.mr:first-child { border-top: 0; }
.mr .k { color: var(--deep-fg-2); }
.mr .ok { color: var(--jade); display: inline-flex; gap: 6px; align-items: center; text-align: right; }
.mr .ok svg { width: 14px; height: 14px; }
.mr .plain { color: var(--deep-fg-2); }
.mock-bars { display: grid; gap: 10px; }
.mb { display: grid; grid-template-columns: 52px minmax(0, 1fr) 46px; gap: 12px; align-items: center; font-size: 12.5px; }
.mb .k { color: var(--deep-fg-3); font-family: var(--font-mono); font-size: 11.5px; }
.mb .v { color: var(--deep-fg-2); text-align: right; font-variant-numeric: tabular-nums; }
.track { height: 7px; border-radius: 999px; background: rgb(255 255 255 / 0.07); overflow: hidden; }
.track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #14b8a6, var(--jade-2)); box-shadow: 0 0 12px rgb(45 212 191 / 0.5); }
.track .w24 { width: 24%; } .track .w31 { width: 31%; } .track .w40 { width: 40%; }

/* facts and the stack marquee */
.facts { display: grid; gap: 12px; padding-block: 8px 34px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fact { border: 1px solid var(--deep-line); background: rgb(255 255 255 / 0.025); border-radius: 16px; padding: 18px 18px 20px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.fact .n { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fact .t { font-size: 13.5px; color: var(--deep-fg-2); }
.marquee { border-top: 1px solid var(--deep-line); padding-block: 22px 30px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee .lab { display: block; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deep-fg-3); margin-bottom: 16px; }
.track-x { display: flex; gap: 46px; width: max-content; animation: slide 38s linear infinite; margin: 0; padding: 0; list-style: none; }
.track-x li { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--deep-fg-2); white-space: nowrap; opacity: 0.8; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- plans ---------- */
.seg-wrap { display: flex; justify-content: center; max-width: 100%; }
.seg { position: relative; display: inline-flex; gap: 2px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); max-width: 100%; overflow-x: auto; }
.seg .ind { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 10px; background: var(--primary); transition: transform 0.28s cubic-bezier(.2,.8,.2,1), width 0.28s cubic-bezier(.2,.8,.2,1); }
.seg a { position: relative; z-index: 1; font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 10px; color: var(--fg-2); white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; transition: color 0.2s, background 0.2s; text-decoration: none; }
.seg a[aria-current="true"] { color: var(--primary-fg); font-weight: 600; background: var(--primary); }
.seg.js a[aria-current="true"] { background: none; }
@media (max-width: 640px) {
    .seg { flex-wrap: wrap; justify-content: center; overflow: visible; }
    .seg .ind { display: none; }
    .seg.js a[aria-current="true"] { background: var(--primary); }
}
.seg a:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.seg .off { font-family: var(--font-mono); font-size: 10px; border-radius: 999px; padding: 2px 6px; background: var(--tint); color: var(--primary-text); }
.seg a[aria-current="true"] .off { background: rgb(255 255 255 / 0.22); color: inherit; }

.plans { display: grid; gap: 18px; margin-top: 36px; }
@media (min-width: 720px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .plans.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plans.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; } }
.plans.n1 { max-width: 420px; margin-inline: auto; grid-template-columns: minmax(0, 1fr); }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px 22px 22px; display: grid; gap: 16px; align-content: start; min-width: 0; box-shadow: var(--shadow); }
.plan.featured { border-color: transparent; }
.plan.featured::before { content: ""; position: absolute; inset: -1.5px; border-radius: 23px; padding: 1.5px; background: conic-gradient(from var(--spin), var(--primary) 0deg, var(--mint) 70deg, transparent 140deg, transparent 220deg, var(--primary) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; pointer-events: none; }
.plan.featured::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(90% 60% at 50% 0%, var(--tint), transparent 70%); pointer-events: none; }
.plan > * { position: relative; z-index: 1; }
@keyframes spin { to { --spin: 360deg; } }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 26px; }
.plan h3 { font-size: 1.25rem; font-weight: 700; }
.badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--primary); color: var(--primary-fg); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.plan .who { color: var(--fg-2); font-size: 14px; min-height: 2.8em; }
.offer { display: none; gap: 16px; }
.offer.on { display: grid; }
.was { font-size: 13.5px; color: var(--fg-3); font-variant-numeric: tabular-nums; min-height: 1.3em; }
.was s { text-decoration-thickness: 1px; }
.was em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--success); background: var(--ok-bg); border-radius: 999px; padding: 2px 7px; margin-left: 6px; }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price .amount { font-family: var(--font-display); font-size: 2.7rem; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.price .per { color: var(--fg-3); font-size: 14px; }
.billed { font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.renews { font-size: 13px; color: var(--warning); background: var(--renew-bg); border: 1px solid var(--renew-line); border-radius: 12px; padding: 9px 11px; display: flex; gap: 8px; align-items: start; line-height: 1.45; }
.renews svg { width: 15px; height: 15px; margin-top: 2px; flex: none; }
.renews strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.unsold { font-size: 14px; color: var(--fg-3); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 14px; }
.specs { display: grid; gap: 10px; margin: 0; padding: 18px 0 0; list-style: none; font-size: 14px; border-top: 1px dashed var(--line-strong); }
.specs.flat { border-top: 0; padding-top: 0; }
.specs li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--fg-2); }
.specs li b { color: var(--fg); font-weight: 600; }
.ck { width: 18px; height: 18px; border-radius: 999px; background: var(--tint); color: var(--primary-text); display: grid; place-items: center; margin-top: 1px; }
.ck svg { width: 11px; height: 11px; stroke-width: 3; }
.specs .no { color: var(--fg-3); }
.specs .no .ck { background: var(--surface-2); color: var(--fg-3); }
.for-domain-note { max-width: 680px; margin: 0 auto 28px; }
.name-q { font-family: var(--font-mono); word-break: break-all; }
.results.notes { margin-top: 18px; }

/* ---------- product tabs (VPS / dedicated / email, beside shared hosting) ---------- */
.ptab-wrap { display: flex; justify-content: center; max-width: 100%; margin-bottom: 8px; }
.ptabs { position: relative; display: inline-flex; gap: 2px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); max-width: 100%; overflow-x: auto; }
.ptabs .ind { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 12px; background: var(--primary); transition: transform 0.28s cubic-bezier(.2,.8,.2,1), width 0.28s cubic-bezier(.2,.8,.2,1); }
.ptabs a { position: relative; z-index: 1; font-size: 14.5px; font-weight: 600; padding: 11px 18px; border-radius: 12px; color: var(--fg-2); white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; transition: color 0.2s, background 0.2s; text-decoration: none; }
.ptabs a svg { width: 17px; height: 17px; }
.ptabs a[aria-current="true"] { color: var(--primary-fg); background: var(--primary); }
.ptabs.js a[aria-current="true"] { background: none; }
.ptabs a:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
@media (max-width: 640px) { .ptabs a { padding: 10px 14px; font-size: 13.5px; } .ptabs a svg { display: none; } }
.ptab-panel { display: none; }
.ptab-panel.on { display: block; }

.plan-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.plan-specs.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-specs .stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 4px 8px; display: grid; gap: 2px; text-align: center; min-width: 0; }
.plan-specs .stat .v { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; word-break: break-word; }
.plan-specs .stat .k { font-size: 10px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.03em; word-break: break-word; }

/* ---------- bento ---------- */
.bento { display: grid; gap: 14px; grid-auto-flow: dense; }
@media (min-width: 700px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w2 { grid-column: span 2; } .h2 { grid-row: span 2; } }
@media (min-width: 1060px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 100% 0%, var(--tint), transparent 55%), var(--surface); padding: 22px; display: grid; gap: 10px; align-content: start; min-width: 0; box-shadow: var(--shadow); }
.tile .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--primary-text); background: var(--tint); border: 1px solid var(--tint-2); }
.tile h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.015em; }
.tile p { font-size: 14.5px; color: var(--fg-2); max-width: 46ch; }
.tile.dark { background: radial-gradient(100% 80% at 0% 0%, rgb(45 212 191 / 0.18), transparent 55%), var(--deep-2); border-color: var(--deep-line-2); color: var(--deep-fg); }
.tile.dark p { color: var(--deep-fg-2); }
.tile.dark .ico { color: var(--jade); background: rgb(45 212 191 / 0.1); border-color: rgb(45 212 191 / 0.24); }
.mini { margin-top: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
.mini-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; font-size: 13px; border-top: 1px solid var(--line); align-items: center; flex-wrap: wrap; }
.mini-row:first-child { border-top: 0; }
.mini-row .t { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.mini-row .s { color: var(--success); font-size: 12px; display: inline-flex; gap: 5px; align-items: center; }
.mini-row .s svg { width: 13px; height: 13px; }
.mini-row .r { font-size: 12px; font-weight: 600; color: var(--primary-text); background: var(--tint); border-radius: 8px; padding: 4px 10px; }
.big { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; color: var(--primary-text); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 6px; }
.big small { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--fg-3); letter-spacing: 0; }

/* the terminal */
.term { margin-top: 10px; border-radius: 14px; border: 1px solid var(--deep-line-2); background: var(--term-bg); overflow: hidden; min-width: 0; }
.term .bar { display: flex; gap: 6px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--deep-line); }
.term .bar i { width: 9px; height: 9px; border-radius: 999px; background: var(--deep-line-2); }
.term .bar span { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--deep-fg-3); }
.term pre { margin: 0; padding: 14px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.8; color: var(--deep-fg); }
.term .p { color: var(--jade); }
.term .c { color: var(--deep-fg-3); }
.caret { display: inline-block; width: 8px; height: 15px; background: var(--jade); vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- deep tiles ---------- */
.glass3 { display: grid; gap: 14px; }
@media (min-width: 760px) { .glass3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .glass3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gtile { border: 1px solid var(--deep-line); background: linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.015)); border-radius: 20px; padding: 22px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.gtile .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--jade); background: rgb(45 212 191 / 0.1); border: 1px solid rgb(45 212 191 / 0.22); }
.gtile h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; }
.gtile p { font-size: 14.5px; color: var(--deep-fg-2); }
.gtile b { color: var(--deep-fg); font-weight: 600; }
.gtile.wide { grid-column: 1 / -1; }

/* ---------- security ---------- */
.two { display: grid; gap: 16px; }
@media (min-width: 860px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.panel { border-radius: 22px; border: 1px solid var(--line); background: var(--surface); padding: 26px; display: grid; gap: 18px; align-content: start; min-width: 0; box-shadow: var(--shadow); }
.panel h3 { font-size: 1.15rem; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.panel h3 .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--success); box-shadow: 0 0 0 4px var(--ok-bg); flex: none; }
.panel h3 .dot.off { background: var(--fg-3); box-shadow: 0 0 0 4px var(--surface-2); }

/* ---------- uptime ---------- */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.stack { display: grid; gap: 22px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip { font-size: 13px; color: var(--deep-fg-2); border: 1px solid var(--deep-line-2); background: rgb(255 255 255 / 0.03); border-radius: 999px; padding: 6px 12px; display: inline-flex; gap: 7px; align-items: center; }
.chip i { width: 6px; height: 6px; border-radius: 999px; background: var(--amber); }
.chip.crit i { background: var(--rose); }
.aside { font-size: 14px; color: var(--deep-fg-3); }
.aside b { color: var(--deep-fg); }
.readout { border-radius: 20px; border: 1px solid var(--deep-line-2); background: linear-gradient(180deg, rgb(12 48 43 / 0.7), rgb(4 23 20 / 0.9)); overflow: hidden; min-width: 0; margin: 0; }
.readout .rh { display: flex; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--deep-line); align-items: center; flex-wrap: wrap; }
.readout .rh b { font-family: var(--font-display); font-weight: 600; }
.readout .rh span { font-size: 12px; color: var(--deep-fg-3); font-family: var(--font-mono); }
.svc { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--deep-line); font-size: 14px; align-items: center; }
.svc:first-of-type { border-top: 0; }
.svc .n { color: var(--deep-fg); font-family: var(--font-mono); font-size: 13px; }
.svc .s { color: var(--jade); font-size: 12.5px; display: inline-flex; gap: 7px; align-items: center; }
.svc .s i { width: 7px; height: 7px; border-radius: 999px; background: var(--jade); box-shadow: 0 0 10px var(--jade); }
.readout .foot-n { padding: 12px 18px; border-top: 1px solid var(--deep-line); font-size: 12px; color: var(--deep-fg-3); }

/* ---------- migration ---------- */
.steps3 { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step3 { position: relative; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); padding: 24px; display: grid; gap: 10px; align-content: start; min-width: 0; box-shadow: var(--shadow); }
.step3 .num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--primary-text); background: var(--tint); border: 1px solid var(--tint-2); border-radius: 999px; width: 30px; height: 30px; display: grid; place-items: center; }
.step3 h3 { font-size: 1.08rem; font-weight: 600; }
.step3 p { font-size: 14.5px; color: var(--fg-2); }

/* ---------- table ---------- */
.scroll { position: relative; overflow-x: auto; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.scroll table.compare { min-width: 640px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover td, tbody tr:hover th { background: var(--surface-2); }
thead th { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
thead th:first-child { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; }
th.hot { color: var(--primary-text); }
tbody th { font-weight: 400; color: var(--fg-2); }
td { font-variant-numeric: tabular-nums; }
td small { display: block; color: var(--fg-3); font-size: 12.5px; }
td.no { color: var(--fg-3); }
tr.renew-row td, tr.renew-row th { background: var(--renew-bg) !important; }
tr.renew-row td { font-weight: 600; }
tr.renew-row th { color: var(--warning); font-weight: 500; }
td .specs { padding: 0; border: 0; font-size: 13.5px; gap: 7px; }

/* ---------- reviews / promise ---------- */
.empty { border-radius: 22px; border: 1.5px dashed var(--line-strong); background: var(--surface); padding: 34px 26px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.stars { display: flex; gap: 6px; color: var(--line-strong); }
.stars svg { width: 26px; height: 26px; }
.empty .eyebrow { justify-self: center; }
.empty h2 { font-size: 1.3rem; font-weight: 600; }
.empty p { color: var(--fg-2); max-width: 58ch; }
.promises { display: grid; gap: 14px; }
@media (min-width: 760px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.promise { border-radius: 20px; border: 1px solid var(--line); background: var(--surface); padding: 22px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.promise .k { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--primary-text); }
.promise p { font-size: 14.5px; color: var(--fg-2); }

/* ---------- faq ---------- */
details.qa { border-radius: 16px; border: 1px solid var(--line); background: var(--surface); transition: border-color 0.2s; }
details.qa + details.qa { margin-top: 10px; }
details.qa[open] { border-color: var(--tint-2); box-shadow: var(--shadow); }
details.qa summary { cursor: pointer; padding: 18px 20px; font-weight: 600; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary .pm { width: 28px; height: 28px; border-radius: 999px; background: var(--surface-2); display: grid; place-items: center; flex: none; color: var(--primary-text); transition: transform 0.25s; }
details.qa summary .pm svg { width: 15px; height: 15px; }
details.qa[open] summary .pm { transform: rotate(45deg); background: var(--tint); }
details.qa summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 16px; }
details.qa .ans { padding: 0 20px 18px; color: var(--fg-2); font-size: 14.8px; max-width: 72ch; display: grid; gap: 10px; }
.more { margin-top: 22px; text-align: center; }

/* ---------- cta ---------- */
.cta-wrap { padding-block: 20px 84px; }
.cta-box { position: relative; border-radius: 28px; border: 1px solid var(--deep-line-2); background: radial-gradient(70% 120% at 50% 0%, rgb(45 212 191 / 0.22), transparent 60%), var(--deep-2); padding: 64px 24px; display: grid; gap: 20px; justify-items: center; text-align: center; overflow: hidden; }
.cta-box > * { position: relative; }
.cta-box h2 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -0.04em; max-width: 16ch; }
.cta-box p { color: var(--deep-fg-2); max-width: 48ch; }
.cta-box .hero-cta { justify-content: center; }

/* ---------- notes ---------- */
.note { border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); padding: 13px 15px; font-size: 13.8px; color: var(--fg-2); display: grid; gap: 4px; }
.note strong { color: var(--fg); }
.note.ok { background: var(--tint); border-color: var(--tint-2); }
.note.warn { background: var(--renew-bg); border-color: var(--renew-line); }
.note.bad { background: var(--no-bg); border-color: var(--line); }
.notice { max-width: 640px; margin: 36px auto 0; text-align: center; }

/* ---------- domains ---------- */
.dsearch { width: 100%; max-width: 680px; display: flex; gap: 8px; padding: 8px; border-radius: 18px; background: rgb(255 255 255 / 0.06); border: 1px solid var(--deep-line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.6); }
.dsearch input { flex: 1; min-width: 0; font: inherit; font-size: 17px; background: none; border: 0; color: var(--deep-fg); padding: 10px 12px; font-family: var(--font-mono); }
.dsearch input::placeholder { color: var(--deep-fg-3); }
.dsearch input:focus { outline: none; }
.dsearch:focus-within { border-color: var(--jade); box-shadow: 0 0 0 4px rgb(45 212 191 / 0.15), 0 20px 50px -20px rgb(0 0 0 / 0.6); }
.dsearch .btn { flex: none; }
@media (max-width: 420px) { .dsearch { flex-direction: column; } }
.tlds { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--deep-fg-2); margin: 0; padding: 0; list-style: none; }
.tlds li { border: 1px solid var(--deep-line); border-radius: 999px; padding: 4px 11px; font-variant-numeric: tabular-nums; }
.tlds b { font-family: var(--font-mono); color: var(--deep-fg); font-weight: 500; }
.results { display: grid; gap: 10px; }
.result { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); flex-wrap: wrap; }
.result.hit { border-color: var(--ok-line); background: radial-gradient(100% 140% at 0% 50%, var(--ok-bg), transparent 60%), var(--surface); }
.result.gone { opacity: 0.75; }
.result .who { display: grid; gap: 2px; min-width: 0; }
.result .name { font-family: var(--font-mono); font-size: 15.5px; font-weight: 500; word-break: break-all; }
.result .why { font-size: 13px; color: var(--fg-3); }
.result .right { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.result .cost { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: right; line-height: 1.3; }
.result .cost small { display: block; font-weight: 400; color: var(--fg-3); font-size: 12px; }
.result .btn { width: auto; padding: 10px 16px; font-size: 14px; }
.tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.tag.free { background: var(--ok-bg); color: var(--success); border: 1px solid var(--ok-line); }
.tag.taken { background: var(--no-bg); color: var(--danger); }
.tag.unknown { background: var(--renew-bg); color: var(--warning); border: 1px solid var(--renew-line); }
.tag.none { background: var(--surface-2); color: var(--fg-3); border: 1px solid var(--line); }
.prices td:first-child, .prices th:first-child { font-family: var(--font-mono); }

/* ---------- prose (terms, privacy) ---------- */
.prose { display: grid; gap: 16px; max-width: 72ch; color: var(--fg-2); }
.prose h2 { color: var(--fg); font-size: 1.3rem; margin-top: 12px; }
.prose a { color: var(--primary-text); }

/* ---------- footer ---------- */
.foot { padding-block: 64px 40px; display: grid; gap: 40px; }
.foot-grid { display: grid; gap: 32px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.5fr repeat(3, 1fr); } }
.fcol { display: grid; gap: 10px; align-content: start; }
.fcol h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deep-fg-3); font-weight: 500; margin-bottom: 4px; }
.fcol a, .fcol span { color: var(--deep-fg-2); font-size: 14px; text-decoration: none; }
.fcol a:hover { color: var(--jade); }
.fcol a:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.fabout p { color: var(--deep-fg-2); font-size: 14px; max-width: 34ch; margin-top: 12px; }
.fabout address { font-style: normal; color: var(--deep-fg-3); font-size: 13.5px; display: grid; gap: 4px; margin-top: 12px; }
.fabout address a { color: var(--deep-fg-2); }
.fbottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--deep-line); padding-top: 22px; font-size: 13px; color: var(--deep-fg-3); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .track-x { flex-wrap: wrap; width: auto; justify-content: center; gap: 14px 30px; }
    .track-x li[aria-hidden="true"] { display: none; }
    .marquee { mask-image: none; -webkit-mask-image: none; }
}

/* ===================== Internationalisation: Bengali =====================
   Inter, Sora and JetBrains Mono have no Bengali glyphs, so each stack falls
   through to Hind Siliguri (config hostular.site.fonts_url) and then to the
   Bengali faces systems ship: Latin text keeps its own face in every language,
   Bengali is drawn in a Bengali one, wherever it appears (the language switcher
   on an English page too). In Bengali text: room above and below the line for
   the vowel signs, no tracking (letter-spacing pulls a conjunct apart), and no
   label below a readable size. */
:root {
    --font-sans: 'Inter', 'Hind Siliguri', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Noto Sans Bengali', 'Nirmala UI', 'Vrinda', sans-serif;
    --font-display: 'Sora', 'Inter', 'Hind Siliguri', ui-sans-serif, system-ui, 'Noto Sans Bengali', 'Nirmala UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Consolas, 'Hind Siliguri', 'Noto Sans Bengali', 'Nirmala UI', monospace;
}
html:lang(bn) body { line-height: 1.75; }
html:lang(bn) h1, html:lang(bn) h2, html:lang(bn) h3, html:lang(bn) h4 { letter-spacing: 0; line-height: 1.32; }
html:lang(bn) .hero h1 { line-height: 1.22; font-weight: 700; }
html:lang(bn) .phead h1, html:lang(bn) .cta-box h2 { line-height: 1.25; font-weight: 700; }
html:lang(bn) .price .amount, html:lang(bn) .fact .n, html:lang(bn) .big, html:lang(bn) .promise .k { letter-spacing: -0.01em; }
html:lang(bn) .renews, html:lang(bn) .billed, html:lang(bn) .who { line-height: 1.6; }
html:lang(bn) .eyebrow, html:lang(bn) .badge, html:lang(bn) .tag, html:lang(bn) .pill b, html:lang(bn) .seg .off, html:lang(bn) .was em,
html:lang(bn) .fcol h2, html:lang(bn) .marquee .lab, html:lang(bn) thead th:first-child, html:lang(bn) .mb .k, html:lang(bn) .readout .rh span {
    letter-spacing: 0.02em; font-size: 12.5px; line-height: 1.5;
}
html:lang(bn) .btn { line-height: 1.4; }

/* The language switcher: a small pill in the nav, kept at every width. */
.navlinks a.lang { border: 1px solid var(--deep-line-2); padding: 6px 11px; font-size: 13.5px; line-height: 1.3; }
.navlinks a.lang:hover { border-color: var(--deep-fg-3); }
.flangs a { white-space: nowrap; }
/* On a phone the bar holds only the brand, the call to action and the menu (as
   before): the switcher moves into the menu, and stays in the footer. */
.menu .sheet a.lang-sheet { border-top: 1px solid var(--deep-line-2); border-radius: 0 0 10px 10px; }
@media (min-width: 761px) { .menu .sheet a.lang-sheet { display: none; } }
@media (max-width: 760px) { .navlinks a.lang { display: none; } }

/* ---- Pages and menus ---- */
/* The owner's pages: the text of the visual editor, on the site's own type. */
.cms-body { font-size: 1.04rem; line-height: 1.7; }
.cms-body.wide { max-width: none; }
.cms-body > * { margin: 0; }
.cms-body h2 { font-size: 1.45rem; line-height: 1.3; margin-top: 18px; scroll-margin-top: 96px; }
.cms-body h3 { color: var(--fg); font-size: 1.18rem; line-height: 1.35; margin-top: 10px; scroll-margin-top: 96px; }
.cms-body h4 { color: var(--fg); font-size: 1.02rem; line-height: 1.4; margin-top: 6px; scroll-margin-top: 96px; }
.cms-body strong { color: var(--fg); }
.cms-body ul, .cms-body ol { padding-left: 1.4em; display: grid; gap: 6px; }
.cms-body li::marker { color: var(--primary-text); }
.cms-body blockquote { border-left: 3px solid var(--primary); padding: 4px 0 4px 18px; color: var(--fg); font-size: 1.08rem; }
.cms-body pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; overflow-x: auto; font-size: 0.9rem; }
.cms-body code { font-family: var(--font-mono); font-size: 0.9em; }
.cms-body :not(pre) > code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }
.cms-body hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.cms-body img { display: block; max-width: 100%; height: auto; border-radius: 14px; }
.cms-body figure { display: grid; gap: 8px; }
.cms-body figcaption { font-size: 0.88rem; color: var(--fg-3); }
.cms-body a { text-underline-offset: 3px; }

/* a preview from the admin, above the page */
.cms-preview { position: relative; z-index: 21; background: var(--amber); color: var(--jade-ink); font-size: 14px; font-weight: 500; text-align: center; padding: 9px 16px; }

/* the footer's columns as the owner built them: as many as there are */
@media (min-width: 760px) {
    .foot-grid.cms-cols-0 { grid-template-columns: 1fr; }
    .foot-grid.cms-cols-1 { grid-template-columns: 1.5fr 1fr; }
    .foot-grid.cms-cols-2 { grid-template-columns: 1.5fr repeat(2, 1fr); }
    .foot-grid.cms-cols-3 { grid-template-columns: 1.5fr repeat(3, 1fr); }
    .foot-grid.cms-cols-4 { grid-template-columns: repeat(3, 1fr); }
    .foot-grid.cms-cols-4 .fabout { grid-column: 1 / -1; }
    .foot-grid.cms-cols-5 { grid-template-columns: repeat(3, 1fr); }
    .foot-grid.cms-cols-5 .fabout { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
    .foot-grid.cms-cols-4 { grid-template-columns: 1.4fr repeat(4, 1fr); }
    .foot-grid.cms-cols-4 .fabout, .foot-grid.cms-cols-5 .fabout { grid-column: auto; }
    .foot-grid.cms-cols-5 { grid-template-columns: 1.3fr repeat(5, 1fr); }
}

/* the bottom row's links, beside the copyright line */
.fmenu { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.fmenu a { color: var(--deep-fg-2); text-decoration: none; }
.fmenu a:hover { color: var(--jade); }
.fmenu a:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

/* a header with more links than the built-in three moves them into the menu sooner */
@media (max-width: 1060px) {
    .navlinks.many .wide { display: none; }
    .navlinks.many .menu { display: block; }
}
@media (max-width: 1240px) {
    .navlinks.lots .wide { display: none; }
    .navlinks.lots .menu { display: block; }
}

/* ---- Blog ---- */
/* The blog's lists, a post, an archive and an author's page (resources/views/blog). The site's tokens only, both themes, no inline style. */

/* a list of posts: cards, the whole card answering to its title's link */
.blog-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.blog-card { position: relative; min-width: 0; display: flex; }
.blog-card-in { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; transition: border-color 0.2s; }
.blog-card:hover .blog-card-in, .blog-card:focus-within .blog-card-in { border-color: var(--tint-2); }
.blog-card-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2); }
.blog-card-text { flex: 1 1 auto; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.blog-card-top { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-card-top:empty { display: none; }
.blog-card-cat, .blog-flag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; line-height: 1.5; }
.blog-card-cat { color: var(--primary-text); background: var(--tint); border: 1px solid var(--tint-2); }
.blog-flag { color: var(--primary-fg); background: var(--primary); }
.blog-card-title { font-size: 1.18rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.blog-card-title a { color: var(--fg); text-decoration: none; }
.blog-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.blog-card-title a:focus-visible { outline: none; }
.blog-card-title a:focus-visible::after { outline: 2px solid var(--primary); outline-offset: 2px; }
.blog-card:hover .blog-card-title a { color: var(--primary-text); }
.blog-card-sum { color: var(--fg-2); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--fg-3); }
@media (min-width: 900px) {
    .blog-card.is-featured { grid-column: span 2; }
    .blog-card.is-featured .blog-card-in { flex-direction: row; }
    .blog-card.is-featured .blog-card-img { width: 52%; flex: none; aspect-ratio: auto; height: auto; min-height: 100%; }
    .blog-card.is-featured .blog-card-text { padding: 26px 28px; justify-content: center; }
    .blog-card.is-featured .blog-card-title { font-size: 1.55rem; }
}
.blog-related { margin-top: 26px; }
.head .blog-section-title { font-size: clamp(1.45rem, 3.2vw, 1.9rem); font-weight: 700; line-height: 1.2; }

.blog-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 34px; }
.blog-pager-at { color: var(--fg-3); font-size: 14px; }
.blog-feed { margin-top: 30px; text-align: center; font-size: 14px; }
.blog-feed a { color: var(--primary-text); }
.blog-empty { border-radius: 22px; border: 1.5px dashed var(--line-strong); background: var(--surface); padding: 34px 24px; display: grid; gap: 12px; justify-items: center; text-align: center; color: var(--fg-2); }
.blog-empty h2 { font-size: 1.3rem; font-weight: 600; color: var(--fg); }

/* a post's header, on the deep band */
.blog-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; color: var(--deep-fg-3); }
.blog-trail a { color: var(--deep-fg-2); text-decoration: none; }
.blog-trail a:hover { color: var(--jade); }
.blog-trail a:focus-visible, .blog-byline a:focus-visible, .blog-person-links a:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.blog-head h1, .blog-person h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12; overflow-wrap: anywhere; }
.blog-lede { color: var(--deep-fg-2); font-size: 1.12rem; max-width: 62ch; }
.blog-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 14px; color: var(--deep-fg-3); }
.blog-by { display: inline-flex; align-items: center; gap: 9px; }
.blog-by img { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; border: 1px solid var(--deep-line-2); }
.blog-byline a { color: var(--deep-fg); text-decoration: none; font-weight: 500; }
.blog-byline a:hover { color: var(--jade); }
.blog-preview { background: var(--amber); color: var(--jade-ink); border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 500; max-width: 100%; }

/* a post's body: answer first, then the words */
.blog-body { display: grid; gap: 30px; }
.blog-body > * { min-width: 0; }
.blog-cover { margin: 0; }
.blog-cover img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--line); background: var(--surface-2); }
.blog-cover figcaption { margin-top: 8px; font-size: 13px; color: var(--fg-3); }
.blog-points { border: 1px solid var(--tint-2); background: var(--tint); border-radius: 18px; padding: 20px 22px; display: grid; gap: 12px; max-width: 72ch; }
.blog-points h2, .blog-toc h2 { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-text); }
.blog-points ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.blog-points li { position: relative; padding-left: 24px; color: var(--fg); font-weight: 500; }
.blog-points li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); }
.blog-toc { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 18px 22px; display: grid; gap: 10px; max-width: 72ch; }
.blog-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.blog-toc li.l3 { padding-left: 16px; }
.blog-toc li.l4 { padding-left: 32px; }
.blog-toc a { color: var(--fg-2); text-decoration: none; font-size: 14.5px; overflow-wrap: anywhere; }
.blog-toc a:hover { color: var(--primary-text); text-decoration: underline; }
.blog-toc a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

.blog-prose { color: var(--fg); font-size: 1.06rem; line-height: 1.75; max-width: 72ch; overflow-wrap: anywhere; }
.blog-prose > * + * { margin-top: 1em; }
.blog-prose ul, .blog-prose ol, .blog-prose blockquote, .blog-prose pre, .blog-prose figure { margin-bottom: 0; }
.blog-prose h2 { font-size: 1.6rem; line-height: 1.25; margin-top: 1.7em; }
.blog-prose h3 { font-size: 1.3rem; line-height: 1.3; margin-top: 1.5em; }
.blog-prose h4 { font-size: 1.1rem; line-height: 1.35; margin-top: 1.3em; }
.blog-prose h2 + *, .blog-prose h3 + *, .blog-prose h4 + * { margin-top: 0.6em; }
.blog-prose a { color: var(--primary-text); text-underline-offset: 2px; }
.blog-prose a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.blog-prose ul, .blog-prose ol { padding-left: 1.4em; }
.blog-prose li + li { margin-top: 0.35em; }
.blog-prose blockquote { margin-left: 0; margin-right: 0; border-left: 3px solid var(--primary); padding: 4px 0 4px 18px; color: var(--fg-2); }
.blog-prose pre { overflow-x: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.6; }
.blog-prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 0.08em 0.36em; }
.blog-prose pre code { background: none; border: 0; padding: 0; }
.blog-prose img { display: block; max-width: 100%; height: auto; border-radius: 14px; }
.blog-prose figure { margin-left: 0; margin-right: 0; }
.blog-prose figcaption { font-size: 13px; color: var(--fg-3); margin-top: 6px; }
.blog-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.blog-faq { display: grid; gap: 4px; max-width: 72ch; }
.blog-faq h2 { font-size: 1.45rem; margin-bottom: 12px; }

.blog-terms { display: grid; gap: 10px; }
.blog-terms p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.blog-terms-label { font-size: 13px; color: var(--fg-3); margin-right: 4px; }
.blog-term { font-size: 13.5px; text-decoration: none; color: var(--fg-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; overflow-wrap: anywhere; }
.blog-term:hover { border-color: var(--primary); color: var(--primary-text); }
.blog-term:focus-visible, .blog-translations a:focus-visible, .blog-back a:focus-visible, .blog-author a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.blog-translations { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.blog-translations a, .blog-back a { color: var(--primary-text); font-weight: 600; text-decoration: none; }
.blog-translations a:hover, .blog-back a:hover { text-decoration: underline; }

/* who wrote it */
.blog-author { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); max-width: 72ch; }
.blog-author-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.blog-author-initial { display: grid; place-items: center; background: var(--tint); color: var(--primary-text); font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; }
.blog-author-text { display: grid; gap: 6px; min-width: 0; }
.blog-author-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.blog-author-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.blog-author-name a { color: var(--fg); text-decoration: none; }
.blog-author-name a:hover { color: var(--primary-text); }
.blog-author-job { color: var(--fg-3); font-size: 14px; }
.blog-author-bio { color: var(--fg-2); font-size: 14.5px; }
.blog-author-links, .blog-person-links { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; }
.blog-author-links a { color: var(--primary-text); overflow-wrap: anywhere; }
@media (max-width: 480px) { .blog-author { grid-template-columns: minmax(0, 1fr); padding: 18px; } }

/* an author's page */
.blog-person-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.blog-person-text { display: grid; gap: 4px; min-width: 0; }
.blog-person-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--deep-line-2); }
.blog-person-job { color: var(--deep-fg-2); font-size: 1.05rem; }
.blog-person-links a { color: var(--jade); overflow-wrap: anywhere; }

html:lang(bn) .blog-card-cat, html:lang(bn) .blog-flag, html:lang(bn) .blog-author-eyebrow, html:lang(bn) .blog-points h2, html:lang(bn) .blog-toc h2 { letter-spacing: 0.02em; font-size: 12.5px; text-transform: none; }
html:lang(bn) .blog-head h1, html:lang(bn) .blog-person h1 { line-height: 1.3; letter-spacing: 0; }
html:lang(bn) .blog-card-title { line-height: 1.45; letter-spacing: 0; }
html:lang(bn) .blog-prose { line-height: 1.85; }

/* ---- Branding ---- */
/* The owner's logo in place of the letter mark (Branding). As tall as the
   mark's row and never wider than a share of the bar, so a wide logo can
   neither make the nav taller nor push it past a phone's screen: a logo
   wider than that is drawn smaller inside its box, and the name beside it
   gives way first (it ellipsises). */
.brand .brand-logo { display: block; flex: none; height: 30px; width: auto; max-width: min(200px, 40vw); object-fit: contain; object-position: left center; }
.foot .brand .brand-logo { height: 34px; max-width: min(240px, 70vw); }
.foot .brand.with-logo { flex-wrap: wrap; row-gap: 6px; }
/* Where the narrowest phones drop the name beside the mark, the name beside a
   logo is kept for screen readers: the logo's own alt is empty then. */
@media (max-width: 340px) {
    .brand.with-logo .word { display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

/* ---- Tools (Domain & DNS): the index, a tool's frame and the parts of an answer ---- */
.tools-phead { padding-block: 132px 28px; }
.tools-band { padding-block: 0 96px; }
.tools-wrap { display: grid; gap: 18px; }
.tools-group-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tools-group-head h2 { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deep-fg); }
.tools-group-head p { color: var(--deep-fg-3); font-size: 14px; }
.tools-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--deep-fg-3); flex: none; }
.tools-rule { flex: 1 1 40px; height: 1px; background: var(--deep-line-2); min-width: 40px; }
.tools-count { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep-fg-3); }
.tools-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); }
.tools-grid > li { min-width: 0; }
.tool-card { position: relative; display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 18px 50px 18px 18px; border-radius: 14px; border: 1px solid var(--deep-line-2); background: linear-gradient(160deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.015)); color: var(--deep-fg); text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.tool-card:hover { border-color: rgb(45 212 191 / 0.45); background: linear-gradient(160deg, rgb(45 212 191 / 0.09), rgb(255 255 255 / 0.02)); }
.tool-card:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.tool-card[aria-current="page"] { border-color: rgb(45 212 191 / 0.45); }
.tool-card-ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--deep-line-2); background: rgb(255 255 255 / 0.04); color: var(--deep-fg-2); }
.tool-card-ico svg { width: 20px; height: 20px; }
.tool-card-body { display: grid; gap: 4px; min-width: 0; }
.tool-card-title { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.tool-card-text { color: var(--deep-fg-2); font-size: 14px; line-height: 1.45; }
.tool-card-go { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--deep-line-2); color: var(--deep-fg-2); }
.tool-card-go svg { width: 14px; height: 14px; }
.tool-card:hover .tool-card-go { color: var(--jade); border-color: rgb(45 212 191 / 0.45); }
.tools-grid-light .tool-card { border-color: var(--line); background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
.tools-grid-light .tool-card:hover { border-color: var(--primary); background: var(--surface); }
.tools-grid-light .tool-card-ico, .tools-grid-light .tool-card-go { border-color: var(--line); background: var(--bg-subtle); color: var(--primary-text); }
.tools-grid-light .tool-card-text { color: var(--fg-2); }
.tool-head { padding-block: 120px 56px; display: grid; gap: 14px; max-width: 880px; }
.tool-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--deep-fg-3); }
.tool-crumbs a { color: var(--deep-fg-2); }
.tool-crumbs a:hover { color: var(--jade); }
.tool-title-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tool-title-row h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; min-width: 0; overflow-wrap: anywhere; }
.tool-ico { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 14px; border: 1px solid rgb(45 212 191 / 0.3); background: rgb(45 212 191 / 0.08); color: var(--jade); }
.tool-ico svg { width: 26px; height: 26px; }
.tool-summary { color: var(--deep-fg-2); font-size: 17px; max-width: 62ch; }
.tool-free { display: inline-block; margin-left: 6px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jade); white-space: nowrap; }
.tool-form-wrap { margin-top: 8px; display: grid; gap: 10px; }
.tool-form { display: grid; gap: 8px; max-width: 780px; }
.tool-search { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 18px; background: rgb(255 255 255 / 0.06); border: 1px solid var(--deep-line-2); }
.tool-search:focus-within { border-color: var(--jade); box-shadow: 0 0 0 4px rgb(45 212 191 / 0.15); }
.tool-search.has-err { border-color: var(--rose); }
.tool-search input[type="text"], .tool-search input[type="email"] { flex: 1; min-width: 0; font: inherit; font-family: var(--font-mono); font-size: 16px; background: none; border: 0; color: var(--deep-fg); padding: 10px 12px; }
.tool-search input::placeholder { color: var(--deep-fg-3); }
.tool-search input:focus { outline: none; }
.tool-search select { flex: none; font: inherit; font-size: 14.5px; color: var(--deep-fg); background: rgb(255 255 255 / 0.06); border: 1px solid var(--deep-line-2); border-radius: 10px; padding: 9px 10px; }
.tool-search select option { color: #0b1f1c; }
.tool-search .btn { flex: none; }
@media (max-width: 560px) {
    .tool-search { flex-wrap: wrap; }
    .tool-search input[type="text"], .tool-search input[type="email"] { flex-basis: 100%; }
    .tool-search select, .tool-search .btn { flex: 1 1 auto; }
}
.tool-err { color: var(--rose); font-size: 14px; }
.tool-result { display: grid; gap: 18px; padding-block: 44px 56px; }
.tool-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 20px; display: grid; gap: 12px; min-width: 0; }
.tool-panel h3 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tool-meta { color: var(--fg-3); font-size: 13px; }
.tool-table-wrap { overflow-x: auto; }
.tool-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tool-table th { text-align: left; font-weight: 600; color: var(--fg-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tool-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tool-table tr:last-child td { border-bottom: 0; }
.tool-mono { font-family: var(--font-mono); font-size: 13.5px; overflow-wrap: anywhere; }
.tool-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-2); white-space: nowrap; }
.tool-badge svg { width: 13px; height: 13px; }
.tool-badge.ok { color: var(--success); background: var(--ok-bg); border-color: var(--ok-line); }
.tool-badge.warn { color: var(--warning); background: var(--renew-bg); border-color: var(--renew-line); }
.tool-badge.no { color: var(--danger); background: var(--no-bg); border-color: var(--no-bg); }
.tool-badge.info { color: var(--primary-text); background: var(--tint); border-color: var(--tint-2); }
.tool-note { padding: 12px 14px; border-radius: 12px; background: var(--bg-subtle); border: 1px solid var(--line); color: var(--fg-2); font-size: 14.5px; }
.tool-note.ok { background: var(--ok-bg); border-color: var(--ok-line); }
.tool-note.warn { background: var(--renew-bg); border-color: var(--renew-line); }
.tool-note.no { background: var(--no-bg); border-color: var(--no-bg); }
.tool-code { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--term-bg); color: #d5fbf3; min-width: 0; }
.tool-code code, .tool-code pre { flex: 1; min-width: 0; margin: 0; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-copy { flex: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--jade); background: rgb(45 212 191 / 0.1); border: 1px solid rgb(45 212 191 / 0.3); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.tool-copy:hover { background: rgb(45 212 191 / 0.18); }
.tool-about { display: grid; gap: 12px; max-width: 780px; padding-block: 8px 56px; }
.tool-about h2 { font-size: 22px; font-weight: 700; }
.tool-about p, .tool-about li { color: var(--fg-2); }
.tool-more-in { display: grid; gap: 44px; }
.tool-faq h2, .tool-related h2 { font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.tool-faq { max-width: 860px; }
.tool-all { font-weight: 600; display: inline-flex; gap: 6px; align-items: center; margin-top: 14px; color: var(--primary-text); }
.tool-all svg { width: 16px; height: 16px; }

/* ---- Tools: DNS ---- */
/* DNS Lookup, DNS Propagation Checker, Reverse DNS Lookup and What Is My IP
   (resources/views/tools/dns). A record table becomes one card per row on a
   phone, each cell headed by its column's name (data-label), so a long TXT
   record or an IPv6 address never pushes the page sideways. */
.tool-dns-head { display: grid; gap: 6px; min-width: 0; }
.tool-dns-title { font-size: clamp(1.15rem, 3.2vw, 1.45rem); font-weight: 700; overflow-wrap: anywhere; }
.tool-dns-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.tool-dns-meta > span { overflow-wrap: anywhere; }
.tool-dns-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tool-dns-value { min-width: 12ch; }
.tool-dns-quiet { color: var(--fg-3); }
.tool-dns-values { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tool-dns-where { display: block; }
.tool-dns-ptr { display: block; overflow-wrap: anywhere; }
.tool-dns-kv { margin: 0; display: grid; }
.tool-dns-kv > div { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tool-dns-kv > div:last-child { border-bottom: 0; }
.tool-dns-kv dt { color: var(--fg-3); font-size: 13.5px; font-weight: 600; }
.tool-dns-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 14.5px; }
.tool-dns-kv-wide > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.tool-dns-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: start; }
.tool-dns-majority code { font-size: 14px; }
.tool-dns-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.tool-dns-hint a { color: var(--jade); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.tool-dns-hint svg { width: 16px; height: 16px; flex: none; }
.tool-dns-tag { margin-right: 6px; }
@media (max-width: 640px) {
    .tool-dns-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .tool-dns-table, .tool-dns-table tbody, .tool-dns-table tr, .tool-dns-table td { display: block; width: 100%; }
    .tool-dns-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
    .tool-dns-table tr:last-child { border-bottom: 0; }
    .tool-dns-table td, .tool-dns-table tr:last-child td { border: 0; padding: 3px 0; }
    .tool-dns-table td::before { content: attr(data-label); display: block; color: var(--fg-3); font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
    .tool-dns-num { text-align: left; }
    .tool-dns-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* What Is My IP: the address itself, large, in the hero */
.tool-dns-ip { display: grid; gap: 10px; max-width: 780px; }
.tool-dns-ip-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deep-fg-3); }
.tool-dns-ip-code { align-items: center; border: 1px solid var(--deep-line-2); }
.tool-dns-ip-code code { font-size: clamp(1.25rem, 5.4vw, 2.1rem); font-weight: 600; line-height: 1.25; color: var(--deep-fg); }
.tool-dns-ip-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-dns-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--deep-line-2); color: var(--deep-fg-2); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.tool-dns-chip.tool-mono { font-size: 12.5px; }
.tool-dns-chip.is-ok { color: var(--mint); border-color: rgb(45 212 191 / 0.4); }
.tool-dns-chip.is-warn { color: var(--amber); border-color: rgb(251 191 36 / 0.4); }
.tool-dns-checked { white-space: normal; }

/* ---- Tools: registry (WHOIS, domain age, name generator, Punycode) ---- */
.tool-reg-head h3 { gap: 10px 12px; }
.tool-reg-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.tool-reg-ascii { color: var(--fg-3); font-size: 13px; }
.tool-reg-facts { display: grid; gap: 0; margin: 0; }
.tool-reg-facts > div { display: grid; grid-template-columns: minmax(130px, 32%) 1fr; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.tool-reg-facts > div:last-child { border-bottom: 0; }
.tool-reg-facts dt { color: var(--fg-3); font-size: 13.5px; font-weight: 600; }
.tool-reg-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
@media (max-width: 560px) {
    .tool-reg-facts > div { grid-template-columns: 1fr; }
}
.tool-reg-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.tool-reg-grid > .tool-panel { align-content: start; }
.tool-reg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tool-reg-code { font-family: var(--font-mono); font-weight: 500; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.tool-reg-statuses { display: grid; margin: 0; }
.tool-reg-statuses > div { display: grid; grid-template-columns: minmax(200px, 34%) 1fr; gap: 6px 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tool-reg-statuses > div:last-child { border-bottom: 0; }
.tool-reg-statuses dd { margin: 0; color: var(--fg-2); font-size: 14.5px; }
@media (max-width: 560px) {
    .tool-reg-statuses > div { grid-template-columns: 1fr; }
}
.tool-reg-raw summary { cursor: pointer; font-weight: 700; font-size: 17px; }
.tool-reg-raw[open] summary { margin-bottom: 12px; }
.tool-reg-raw .tool-code pre { max-height: 32rem; overflow: auto; }
.tool-reg-headline { font-family: var(--font-display); font-size: clamp(1.25rem, 3.4vw, 1.75rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.tool-reg-hint { color: var(--deep-fg-3); font-size: 13.5px; }
.tool-reg-ideas td { vertical-align: middle; }
.tool-reg-idea { display: block; font-weight: 600; }
.tool-reg-why { display: block; margin-top: 2px; font-size: 12.5px; }
.tool-reg-act { text-align: right; white-space: nowrap; }
.tool-reg-act a:not(.btn) { color: var(--primary-text); font-weight: 600; font-size: 14px; }
.btn.tool-reg-btn { padding: 7px 14px; font-size: 13.5px; border-radius: 10px; background: var(--primary); color: var(--primary-fg); }
.btn.tool-reg-btn:hover { background: var(--primary-hover); }

/* ---- Tools: mail (MX/SPF/DMARC checker, SPF and DMARC generators, blocklists, verifier) ---- */
.tool-search .tool-mail-selector[type="text"] { flex: 0 1 210px; font-size: 14.5px; border-left: 1px solid var(--deep-line-2); }
.tool-mail-hint { color: var(--deep-fg-3); font-size: 13.5px; max-width: 70ch; }
.tool-mail-form { display: grid; gap: 18px; max-width: 880px; }
.tool-mail-field { display: grid; gap: 6px; min-width: 0; }
.tool-mail-field > label, .tool-mail-set > legend { color: var(--deep-fg); font-weight: 600; font-size: 14.5px; }
.tool-mail-input { width: 100%; min-width: 0; font: inherit; font-family: var(--font-mono); font-size: 15px; color: var(--deep-fg); background: rgb(255 255 255 / 0.06); border: 1px solid var(--deep-line-2); border-radius: 12px; padding: 10px 12px; }
textarea.tool-mail-input { resize: vertical; min-height: 84px; line-height: 1.5; }
select.tool-mail-input { font-family: var(--font-sans); }
.tool-mail-input::placeholder { color: var(--deep-fg-3); }
.tool-mail-input:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 4px rgb(45 212 191 / 0.15); }
.tool-mail-form select option { color: var(--fg); background: var(--surface); }
.tool-mail-set { border: 1px solid var(--deep-line); border-radius: 14px; padding: 12px 14px 14px; margin: 0; min-width: 0; display: grid; gap: 10px; }
.tool-mail-set > legend { padding: 0 6px; }
.tool-mail-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.tool-mail-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.tool-mail-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.tool-mail-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--deep-line-2); background: rgb(255 255 255 / 0.04); color: var(--deep-fg); cursor: pointer; min-width: 0; }
.tool-mail-check:hover { border-color: rgb(45 212 191 / 0.45); }
.tool-mail-check:focus-within { border-color: var(--jade); }
.tool-mail-check input { margin-top: 3px; flex: none; accent-color: var(--jade); width: 16px; height: 16px; }
.tool-mail-check > span { display: grid; gap: 2px; min-width: 0; }
.tool-mail-check strong { font-weight: 600; font-size: 14.5px; }
.tool-mail-check small { color: var(--deep-fg-3); font-size: 13px; overflow-wrap: anywhere; }
.tool-mail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tool-mail-errors { border: 1px solid var(--rose); border-radius: 12px; padding: 12px 14px; color: var(--rose); font-size: 14px; display: grid; gap: 6px; }
.tool-mail-errors ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.tool-mail-errors li { overflow-wrap: anywhere; }
.tool-mail-head { display: grid; gap: 4px; }
.tool-mail-title { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.tool-mail-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tool-mail-summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.tool-mail-summary a { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); color: var(--fg); text-decoration: none; height: 100%; }
.tool-mail-summary a:hover { border-color: var(--primary); }
.tool-mail-summary a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tool-mail-summary-name { font-weight: 700; font-size: 15px; }
.tool-mail-summary-line { color: var(--fg-2); }
.tool-panel[id^="mail-"] { scroll-margin-top: 96px; }
.tool-mail-sub { font-size: 14px; font-weight: 700; color: var(--fg-2); margin-top: 4px; }
.tool-mail-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tool-mail-finding { display: flex; gap: 10px; align-items: flex-start; color: var(--fg-2); font-size: 14.5px; overflow-wrap: anywhere; }
.tool-mail-mark { flex: none; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--fg-3); }
.tool-mail-finding.is-ok .tool-mail-mark { background: var(--success); }
.tool-mail-finding.is-warn .tool-mail-mark { background: var(--warning); }
.tool-mail-finding.is-no .tool-mail-mark { background: var(--danger); }
.tool-mail-finding.is-info .tool-mail-mark { background: var(--primary); }
.tool-mail-finding.is-unknown .tool-mail-mark { background: transparent; border: 2px solid var(--fg-3); }
.tool-mail-finding.is-no { color: var(--fg); }
.tool-mail-tree { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--line); display: grid; gap: 10px; }
.tool-mail-tree-top { padding-left: 0; border-left: 0; }
.tool-mail-node { display: grid; gap: 6px; min-width: 0; }
.tool-mail-node-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tool-mail-node-record { display: block; padding: 8px 10px; border-radius: 10px; background: var(--bg-subtle); border: 1px solid var(--line); color: var(--fg-2); font-size: 12.5px; }
.tool-mail-kv { display: grid; gap: 8px; margin: 0; }
.tool-mail-kv > div { display: grid; grid-template-columns: minmax(64px, max-content) 1fr; gap: 12px; align-items: baseline; }
.tool-mail-kv dt { color: var(--fg-3); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.tool-mail-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tool-mail-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--fg-2); }
.tool-mail-pair { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.tool-mail-verdict { display: grid; gap: 8px; padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.tool-mail-verdict.is-yes { border-color: var(--ok-line); }
.tool-mail-verdict.is-no { border-color: var(--danger); }
.tool-mail-verdict-address { font-size: 18px; font-weight: 600; color: var(--fg); }
.tool-mail-verdict-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--fg-2); }
@media (max-width: 560px) {
    .tool-search .tool-mail-selector[type="text"] { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--deep-line-2); }
    .tool-mail-kv > div { grid-template-columns: 1fr; gap: 2px; }
}
/* ---- Tools: DNS (continued): a resolver's row on a phone, its name and result on one line ---- */
@media (max-width: 640px) {
    .tool-dns-resolvers tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
    .tool-dns-resolvers td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .tool-dns-resolvers td:nth-child(4) { grid-column: 2; grid-row: 1; width: auto; }
    .tool-dns-resolvers td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .tool-dns-resolvers td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; color: var(--fg-3); font-size: 13px; }
    .tool-dns-resolvers td:nth-child(1)::before, .tool-dns-resolvers td:nth-child(2)::before, .tool-dns-resolvers td:nth-child(4)::before { content: none; }
    .tool-dns-resolvers td:nth-child(3)::before { display: inline; margin-right: 6px; }
}

/* ---- Tools: registry (continued): an idea's row on a phone, stacked ---- */
@media (max-width: 640px) {
    .tool-reg-ideas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .tool-reg-ideas, .tool-reg-ideas tbody { display: block; }
    .tool-reg-ideas tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .tool-reg-ideas tr:last-child { border-bottom: 0; }
    .tool-reg-ideas td { display: block; padding: 0; border: 0; min-width: 0; }
    .tool-reg-ideas td:first-child { grid-column: 1 / -1; }
    .tool-reg-ideas .tool-reg-act { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
}
/* ---- Tools: DNS (continued): record tables, the same widths on a desk and compact on a phone ---- */
@media (min-width: 641px) {
    .tool-dns-table:not(.tool-dns-resolvers) { table-layout: fixed; }
    .tool-dns-table:not(.tool-dns-resolvers) th:first-child { width: 32%; }
    .tool-dns-table:not(.tool-dns-resolvers) th.tool-dns-num { width: 96px; }
}
@media (max-width: 640px) {
    .tool-dns-records tr, .tool-dns-names tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
    .tool-dns-records td:nth-child(1), .tool-dns-names td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .tool-dns-records td:nth-child(3), .tool-dns-names td:nth-child(3) { grid-column: 2; grid-row: 1; width: auto; }
    .tool-dns-records td:nth-child(2), .tool-dns-names td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .tool-dns-records td:nth-child(1)::before, .tool-dns-records td:nth-child(2)::before, .tool-dns-names td:nth-child(1)::before, .tool-dns-names td:nth-child(3)::before { content: none; }
    .tool-dns-records td:nth-child(1) { color: var(--fg-3); }
    .tool-dns-records td:nth-child(3) { color: var(--fg-3); font-size: 13px; }
    .tool-dns-records td:nth-child(3)::before { display: inline; margin-right: 6px; }
}

/* ---- Tools: mail (continued): tables stacked on a phone, folded records ---- */
.tool-mail-zone { display: block; }
.tool-mail-more { display: grid; gap: 8px; }
.tool-mail-more > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--primary-text); width: fit-content; }
.tool-mail-more[open] > summary { margin-bottom: 8px; }
.tool-mail-more .tool-code + .tool-code { margin-top: 8px; }
@media (max-width: 640px) {
    .tool-mail-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .tool-mail-stack, .tool-mail-stack tbody, .tool-mail-stack tr, .tool-mail-stack td { display: block; width: 100%; }
    .tool-mail-stack tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
    .tool-mail-stack tr:last-child { border-bottom: 0; }
    .tool-mail-stack td { padding: 2px 0; border-bottom: 0; }
    .tool-mail-stack td[data-label]::before { content: attr(data-label); display: block; color: var(--fg-3); font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
    .tool-mail-stack .tool-mail-stack-head { font-weight: 600; padding-bottom: 4px; }
    .tool-mail-stack .tool-badge { white-space: normal; }
}

/* ---- Footer: the link columns two abreast on a phone, the brand above them ---- */
@media (max-width: 759px) {
    .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .foot-grid .fabout { grid-column: 1 / -1; }
    .fcol a, .fcol span { overflow-wrap: anywhere; }
}

/* ---- The sale (docs/offers.md): the banner's countdown, a price on sale, /offers ----
   Its own tokens, in both themes, beside the site's; everything else is the
   site's tokens. A sale element and the after-sale markup beside it are
   switched with `hidden` by public/js/offers.js, so nothing here may give
   one of them a display that outranks it. */
:root { --sale: #b4232c; --sale-bg: rgb(180 35 44 / 0.08); --sale-line: rgb(180 35 44 / 0.24); --sale-deep: #fda4af; --sale-deep-line: rgb(253 164 175 / 0.45); --cd-bg: rgb(3 38 34 / 0.12); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --sale: #fb7185; --sale-bg: rgb(251 113 133 / 0.12); --sale-line: rgb(251 113 133 / 0.3); }
}
:root[data-theme="dark"] { --sale: #fb7185; --sale-bg: rgb(251 113 133 / 0.12); --sale-line: rgb(251 113 133 / 0.3); }

[data-ends][hidden], [data-after][hidden], .countdown[hidden] { display: none !important; }

/* the banner: the sale's line is a link to /offers; its end is read out, its countdown drawn */
.promo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; }
.promo-go { color: inherit; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.promo-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.promo-go:focus-visible { outline: 2px solid var(--jade-ink); outline-offset: 2px; border-radius: 4px; }
.promo-go svg { width: 15px; height: 15px; }
.promo-when { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; }
.countdown { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--cd-bg); border-radius: 999px; padding: 2px 10px; }
.countdown .cd-in { font-family: var(--font-sans); font-weight: 500; }
/* while the countdown is drawn, the static end is for screen readers only */
.ticking > .promo-end { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* a price on sale: the regular one struck, the saving, the end */
.sale-now, .sale-after { display: grid; gap: 16px; }
em.sale-off, .was em.sale-off { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--sale); background: var(--sale-bg); border: 1px solid var(--sale-line); border-radius: 999px; padding: 2px 7px; margin-left: 6px; white-space: nowrap; }
.billed s, .sale-cell s, .sale-row s { color: var(--fg-3); text-decoration-thickness: 1px; }
.sale-ends { font-size: 12.5px; color: var(--sale); line-height: 1.45; }
.sale-ends time { font-family: var(--font-mono); font-size: 12px; }
.sale-cell { display: block; }
.sale-cell .sale-price { font-weight: 700; }
.sale-cell .sale-off { margin-left: 4px; }
.result .cost.on-sale { white-space: normal; }
.result .cost .sale-cell s { font-weight: 400; margin-right: 4px; }
td .sale-ends { display: block; margin-top: 2px; }
tr.on-sale th { color: var(--sale); font-weight: 600; }

/* the domain page's chips, on the deep band */
.tlds li.on-sale { border-color: var(--sale-deep-line); }
.tlds li.on-sale .sale-cell { display: inline; }
.tlds li.on-sale s { color: var(--deep-fg-3); margin-right: 4px; }
.tlds li.on-sale .sale-price { color: var(--sale-deep); font-weight: 600; }

/* /offers */
.offers-live, .offers-none { display: grid; gap: 16px; justify-items: center; }
.offers-none-title { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.offers-when { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; color: var(--deep-fg-2); }
.offers-when time { font-family: var(--font-mono); font-size: 14px; color: var(--deep-fg); }
.band.deep .countdown { font-size: 15px; padding: 5px 14px; color: var(--jade); background: rgb(45 212 191 / 0.1); border: 1px solid rgb(45 212 191 / 0.3); }
.sale-plans { display: grid; gap: 18px; }
.sale-plan, .sale-endings { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); min-width: 0; }
.sale-plan { padding: 22px 22px 8px; display: grid; gap: 8px; }
.sale-plan h3 { font-size: 1.25rem; font-weight: 700; }
.sale-plan .who { color: var(--fg-2); font-size: 14px; }
.sale-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.sale-endings { padding: 6px 22px; }
.sale-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 14px 0; border-top: 1px dashed var(--line-strong); min-width: 0; }
.sale-row:first-child { border-top: 0; }
.sale-row .k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.sale-row .st-term { font-weight: 600; }
.sale-row .st-tld { font-family: var(--font-mono); font-size: 1.05rem; }
.sale-row .st-price { font-variant-numeric: tabular-nums; }
.sale-row .sale-price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.sale-row .st-renew { font-size: 13.5px; color: var(--warning); font-variant-numeric: tabular-nums; }
.sale-row .btn { justify-self: start; }
@media (min-width: 760px) {
    .sale-row { grid-template-columns: 9rem minmax(0, 1.3fr) minmax(0, 1fr) auto; }
    .sale-endings .sale-row { grid-template-columns: 9rem minmax(0, 1.3fr) minmax(0, 1fr); }
    .sale-row .btn { justify-self: end; }
}
.offers-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
html:lang(bn) em.sale-off, html:lang(bn) .sale-row .k { letter-spacing: 0.02em; font-size: 12.5px; text-transform: none; line-height: 1.5; }