/* ========================================================= RKZ HOSTING — design tokens Concept: a domain "plugging into" the server. The hero and the wizard both use a literal connection-trace diagram (domain --CNAME--> host.rkzhosting.com --> server LED) as the signature element, since that trace IS the product. ========================================================= */ /* Font loading moved out of CSS (see includes/header.php) — an @import here would force the browser to discover and fetch the font stylesheet only after downloading and parsing this whole file, adding a serial round trip to every page load. A in with preconnect lets the browser start that fetch immediately, in parallel with this file. */ :root{ --ink:#0F1720; --ink-2:#16212B; --ink-3:#1E2C38; --paper:#F5F7F5; --paper-2:#EAEFEC; --text-on-ink:#E7EDEC; --text-on-ink-muted:#93A3AA; --text:#16212B; --muted:#5B6B70; --blue:#2F6FED; --blue-dim:#1F52B8; --green:#33D17A; --amber:#F5A623; --border:rgba(15,23,32,0.10); --border-ink:rgba(231,237,236,0.12); --radius:10px; --font-display:'Space Grotesk',sans-serif; --font-body:'IBM Plex Sans',sans-serif; --font-mono:'IBM Plex Mono',monospace; --shadow:0 8px 24px rgba(15,23,32,0.08); --maxw:1120px; } *{box-sizing:border-box;} /* Always reserve the vertical scrollbar's width, whether or not this particular page is tall enough to need one — otherwise short pages render a few pixels wider than tall ones, and switching between this site and the portal (which reserves it the same way) visibly shifts the layout. */ html{scroll-behavior:smooth;overflow-y:scroll;scrollbar-gutter:stable;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;} } body{ margin:0; font-family:var(--font-body); color:var(--text); background:var(--paper); font-size:16px; line-height:1.55; } h1,h2,h3,h4{ font-family:var(--font-display); color:var(--text); line-height:1.1; margin:0 0 .5em; letter-spacing:-0.01em; } a{color:var(--blue); text-decoration:none;} a:hover{text-decoration:underline;} code, .mono{font-family:var(--font-mono);} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;} :focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; } /* ---------- NAV ---------- */ .site-nav{ position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border-ink); } /* Anchor targets (footer/FAQ deep links like #scope, #dns) would otherwise land flush behind this 72px sticky nav — matches .site-nav .wrap's own height below, plus a little breathing room. */ h1[id], h2[id], h3[id]{scroll-margin-top:92px;} /* The frosted-glass background lives on a pseudo-element, not .site-nav itself — backdrop-filter (like transform) makes whichever real element carries it the containing block for any position:fixed descendant. .nav-links below is exactly that on mobile (a fixed full-screen overlay); with the filter directly on .site-nav, "fixed" resolved relative to .site-nav's own 72px-tall box instead of the viewport, collapsing the open menu to no visible height. A pseudo-element isn't an ancestor of .site-nav's real children, so it can't do that. */ .site-nav::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(15,23,32,0.92); backdrop-filter:blur(8px); } .site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; } .brand{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:800; color:var(--text-on-ink); font-size:26px; } .brand:hover{text-decoration:none;} .brand img{width:44px; height:44px; filter:drop-shadow(0 0 1px rgba(255,255,255,0.35));} .brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(51,209,122,0.18); } .nav-links{display:flex; align-items:center; gap:32px;} .nav-links a{ color:var(--text-on-ink-muted); font-size:16px; font-weight:600; } .nav-links a:hover{color:var(--text-on-ink); text-decoration:none;} .nav-cta{ background:var(--blue); color:#fff !important; padding:12px 22px; border-radius:9px; font-weight:600; font-size:15.5px; } .nav-cta:hover{background:var(--blue-dim); text-decoration:none;} .nav-toggle{display:none;} @media (max-width:820px){ .nav-links{ position:fixed; inset:72px 0 0 0; background:var(--ink); flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 24px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .nav-links.open{opacity:1; pointer-events:auto; transform:translateY(0);} .nav-links a{width:100%; padding:14px 0; border-bottom:1px solid var(--border-ink);} .nav-cta{margin-top:14px;} .nav-toggle{ display:block; background:none; border:none; color:var(--text-on-ink); font-size:22px; cursor:pointer; padding:4px 8px; } } /* ---------- HERO ---------- */ .hero{ background: radial-gradient(900px 420px at 85% -10%, rgba(47,111,237,0.25), transparent 60%), var(--ink); color:var(--text-on-ink); padding:72px 0 88px; } .eyebrow{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:16px; display:flex; align-items:center; gap:8px; } .eyebrow::before{content:"●"; font-size:9px;} .hero h1{ font-size:clamp(32px, 5vw, 52px); max-width:16ch; color:#fff; } .hero .lede{ color:var(--text-on-ink-muted); font-size:18px; max-width:52ch; margin:18px 0 34px; } .hero-grid{display:grid; grid-template-columns:1fr 1.18fr; gap:40px; align-items:center;} @media (max-width:900px){.hero-grid{grid-template-columns:1fr;} } .btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; padding:13px 22px; border-radius:9px; border:1px solid transparent; cursor:pointer; font-family:var(--font-body); } .btn:hover{text-decoration:none;} .btn-primary{background:var(--blue); color:#fff;} .btn-primary:hover{background:var(--blue-dim);} .btn-ghost{background:transparent; border-color:var(--border-ink); color:var(--text-on-ink);} .btn-ghost:hover{background:rgba(255,255,255,0.06);} .btn-dark{background:var(--ink); color:#fff;} .btn-dark:hover{background:#000;} .btn-row{display:flex; gap:14px; flex-wrap:wrap;} .btn[disabled]{opacity:.5; cursor:not-allowed;} .btn-sm{padding:8px 14px; font-size:13.5px; border-radius:7px;} /* ---------- CONNECTION TRACE (signature element) ---------- */ .trace{ background:var(--ink-2); border:1px solid var(--border-ink); border-radius:14px; padding:22px 18px; font-family:var(--font-mono); overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--border-ink) transparent; } .trace::-webkit-scrollbar{height:5px;} .trace::-webkit-scrollbar-thumb{background:var(--border-ink); border-radius:3px;} .trace::-webkit-scrollbar-track{background:transparent;} .trace-row{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-on-ink-muted); flex-wrap:nowrap; } .trace-node{ background:var(--ink-3); border:1px solid var(--border-ink); border-radius:7px; padding:7px 10px; color:var(--text-on-ink); font-size:12px; white-space:nowrap; flex-shrink:0; } .trace-line{ flex:1 1 auto; min-width:14px; height:1px; background:var(--border-ink); position:relative; margin:0 1px; overflow:visible; } .trace-line::after{ content:""; position:absolute; top:-2px; left:0; width:6px; height:5px; background:var(--green); border-radius:1px; animation:trace-pulse 2.6s linear infinite; } @keyframes trace-pulse{ 0%{left:0; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{left:calc(100% - 6px); opacity:0;} } /* Below ~480px there isn't room for 3 nodes + 2 lines on one row even at the smallest sensible font size. Rather than let flex-wrap silently orphan the last node (which is the bug that made the connector look "cut"), switch explicitly to a stacked layout with vertical connectors. */ @media (max-width:480px){ .trace-row{flex-direction:column; align-items:stretch; gap:0;} .trace-node{white-space:normal;} .trace-line{ width:1px; height:20px; min-width:0; margin:0 0 0 20px; } .trace-line::after{ top:0; left:-2px; width:5px; height:6px; animation-name:trace-pulse-vertical; } @keyframes trace-pulse-vertical{ 0%{top:0; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{top:calc(100% - 6px); opacity:0;} } } .led{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px;} .led-green{background:var(--green); box-shadow:0 0 0 3px rgba(51,209,122,0.18);} .led-amber{background:var(--amber); box-shadow:0 0 0 3px rgba(245,166,35,0.18);} .led-off{background:#3A4650;} .trace-status{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border-ink); display:flex; align-items:center; font-size:13px; color:var(--text-on-ink-muted); } /* ---------- SECTIONS ---------- */ section{padding:76px 0;} .section-head{max-width:640px; margin:0 0 44px;} .section-head .eyebrow{color:var(--blue-dim); } .on-ink .section-head .eyebrow{color:var(--green);} .section-head h2{font-size:clamp(26px,3.4vw,36px);} .section-head p{color:var(--muted); font-size:16.5px;} .on-ink{background:var(--ink); color:var(--text-on-ink);} .on-ink h2, .on-ink h3{color:#fff;} .on-ink p{color:var(--text-on-ink-muted);} .on-alt{background:var(--paper-2);} /* ---------- STEPS ---------- */ .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;} @media (max-width:820px){.steps{grid-template-columns:1fr;}} /* #built-in's card row has 4 items (AI Site Builder added alongside the original 3) — scoped to this section's id rather than changing .steps itself, which the "How it works" section above still uses at 3. */ #built-in .steps{grid-template-columns:repeat(4,1fr);} @media (max-width:980px){#built-in .steps{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){#built-in .steps{grid-template-columns:1fr;}} .step{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:26px; position:relative; } .step .num{ font-family:var(--font-mono); color:var(--blue); font-weight:600; font-size:13px; display:block; margin-bottom:10px; } .step h3{font-size:18px; margin-bottom:8px;} .step p{color:var(--muted); font-size:14.5px; margin:0;} /* ---------- SPEC SHEET (original horizontal layout — homepage only) ---------- */ .spec-card{ background:var(--ink); color:var(--text-on-ink); border-radius:16px; padding:36px; border:1px solid var(--border-ink); max-width:750px; margin:0 auto; } .spec-title{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:26px;} .spec-title h3{color:#fff; font-size:22px; margin:0;} .spec-title .tag{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--green); border:1px solid rgba(51,209,122,0.35); border-radius:20px; padding:4px 10px; text-transform:uppercase; } .spec-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px;} @media (max-width:560px){.spec-list{grid-template-columns:1fr;}} .spec-list li{ display:flex; justify-content:space-between; gap:10px; font-size:14.5px; padding-bottom:14px; border-bottom:1px solid var(--border-ink); color:var(--text-on-ink-muted); } .spec-list li b{color:#fff; font-family:var(--font-mono); font-weight:600; font-size:14px;} /* .spec-list is normally used inside a dark card (.spec-card on the homepage); order.php's wizard is a white card, so the dark-tuned text/border colors above are near-invisible there — this modifier swaps them for light-background equivalents. */ .spec-list.on-paper li{color:var(--muted); border-bottom-color:var(--border);} .spec-list.on-paper li b{color:var(--text);} .price-block{ margin-top:30px; padding-top:26px; border-top:1px solid var(--border-ink); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; } .price{font-family:var(--font-mono); font-size:40px; color:#fff; font-weight:600;} .price span{font-size:16px; color:var(--text-on-ink-muted); font-weight:400;} .price-note{font-size:12.5px; color:var(--text-on-ink-muted); margin-top:4px;} /* ---------- PLAN CARD (vertical — pricing page carousel only; the homepage uses the horizontal .plan-row instead, see below) ---------- */ /* 430px — the tightest width that doesn't wrap the longest real feature line, "Cloudflare edge protection (origin IP private)": measured against the actual IBM Plex Sans webfont (imagettfbbox, corrected for GD's points-vs-96dpi-pixels quirk) at 293px text + 12px checkmark + 10px gap = 315px content, + this card's own 72px horizontal padding = 387px minimum, +~40px safety margin for real-browser rendering variance vs. this estimate. Sits inside .plans-carousel-item (the actual flex child in that context, fixed to the same 430px) — not a flex child itself here, so its own sizing is just this max-width, nothing else. */ .plan-card{ position:relative; background:var(--ink); color:var(--text-on-ink); border:1px solid var(--border-ink); border-radius:20px; padding:40px 36px; max-width:430px; } .plan-badge{ position:absolute; top:28px; right:28px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--green); border:1px solid rgba(51,209,122,0.35); border-radius:20px; padding:5px 12px; } .plan-card h3{color:#fff; font-size:24px; margin-bottom:6px; padding-right:110px;} .plan-sub{color:var(--text-on-ink-muted); font-size:14.5px; margin:0 0 28px;} .plan-price{display:flex; align-items:flex-end; gap:6px; margin-bottom:4px;} .plan-price .cur{font-family:var(--font-mono); font-size:22px; color:#fff; font-weight:600; padding-bottom:9px;} .plan-price .amt{font-family:var(--font-mono); font-size:46px; color:#fff; font-weight:700; line-height:1;} .plan-period{color:var(--text-on-ink-muted); font-size:13px; margin:0 0 8px;} .plan-note{font-size:12px; color:var(--text-on-ink-muted); margin:0 0 24px;} .plan-cta{ display:block; width:100%; text-align:center; background:var(--green); color:#08210F; font-weight:700; font-size:15.5px; padding:14px; border-radius:999px; margin-bottom:30px; } .plan-cta:hover{background:#28BB68; text-decoration:none;} .plan-list{list-style:none; margin:0; padding:0;} .plan-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--text-on-ink-muted); padding:12px 0; border-top:1px solid var(--border-ink); } .plan-list li:first-child{border-top:none;} .plan-list li .check{color:var(--green); flex-shrink:0; font-weight:700;} .plan-list li b{color:#fff; font-weight:600;} /* ---------- PLAN ROWS (horizontal — homepage only) ---------- */ /* Deliberately a different shape from .plan-card above: one horizontal row per plan (info | features | price+CTA) stacked in a simple vertical list, not a grid/carousel of vertical cards — see rkz_plan_row_html() and includes/plan-list.php. */ .plan-rows{display:flex; flex-direction:column; gap:16px;} .plan-row{ display:flex; align-items:center; gap:28px; background:var(--ink); color:var(--text-on-ink); border:1px solid var(--border-ink); border-radius:16px; padding:24px 30px; } .plan-row-info{flex:0 0 230px;} .plan-row-heading{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .plan-row-heading h3{color:#fff; font-size:19px; margin:0;} .plan-row-badge{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--green); border:1px solid rgba(51,209,122,0.35); border-radius:20px; padding:3px 10px; } .plan-row-tagline{color:var(--text-on-ink-muted); font-size:13px; margin:6px 0 0;} .plan-row-features{ flex:1; list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; } .plan-row-features li{ display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:13.5px; color:var(--text-on-ink-muted); } .plan-row-features li .check{color:var(--green); font-weight:700; flex-shrink:0;} .plan-row-features li b{color:#fff; font-weight:600;} .plan-row-price{flex:0 0 auto; text-align:right;} .plan-row-amount{font-family:var(--font-mono); color:#fff; white-space:nowrap;} .plan-row-amount .cur{font-size:16px; font-weight:600;} .plan-row-amount .amt{font-size:26px; font-weight:700;} .plan-row-amount .period{font-size:13px; color:var(--text-on-ink-muted); font-family:var(--font-body);} .plan-row-note{font-size:11.5px; color:var(--text-on-ink-muted); margin:2px 0 10px;} .plan-row-cta{ display:inline-block; white-space:nowrap; background:var(--green); color:#08210F; font-weight:700; font-size:14px; padding:10px 22px; border-radius:999px; } .plan-row-cta:hover{background:#28BB68; text-decoration:none;} @media (max-width:860px){ .plan-row{flex-wrap:wrap; align-items:flex-start;} .plan-row-info{flex-basis:100%;} .plan-row-features{flex-basis:100%; order:3;} .plan-row-price{flex:1 1 auto; text-align:left; order:2;} } /* ---------- PLANS CAROUSEL (pricing page — more than 3 active plans) ---------- */ /* .plans-carousel-item gets a fixed width (matching .plan-card's own max-width above, 430px — see that rule's comment for how that number was measured) rather than .plan-card's max-width alone deciding it, so it doesn't fight the track's native overflow-x scrolling by trying to grow/shrink. No narrower override on small viewports — the track already scrolls/swipes at any width, so there's no reason to shrink the card and reintroduce the text-wrapping this width was sized to avoid just because the screen is narrow. */ .plans-carousel{position:relative; display:flex; align-items:center; justify-content:center; gap:14px;} .plans-carousel-track{ display:flex; gap:24px; overflow-x:auto; scroll-behavior:smooth; padding:6px 2px; scrollbar-width:none; } .plans-carousel-track::-webkit-scrollbar{display:none;} .plans-carousel-item{flex:0 0 430px;} .plans-carousel-arrow{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; border:1px solid var(--border-ink); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; } .plans-carousel-arrow:hover{background:var(--green); color:#08210F;} .plans-carousel-arrow:disabled{opacity:.3; cursor:default; background:var(--ink); color:#fff;} /* ---------- SCOPE / HONESTY GRID ---------- */ .scope-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;} @media (max-width:760px){.scope-grid{grid-template-columns:1fr;}} .scope-card{ border-radius:var(--radius); padding:26px; border:1px solid var(--border); background:#fff; } .scope-card h3{font-size:16px; margin-bottom:14px; display:flex; align-items:center; gap:8px;} .scope-card ul{margin:0; padding-left:18px; color:var(--muted); font-size:14.5px;} .scope-card ul li{margin-bottom:8px;} .scope-yes h3{color:#177A45;} .scope-no h3{color:#A03A21;} /* ---------- FAQ ---------- */ .faq-item{border-bottom:1px solid var(--border);} .faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:20px 0; font-family:var(--font-display); font-weight:600; font-size:16.5px; display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--text); } .faq-q .chev{transition:transform .18s ease; color:var(--muted); flex-shrink:0;} .faq-item.open .chev{transform:rotate(45deg);} .faq-a{ max-height:0; overflow:hidden; transition:max-height .22s ease; color:var(--muted); font-size:15px; } .faq-item.open .faq-a{padding-bottom:20px;} .faq-a-inner{padding-top:2px;} .callout{ border-left:3px solid var(--blue); background:var(--paper-2); padding:14px 16px; border-radius:0 8px 8px 0; font-size:14.5px; margin-top:12px; } .callout.warn{border-left-color:var(--amber);} /* ---------- WIZARD (order.php) ---------- */ .wizard{ background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; } /* Persistent reminder of which plan this order is for — the hero's own eyebrow text above the wizard said this too, but easy to scroll past without noticing; this sits inside the wizard card itself, visible on both steps. */ .wizard-plan-note{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 20px; font-size:13px; color:var(--muted); background:var(--paper); border-bottom:1px solid var(--border); } .wizard-plan-note b{color:var(--text);} .wizard-plan-note a{font-size:12.5px; white-space:nowrap;} .wizard-steps{ display:flex; background:var(--paper-2); border-bottom:1px solid var(--border); } .wizard-steps .ws{ flex:1; text-align:center; padding:14px 8px; font-size:13px; font-weight:600; color:var(--muted); font-family:var(--font-mono); border-bottom:2px solid transparent; text-decoration:none; display:block; } .wizard-steps a.ws:hover{color:var(--text); background:var(--paper-2); cursor:pointer;} .wizard-steps .ws.active{color:var(--blue); border-bottom-color:var(--blue); background:#fff;} .wizard-body{padding:34px;} @media (max-width:600px){.wizard-body{padding:22px;}} .field{margin-bottom:18px;} .field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px;} .field input[type=text], .field input[type=email]{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:8px; font-size:15px; font-family:var(--font-mono); } .field input:focus{border-color:var(--blue);} .field input[readonly]{background:var(--paper-2); color:var(--muted); cursor:default;} .hint{font-size:12.5px; color:var(--muted); margin-top:6px;} .dns-result{ margin:18px 0; border-radius:10px; padding:16px 18px; font-family:var(--font-mono); font-size:13.5px; display:none; } .dns-result.show{display:block;} .dns-result.ok{background:#EAF9F0; border:1px solid #B7E9CB; color:#177A45;} .dns-result.fail{background:#FCEFED; border:1px solid #F2C4BB; color:#A03A21;} .dns-result.pending{background:var(--paper-2); border:1px solid var(--border); color:var(--muted);} /* ---------- FOOTER ---------- */ footer{background:var(--ink); color:var(--text-on-ink-muted); padding:56px 0 30px; font-size:14px;} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;} @media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}} .footer-grid h4{color:#fff; font-size:13px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;} .footer-grid a{color:var(--text-on-ink-muted); display:block; margin-bottom:10px; font-size:14px;} .footer-grid a:hover{color:#fff;} .footer-grid .footer-social-link{display:flex; align-items:center; gap:7px; width:max-content; color:#1877F2;} .footer-grid .footer-social-link:hover{color:#60A5FA;} .footer-social-link svg{width:16px; height:16px; flex:none;} .footer-bottom{ margin-top:44px; padding-top:24px; border-top:1px solid var(--border-ink); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; } /* ---------- BLOCK / GEO NOTICE ---------- */ .geo-banner{ background:var(--amber); color:#3A2B00; font-size:13.5px; text-align:center; padding:9px 16px; font-weight:600; } .promo-banner{ background:linear-gradient(90deg, #103823, #0F1720); color:#fff; border-bottom:1px solid rgba(51,209,122,0.3); font-size:14px; text-align:center; padding:12px 16px; } .promo-banner b{color:var(--green);} .promo-banner a{color:#fff; text-decoration:underline; font-weight:600; margin-left:6px;} .promo-banner code{background:rgba(255,255,255,0.12); padding:2px 7px; border-radius:5px; font-size:12.5px;} .blocked-page{ min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:60px 24px; } .blocked-page .box{max-width:480px;} .blocked-page .code{font-family:var(--font-mono); color:var(--muted); font-size:13px; margin-top:18px;} /* ---------- LEGAL PAGES ---------- */ .legal{max-width:760px; margin:0 auto; padding:56px 24px 90px;} .legal .updated{font-family:var(--font-mono); font-size:12.5px; color:var(--muted); margin-bottom:36px;} .legal h2{font-size:19px; margin-top:38px;} .legal p, .legal li{color:var(--text); font-size:15.5px; line-height:1.7;} .legal ul{padding-left:20px;} /* ---------- MISC ---------- */ .pill{ display:inline-block; font-family:var(--font-mono); font-size:11.5px; background:var(--paper-2); border:1px solid var(--border); border-radius:20px; padding:4px 10px; color:var(--muted); } .center{text-align:center;} .mt-0{margin-top:0;}