:root { color-scheme: light; }

.marketing-site {
    --font-sans: "Inter", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
    --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
    --brand-navy: #11182a;
    --brand-pink: #f81f5c;
    --brand-pink-hover: #d90f49;
    --brand-focus-ring: rgba(248, 31, 92, .25);
    --ink: #141414;
    --muted: #686763;
    --paper: #f5f2ec;
    --white: #fffefa;
    --pink: var(--brand-pink);
    --pink-dark: var(--brand-pink-hover);
    --acid: #c7ff4a;
    --line: #d8d4cc;
    min-height: 100vh;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
}

.marketing-site *, .marketing-site *::before, .marketing-site *::after { box-sizing: border-box; }
.marketing-site a { color: inherit; text-decoration: none; }
.marketing-site img { display: block; }
.marketing-site h1, .marketing-site h2, .marketing-site h3, .marketing-site p { margin-top: 0; }
.shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid #dedbd4; background: rgba(255,254,250,.96); color: var(--ink); backdrop-filter: blur(18px); }
.header-inner { position: relative; display: grid; min-height: 82px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 38px; }
.brand { display: inline-flex; width: max-content; align-items: center; gap: 11px; font-size: 17px; font-weight: 780; letter-spacing: -.035em; }
.brand img { border-radius: 7px; }
.header-brand img { box-shadow: 0 5px 15px rgba(255,37,95,.2); }
.desktop-nav { display: flex; height: 82px; align-items: center; gap: 4px; color: #4f4e4a; font-size: 13px; font-weight: 610; }
.desktop-nav > a, .nav-dropdown > summary { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 0 14px; border-radius: 8px; cursor: pointer; list-style: none; transition: color .18s ease, background .18s ease; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary svg { width: 9px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .18s ease; }
.nav-dropdown[open] > summary svg { transform: rotate(180deg); }
.desktop-nav > a:hover, .nav-dropdown > summary:hover, .nav-dropdown[open] > summary { background: #f0ede7; color: var(--ink); }
.nav-external { color: #8e8b84; font-size: 10px; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 24px; font-size: 13px; font-weight: 650; }
.header-actions > a:first-child { color: #5d5b56; transition: color .18s ease; }
.header-actions > a:first-child:hover { color: var(--pink-dark); }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 13px; padding: 0 22px; border: 1px solid transparent; font-size: 13px; font-weight: 720; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-small { min-height: 39px; padding: 0 17px; }
.button-dark { border-color: var(--ink); background: var(--ink); color: white !important; }
.button-dark:hover { border-color: var(--pink); background: var(--pink); color: var(--brand-navy) !important; }
.button-primary { border-color: var(--pink); background: var(--pink); color: white !important; }
.button-primary:hover { border-color: var(--pink-dark); background: var(--pink-dark); color: white !important; }
.button-white { border-color: white; background: white; color: var(--ink) !important; }
.button-white:hover { border-color: var(--brand-pink); background: var(--brand-pink); color: var(--brand-navy) !important; }
.button-outline { border-color: #c8c4bc; background: transparent; color: var(--ink) !important; }
.button-outline:hover { border-color: var(--ink); }
.site-header .button-dark { min-height: 44px; border-color: var(--ink); border-radius: 8px; background: var(--ink); color: white !important; box-shadow: 0 5px 15px rgba(20,20,20,.12); }
.site-header .button-dark:hover { border-color: var(--pink-dark); background: var(--pink-dark); box-shadow: 0 7px 20px rgba(248,31,92,.2); color: white !important; }
.nav-dropdown { position: static; }
.nav-mega { position: absolute; top: 72px; left: 50%; width: min(900px, calc(100vw - 48px)); border: 1px solid #d4d0c8; border-radius: 14px; background: var(--white); box-shadow: 0 25px 70px rgba(23,21,18,.17), 0 2px 8px rgba(23,21,18,.06); color: var(--ink); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .16s ease, transform .16s ease; }
.nav-dropdown[open] .nav-mega { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.nav-mega-product { display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; }
.nav-mega-main { padding: 30px; background: #f1eee8; }
.nav-eyebrow { color: #8b8881; font: 750 9px ui-monospace, monospace; letter-spacing: .12em; }
.nav-feature { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; margin-top: 20px; padding: 17px; border: 1px solid #cac6be; border-radius: 10px; background: var(--white); transition: border-color .18s ease, transform .18s ease; }
.nav-feature:hover { border-color: var(--pink); transform: translateY(-2px); }
.nav-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 8px; background: var(--pink); }
.nav-icon img { width: 27px; }
.nav-feature strong, .nav-feature small { display: block; }
.nav-feature strong { margin-bottom: 4px; font-size: 14px; }
.nav-feature small { color: #77746e; font-size: 11px; font-weight: 500; }
.nav-feature > b { color: var(--pink); }
.nav-route { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; margin-top: 24px; color: #76736d; font: 650 8px ui-monospace, monospace; text-transform: uppercase; }
.nav-route i { height: 1px; background: #bbb7af; }
.nav-route b { color: var(--pink); }
.nav-mega-links { display: grid; grid-template-columns: 1fr 1fr; padding: 16px; }
.nav-mega-links a { display: grid; grid-template-columns: 30px 1fr; align-content: center; min-height: 114px; padding: 20px; border-radius: 9px; transition: background .18s ease; }
.nav-mega-links a:hover { background: #f3f0ea; }
.nav-mega-links span { grid-row: 1 / 3; color: var(--pink); font: 750 9px ui-monospace, monospace; }
.nav-mega-links strong { margin-bottom: 5px; font-size: 14px; }
.nav-mega-links small { color: #7d7a74; font-size: 11px; font-weight: 500; }
.nav-mega-solutions { display: grid; grid-template-columns: 1fr 1fr 1fr; overflow: hidden; padding: 14px; }
.nav-mega-solutions > a { display: flex; min-height: 230px; flex-direction: column; padding: 25px; border-right: 1px solid #ddd9d1; border-radius: 9px; transition: background .18s ease; }
.nav-mega-solutions > a:last-child { border-right: 0; }
.nav-mega-solutions > a:hover { background: #f3f0ea; }
.nav-mega-solutions span { color: var(--pink); font: 750 9px ui-monospace, monospace; letter-spacing: .1em; }
.nav-mega-solutions strong { margin: 50px 0 10px; font-size: 18px; letter-spacing: -.025em; line-height: 1.2; }
.nav-mega-solutions small { color: #77746e; font-size: 11px; font-weight: 500; line-height: 1.5; }
.nav-mega-solutions b { margin-top: auto; font-size: 11px; }
.mobile-menu { display: none; justify-self: end; }
.mobile-menu summary { display: grid; width: 40px; height: 40px; cursor: pointer; place-content: center; gap: 6px; border: 1px solid transparent; border-radius: 8px; outline: 0; list-style: none; }
.mobile-menu summary:focus-visible { border-color: rgba(255,37,95,.55); box-shadow: 0 0 0 3px rgba(255,37,95,.1); }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span { width: 22px; height: 1.5px; background: var(--ink); transition: transform .18s ease; }
.mobile-menu[open] summary span:first-child { transform: translateY(3.75px) rotate(45deg); }
.mobile-menu[open] summary span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.mobile-menu nav { position: absolute; top: 82px; right: -24px; left: -24px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; max-height: calc(100vh - 82px); overflow-y: auto; padding: 25px 24px 32px; border-bottom: 1px solid #d4d0c8; background: var(--white); box-shadow: 0 18px 40px rgba(20,20,20,.12); font-size: 14px; font-weight: 650; }
.mobile-menu nav > p { grid-column: 1 / -1; margin: 14px 0 8px; color: #9a9790; font: 750 9px ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.mobile-menu nav > a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #ece9e3; }
.mobile-actions { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 25px; margin-top: 26px; padding-top: 24px; border-top: 1px solid #d8d4cc; }
.mobile-actions .button { width: 100%; }

.hero { position: relative; padding: 106px 0 102px; background-color: #111114; background-image: radial-gradient(circle at 78% 44%, rgba(255,37,95,.14), transparent 26%), radial-gradient(rgba(255,255,255,.08) .7px, transparent .7px); background-size: auto, 22px 22px; color: white; }
.hero::after { position: absolute; inset: auto 0 0; height: 1px; background: #34343a; content: ""; }
.hero-route-label { position: absolute; top: 31px; right: 0; left: 0; display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: 12px; width: min(1180px, calc(100% - 48px)); margin: 0 auto; color: #77777e; font: 700 8px ui-monospace, monospace; letter-spacing: .12em; }
.hero-route-label i { height: 1px; background: #38383d; }
.hero-route-label b { color: var(--pink); font-weight: 700; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, .82fr); align-items: center; gap: 88px; }
.overline { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; color: #4e4d48; font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; text-transform: uppercase; }
.overline > span { width: 26px; height: 2px; background: var(--pink); }
.hero h1 { max-width: 720px; margin-bottom: 29px; font-size: clamp(58px, 6.5vw, 88px); font-weight: 760; letter-spacing: -.072em; line-height: .94; }
.hero-lead { max-width: 650px; margin-bottom: 34px; color: #a7a7ae; font-size: 19px; line-height: 1.63; }
.hero-lead strong { color: white; font-weight: 670; }
.hero .overline { color: #a4a4aa; }
.hero-actions { display: flex; align-items: center; gap: 27px; }
.text-action { display: inline-flex; align-items: center; gap: 10px; border-bottom: 1px solid #9c9992; padding-bottom: 3px; font-size: 13px; font-weight: 720; }
.hero .text-action { border-color: #66666d; color: white; }
.text-action:hover { border-color: var(--pink-dark); color: var(--pink-dark); }
.hero-footnote { margin: 18px 0 0; color: #74747b; font-size: 11px; }

.route-board { border: 1px solid #58585f; background: #17171b; box-shadow: 14px 14px 0 var(--pink); color: white; }
.board-head, .board-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.board-head { height: 50px; border-bottom: 1px solid #45454b; color: #aaaab0; }
.board-head strong { display: flex; align-items: center; gap: 7px; color: #12864a; }
.board-head i { width: 7px; height: 7px; border-radius: 50%; background: #24bd6c; box-shadow: 0 0 0 3px rgba(36,189,108,.13); }
.route-flow { padding: 18px 24px 24px; }
.route-node { display: grid; min-height: 76px; grid-template-columns: 42px 1fr auto; align-items: center; gap: 15px; padding: 14px; border: 1px solid #3e3e44; background: #1e1e23; }
.route-node-edge { border-color: rgba(255,37,95,.8); background: #26191f; }
.node-index { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #4d4d54; background: #27272d; font: 700 10px ui-monospace, monospace; }
.node-index img { width: 24px; height: 24px; }
.route-node small, .route-node strong { display: block; }
.route-node small { margin-bottom: 5px; color: #77777f; font: 700 8px ui-monospace, monospace; letter-spacing: .08em; }
.route-node strong { font: 650 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.node-state { color: #16874d; font: 700 9px ui-monospace, monospace; }
.route-connector { position: relative; display: grid; height: 42px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; padding-left: 30px; }
.route-connector span:first-child { width: 1px; height: 100%; background: #77777e; justify-self: center; }
.route-connector span:last-child { height: 1px; background: #3a3a40; }
.route-connector i { color: #918e86; font: 700 8px ui-monospace, monospace; font-style: normal; }
.route-connector b { position: absolute; top: -2px; left: 45px; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: var(--pink); animation: connector-flow 2.4s ease-in-out infinite; }
.board-foot { min-height: 45px; border-top: 1px solid #45454b; color: #77777e; font-weight: 550; letter-spacing: 0; }

.domain-simulator { padding: 18px 24px 0; }
.domain-simulator label { display: block; margin-bottom: 8px; color: #8c8c94; font: 700 8px ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; }
.simulator-control { display: grid; grid-template-columns: auto 1fr auto; min-height: 48px; align-items: center; border: 1px solid #4b4b52; background: #0f0f12; }
.simulator-control > span { padding-left: 14px; color: #66666e; font: 11px ui-monospace, monospace; }
.simulator-control input { min-width: 0; height: 46px; border: 0; outline: 0; padding: 0 5px; background: transparent; color: white; font: 650 12px ui-monospace, monospace; }
.simulator-control input[aria-invalid="true"] { color: #ff789d; }
.simulator-control button { align-self: stretch; border: 0; padding: 0 16px; background: var(--pink); color: white; cursor: pointer; font-size: 10px; font-weight: 750; }
.simulator-control button:disabled { cursor: wait; opacity: .6; }
.domain-simulator p { margin: 7px 0 0; color: #77777e; font-size: 9px; }
.route-node[data-state="waiting"] { opacity: .42; }
.route-node[data-state="running"] { border-color: #d4a521; }
.route-node[data-state="running"] .node-state { color: #f3bf2e; }
.route-node[data-state="done"] { border-color: #288f5b; }
.route-board.is-running .board-head strong { color: #f3bf2e; }
.route-board.is-running .board-head strong i { background: #f3bf2e; box-shadow: 0 0 0 3px rgba(243,191,46,.13); }

.signal-strip { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--acid); color: var(--ink); }

.section { padding: 130px 0; }
.product-section { background: var(--white); }
.section-intro { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 90px; align-items: end; margin-bottom: 76px; }
.section-intro .overline { grid-column: 1 / -1; }
.section-intro h2, .details-title h2, .pricing-head h2, .final-cta h2, .developer-copy h2 { margin-bottom: 0; font-size: clamp(43px, 5vw, 66px); font-weight: 730; letter-spacing: -.058em; line-height: 1; }
.section-intro > p:last-child { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.steps-list { position: relative; border-top: 1px solid var(--ink); }
.steps-list::before { position: absolute; top: 75px; bottom: 75px; left: 14px; width: 1px; background: #bdb9b1; content: ""; }
.route-tracer { position: absolute; top: 75px; left: 10px; z-index: 3; width: 9px; height: 9px; border: 2px solid var(--white); border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 1px var(--pink); animation: story-flow 8s cubic-bezier(.65,0,.35,1) infinite; }
.step-row { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 86px; min-height: 390px; padding: 56px 0; border-bottom: 1px solid var(--ink); }
.step-copy { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-self: start; padding-top: 15px; }
.step-number { position: relative; z-index: 2; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--white); font: 700 9px ui-monospace, monospace; }
.step-copy h3 { max-width: 430px; margin-bottom: 17px; font-size: 31px; font-weight: 700; letter-spacing: -.043em; line-height: 1.12; }
.step-copy p { max-width: 440px; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.product-fragment { width: 100%; max-width: 560px; margin-left: auto; border: 1px solid #c7c3bb; background: #faf9f5; }
.fragment-label { padding: 15px 18px; border-bottom: 1px solid #c7c3bb; color: #716f69; font: 700 9px ui-monospace, monospace; letter-spacing: .09em; }
.domain-form { display: grid; grid-template-columns: 1fr; padding-bottom: 18px; }
.domain-form .fragment-label { margin-bottom: 18px; }
.domain-form label { margin: 0 18px 7px; color: #817e77; font: 700 8px ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; }
.field-value { display: flex; min-height: 44px; align-items: center; justify-content: space-between; margin: 0 18px 16px; padding: 0 13px; border: 1px solid #d4d0c8; background: white; font: 550 12px ui-monospace, monospace; }
.field-value span { color: #16a05a; }
.fragment-action { display: flex; min-height: 42px; align-items: center; justify-content: space-between; margin: 2px 18px 0; padding: 0 14px; background: var(--ink); color: white; font-size: 11px; font-weight: 700; }
.dns-instruction { background: var(--ink); color: white; }
.dns-instruction .fragment-label { border-color: #444; color: #aaa; }
.dns-line { display: grid; min-height: 56px; grid-template-columns: 90px 1fr; align-items: center; margin: 0 18px; border-bottom: 1px solid #3e3e3e; }
.dns-line span { color: #858585; font: 700 8px ui-monospace, monospace; }
.dns-line strong { font: 550 12px ui-monospace, monospace; }
.checking-line { display: flex; align-items: center; gap: 9px; margin: 18px; padding: 12px 13px; background: #292929; font-size: 10px; }
.checking-line i { width: 7px; height: 7px; border-radius: 50%; background: #f0a51d; }
.checking-line small { margin-left: auto; color: #828282; }
.status-fragment { padding-bottom: 18px; }
.status-domain { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; margin: 18px; padding-bottom: 18px; border-bottom: 1px solid #d4d0c8; }
.status-domain > i { display: grid; width: 35px; height: 35px; place-items: center; background: #e6f7ec; color: #12874b; font-size: 12px; font-style: normal; }
.status-domain span strong, .status-domain span small { display: block; }
.status-domain span strong { font: 650 12px ui-monospace, monospace; }
.status-domain span small { margin-top: 3px; color: #85827b; font-size: 9px; }
.status-domain b { padding: 5px 7px; border: 1px solid #82c9a3; color: #12874b; font: 700 8px ui-monospace, monospace; }
.status-table { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 18px; border: 1px solid #d4d0c8; }
.status-table span { display: grid; gap: 9px; padding: 13px; border-right: 1px solid #d4d0c8; color: #89867f; font: 700 8px ui-monospace, monospace; }
.status-table span:last-child { border-right: 0; }
.status-table strong { color: #12874b; font-size: 9px; }
.event-line { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 13px; margin: 14px 18px 0; padding-top: 14px; border-top: 1px solid #d4d0c8; font: 650 9px ui-monospace, monospace; }
.event-line span::before { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--pink); content: ""; }
.event-line small { color: #85827b; font-size: 8px; }
.event-line b { color: #12874b; font-size: 8px; }

.developer-section { padding: 130px 0; background: var(--ink); color: white; }
.developer-grid { display: grid; grid-template-columns: .84fr 1.16fr; align-items: center; gap: 90px; }
.overline-light { color: #a2a2a2; }
.developer-copy h2 { max-width: 530px; }
.developer-copy > p:not(.overline) { max-width: 500px; margin: 27px 0 0; color: #a3a3a3; font-size: 16px; line-height: 1.72; }
.developer-copy ul { display: grid; gap: 13px; margin: 30px 0 35px; padding: 0; color: #d3d3d3; font-size: 12px; list-style: none; }
.developer-copy li { display: flex; gap: 11px; }
.developer-copy li span { color: var(--acid); }
.api-window { border: 1px solid #545454; background: #1c1c1c; box-shadow: 14px 14px 0 #303030; }
.api-head, .response-head { display: flex; align-items: center; justify-content: space-between; color: #9d9d9d; font: 700 9px ui-monospace, monospace; letter-spacing: .06em; }
.api-head { min-height: 48px; padding: 0 20px; border-bottom: 1px solid #494949; }
.api-window pre { overflow: auto; margin: 0; padding: 27px 24px; color: #d8d8d8; font: 11px/1.9 ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-command { color: #8fbfff; }.code-string { color: #aee878; }.code-key { color: #ff8bac; }
.api-response { margin: 0 18px 18px; border: 1px solid #494949; background: #161616; }
.response-head { min-height: 38px; padding: 0 13px; border-bottom: 1px solid #494949; color: #68d899; }
.api-response pre { padding: 18px; }

.details-section { background: var(--paper); }
.details-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 100px; }
.details-title h2 { max-width: 500px; }
.detail-list { border-top: 1px solid var(--ink); }
.detail-list article { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 27px 0; border-bottom: 1px solid var(--ink); }
.detail-list article > span { padding-top: 5px; color: var(--pink); font: 700 10px ui-monospace, monospace; }
.detail-list h3 { margin-bottom: 8px; font-size: 20px; font-weight: 690; letter-spacing: -.025em; }
.detail-list p { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.stack-section { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--acid); }
.stack-inner { display: grid; min-height: 122px; grid-template-columns: 190px 1fr auto; align-items: center; gap: 34px; }
.stack-inner > p { margin: 0; font-size: 12px; font-weight: 720; }
.stack-list { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-list span { padding: 6px 9px; border: 1px solid rgba(20,20,20,.35); background: rgba(255,255,255,.18); font: 700 9px ui-monospace, monospace; }
.stack-inner > a { display: inline-flex; gap: 8px; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 750; }

.pricing-section { padding: 130px 0; border-top: 1px solid var(--ink); background: var(--white); }
.pricing-head { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 90px; margin-bottom: 65px; }
.pricing-head > p { margin-bottom: 5px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.pricing-table { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); }
.pricing-table article { display: flex; min-height: 460px; flex-direction: column; padding: 28px; border-right: 1px solid var(--ink); background: var(--white); }
.pricing-table article:last-child { border-right: 0; }
.pricing-table article.plan-featured { background: #fff0f4; }
.plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plan-head > span { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font: 800 10px ui-monospace, monospace; letter-spacing: .08em; }
.plan-head i { padding: 4px 6px; background: var(--pink); color: white; font-size: 7px; font-style: normal; }
.plan-head strong { display: flex; align-items: flex-start; font-size: 45px; letter-spacing: -.055em; line-height: .9; }
.plan-head sup { margin: 3px 3px 0 0; font-size: 15px; }
.plan-head small { align-self: flex-end; margin: 0 0 3px 5px; color: #77736d; font-size: 9px; font-weight: 550; letter-spacing: 0; }
.pricing-table article > p { min-height: 46px; margin: 36px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.pricing-table article > b { padding: 17px 0; border-top: 1px solid #c9c5bd; border-bottom: 1px solid #c9c5bd; font-size: 14px; }
.pricing-table ul { display: grid; gap: 10px; margin: 22px 0 28px; padding: 0; color: #67645f; font-size: 12px; list-style: none; }
.pricing-table li::before { content: "—"; margin-right: 9px; color: var(--pink); }
.pricing-table .button { width: 100%; margin-top: auto; }
.pricing-note { margin: 20px 0 0; color: #817e77; font-size: 10px; text-align: center; }

.final-cta { padding: 105px 0; background: var(--pink); color: white; }
.final-cta-inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 45px; }
.final-cta .overline { grid-column: 1 / -1; color: rgba(255,255,255,.7); }
.final-cta .overline > span { background: white; }
.final-cta h2 { max-width: 820px; }
.final-cta-inner > div { display: flex; flex-direction: column; align-items: flex-start; gap: 17px; }
.final-cta-inner > div > a:last-child { border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 2px; font-size: 11px; font-weight: 700; }

.site-footer { padding: 72px 0 24px; background: var(--ink); color: white; }
.footer-main { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 60px; padding-bottom: 58px; }
.brand-light { color: white !important; }
.footer-brand p { margin: 23px 0 0; color: #858585; font-size: 12px; line-height: 1.7; }
.footer-main nav { display: flex; flex-direction: column; gap: 11px; }
.footer-main nav strong { margin-bottom: 7px; font-size: 11px; }
.footer-main nav a { color: #858585; font-size: 10px; }
.footer-main nav a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid #383838; color: #717171; font-size: 9px; }
.footer-bottom span:last-child { display: flex; align-items: center; gap: 8px; }
.footer-bottom i { width: 6px; height: 6px; border-radius: 50%; background: #3cca7a; }

.marketing-site main [id] { scroll-margin-top: 7rem; }

.journey-section { padding-block: clamp(5rem, 9vw, 9rem); background: #eef2f7; }
.journey-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.25rem, 3vw, 3rem); align-items: stretch; }
.journey-visual { position: relative; overflow: hidden; min-height: 38rem; padding: clamp(2rem, 5vw, 4.25rem); border-radius: 2.5rem; color: #fff; background: linear-gradient(180deg, rgba(8,17,29,.1), rgba(8,17,29,.84)), var(--journey-image) center/cover; box-shadow: 0 2.2rem 5rem rgba(18,31,49,.18); }
.journey-visual > div { position: absolute; right: clamp(2rem,5vw,4.25rem); bottom: clamp(2rem,5vw,4.25rem); left: clamp(2rem,5vw,4.25rem); }
.journey-visual span { font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.journey-visual h2 { max-width: 12ch; margin: 1rem 0 1.3rem; color: #fff; font-size: clamp(2.8rem, 5vw, 5.4rem); line-height: .93; letter-spacing: -.06em; }
.journey-visual p { max-width: 28rem; margin: 0; color: rgba(255,255,255,.72); line-height: 1.6; }
.journey-links { overflow: hidden; border: 1px solid rgba(17,27,44,.1); border-radius: 2.5rem; background: rgba(255,255,255,.82); }
.journey-links a { display: grid; min-height: 12.66rem; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: 1.25rem; padding: clamp(1.5rem,3vw,2.5rem); border-bottom: 1px solid rgba(17,27,44,.1); color: #10182b; transition: background-color .2s ease; }
.journey-links a:last-child { border-bottom: 0; }
.journey-links a:hover { background: #fff; }
.journey-links span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .8rem; color: #ff1f5d; background: #fff0f5; font-weight: 800; }
.journey-links b { font-size: clamp(1.25rem,2vw,1.8rem); letter-spacing: -.03em; }
.journey-links p { max-width: 38rem; margin: .65rem 0 0; color: #6d778a; line-height: 1.55; }
.journey-links i { color: #ff1f5d; font-size: 1.5rem; font-style: normal; }

@media (max-width: 1024px) {
    .journey-grid { grid-template-columns: 1fr; }
    .journey-visual { min-height: 31rem; }
    .journey-links a { min-height: 10rem; }
}

@media (max-width: 640px) {
    .journey-section { padding-block: 4rem; }
    .journey-visual, .journey-links { border-radius: 1.75rem; }
    .journey-visual { min-height: 27rem; }
    .journey-links a { min-height: 0; grid-template-columns: 2.5rem 1fr; }
    .journey-links i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .journey-links a { transition: none; }
}

@media (max-width: 1040px) {
    .desktop-nav { gap: 20px; }
    .hero-grid { grid-template-columns: 1fr 430px; gap: 50px; }
    .hero h1 { font-size: 65px; }
    .step-row { gap: 50px; }
    .developer-grid { gap: 55px; }
    .details-grid { gap: 60px; }
}

@media (max-width: 860px) {
    .shell { width: min(100% - 36px, 720px); }
    .header-inner { grid-template-columns: 1fr auto; }
    .desktop-nav, .header-actions { display: none; }
    .mobile-menu { display: block; }
    .hero { padding: 74px 0 78px; }
    .hero-route-label { top: 24px; width: min(100% - 36px, 720px); }
    .hero-grid { grid-template-columns: 1fr; gap: 58px; }
    .hero-copy { max-width: 680px; }
    .hero h1 { max-width: 650px; font-size: clamp(53px, 10vw, 74px); }
    .route-board { max-width: 620px; }
    .section, .developer-section, .pricing-section { padding: 94px 0; }
    .section-intro, .pricing-head { grid-template-columns: 1fr; gap: 25px; }
    .step-row { grid-template-columns: 1fr; gap: 38px; padding: 50px 0; }
    .product-fragment { margin: 0; }
    .developer-grid, .details-grid { grid-template-columns: 1fr; gap: 58px; }
    .developer-copy { max-width: 620px; }
    .pricing-table { grid-template-columns: 1fr; }
    .pricing-table article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--ink); }
    .pricing-table article:last-child { border-bottom: 0; }
    .pricing-table article > p { min-height: 0; }
    .stack-inner { grid-template-columns: 1fr auto; padding: 28px 0; }
    .stack-list { grid-column: 1 / -1; grid-row: 2; }
    .final-cta-inner { grid-template-columns: 1fr; }
    .footer-main { grid-template-columns: 1.5fr 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .shell { width: min(100% - 30px, 520px); }
    .site-header .shell { width: calc(100% - 30px); }
    .header-inner { min-height: 68px; }
    .mobile-menu nav { top: 68px; }
    .hero { padding-top: 58px; }
    .hero-route-label { display: none; }
    .hero h1 { margin-bottom: 24px; font-size: 52px; line-height: .97; }
    .hero-lead { font-size: 17px; }
    .hero-actions { align-items: stretch; flex-direction: column; gap: 20px; }
    .hero-actions .button { width: 100%; }
    .text-action { align-self: flex-start; }
    .route-board { box-shadow: 8px 8px 0 var(--pink); }
    .route-flow { padding: 14px; }
    .route-node { grid-template-columns: 37px 1fr; gap: 11px; }
    .node-state { grid-column: 2; }
    .board-foot { align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; }
    .section, .developer-section, .pricing-section { padding: 78px 0; }
    .section-intro { margin-bottom: 48px; }
    .section-intro h2, .details-title h2, .pricing-head h2, .final-cta h2, .developer-copy h2 { font-size: 42px; }
    .step-copy { grid-template-columns: 36px 1fr; gap: 8px; }
    .steps-list::before { left: 14px; }
    .step-copy h3 { font-size: 26px; }
    .checking-line { align-items: flex-start; flex-wrap: wrap; }
    .checking-line small { width: 100%; margin-left: 16px; }
    .status-table { grid-template-columns: 1fr; }
    .status-table span { grid-template-columns: 1fr auto; border-right: 0; border-bottom: 1px solid #d4d0c8; }
    .status-table span:last-child { border-bottom: 0; }
    .api-window { box-shadow: 8px 8px 0 #303030; }
    .api-window pre { padding: 20px 15px; font-size: 9px; }
    .pricing-table article { padding: 24px; }
    .stack-inner { grid-template-columns: 1fr; gap: 18px; }
    .stack-list { grid-column: 1; grid-row: auto; }
    .final-cta { padding: 78px 0; }
    .footer-main { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { align-items: flex-start; flex-direction: column; gap: 9px; }
}

/* Homepage domain simulator: product UI, never terminal chrome. */
.marketing-site .hero-v6 .route-board {
    border-color: rgba(74, 88, 115, .14);
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 100%, rgba(255, 37, 95, .045), transparent 42%),
        rgba(255, 255, 255, .96);
    box-shadow:
        0 34px 90px rgba(28, 42, 65, .19),
        0 2px 3px rgba(28, 42, 65, .04),
        0 0 0 8px rgba(255, 255, 255, .3);
}

.marketing-site main .hero-v6 .board-head,
.marketing-site main .hero-v6 .board-foot,
.marketing-site main .hero-v6 .domain-simulator label,
.marketing-site main .hero-v6 .simulator-control > span,
.marketing-site main .hero-v6 .simulator-control input,
.marketing-site main .hero-v6 .route-node small,
.marketing-site main .hero-v6 .route-node strong,
.marketing-site main .hero-v6 .node-index,
.marketing-site main .hero-v6 .node-state {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
}

.marketing-site .hero-v6 .board-head {
    height: 62px;
    padding: 0 28px;
    border-color: rgba(74, 88, 115, .1);
    background: rgba(248, 250, 253, .72);
    color: #354158;
    font-size: 13px;
    font-weight: 680;
    letter-spacing: -.01em;
}

.marketing-site .hero-v6 .board-head strong {
    gap: 9px;
    padding: 7px 11px;
    border: 1px solid rgba(21, 139, 81, .12);
    border-radius: 999px;
    background: #edf9f2;
    color: #147244;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}

.marketing-site .hero-v6 .board-head i {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 4px rgba(36, 189, 108, .11);
}

.marketing-site .hero-v6 .domain-simulator {
    max-width: 760px;
    padding: 32px 28px 18px;
}

.marketing-site .hero-v6 .domain-simulator label {
    margin-bottom: 10px;
    color: #46536a;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -.005em;
    text-transform: none;
}

.marketing-site .hero-v6 .simulator-control {
    min-height: 60px;
    border-color: rgba(65, 80, 108, .16);
    border-radius: 15px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 30px rgba(33, 45, 70, .09), inset 0 1px 0 white;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.marketing-site .hero-v6 .simulator-control:focus-within {
    border-color: rgba(255, 37, 95, .42);
    box-shadow: 0 14px 34px rgba(33, 45, 70, .1), 0 0 0 4px rgba(255, 37, 95, .08);
}

.marketing-site .hero-v6 .simulator-control > span {
    padding-left: 18px;
    color: #8b95a7;
    font-size: 15px;
    letter-spacing: -.01em;
}

.marketing-site .hero-v6 .simulator-control input {
    height: 58px;
    padding: 0 8px;
    color: #172238;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.015em;
}

.marketing-site .hero-v6 .simulator-control button {
    min-height: 48px;
    margin: 5px;
    border-radius: 11px;
    padding-inline: 20px;
    font-size: 13px;
}

.marketing-site .hero-v6 .domain-simulator p {
    margin-top: 10px;
    color: #7b869a;
    font-size: 12px;
    line-height: 1.45;
}

.marketing-site .hero-v6 .route-flow {
    gap: 0;
    padding: 28px 32px 38px;
}

.marketing-site .hero-v6 .route-node {
    position: relative;
    min-height: 142px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
    padding: 20px;
    border-color: rgba(71, 85, 112, .13);
    border-radius: 18px;
    background: linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(246, 248, 252, .92));
    box-shadow: 0 16px 38px rgba(35, 47, 72, .09), inset 0 1px 0 white;
}

.marketing-site .hero-v6 .route-node::after {
    position: absolute;
    inset: auto 20px 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(19, 139, 81, .34), transparent);
    content: "";
}

.marketing-site .hero-v6 .route-node-edge {
    border-color: rgba(255, 37, 95, .24);
    background: linear-gradient(145deg, #fff 12%, #fff4f7 100%);
    box-shadow: 0 18px 42px rgba(255, 37, 95, .1), inset 0 1px 0 white;
}

.marketing-site .hero-v6 .node-index {
    width: 42px;
    height: 42px;
    border-color: rgba(71, 85, 112, .13);
    border-radius: 13px;
    background: rgba(255, 255, 255, .92);
    color: #526078;
    font-size: 12px;
    font-weight: 720;
    box-shadow: 0 6px 16px rgba(38, 50, 75, .07);
}

.marketing-site .hero-v6 .node-index img {
    width: 28px;
    height: 28px;
}

.marketing-site .hero-v6 .route-node small {
    margin-bottom: 5px;
    color: #778398;
    font-size: 11px;
    font-weight: 620;
    letter-spacing: -.005em;
    line-height: 1.35;
    text-transform: none;
}

.marketing-site .hero-v6 .route-node strong {
    overflow: hidden;
    color: #172238;
    font-size: 15px;
    font-weight: 690;
    letter-spacing: -.018em;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketing-site .hero-v6 .node-state {
    display: inline-flex;
    width: max-content;
    grid-column: 2;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #eaf7f0;
    color: #147244;
    font-size: 10px;
    font-weight: 720;
    letter-spacing: 0;
}

.marketing-site .hero-v6 .node-state::before {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.marketing-site .hero-v6 .route-connector::after {
    width: 36px;
    height: 36px;
    border-color: rgba(69, 83, 110, .14);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 20px rgba(31, 43, 68, .1);
}

.marketing-site .hero-v6 .route-node[data-state="waiting"] {
    opacity: 1;
    filter: saturate(.45);
}

.marketing-site .hero-v6 .route-node[data-state="waiting"] .node-state {
    background: #eef1f5;
    color: #7d8798;
}

.marketing-site .hero-v6 .route-node[data-state="running"] {
    border-color: rgba(228, 169, 20, .36);
    box-shadow: 0 16px 40px rgba(228, 169, 20, .1);
}

.marketing-site .hero-v6 .route-node[data-state="running"] .node-state {
    background: #fff5d8;
    color: #966b00;
}

.marketing-site .hero-v6 .route-node[data-state="done"] {
    border-color: rgba(24, 139, 80, .25);
}

.marketing-site .hero-v6 .board-foot {
    min-height: 58px;
    padding: 0 28px;
    border-color: rgba(74, 88, 115, .1);
    background: rgba(248, 250, 253, .74);
    color: #68758b;
    font-size: 11px;
    font-weight: 560;
    letter-spacing: -.005em;
}

@media (max-width: 900px) {
    .marketing-site .hero-v6 .route-flow { gap: 12px; }
    .marketing-site .hero-v6 .route-node { width: min(100%, 560px); justify-self: center; }
}

@media (max-width: 560px) {
    .marketing-site .hero-v6 .route-board { border-radius: 20px; }
    .marketing-site .hero-v6 .board-head { height: 56px; padding: 0 16px; }
    .marketing-site .hero-v6 .domain-simulator { padding: 24px 16px 12px; }
    .marketing-site .hero-v6 .simulator-control { grid-template-columns: auto minmax(0, 1fr); padding-top: 2px; }
    .marketing-site .hero-v6 .simulator-control button { grid-column: 1 / -1; width: calc(100% - 10px); }
    .marketing-site .hero-v6 .route-flow { padding: 20px 16px 26px; }
    .marketing-site .hero-v6 .route-node { min-height: 126px; padding: 17px; }
    .marketing-site .hero-v6 .board-foot { align-items: flex-start; gap: 4px; padding: 12px 16px; }
}

/* Homepage product polish */
.marketing-site .details-section .details-title .overline { margin-bottom: 24px; }
.marketing-site .details-section .detail-list { border-top: 0; }
.marketing-site .details-section .detail-list article { grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 18px; padding: 28px 0; }
.marketing-site .details-section .detail-list article > span { width: 36px; height: 36px; padding: 0; align-self: start; font-variant-numeric: tabular-nums; }
.marketing-site .details-section .detail-list h3 { margin: 2px 0 7px; }

.marketing-site .stack-section { margin: 28px 18px; padding: 86px 0; border-radius: 34px; background: #11182a; color: white; box-shadow: none; }
.stack-workbench { display: grid; grid-template-columns: minmax(0,.7fr) minmax(520px,1.3fr); gap: 52px; }
.stack-heading { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 36px; }
.stack-heading p { margin: 0 0 13px; color: #ff6d92; font: 700 10px var(--font-mono); letter-spacing: .14em; }
.stack-heading h2 { max-width: 10ch; margin: 0; color: white; font-family: var(--font-display); font-size: clamp(48px,5vw,70px); font-weight: 400; letter-spacing: -.05em; line-height: .96; }
.stack-tabs { grid-column: 1; display: flex; align-content: flex-start; flex-wrap: wrap; gap: 8px; }
.stack-tabs button { padding: 9px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.045); color: #aeb6c7; cursor: pointer; font: 650 11px var(--font-mono); transition: .18s ease; }
.stack-tabs button:hover { border-color: rgba(255,255,255,.3); color: white; }
.stack-tabs button[aria-selected="true"] { border-color: #ff4b78; background: #ff255f; color: white; box-shadow: 0 8px 22px rgba(255,37,95,.22); }
.stack-tabs button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.stack-code-frame { grid-column: 2; grid-row: 1 / span 2; overflow: hidden; align-self: stretch; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: #0b1020; box-shadow: 0 34px 80px rgba(0,0,0,.28); }
.stack-code-bar { display: grid; min-height: 54px; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); }
.stack-code-bar>span { display: flex; gap: 6px; }
.stack-code-bar i { width: 7px; height: 7px; border-radius: 50%; background: #414a5e; }
.stack-code-bar i:first-child { background: #ff5d7e; }.stack-code-bar i:nth-child(2) { background: #f0bb4b; }.stack-code-bar i:last-child { background: #39bd82; }
.stack-code-bar b { color: #8791a6; font: 600 10px var(--font-mono); }
.stack-code-bar button { justify-self: end; border: 0; background: transparent; color: #aeb7c9; cursor: pointer; font: 650 10px var(--font-mono); }
.stack-code-panel { min-height: 305px; padding: 34px; }
.stack-code-panel>p { margin: 0 0 32px; color: #e7ebf3; font: 11px/1.5 var(--font-mono); }
.stack-code-panel>p span { color: #ff537e; }
.stack-code-panel pre { overflow: auto; margin: 0; color: #dfe5f1; font: 13px/1.8 var(--font-mono); white-space: pre-wrap; }
.stack-code-panel small { display: flex; align-items: center; gap: 8px; margin-top: 36px; color: #778298; font: 10px var(--font-mono); }
.stack-code-panel small i { width: 7px; height: 7px; border-radius: 50%; background: #37c885; box-shadow: 0 0 0 4px rgba(55,200,133,.09); }

/* One developer story: introduction, horizontal SDK choice, request and response. */
.developer-workbench {
    display: grid;
    gap: 30px;
}

.developer-workbench-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
}

.developer-workbench-head .developer-copy {
    max-width: 760px;
}

.marketing-site main .developer-section .developer-workbench-head .developer-copy h2 {
    max-width: 760px;
    margin: 0;
}

.marketing-site main .developer-section .developer-workbench-head .developer-copy > p {
    max-width: 680px;
    margin: 22px 0 0;
    color: #aeb7c9;
}

.developer-workbench > .stack-tabs {
    display: flex;
    width: 100%;
    grid-column: auto;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
}

.developer-workbench > .stack-tabs button {
    flex: 0 0 auto;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
    white-space: nowrap;
}

.developer-workbench > .stack-code-frame {
    width: 100%;
    grid-column: auto;
    grid-row: auto;
}

.developer-code-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(350px, .96fr);
}

.developer-code-request {
    min-width: 0;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.developer-code-request .stack-code-panel {
    min-height: 340px;
}

.stack-api-response {
    min-width: 0;
    background: rgba(255, 255, 255, .025);
}

.stack-api-response .response-head {
    min-height: 50px;
    padding: 0 25px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    color: #768298;
}

.stack-api-response .response-head span:first-child { color: #42cc8c; }

.stack-api-response pre {
    overflow: auto;
    margin: 0;
    padding: 28px 25px;
    color: #dfe5f1;
    font: 11px/1.8 var(--font-mono);
    white-space: pre-wrap;
}

.stack-api-response .code-key { color: #8da8ff; }
.stack-api-response .code-string { color: #e8c487; }

/* Lightweight syntax palette for the developer workbench. The underlying text
   remains untouched in data-raw-code so copying never includes presentation. */
.developer-workbench .syntax-keyword { color: #c9adff; font-weight: 650; }
.developer-workbench .syntax-string { color: #f0c98f; }
.developer-workbench .syntax-variable { color: #9bcaff; }
.developer-workbench .syntax-property { color: #8fd8ca; }
.developer-workbench .syntax-function { color: #91c4ff; }
.developer-workbench .syntax-class { color: #f1a9c5; }
.developer-workbench .syntax-number { color: #e9a8f5; }
.developer-workbench .syntax-literal { color: #ffbc82; font-weight: 620; }
.developer-workbench .syntax-punctuation { color: #929db2; }
.developer-workbench .syntax-operator { color: #d6dceb; }
.developer-workbench .syntax-comment { color: #8e99ad; font-style: italic; }
.developer-workbench .syntax-prompt { color: #ff5f88; font-weight: 750; }
.developer-workbench .syntax-command { color: #c9adff; font-weight: 650; }
.developer-workbench .syntax-package { color: #dfe5f1; }

.developer-workbench .stack-code-panel pre code,
.developer-workbench .stack-api-response pre code {
    color: #dfe5f1;
    text-shadow: 0 0 24px rgba(145, 196, 255, .035);
}

@media (max-width: 900px) {
    .developer-workbench-head { align-items: flex-start; flex-direction: column; gap: 28px; }
    .developer-code-grid { grid-template-columns: 1fr; }
    .developer-code-request { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .developer-code-request .stack-code-panel { min-height: 300px; }
}

@media (max-width: 560px) {
    .developer-workbench { gap: 24px; }
    .developer-workbench-head .developer-copy > p { margin-top: 17px; }
    .developer-workbench > .stack-tabs { margin-right: -18px; width: calc(100% + 18px); }
    .developer-code-request .stack-code-panel { min-height: 270px; }
    .stack-api-response .response-head { padding: 0 18px; }
    .stack-api-response pre { padding: 24px 18px; font-size: 10px; }
}

.marketing-site .final-cta { padding: 82px 0; }
.marketing-site .final-cta-inner { display: grid; grid-template-columns: minmax(0,.9fr) minmax(480px,1.1fr); align-items: center; gap: 68px; }
.final-cta-copy .overline { margin-bottom: 26px; }
.final-cta-copy h2 { margin: 0; }
.final-cta-actions { display: flex; align-items: center; gap: 12px; margin-top: 38px; }
.marketing-site .final-cta-inner > .final-route-art { position: relative; display: grid; min-height: 410px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 28px; background: radial-gradient(circle at 50% 47%,rgba(255,255,255,.24),transparent 26%),rgba(91,0,29,.18); box-shadow: inset 0 1px rgba(255,255,255,.18); }
.final-route-art:before,.final-route-art:after { position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.12);border-radius:50%;content:""; }.final-route-art:after{width:280px;height:280px}
.final-route-domain,.final-route-app,.final-route-edge { position:absolute;z-index:2;display:grid;align-items:center;border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.94);color:#111827;box-shadow:0 18px 50px rgba(91,0,29,.2)}
.final-route-domain { top:49px;left:40px;grid-template-columns:auto 1fr auto;gap:10px;padding:15px 17px;border-radius:14px;font:650 12px var(--font-mono)}
.final-route-domain i{width:8px;height:8px;border-radius:50%;background:#32bf7e}.final-route-domain b{color:#168255;font-size:9px}
.final-route-edge{top:50%;left:50%;width:130px;height:130px;grid-template-columns:1fr;place-items:center;align-content:center;gap:6px;border-radius:28px;transform:translate(-50%,-50%)}
.final-route-edge img{width:42px}.final-route-edge small{font:800 10px var(--font-mono);letter-spacing:.14em}.final-route-edge b{color:#168255;font-size:9px}
.final-route-app{right:38px;bottom:48px;gap:7px;padding:18px 22px;border-radius:14px}.final-route-app small{font:800 9px var(--font-mono);letter-spacing:.12em}.final-route-app strong{color:#168255;font:750 12px var(--font-mono)}
.final-route-line{position:absolute;z-index:1;width:130px;border-top:1px dashed rgba(255,255,255,.75);transform:rotate(29deg)}.final-route-line:nth-of-type(2){top:135px;left:176px}.final-route-line:nth-of-type(4){right:164px;bottom:135px}

@media(max-width:900px){.stack-workbench{grid-template-columns:1fr}.stack-heading,.stack-tabs,.stack-code-frame{grid-column:1}.stack-code-frame{grid-row:auto}.marketing-site .final-cta-inner{grid-template-columns:1fr}.final-route-art{min-height:360px}}
@media(max-width:560px){.marketing-site .stack-section{margin:18px 8px;padding:62px 0;border-radius:23px}.stack-workbench{gap:28px}.stack-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px}.stack-tabs button{white-space:nowrap}.stack-code-panel{min-height:280px;padding:24px 18px}.final-cta-actions{align-items:stretch;flex-direction:column}.final-route-art{min-height:320px}.final-route-domain{top:32px;left:18px}.final-route-app{right:18px;bottom:32px}.final-route-edge{width:108px;height:108px}}

@media (prefers-reduced-motion: reduce) {
    .marketing-site *, .marketing-site *::before, .marketing-site *::after { scroll-behavior: auto !important; transition: none !important; }
}

@keyframes connector-flow {
    0% { opacity: 0; transform: translateY(0); }
    20%, 70% { opacity: 1; }
    100% { opacity: 0; transform: translateY(42px); }
}

@keyframes story-flow {
    0%, 8% { transform: translateY(0); }
    30%, 40% { transform: translateY(510px); }
    63%, 73% { transform: translateY(1020px); }
    92%, 100% { transform: translateY(0); }
}

/* Multi-page marketing system */
.multipage-site { background: #f4f1eb; }
.mp-hero { position: relative; overflow: hidden; padding: 108px 0 112px; border-bottom: 1px solid var(--ink); background: var(--paper); }
.mp-hero::after { position: absolute; right: -80px; bottom: -240px; width: 520px; height: 520px; border: 1px solid rgba(20,20,20,.08); border-radius: 50%; content: ""; }
.mp-hero-dark, .mp-hero-code { border-color: #35353a; background-color: #111114; background-image: radial-gradient(rgba(255,255,255,.07) .7px, transparent .7px); background-size: 22px 22px; color: white; }
.mp-hero-code { background-image: linear-gradient(90deg, transparent 49.94%, #26262a 50%, transparent 50.06%), radial-gradient(rgba(255,255,255,.07) .7px, transparent .7px); background-size: auto, 22px 22px; }
.mp-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .94fr) minmax(430px, 1.06fr); align-items: center; gap: 92px; }
.mp-hero-copy h1, .mp-hero-centered h1 { max-width: 780px; margin: 24px 0 28px; font-size: clamp(56px, 6.2vw, 84px); font-weight: 770; letter-spacing: -.072em; line-height: .94; }
.mp-hero-copy > p, .mp-hero-centered p { max-width: 620px; margin-bottom: 34px; color: #6f6d68; font-size: 18px; line-height: 1.65; }
.mp-hero-dark .mp-hero-copy > p, .mp-hero-code .mp-hero-copy > p { color: #aaaab0; }
.mp-actions { display: flex; align-items: center; gap: 25px; font-size: 13px; font-weight: 720; }
.mp-actions > a:not(.button) { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.mp-hero-centered { text-align: center; }
.mp-hero-centered .shell { display: grid; justify-items: center; }
.mp-hero-centered p { margin-bottom: 0; }

.mp-section { padding: 112px 0; border-bottom: 1px solid var(--line); background: var(--white); }
.mp-section-muted { background: var(--paper); }
.mp-section-ink { border-color: #39393d; background: #17171a; color: white; }
.mp-section-head { max-width: 820px; margin-bottom: 65px; }
.mp-section h2 { margin: 18px 0 20px; font-size: clamp(38px, 4.6vw, 60px); font-weight: 750; letter-spacing: -.055em; line-height: 1; }
.mp-section p { color: #73716c; }
.mp-section-ink p { color: #9c9ca2; }
.mp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); }
.mp-card, .mp-section-ink .mp-grid-3 > article { min-height: 275px; padding: 34px; border-right: 1px solid var(--ink); }
.mp-card:last-child, .mp-section-ink .mp-grid-3 > article:last-child { border-right: 0; }
.mp-card > span, .mp-section-ink .mp-grid-3 article > span { color: var(--pink); font: 750 10px ui-monospace, monospace; letter-spacing: .1em; }
.mp-card h3, .mp-section-ink .mp-grid-3 h3 { margin: 80px 0 12px; font-size: 23px; letter-spacing: -.04em; }
.mp-card p, .mp-section-ink .mp-grid-3 p { margin: 0; font-size: 14px; line-height: 1.65; }
.mp-section-ink .mp-grid-3 { border-color: #46464b; }
.mp-section-ink .mp-grid-3 > article { border-color: #46464b; }
.mp-split { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 110px; }

.mp-domain-visual { border: 1px solid #56565d; background: #f7f5ef; box-shadow: 14px 14px 0 var(--pink); color: var(--ink); }
.mp-browser-bar { display: grid; min-height: 52px; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 0 17px; border-bottom: 1px solid #c9c5bd; background: white; }
.mp-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 16px 0 #ffb827, 32px 0 #48c470; }
.mp-browser-bar span { margin-left: 40px; padding: 8px 13px; background: #f2f0eb; color: #565550; font: 11px ui-monospace, monospace; }
.mp-browser-bar b { color: #17834d; font: 700 9px ui-monospace, monospace; }
.mp-browser-body { min-height: 360px; padding: 49px; background-image: linear-gradient(#dedad2 1px, transparent 1px), linear-gradient(90deg, #dedad2 1px, transparent 1px); background-size: 44px 44px; }
.mp-browser-body img { width: 34px; margin-bottom: 33px; }
.mp-browser-body > span { color: #828078; font: 700 9px ui-monospace, monospace; letter-spacing: .12em; }
.mp-browser-body h3 { max-width: 430px; margin: 14px 0 45px; font-size: 36px; letter-spacing: -.05em; line-height: 1.05; }
.mp-route-caption { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid #bbb7ae; background: var(--white); font: 650 10px ui-monospace, monospace; }
.mp-route-caption i { color: var(--pink); }
.mp-lifecycle { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr; align-items: center; }
.mp-lifecycle article { min-height: 175px; padding: 24px; border: 1px solid #cbc7bf; background: var(--paper); }
.mp-lifecycle article:last-child { border-color: var(--pink); box-shadow: 6px 6px 0 var(--pink); }
.mp-lifecycle article b, .mp-lifecycle article span, .mp-lifecycle article small { display: block; }
.mp-lifecycle article b { color: var(--pink); font: 750 10px ui-monospace, monospace; }
.mp-lifecycle article span { margin: 50px 0 5px; font-size: 18px; font-weight: 750; }
.mp-lifecycle article small { color: #7d7b75; }
.mp-lifecycle > i { height: 1px; background: var(--pink); }
.mp-origin-map, .mp-manifesto { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 16px; padding: 42px; border: 1px solid #505055; background: #202024; }
.mp-origin-map span, .mp-origin-map b { padding: 18px; border: 1px solid #4a4a50; font: 700 10px ui-monospace, monospace; text-align: center; }
.mp-origin-map b { display: flex; align-items: center; gap: 9px; border-color: var(--pink); }
.mp-origin-map b img { width: 22px; }
.mp-origin-map i { height: 1px; background: var(--pink); }
.mp-origin-map small { grid-column: 3; color: #808087; text-align: center; }

.mp-dns-visual { padding: 18px; border: 1px solid #c6c2ba; background: white; box-shadow: 14px 14px 0 var(--ink); }
.mp-dns-visual > div { display: grid; min-height: 72px; grid-template-columns: 125px 1fr; align-items: center; border-bottom: 1px solid #dedad2; }
.mp-dns-visual > div:last-child { border-bottom: 0; }
.mp-dns-visual small { color: var(--pink); font: 750 9px ui-monospace, monospace; }
.mp-dns-visual strong { font: 650 13px ui-monospace, monospace; }
.mp-process > article { display: grid; grid-template-columns: 70px minmax(260px, .8fr) minmax(360px, 1fr); align-items: center; gap: 42px; padding: 62px 0; border-top: 1px solid #cbc7bf; }
.mp-process > article > span { color: var(--pink); font: 750 13px ui-monospace, monospace; }
.mp-process h2 { margin: 0 0 12px; font-size: 34px; }
.mp-process p { margin: 0; line-height: 1.65; }
.mp-mini-ui, .mp-record, .mp-event { position: relative; display: grid; min-height: 110px; align-content: center; padding: 24px; border: 1px solid #bbb7ae; background: #f7f4ef; }
.mp-mini-ui small { color: #7e7b75; font: 700 9px ui-monospace, monospace; }
.mp-mini-ui strong { margin-top: 11px; font: 650 12px ui-monospace, monospace; }
.mp-mini-ui b { position: absolute; top: 18px; right: 18px; color: #16834c; font: 750 9px ui-monospace, monospace; }
.mp-code { overflow: auto; margin: 0; padding: 27px; border: 1px solid #4a4a50; background: #0d0d10; color: #d8d8dd; font: 12px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; }
.mp-code span { color: var(--pink); }
.mp-code b { color: var(--acid); }
.mp-code-large { box-shadow: 14px 14px 0 var(--pink); font-size: 12px; }
.mp-record { grid-template-columns: auto 1fr auto 1.3fr; gap: 15px; }
.mp-record b { padding: 7px; background: var(--ink); color: white; font-size: 9px; }
.mp-record i { color: var(--pink); }
.mp-record strong, .mp-record span { font: 650 11px ui-monospace, monospace; }
.mp-event { grid-template-columns: auto 1fr auto; gap: 12px; }
.mp-event i { width: 9px; height: 9px; border-radius: 50%; background: #2dbd70; }
.mp-event strong { font: 650 12px ui-monospace, monospace; }
.mp-event span { color: #74726c; font-size: 10px; }

.mp-package-terminal { border: 1px solid #bbb7ae; background: white; box-shadow: 14px 14px 0 var(--pink); }
.mp-package-terminal > div { display: flex; gap: 23px; padding: 16px 20px; border-bottom: 1px solid #d5d1c9; font: 700 10px ui-monospace, monospace; }
.mp-package-terminal > div span { color: var(--pink); }
.mp-package-terminal pre { min-height: 260px; margin: 0; padding: 35px; background: #111114; color: #d6d6dc; font: 12px/1.7 ui-monospace, monospace; }
.mp-package-terminal small { display: block; padding: 15px 20px; color: #15834b; font: 700 10px ui-monospace, monospace; }
.mp-sdk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mp-sdk-grid article { padding: 34px; border: 1px solid #c3bfb7; background: var(--paper); }
.mp-sdk-grid article > b { display: grid; width: 44px; height: 44px; place-items: center; background: var(--ink); color: white; font: 750 11px ui-monospace, monospace; }
.mp-sdk-grid h2 { margin: 46px 0 12px; font-size: 27px; }
.mp-sdk-grid code { display: block; overflow: auto; margin-top: 32px; padding: 12px; background: white; font-size: 10px; }
.mp-sdk-list { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #bbb7ae; background: white; }
.mp-sdk-list span { display: flex; justify-content: space-between; padding: 17px; border-right: 1px solid #ddd9d1; border-bottom: 1px solid #ddd9d1; font: 650 11px ui-monospace, monospace; }
.mp-sdk-list b { color: #16834c; font-size: 9px; }

.mp-shield-visual { position: relative; display: grid; min-height: 420px; place-items: center; }
.mp-ring { display: grid; width: 315px; height: 315px; place-items: center; border: 1px solid #39393e; border-radius: 50%; }
.mp-ring .mp-ring { width: 190px; height: 190px; border-color: #5a3340; }
.mp-ring .mp-ring div { display: grid; width: 94px; height: 94px; place-items: center; border: 1px solid var(--pink); background: #1a1518; }
.mp-ring img { width: 33px; }
.mp-ring b { color: #7f7f85; font: 700 9px ui-monospace, monospace; }
.mp-shield-visual > span { position: absolute; padding: 7px 10px; border: 1px solid #3e3e43; background: #19191d; color: #8d8d94; font: 700 8px ui-monospace, monospace; }
.mp-shield-visual > span:nth-of-type(1) { top: 35px; }
.mp-shield-visual > span:nth-of-type(2) { right: 15px; bottom: 100px; }
.mp-shield-visual > span:nth-of-type(3) { bottom: 45px; left: 20px; }
.mp-security-table dl { margin: 0; border: 1px solid #4b4b50; }
.mp-security-table dl > div { display: grid; grid-template-columns: 1fr 1fr; padding: 19px 22px; border-bottom: 1px solid #3f3f44; }
.mp-security-table dl > div:last-child { border-bottom: 0; }
.mp-security-table dt { color: #9b9ba1; }
.mp-security-table dd { margin: 0; color: var(--acid); text-align: right; }

/* Security page */
.security-control { overflow: hidden; align-self: center; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(8,15,28,.72); box-shadow: 0 35px 80px rgba(0,0,0,.32); backdrop-filter: blur(16px); }
.security-control__bar { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.1); color: #aeb9ce; font: 650 10px ui-monospace, monospace; }
.security-control__bar span { display: flex; align-items: center; gap: 8px; }
.security-control__bar i { width: 7px; height: 7px; border-radius: 50%; background: #ff5378; box-shadow: 0 0 0 5px rgba(255,83,120,.12); }
.security-control__bar code { color: #6f7c94; }
.security-control__request { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; margin: 18px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.045); }
.security-control__request small { grid-column: 1 / -1; color: #6f7c94; font: 700 8px ui-monospace, monospace; letter-spacing: .12em; }
.security-control__request strong { font: 650 13px ui-monospace, monospace; }
.security-control__request span { color: #8894a9; font: 10px ui-monospace, monospace; }
.security-control__checks { padding: 0 18px; }
.security-control__checks > div { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.08); }
.security-control__checks i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: rgba(93,111,255,.14); color: #a8b3ff; font: normal 700 9px ui-monospace, monospace; }
.security-control__checks span, .security-control__checks b, .security-control__checks small { display: block; }
.security-control__checks b { font-size: 11px; }
.security-control__checks small { margin-top: 3px; color: #738097; font-size: 9px; }
.security-control__checks em { padding: 4px 7px; border: 1px solid rgba(255,83,120,.3); border-radius: 99px; background: rgba(255,83,120,.08); color: #ff839e; font: normal 750 8px ui-monospace, monospace; }
.security-control__route { display: flex; align-items: center; gap: 10px; margin: 18px; color: #8c98ab; font: 700 8px ui-monospace, monospace; letter-spacing: .06em; }
.security-control__route i { flex: 1; height: 1px; background: linear-gradient(90deg,#ff5378,#6978ff); }
.security-boundaries .mp-section-head p { max-width: 630px; }
.security-boundary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.security-boundary-grid article { padding: 18px 18px 28px; border: 1px solid var(--soft-line); border-radius: 22px; background: white; box-shadow: 0 20px 50px rgba(32,43,68,.06); }
.security-boundary-grid article > span { display: block; margin: 25px 6px 0; color: var(--pink); font: 750 9px ui-monospace, monospace; letter-spacing: .11em; }
.security-boundary-grid h3 { margin: 13px 6px 10px; font-size: 24px; letter-spacing: -.04em; }
.security-boundary-grid p { margin: 0 6px; font-size: 13px; line-height: 1.65; }
.security-card-visual { position: relative; overflow: hidden; min-height: 150px; border-radius: 15px; background: #f2f5fa; }
.security-card-edge { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%,rgba(255,83,120,.12),transparent 45%),#f2f5fa; }
.security-card-edge:before,.security-card-edge:after { position:absolute; content:""; width:190px; height:190px; border:1px solid #dce2ee; border-radius:50%; }
.security-card-edge:after { width:110px; height:110px; }
.security-card-edge b { z-index:1; padding:11px 14px; border:1px solid #d6ddea; border-radius:10px; background:white; font:650 10px ui-monospace,monospace; }
.security-card-edge .request-dot { position:absolute; z-index:2; top:38px; left:46px; width:8px; height:8px; border-radius:50%; background:#ff5378; box-shadow:0 0 0 5px rgba(255,83,120,.12); }
.security-card-edge em { position:absolute; right:14px; bottom:12px; color:#df315b; font:normal 750 8px ui-monospace,monospace; }
.security-card-origin { display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:7px; padding:20px; }
.security-card-origin b,.security-card-origin strong { padding:12px 9px; border:1px solid #d6ddea; border-radius:9px; background:white; font:700 9px ui-monospace,monospace; }
.security-card-origin strong { background:#11182a; color:white; }
.security-card-origin i { height:1px; background:#ff5378; color:transparent; }
.security-card-origin small { position:absolute; bottom:17px; left:20px; color:#778197; font:700 8px ui-monospace,monospace; }
.security-card-account { padding:18px; background:linear-gradient(145deg,#11182a,#1c2848); color:white; }
.security-card-account>span,.security-card-account>small { display:block; color:#8e9bb5; font:700 8px ui-monospace,monospace; }
.security-card-account>div { display:flex; align-items:center; justify-content:space-between; margin:24px 0 18px; padding:14px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.06); }
.security-card-account b { font:650 11px ui-monospace,monospace; }.security-card-account em{color:#ff809b;font:normal 700 8px ui-monospace,monospace;}
.security-operations .shell { display:grid; grid-template-columns:.72fr 1.28fr; gap:80px; align-items:start; }
.security-operations__intro { position:sticky; top:120px; }
.security-operations__intro h2 { margin:18px 0 14px; font-size:50px; letter-spacing:-.055em; }
.security-operations__intro p { max-width:420px; line-height:1.65; }
.security-legend { display:flex; flex-wrap:wrap; gap:16px; margin-top:30px; color:#9aa5ba; font-size:10px; }
.security-legend span { display:flex; align-items:center; gap:7px; }.security-legend i{width:8px;height:8px;border-radius:50%;}.security-legend .is-enforced{background:#ff5378}.security-legend .is-operational{background:#7486ff}
.security-operations dl { margin:0; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:rgba(255,255,255,.035); overflow:hidden; }
.security-operations dl>div { display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px; padding:20px 22px; border-bottom:1px solid rgba(255,255,255,.1); }
.security-operations dl>div:last-child{border-bottom:0}.security-operations dt{display:flex;align-items:center;gap:14px;color:white}.security-operations dt>i{display:grid;width:30px;height:30px;place-items:center;border-radius:8px;background:rgba(255,255,255,.07);color:#8d99af;font:normal 700 8px ui-monospace,monospace}.security-operations dt b,.security-operations dt small{display:block}.security-operations dt b{font-size:13px}.security-operations dt small{margin-top:4px;color:#7f8a9e;font-size:9px}.security-operations dd{margin:0;padding:6px 9px;border-radius:99px;font:700 9px ui-monospace,monospace;white-space:nowrap}.security-operations dd.is-enforced{background:rgba(255,83,120,.11);color:#ff8ba3}.security-operations dd.is-operational{background:rgba(116,134,255,.12);color:#aeb7ff}.security-operations dd a{color:inherit}
@media(max-width:900px){.security-boundary-grid{grid-template-columns:1fr}.security-operations .shell{grid-template-columns:1fr;gap:35px}.security-operations__intro{position:static}.security-hero .mp-hero-grid{grid-template-columns:1fr}.security-control{margin-top:20px}}
@media(max-width:600px){.security-control__request{grid-template-columns:1fr}.security-control__checks>div{grid-template-columns:30px 1fr}.security-control__checks em{grid-column:2;justify-self:start}.security-operations dl>div{grid-template-columns:1fr}.security-operations dd{justify-self:start;margin-left:44px}.security-operations__intro h2{font-size:38px}}

.mp-faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: 100px; }
.mp-faq details { border-top: 1px solid #bbb7af; padding: 21px 0; }
.mp-faq summary { cursor: pointer; font-size: 17px; font-weight: 700; }
.mp-faq details p { margin: 15px 0 0; }

.mp-onboarding-visual { padding: 26px; border: 1px solid #bdb9b1; background: white; box-shadow: 14px 14px 0 var(--pink); }
.mp-onboarding-visual > div { display: flex; justify-content: space-between; margin-bottom: 38px; }
.mp-onboarding-visual > div span, .mp-onboarding-visual label { color: #7b7974; font: 700 9px ui-monospace, monospace; }
.mp-onboarding-visual label, .mp-onboarding-visual strong, .mp-onboarding-visual code, .mp-onboarding-visual small { display: block; }
.mp-onboarding-visual strong, .mp-onboarding-visual code { margin: 8px 0 25px; padding: 15px; border: 1px solid #d2cec6; font: 650 12px ui-monospace, monospace; }
.mp-onboarding-visual strong i { float: right; color: #169254; }
.mp-onboarding-visual small { color: #73716c; }
.mp-onboarding-visual small i { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #f0b426; }
.mp-state-board { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #bbb7af; }
.mp-state-board span { padding: 25px; border-right: 1px solid #bbb7af; }
.mp-state-board span:last-child { border-right: 0; }
.mp-state-board b, .mp-state-board i { display: block; }
.mp-state-board b { margin-bottom: 35px; color: #77746e; font: 700 9px ui-monospace, monospace; }
.mp-state-board i { color: #138249; font-style: normal; font-weight: 750; }

.mp-tenant-visual { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 9px; }
.mp-tenant-visual span, .mp-tenant-visual strong, .mp-tenant-visual b { padding: 14px; border: 1px solid #46464c; background: #19191d; font: 650 10px ui-monospace, monospace; text-align: center; }
.mp-tenant-visual i { grid-column: 1 / -1; width: 1px; height: 30px; background: var(--pink); justify-self: center; }
.mp-tenant-visual b { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 9px; border-color: var(--pink); }
.mp-tenant-visual b img { width: 22px; }
.mp-tenant-visual strong { grid-column: 1 / -1; color: var(--acid); }
.mp-request-visual { border: 1px solid #c3bfb7; background: white; }
.mp-request-visual small, .mp-request-visual code, .mp-request-visual b { display: block; padding: 18px 22px; }
.mp-request-visual small { border-bottom: 1px solid #ddd9d1; color: var(--pink); font: 700 9px ui-monospace, monospace; }
.mp-request-visual code { font: 12px/1.8 ui-monospace, monospace; }
.mp-request-visual b { background: var(--ink); color: white; font: 650 11px ui-monospace, monospace; }

.mp-compare { border: 1px solid #aaa69e; background: white; box-shadow: 12px 12px 0 var(--ink); }
.mp-compare > div { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border-bottom: 1px solid #d2cec6; }
.mp-compare > div:last-child { border-bottom: 0; }
.mp-compare span, .mp-compare b, .mp-compare strong { padding: 19px 22px; }
.mp-compare b, .mp-compare strong { border-left: 1px solid #d2cec6; }
.mp-compare b { color: #817f79; font-weight: 550; }
.mp-compare strong { background: #fff1f5; color: var(--pink); }
.mp-compare-head { font: 750 9px ui-monospace, monospace; letter-spacing: .08em; }
.mp-burden { display: grid; gap: 14px; }
.mp-burden span { padding: 22px; border: 1px solid #48484d; color: #b2b2b8; }
.mp-burden i { display: block; margin-bottom: 10px; color: var(--pink); font: 750 9px ui-monospace, monospace; font-style: normal; }

.mp-europe-visual { display: grid; min-height: 380px; align-content: center; gap: 44px; padding: 38px; border: 1px solid #bcb8b0; background-color: white; background-image: radial-gradient(#d2cec6 1px, transparent 1px); background-size: 18px 18px; box-shadow: 14px 14px 0 var(--pink); }
.mp-europe-visual > span { color: #98958e; font: 750 10px ui-monospace, monospace; letter-spacing: .14em; }
.mp-europe-visual > div { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 10px; }
.mp-europe-visual b { padding: 14px; border: 1px solid #aaa69e; background: white; font: 700 9px ui-monospace, monospace; }
.mp-europe-visual i { height: 1px; background: var(--pink); }
.mp-europe-visual small { color: #73716c; }
.mp-principles { counter-reset: principle; }
.mp-principles article { display: grid; grid-template-columns: 60px 1fr; padding: 30px 0; border-top: 1px solid #bbb7af; }
.mp-principles article > span { grid-row: 1 / 3; color: var(--pink); font: 750 10px ui-monospace, monospace; }
.mp-principles h3 { margin: 0 0 8px; font-size: 22px; }
.mp-principles p { margin: 0; }
.mp-manifesto { grid-template-columns: auto 1fr auto 1fr auto 1fr auto; font: 750 13px ui-monospace, monospace; }
.mp-manifesto i { height: 1px; background: var(--pink); }

.mp-contact-card { display: grid; grid-template-columns: 1fr; border: 1px solid #bcb8b0; background: white; box-shadow: 14px 14px 0 var(--pink); }
.mp-contact-card span { padding: 20px 25px 8px; color: #8a8781; font: 750 9px ui-monospace, monospace; letter-spacing: .09em; }
.mp-contact-card a { display: flex; justify-content: space-between; padding: 6px 25px 22px; border-bottom: 1px solid #d5d1c9; font-size: 19px; font-weight: 720; }
.mp-contact-card a:last-child { border-bottom: 0; }
.mp-contact-card a b { color: var(--pink); }
.mp-contact-bottom { display: flex; align-items: center; justify-content: space-between; gap: 60px; }

.multipage-site .site-footer { padding-top: 72px; }

@media (max-width: 900px) {
    .mp-hero { padding: 88px 0; }
    .mp-hero-grid, .mp-split { grid-template-columns: 1fr; gap: 64px; }
    .mp-hero-copy h1, .mp-hero-centered h1 { font-size: clamp(54px, 10vw, 76px); }
    .mp-grid-3, .mp-sdk-grid { grid-template-columns: 1fr; }
    .mp-card, .mp-section-ink .mp-grid-3 > article { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--ink); }
    .mp-card:last-child, .mp-section-ink .mp-grid-3 > article:last-child { border-bottom: 0; }
    .mp-card h3, .mp-section-ink .mp-grid-3 h3 { margin-top: 45px; }
    .mp-process > article { grid-template-columns: 52px 1fr; }
    .mp-process > article > :last-child { grid-column: 2; }
    .mp-lifecycle { grid-template-columns: 1fr 1fr; gap: 15px; }
    .mp-lifecycle > i { display: none; }
    .mp-faq { grid-template-columns: 1fr; gap: 45px; }
    .mp-state-board { grid-template-columns: 1fr 1fr; }
    .mp-state-board span:nth-child(2) { border-right: 0; }
    .mp-state-board span:nth-child(-n+2) { border-bottom: 1px solid #bbb7af; }
}

@media (max-width: 560px) {
    .mp-hero { padding: 65px 0 72px; }
    .mp-hero-grid, .mp-split { gap: 46px; }
    .mp-hero-copy h1, .mp-hero-centered h1 { font-size: 49px; }
    .mp-hero-copy > p, .mp-hero-centered p { font-size: 16px; }
    .mp-actions { align-items: stretch; flex-direction: column; }
    .mp-actions .button { width: 100%; }
    .mp-actions > a:not(.button) { align-self: flex-start; }
    .mp-section { padding: 75px 0; }
    .mp-section h2 { font-size: 40px; }
    .mp-domain-visual, .mp-dns-visual, .mp-package-terminal, .mp-onboarding-visual, .mp-europe-visual, .mp-contact-card { box-shadow: 8px 8px 0 var(--pink); }
    .mp-browser-body { min-height: 315px; padding: 30px 22px; }
    .mp-browser-body h3 { font-size: 29px; }
    .mp-route-caption { grid-template-columns: 1fr; }
    .mp-route-caption i { transform: rotate(90deg); }
    .mp-lifecycle { grid-template-columns: 1fr; }
    .mp-origin-map, .mp-manifesto { grid-template-columns: 1fr; padding: 24px; }
    .mp-origin-map i, .mp-manifesto i { width: 1px; height: 25px; justify-self: center; }
    .mp-origin-map small { grid-column: 1; }
    .mp-process > article { grid-template-columns: 1fr; gap: 25px; padding: 46px 0; }
    .mp-process > article > :last-child { grid-column: 1; }
    .mp-record, .mp-event { grid-template-columns: 1fr; }
    .mp-sdk-list { grid-template-columns: 1fr; }
    .mp-shield-visual { min-height: 330px; }
    .mp-ring { width: 270px; height: 270px; }
    .mp-state-board { grid-template-columns: 1fr; }
    .mp-state-board span { border-right: 0; border-bottom: 1px solid #bbb7af; }
    .mp-state-board span:last-child { border-bottom: 0; }
    .mp-compare { overflow-x: auto; box-shadow: 8px 8px 0 var(--ink); }
    .mp-compare > div { min-width: 680px; }
    .mp-contact-card a { font-size: 15px; }
    .mp-contact-bottom { align-items: flex-start; flex-direction: column; }
}

/* Premium product-art direction */
.marketing-site {
    --canvas: #eef1f8;
    --canvas-blue: #dceaff;
    --canvas-rose: #ffe4eb;
    --navy: #11182a;
    --soft-line: rgba(27, 35, 55, .11);
    background: #fff;
    color: var(--navy);
}
.marketing-site .button { border-radius: 11px; }
.shell { width: min(1200px, calc(100% - 56px)); }
.site-header { padding: 14px 0; border: 0; background: rgba(238,241,248,.88); backdrop-filter: blur(22px); }
.header-inner { min-height: 68px; padding: 0 18px 0 20px; border: 1px solid rgba(29,36,53,.1); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 12px 35px rgba(27,35,55,.07); }
.desktop-nav { height: 68px; }
.desktop-nav > a, .nav-dropdown > summary { min-height: 38px; border-radius: 10px; }
.header-brand { color: var(--navy); }
.header-actions .button-dark { border-radius: 11px; }
.nav-mega { top: 62px; border-color: rgba(29,36,53,.1); border-radius: 20px; box-shadow: 0 35px 90px rgba(27,35,55,.16); }
.nav-mega-main { background: linear-gradient(145deg, #f4f7ff, #fff2f5); }

.hero-v6 { min-height: 1010px; margin: 18px 18px 26px; overflow: hidden; padding: 54px 0 70px; border: 1px solid rgba(68,83,117,.1); border-radius: 34px; background: linear-gradient(180deg, #e9f1f7 0%, #f5f4f0 54%, #e3e5dc 100%); color: var(--navy); isolation: isolate; }
.hero-v6::before, .hero-v6::after { display: none; }
.hero-landscape { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; background-image: var(--hero-landscape); background-repeat: no-repeat; background-position: center bottom; background-size: cover; pointer-events: none; }
.hero-landscape-foreground { display: none; }
.hero-v6 .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 42px; }
.hero-v6 .hero-copy { position: relative; z-index: 5; display: grid; max-width: 970px; justify-items: center; text-align: center; }
.hero-v6 .overline { width: max-content; margin-bottom: 25px; padding: 9px 13px; border: 1px solid rgba(26,36,59,.12); border-radius: 999px; background: rgba(255,255,255,.58); color: #536078; backdrop-filter: blur(12px); }
.hero-v6 .overline > span { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,37,95,.1); }
.hero-v6 h1 { max-width: 1080px; margin-bottom: 24px; color: var(--navy); font-size: clamp(60px, 6.3vw, 84px); font-weight: 690; letter-spacing: -.075em; line-height: .94; }
.hero-v6 .hero-lead { max-width: 720px; margin-bottom: 25px; color: #5e687d; font-size: 18px; line-height: 1.65; }
.hero-v6 .hero-lead strong { color: var(--navy); }
.hero-v6 .hero-actions { justify-content: center; }
.hero-v6 .button-primary { min-height: 54px; border-radius: 12px; box-shadow: 0 14px 30px rgba(255,37,95,.22); }
.hero-v6 .text-action { border: 0; padding: 15px 18px; color: var(--navy); }
.hero-v6 .hero-footnote {
    margin-top: 26px;
    padding-bottom: 8px;
    color: #7a8395;
    line-height: 1.5;
}
.hero-v6 .route-board { position: relative; z-index: 2; width: min(1060px, 100%); overflow: hidden; border: 1px solid rgba(35,46,70,.13); border-radius: 25px 25px 0 0; background: rgba(255,255,255,.94); box-shadow: 0 42px 100px rgba(25,39,53,.24), 0 0 0 10px rgba(255,255,255,.38); color: var(--navy); backdrop-filter: blur(18px); }
.hero-v6 .board-head { height: 56px; border-color: #e3e7ef; background: rgba(249,250,253,.8); color: #7d879b; }
.hero-v6 .board-head strong { color: #16804b; }
.hero-v6 .domain-simulator { max-width: 690px; margin: 0 auto; padding: 32px 28px 15px; }
.hero-v6 .domain-simulator label { color: #8992a5; }
.hero-v6 .simulator-control { min-height: 54px; overflow: hidden; border-color: #dce1eb; border-radius: 12px; background: white; box-shadow: 0 7px 18px rgba(33,43,65,.05); }
.hero-v6 .simulator-control > span { color: #8a93a4; }
.hero-v6 .simulator-control input { color: var(--navy); }
.hero-v6 .simulator-control button { border-radius: 9px; margin: 5px; }
.hero-v6 .domain-simulator p { color: #8a93a4; }
.hero-v6 .route-flow { display: grid; grid-template-columns: 1fr 66px 1fr 66px 1fr; align-items: center; padding: 30px 34px 36px; }
.hero-v6 .route-node { min-height: 122px; grid-template-columns: 42px 1fr; align-content: center; border-color: #dfe3ec; border-radius: 15px; background: #f9fafc; box-shadow: 0 8px 24px rgba(35,44,65,.055); }
.hero-v6 .route-node-edge { border-color: rgba(255,37,95,.32); background: linear-gradient(145deg, #fff, #fff1f5); }
.hero-v6 .node-index { border-color: #d6dbe6; border-radius: 10px; background: white; }
.hero-v6 .route-node small { color: #969dad; }
.hero-v6 .route-node strong { color: var(--navy); }
.hero-v6 .node-state { grid-column: 2; margin-top: 8px; }
.hero-v6 .route-connector { display: grid; height: auto; min-width: 0; grid-template-columns: 1fr; padding: 0; place-items: center; }
.hero-v6 .route-connector > * { display: none; }
.hero-v6 .route-connector::after { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #d9dee8; border-radius: 50%; background: white; color: var(--pink); content: "→"; font-size: 13px; box-shadow: 0 5px 14px rgba(29,38,58,.07); }
.hero-v6 .board-foot { min-height: 50px; border-color: #e3e7ef; background: #fafbfc; color: #8b94a6; }

.section, .developer-section, .pricing-section, .mp-section { padding: 115px 0; }
.product-section { background: #f8f9fc; }
.section-intro { margin-bottom: 60px; }
.section-intro h2, .details-title h2, .pricing-head h2, .final-cta h2, .developer-copy h2 { color: var(--navy); font-weight: 690; }
.steps-list { display: grid; gap: 24px; border: 0; }
.steps-list::before, .route-tracer { display: none; }
.step-row { min-height: 360px; padding: 48px; border: 1px solid var(--soft-line); border-radius: 28px; background: white; box-shadow: 0 24px 65px rgba(33,43,66,.07); }
.step-number { border: 0; background: #fff0f4; color: var(--pink); }
.product-fragment { overflow: hidden; border-color: #e0e4ec; border-radius: 19px; background: #f9fafc; box-shadow: 0 18px 45px rgba(38,49,74,.09); }
.fragment-label { background: white; }
.field-value, .dns-line, .status-domain, .status-table { border-color: #e0e4ec; background: white; }

.developer-section { margin: 28px 18px; overflow: hidden; border-radius: 34px; background: radial-gradient(circle at 80% 20%, rgba(90,111,255,.26), transparent 28%), radial-gradient(circle at 16% 90%, rgba(255,37,95,.17), transparent 25%), #11182a; }
.developer-copy h2 { color: white; }
.api-window { overflow: hidden; border-color: rgba(255,255,255,.14); border-radius: 22px; background: rgba(17,21,35,.8); box-shadow: 0 30px 80px rgba(0,0,0,.28), 0 0 0 8px rgba(255,255,255,.045); backdrop-filter: blur(12px); }
.api-head, .api-response { border-color: rgba(255,255,255,.1); }
.details-section { background: var(--canvas); }
.detail-list article { border-color: #dce1ea; }
.detail-list article > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: white; box-shadow: 0 5px 14px rgba(30,40,62,.07); }
.stack-section { margin: 0 18px 28px; border: 0; border-radius: 20px; background: white; box-shadow: 0 12px 35px rgba(27,35,55,.055); }
.stack-list span { border-color: #dce1e9; border-radius: 999px; background: #f7f8fb; }
.pricing-section { border: 0; background: #f8f9fc; }
.pricing-table { gap: 18px; border: 0; background: transparent; }
.pricing-table article { min-height: 490px; border: 1px solid var(--soft-line) !important; border-radius: 24px; box-shadow: 0 20px 55px rgba(33,43,66,.06); }
.pricing-table article.plan-featured { background: linear-gradient(160deg, #fff, #fff0f4); box-shadow: 0 24px 65px rgba(255,37,95,.12); }
.pricing-table article.plan-featured::before { position: absolute; top: -1px; right: 24px; left: 24px; height: 3px; border-radius: 0 0 3px 3px; background: var(--pink); content: ""; }
.pricing-table article { position: relative; }
.final-cta { margin: 28px 18px; overflow: hidden; border-radius: 34px; background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.28), transparent 25%), linear-gradient(135deg, #ff356c, #e61b55 58%, #b81043); }
.site-footer { margin-top: 0; background: #11182a; }

.multipage-site { background: #fff; }
.mp-hero { margin: 18px 18px 28px; padding: 100px 0; border: 1px solid var(--soft-line); border-radius: 34px; background: radial-gradient(circle at 84% 24%, rgba(255,220,229,.75), transparent 24%), linear-gradient(145deg, #e3efff, #f6f2ff 58%, #fff); }
.mp-hero-dark, .mp-hero-code { border-color: rgba(39,51,80,.15); background: radial-gradient(circle at 80% 25%, rgba(87,112,255,.25), transparent 27%), radial-gradient(circle at 15% 90%, rgba(255,37,95,.15), transparent 24%), #11182a; }
.mp-hero-copy h1, .mp-hero-centered h1 { font-weight: 690; }
.mp-domain-visual, .mp-dns-visual, .mp-package-terminal, .mp-onboarding-visual, .mp-europe-visual, .mp-contact-card { overflow: hidden; border-color: rgba(32,42,64,.12); border-radius: 24px; box-shadow: 0 30px 75px rgba(31,44,74,.16); }
.mp-code-large { border-radius: 22px; box-shadow: 0 28px 70px rgba(0,0,0,.25); }
.mp-section { border: 0; background: #f8f9fc; }
.mp-section-muted { background: var(--canvas); }
.mp-section-ink { margin: 28px 18px; border-radius: 34px; background: radial-gradient(circle at 82% 22%, rgba(88,111,255,.2), transparent 25%), #11182a; }
.mp-grid-3 { gap: 18px; border: 0; }
.mp-card, .mp-section-ink .mp-grid-3 > article { border: 1px solid var(--soft-line); border-radius: 22px; background: white; box-shadow: 0 20px 50px rgba(32,43,68,.06); }
.mp-section-ink .mp-grid-3 > article { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.045); }
.mp-lifecycle { gap: 13px; }
.mp-lifecycle > i { width: 22px; justify-self: center; }
.mp-lifecycle article { border-color: #dfe3eb; border-radius: 18px; background: white; box-shadow: 0 14px 35px rgba(35,45,68,.06); }
.mp-lifecycle article:last-child { border-color: rgba(255,37,95,.35); box-shadow: 0 18px 45px rgba(255,37,95,.12); }
.mp-sdk-grid { gap: 18px; }
.mp-sdk-grid article, .mp-sdk-list, .mp-state-board, .mp-request-visual, .mp-security-table dl, .mp-compare { overflow: hidden; border-color: var(--soft-line); border-radius: 22px; background: white; box-shadow: 0 20px 50px rgba(32,43,68,.07); }
.mp-compare { box-shadow: 0 25px 65px rgba(32,43,68,.1); }

@media (max-width: 900px) {
    .shell { width: min(100% - 36px, 760px); }
    .site-header { padding: 10px 0; }
    .site-header .shell { width: calc(100% - 24px); }
    .header-inner { min-height: 64px; }
    .mobile-menu nav { top: 64px; right: -18px; left: -18px; }
    .hero-v6, .mp-hero, .developer-section, .mp-section-ink, .final-cta { margin-right: 12px; margin-left: 12px; border-radius: 26px; }
    .hero-v6 { min-height: 1110px; padding-top: 72px; }
    .hero-landscape { width: 100%; left: 0; }
    .hero-v6 h1 { font-size: clamp(58px, 11vw, 80px); }
    .hero-v6 .route-flow { grid-template-columns: 1fr; gap: 12px; }
    .hero-v6 .route-connector { height: 34px; }
    .hero-v6 .route-connector::after { content: "↓"; }
    .hero-v6 .route-node { min-height: 105px; }
    .step-row { padding: 38px; }
    .mp-card, .mp-section-ink .mp-grid-3 > article { border-right: 1px solid var(--soft-line); border-bottom: 1px solid var(--soft-line); }
}

@media (max-width: 560px) {
    .shell { width: min(100% - 28px, 520px); }
    .site-header .shell { width: calc(100% - 20px); }
    .header-inner { padding: 0 12px; border-radius: 15px; }
    .header-brand { gap: 8px; font-size: 15px; }
    .header-brand img { width: 31px; height: 31px; }
    .mobile-menu nav { right: -12px; left: -12px; }
    .hero-v6 { min-height: 1230px; margin: 8px 8px 18px; padding: 58px 0 54px; border-radius: 23px; }
    .hero-landscape { width: 100%; left: 0; }
    .hero-v6 h1 { font-size: 48px; }
    .hero-v6 .hero-lead { font-size: 16px; }
    .hero-v6 .hero-footnote { margin-top: 22px; padding-bottom: 5px; }
    .hero-v6 .route-board { border-radius: 18px 18px 0 0; box-shadow: 0 25px 55px rgba(45,69,110,.18); }
    .hero-v6 .domain-simulator { padding: 24px 14px 12px; }
    .hero-v6 .simulator-control { grid-template-columns: auto 1fr; }
    .hero-v6 .simulator-control button { grid-column: 1 / -1; min-height: 42px; }
    .hero-v6 .route-flow { padding: 20px 14px 26px; }
    .signal-strip, .stack-section { margin-right: 8px; margin-left: 8px; }
    .step-row { padding: 28px 22px; border-radius: 22px; }
    .developer-section, .final-cta, .mp-hero, .mp-section-ink { margin-right: 8px; margin-left: 8px; border-radius: 23px; }
}

/* Editorial typography system
   ---------------------------
   Deliberately uses local system faces: no render-blocking font request and no
   late layout shift. Display copy is expressive; product UI remains neutral. */
.marketing-site {
    --font-sans: "Inter", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
    --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
    font-family: var(--font-sans);
    font-kerning: normal;
    font-optical-sizing: auto;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

.marketing-site main {
    font-family: var(--font-sans);
    font-size: 16px;
    letter-spacing: -.006em;
    line-height: 1.6;
}

.marketing-site main h1,
.marketing-site main h2,
.marketing-site main h3 {
    color: inherit;
    text-wrap: balance;
}

.marketing-site main p,
.marketing-site main li,
.marketing-site main dd {
    text-wrap: pretty;
}

/* The display face is reserved for proposition-level messages. Keeping card
   and interface headings sans-serif makes the hierarchy immediately legible. */
.marketing-site main .hero h1,
.marketing-site main .mp-hero h1,
.marketing-site main .section-intro h2,
.marketing-site main .details-title h2,
.marketing-site main .pricing-head h2,
.marketing-site main .developer-copy h2,
.marketing-site main .mp-section-head h2,
.marketing-site main .mp-split > div:first-child > h2,
.marketing-site main .mp-contact-bottom h2,
.marketing-site main .mp-faq > div:first-child h2,
.marketing-site .final-cta h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-variation-settings: normal;
    letter-spacing: -.048em;
    line-height: .98;
}

.marketing-site main .hero h1,
.marketing-site main .mp-hero h1 {
    max-width: 15ch;
    font-size: clamp(68px, 7.1vw, 106px);
    letter-spacing: -.055em;
    line-height: .91;
}

.marketing-site main .hero-v6 h1 {
    max-width: 1080px;
    font-size: clamp(72px, 7.3vw, 108px);
}

.marketing-site main .mp-hero-copy h1 {
    max-width: 12ch;
}

.marketing-site main .mp-hero-centered h1 {
    max-width: 16ch;
    margin-right: auto;
    margin-left: auto;
}

.marketing-site main .section-intro h2,
.marketing-site main .details-title h2,
.marketing-site main .pricing-head h2,
.marketing-site main .developer-copy h2,
.marketing-site main .mp-section-head h2,
.marketing-site main .mp-split > div:first-child > h2,
.marketing-site main .mp-contact-bottom h2,
.marketing-site main .mp-faq > div:first-child h2 {
    max-width: 15ch;
    font-size: clamp(50px, 5.2vw, 76px);
}

.marketing-site .final-cta h2 {
    max-width: 16ch;
    font-size: clamp(46px, 4.8vw, 70px);
}

.marketing-site main h3,
.marketing-site main .step-copy h3,
.marketing-site main .mp-card h3,
.marketing-site main .mp-section-ink .mp-grid-3 h3,
.marketing-site main .detail-list h3 {
    font-family: var(--font-sans);
    font-weight: 620;
    letter-spacing: -.035em;
    line-height: 1.12;
}

.marketing-site main .step-copy h3 { font-size: clamp(28px, 3vw, 38px); }
.marketing-site main .mp-card h3,
.marketing-site main .mp-section-ink .mp-grid-3 h3 { font-size: 24px; }

.marketing-site main .hero-lead,
.marketing-site main .mp-hero-copy > p,
.marketing-site main .mp-hero-centered > p {
    max-width: 58ch;
    font-size: clamp(17px, 1.45vw, 20px);
    font-weight: 400;
    letter-spacing: -.012em;
    line-height: 1.58;
}

.marketing-site main .section-intro > p:last-child,
.marketing-site main .mp-section-head > p,
.marketing-site main .mp-split > div:first-child > p,
.marketing-site main .developer-copy > p:not(.overline) {
    max-width: 58ch;
    font-size: 17px;
    letter-spacing: -.008em;
    line-height: 1.68;
}

.marketing-site main .step-copy p,
.marketing-site main .mp-card p,
.marketing-site main .mp-section-ink .mp-grid-3 p,
.marketing-site main .detail-list p {
    max-width: 54ch;
    font-size: 15px;
    line-height: 1.62;
}

/* Technical language has one consistent voice and aligned numeric rhythm. */
.marketing-site main code,
.marketing-site main pre,
.marketing-site main kbd,
.marketing-site main samp,
.marketing-site main .overline,
.marketing-site main .fragment-label,
.marketing-site main .board-head,
.marketing-site main .board-foot,
.marketing-site main .route-node small,
.marketing-site main .route-node strong,
.marketing-site main .node-state,
.marketing-site main .plan-head > span,
.marketing-site main .mp-state-board b {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums slashed-zero;
}

.marketing-site main .overline {
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .14em;
    line-height: 1.25;
}

.marketing-site main .mp-code,
.marketing-site main .mp-package-terminal pre,
.marketing-site main .api-window pre {
    font-size: 12px;
    letter-spacing: -.012em;
    line-height: 1.78;
    tab-size: 2;
}

.marketing-site main .plan-head strong,
.marketing-site main .status-table,
.marketing-site main .mp-state-board,
.marketing-site main .mp-compare {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .marketing-site main .hero h1,
    .marketing-site main .mp-hero h1,
    .marketing-site main .hero-v6 h1 {
        font-size: clamp(62px, 11.5vw, 88px);
    }

    .marketing-site main .section-intro h2,
    .marketing-site main .details-title h2,
    .marketing-site main .pricing-head h2,
    .marketing-site main .developer-copy h2,
    .marketing-site main .mp-section-head h2,
    .marketing-site main .mp-split > div:first-child > h2,
    .marketing-site main .mp-contact-bottom h2,
    .marketing-site main .mp-faq > div:first-child h2 {
        font-size: clamp(47px, 8vw, 66px);
    }
}

/* Editorial lifecycle transition: a single landscape and an organic route.
   This intentionally replaces the former four-panel operational dashboard. */
.marketing-site .signal-strip {
    position: relative;
    isolation: isolate;
    min-height: 560px;
    overflow: hidden;
    margin: 0 18px 42px;
    padding: 0;
    border: 1px solid rgba(35, 49, 61, .08);
    border-top-color: transparent;
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(248, 250, 249, .97) 0%, rgba(248, 250, 249, .91) 36%, rgba(246, 247, 241, .5) 66%, rgba(15, 27, 27, .34) 100%),
        url('/marketing/scenes/home-capability-dunes.webp') center 63% / cover no-repeat;
    color: var(--navy, #11182a);
    box-shadow: 0 26px 72px rgba(37, 48, 48, .11);
}

.marketing-site .signal-landscape {
    display: grid;
    min-height: 560px;
    align-content: space-between;
    padding-top: 70px;
    padding-bottom: 48px;
}

.marketing-site .signal-intro {
    display: grid;
    max-width: 700px;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .62fr);
    column-gap: 52px;
    align-items: end;
}

.marketing-site .signal-intro > span {
    grid-column: 1 / -1;
    margin-bottom: 17px;
    color: #687466;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
    font-size: 11px;
    font-weight: 670;
    letter-spacing: .02em;
}

.marketing-site .signal-intro h2 {
    margin: 0;
    color: #17231f;
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(44px, 5vw, 70px);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: .95;
}

.marketing-site .signal-intro p {
    margin: 0 0 4px;
    color: #5f6b66;
    font-size: 14px;
    line-height: 1.62;
}

.marketing-site .signal-path {
    position: relative;
    min-height: 162px;
}

.marketing-site .signal-path > svg {
    position: absolute;
    top: 10px;
    right: 0;
    left: 0;
    width: 100%;
    height: 110px;
    overflow: visible;
    filter: drop-shadow(0 2px 5px rgba(11, 25, 23, .2));
}

.marketing-site .signal-path > svg path {
    fill: none;
    stroke: rgba(255, 255, 255, .82);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 2 9;
    vector-effect: non-scaling-stroke;
}

.marketing-site .signal-path ol {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 5vw, 82px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.marketing-site .signal-path li {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    color: #fff;
    text-shadow: 0 2px 16px rgba(13, 26, 24, .48);
}

.marketing-site .signal-path li:nth-child(1) { margin-top: 61px; }
.marketing-site .signal-path li:nth-child(2) { margin-top: 82px; }
.marketing-site .signal-path li:nth-child(3) { margin-top: 43px; }
.marketing-site .signal-path li:nth-child(4) { margin-top: 66px; }

.marketing-site .signal-path li > span {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 50%;
    background: rgba(24, 36, 33, .82);
    color: #fff;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
    font-size: 9px;
    font-weight: 730;
    box-shadow: 0 8px 22px rgba(12, 24, 21, .18);
    backdrop-filter: blur(8px);
}

.marketing-site .signal-path strong,
.marketing-site .signal-path small {
    display: block;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
}

.marketing-site .signal-path strong {
    font-size: 13px;
    font-weight: 680;
    letter-spacing: -.015em;
}

.marketing-site .signal-path small {
    margin-top: 4px;
    color: rgba(255, 255, 255, .76);
    font-size: 10px;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .marketing-site .signal-strip,
    .marketing-site .signal-landscape { min-height: 600px; }
    .marketing-site .signal-intro { max-width: 640px; }
    .marketing-site .signal-path ol { gap: 18px; }
    .marketing-site .signal-path li { grid-template-columns: 31px minmax(0, 1fr); gap: 9px; }
    .marketing-site .signal-path li > span { width: 31px; height: 31px; }
}

@media (max-width: 640px) {
    .marketing-site .signal-strip {
        min-height: 720px;
        margin: 0 8px 28px;
        border-radius: 23px;
        background-position: 42% center;
    }

    .marketing-site .signal-landscape {
        min-height: 720px;
        padding-top: 52px;
        padding-bottom: 42px;
    }

    .marketing-site .signal-intro {
        display: block;
        max-width: 420px;
    }

    .marketing-site .signal-intro > span { display: block; margin-bottom: 14px; }
    .marketing-site .signal-intro h2 { font-size: clamp(43px, 13vw, 58px); }
    .marketing-site .signal-intro p { max-width: 34ch; margin-top: 19px; font-size: 13px; }
    .marketing-site .signal-path { min-height: 322px; }
    .marketing-site .signal-path > svg { display: none; }
    .marketing-site .signal-path ol {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
        padding-left: 2px;
    }

    .marketing-site .signal-path ol::before {
        position: absolute;
        top: 17px;
        bottom: 17px;
        left: 17px;
        width: 1px;
        background: rgba(255, 255, 255, .45);
        content: "";
    }

    .marketing-site .signal-path li,
    .marketing-site .signal-path li:nth-child(n) {
        z-index: 1;
        margin-top: 0;
        grid-template-columns: 33px minmax(0, 1fr);
        gap: 14px;
    }

    .marketing-site .signal-path li > span { width: 33px; height: 33px; }
    .marketing-site .signal-path strong { font-size: 14px; }
}

/* Editorial labels: typographic wayfinding, without terminal styling or a pill. */
.marketing-site main .overline {
    text-decoration: none;
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 11px;
    border: 0;
    background: none;
    color: #59657a;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 660;
    letter-spacing: .025em;
    line-height: 1.25;
    box-shadow: none;
    text-transform: none;
    backdrop-filter: none;
}

.marketing-site main .overline {
    margin-bottom: 28px;
    padding: 0;
}

.marketing-site main .overline::before,
.marketing-site main .overline::after {
    content: none;
}

.marketing-site main .overline > span {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border: 0;
    border-radius: 2px;
    background: var(--pink);
    box-shadow: 0 0 0 5px rgba(255,37,95,.08);
    content: "";
    transform: rotate(45deg);
}

.marketing-site main .developer-section .overline,
.marketing-site main .mp-section-ink .overline {
    color: rgba(255,255,255,.76);
}

.marketing-site main .developer-section .overline > span,
.marketing-site main .mp-section-ink .overline > span {
    box-shadow: 0 0 0 5px rgba(255,37,95,.14);
}

@media (max-width: 640px) {
    .marketing-site main .overline {
        gap: 9px;
        font-size: 11px;
    }
}

/* Product views live inside an environment, like the product itself does. */
.product-scene {
    position: relative;
    display: grid;
    min-height: 330px;
    align-items: end;
    overflow: hidden;
    padding: 54px 28px 28px;
    border: 1px solid rgba(25, 39, 55, .1);
    border-radius: 24px;
    background-image: linear-gradient(180deg, rgba(244, 248, 250, .08), rgba(224, 233, 230, .35)), url('/marketing/routing-landscape.webp');
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 28px 65px rgba(32, 47, 62, .14);
    isolation: isolate;
}

.product-scene::after {
    position: absolute;
    right: -10%;
    bottom: -34%;
    left: -10%;
    z-index: -1;
    height: 70%;
    border-radius: 50%;
    background: rgba(22, 47, 40, .2);
    filter: blur(34px);
    content: "";
}

.product-scene-domain { background-position: 51% 58%; }
.product-scene-dns { background-position: 15% 70%; }
.product-scene-live { background-position: 88% 64%; }

/* The route evolves across three distinct environments instead of recycling one image. */
.product-scene-domain {
    background-image: linear-gradient(180deg, rgba(244, 248, 250, .06), rgba(224, 233, 230, .28)), url('/marketing/scenes/domain-connect.webp');
}

.product-scene-dns {
    background-image: linear-gradient(180deg, rgba(244, 248, 250, .07), rgba(224, 233, 230, .3)), url('/marketing/scenes/dns-route.webp');
}

.product-scene-live {
    background-image: linear-gradient(180deg, rgba(244, 248, 250, .05), rgba(224, 233, 230, .26)), url('/marketing/scenes/domain-live.webp');
}

.scene-caption {
    position: absolute;
    top: 20px;
    left: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
    background: rgba(255, 255, 255, .62);
    color: #354253;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(40, 53, 68, .08);
    backdrop-filter: blur(14px);
}

.scene-caption span { color: var(--pink); }

.product-scene .product-fragment {
    position: relative;
    z-index: 1;
    max-width: none;
    border-color: rgba(255, 255, 255, .7);
    background: rgba(250, 251, 252, .9);
    box-shadow: 0 24px 60px rgba(24, 39, 48, .22);
    backdrop-filter: blur(18px);
}

.product-scene .dns-instruction {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(23, 28, 37, .92);
}

.product-scene .dns-instruction .dns-line {
    border-color: rgba(255, 255, 255, .11);
    background: transparent;
}

/* Premium product story: each step reads as a focused product capture, not a card
   floating on a stock image. Marketing labels stay in the UI typeface; monospace
   is reserved for hostnames, DNS values and event names. */
.product-section .product-scene {
    min-height: 390px;
    align-items: center;
    padding: 74px 34px 34px;
    border-color: rgba(255, 255, 255, .76);
    border-radius: 30px;
    background-size: cover;
    box-shadow:
        inset 0 0 0 1px rgba(25, 37, 52, .06),
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 32px 70px rgba(26, 40, 55, .18);
}

.product-section .product-scene::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 42%),
        linear-gradient(180deg, rgba(15, 26, 38, .04), rgba(15, 26, 38, .2));
    content: "";
}

.product-section .product-scene::after {
    right: 7%;
    bottom: 13px;
    left: 7%;
    z-index: 0;
    height: 56px;
    border-radius: 50%;
    background: rgba(10, 20, 28, .31);
    filter: blur(25px);
}

.product-section .scene-caption {
    top: 22px;
    left: 34px;
    gap: 9px;
    padding: 8px 13px 8px 9px;
    border-color: rgba(255, 255, 255, .68);
    background: rgba(248, 250, 252, .82);
    color: #2f3b4d;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
    font-size: 11px;
    font-weight: 670;
    letter-spacing: -.01em;
    box-shadow: 0 12px 28px rgba(18, 29, 42, .14);
    backdrop-filter: blur(18px) saturate(125%);
}

.product-section .scene-caption span {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 8px;
    background: #fff0f4;
    color: var(--pink);
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
    font-size: 10px;
    font-weight: 760;
}

.product-section .product-scene .product-fragment {
    z-index: 2;
    width: min(100%, 590px);
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 22px;
    background: rgba(250, 251, 253, .94);
    box-shadow:
        0 30px 58px rgba(16, 29, 40, .26),
        0 3px 10px rgba(16, 29, 40, .1),
        inset 0 1px 0 white;
    backdrop-filter: blur(22px) saturate(120%);
}

.product-section .fragment-label {
    position: relative;
    padding: 17px 21px 17px 48px;
    border-color: rgba(35, 49, 68, .1);
    background: rgba(255, 255, 255, .72);
    color: #566277;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .055em;
}

.product-section .fragment-label::before {
    position: absolute;
    top: 50%;
    left: 20px;
    width: 14px;
    height: 10px;
    border: 1.5px solid #7a8798;
    border-radius: 3px;
    box-shadow: inset 0 3px 0 rgba(122, 135, 152, .14);
    content: "";
    transform: translateY(-50%);
}

.product-section .domain-form {
    padding-bottom: 21px;
}

.product-section .domain-form .fragment-label { margin-bottom: 20px; }

.product-section .domain-form label {
    margin: 0 21px 7px;
    color: #687386;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
    font-size: 9px;
    font-weight: 680;
    letter-spacing: .045em;
    text-transform: none;
}

.product-section .field-value {
    min-height: 49px;
    margin: 0 21px 17px;
    padding: 0 15px;
    border-color: #dfe4ec;
    border-radius: 10px;
    color: #172033;
    font-size: 12px;
    box-shadow: inset 0 1px 2px rgba(21, 31, 48, .025);
}

.product-section .fragment-action {
    min-height: 46px;
    margin: 3px 21px 0;
    padding: 0 16px;
    border-radius: 10px;
    background: #151b28;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
    font-size: 11px;
    box-shadow: 0 10px 22px rgba(21, 27, 40, .16);
}

.product-section .product-scene .dns-instruction {
    border-color: rgba(255, 255, 255, .13);
    background: rgba(16, 23, 34, .95);
    box-shadow: 0 30px 60px rgba(9, 18, 28, .4), inset 0 1px 0 rgba(255,255,255,.09);
}

.product-section .dns-instruction .fragment-label {
    border-color: rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .035);
    color: rgba(255, 255, 255, .72);
}

.product-section .dns-instruction .fragment-label::before { border-color: rgba(255,255,255,.46); }

.product-section .dns-instruction .dns-line {
    min-height: 59px;
    grid-template-columns: 105px 1fr;
    margin: 0 22px;
    border-color: rgba(255, 255, 255, .09);
}

.product-section .dns-line span {
    color: rgba(255,255,255,.48);
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
    font-size: 9px;
    letter-spacing: .035em;
}

.product-section .dns-line strong { color: #f6f8fb; }

.product-section .checking-line {
    margin: 18px 22px 22px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    background: rgba(255,255,255,.055);
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
}

.product-section .checking-line small { color: rgba(255,255,255,.46); }

.product-section .status-fragment { padding-bottom: 21px; }
.product-section .status-domain { margin: 21px; padding-bottom: 19px; }
.product-section .status-domain > i { border-radius: 10px; }
.product-section .status-domain span strong { color: #172033; }
.product-section .status-domain span small,
.product-section .status-domain b { font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif); }
.product-section .status-domain b { border: 0; border-radius: 999px; background: #e8f7ee; }
.product-section .status-table { margin: 0 21px; overflow: hidden; border-radius: 11px; }
.product-section .status-table span { padding: 14px; font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif); }
.product-section .event-line { margin: 16px 21px 0; font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif); }
.product-section .event-line span { font-family: var(--font-mono, ui-monospace, monospace); }

/* Scroll-led product story. Each lifecycle card remains in view until the next
   state covers it, leaving a slim edge that makes the progression tangible. */
.marketing-site .signal-strip + .product-section {
    /* The landscape lifecycle is the introduction; the cards are its detail,
       so they enter immediately instead of restarting the story. */
    padding-top: clamp(28px, 4vw, 52px);
}

.marketing-site:has(.product-section .steps-list) {
    /* Unlike overflow:hidden, clip does not create a scroll container that
       would prevent the nested sticky cards from tracking the viewport. */
    overflow: clip;
}

.product-section .steps-list {
    display: block;
    padding-bottom: 2px;
}

.product-section .step-row {
    position: sticky;
    top: 106px;
    z-index: 1;
    isolation: isolate;
    overflow: clip;
    min-height: 520px;
    margin: 0 0 clamp(54px, 9vh, 92px);
    padding: clamp(34px, 4vw, 52px);
    grid-template-columns: minmax(300px, .82fr) minmax(480px, 1.18fr);
    gap: clamp(42px, 6vw, 86px);
    border-color: rgba(30, 43, 66, .12);
    background: #fff;
    background-clip: padding-box;
    box-shadow:
        0 -1px 0 rgba(255, 255, 255, .95),
        0 28px 72px rgba(27, 40, 63, .16),
        0 4px 12px rgba(27, 40, 63, .07);
    transform: translateZ(0);
}

.product-section .step-row:nth-of-type(2) {
    top: 118px;
    z-index: 2;
    background: #f9fbfd;
}

.product-section .step-row:nth-of-type(3) {
    top: 130px;
    z-index: 3;
    margin-bottom: 0;
    background: #f7f9fd;
}

.product-section .step-copy {
    align-self: center;
    padding-top: 0;
}

.product-section .step-copy p {
    max-width: 410px;
}

.product-section .step-facts {
    display: grid;
    gap: 0;
    max-width: 410px;
    margin: 30px 0 0;
}

.product-section .step-facts > div {
    display: grid;
    min-height: 39px;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    border-top: 1px solid rgba(31, 44, 66, .1);
}

.product-section .step-facts dt,
.product-section .step-facts dd {
    margin: 0;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
    font-size: 10px;
    line-height: 1.35;
}

.product-section .step-facts dt {
    color: #8490a3;
    font-weight: 620;
}

.product-section .step-facts dd {
    overflow: hidden;
    color: #253149;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-section .step-facts dd:last-child {
    font-variant-numeric: tabular-nums;
}

/* Simulator chrome follows the marketing UI voice. Monospace remains reserved
   for the hostnames themselves and for code samples. */
.hero-v6 .board-head,
.hero-v6 .board-foot,
.hero-v6 .domain-simulator label,
.hero-v6 .route-node small,
.hero-v6 .node-index,
.hero-v6 .node-state {
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
    letter-spacing: -.01em;
}

@media (max-width: 900px) {
    .product-section .product-scene { min-height: 370px; }
    .product-section .steps-list { display: grid; gap: 24px; }
    .product-section .step-row,
    .product-section .step-row:nth-of-type(2),
    .product-section .step-row:nth-of-type(3) {
        position: relative;
        top: auto;
        z-index: auto;
        min-height: 0;
        margin: 0;
        grid-template-columns: 1fr;
        gap: 38px;
        transform: none;
    }
    .product-section .step-copy { align-self: start; }
}

@media (max-width: 560px) {
    .product-section .product-scene {
        min-height: 350px;
        padding: 68px 14px 18px;
        border-radius: 22px;
    }
    .product-section .scene-caption { top: 16px; left: 16px; }
    .product-section .fragment-label { padding-right: 16px; padding-left: 43px; }
    .product-section .fragment-label::before { left: 16px; }
    .product-section .field-value,
    .product-section .domain-form label,
    .product-section .fragment-action { margin-right: 16px; margin-left: 16px; }
    .product-section .dns-instruction .dns-line { grid-template-columns: 82px 1fr; margin: 0 16px; }
    .product-section .checking-line { align-items: flex-start; flex-wrap: wrap; margin: 16px; }
    .product-section .checking-line small { width: 100%; margin-left: 16px; }
    .product-section .status-domain,
    .product-section .status-table,
    .product-section .event-line { margin-right: 16px; margin-left: 16px; }
    .product-section .step-facts { margin-top: 24px; }
    .product-section .step-facts > div { grid-template-columns: 70px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .product-section .steps-list { display: grid; gap: 24px; }
    .product-section .step-row,
    .product-section .step-row:nth-of-type(2),
    .product-section .step-row:nth-of-type(3) {
        position: relative;
        top: auto;
        z-index: auto;
        margin: 0;
        transform: none;
    }
}

/* Accessibility primitives shared by all marketing pages. */
.marketing-site .skip-link {
    position: fixed;
    z-index: 1000;
    top: 8px;
    left: 8px;
    padding: 11px 15px;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    transform: translateY(calc(-100% - 16px));
    transition: transform .16s ease-out;
}

.marketing-site .skip-link:focus { transform: translateY(0); }
.marketing-site main:focus { outline: none; }

.marketing-site :where(a, button, input, summary, [tabindex]):focus-visible {
    outline: 2px solid #f81f5c;
    outline-offset: 3px;
}

.marketing-site :where(img, svg) { max-width: 100%; }
.marketing-site :where(pre, code) { max-width: 100%; }

@media (pointer: coarse) {
    .marketing-site :where(button, summary, a.marketing-cta, .mobile-menu nav > a) {
        min-height: 44px;
    }
}

@media (max-width: 400px) {
    .marketing-site .footer-main { grid-template-columns: 1fr; }
    .marketing-site .footer-main nav a { min-height: 36px; align-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .marketing-site .skip-link { transition: none; }
}

@media (max-width: 900px) {
    .product-scene { min-height: 300px; }
}

@media (max-width: 560px) {
    .product-scene {
        min-height: 290px;
        padding: 52px 14px 14px;
        border-radius: 20px;
    }
}

@media (max-width: 560px) {
    .marketing-site main {
        font-size: 15px;
        line-height: 1.56;
    }

    .marketing-site main .hero h1,
    .marketing-site main .mp-hero h1,
    .marketing-site main .hero-v6 h1 {
        max-width: 13ch;
        font-size: clamp(49px, 14.5vw, 66px);
        letter-spacing: -.05em;
        line-height: .94;
    }

    .marketing-site main .hero-lead,
    .marketing-site main .mp-hero-copy > p,
    .marketing-site main .mp-hero-centered > p {
        max-width: 38ch;
        font-size: 16px;
        line-height: 1.56;
    }

    .marketing-site main .section-intro h2,
    .marketing-site main .details-title h2,
    .marketing-site main .pricing-head h2,
    .marketing-site main .developer-copy h2,
    .marketing-site main .mp-section-head h2,
    .marketing-site main .mp-split > div:first-child > h2,
    .marketing-site main .mp-contact-bottom h2,
    .marketing-site main .mp-faq > div:first-child h2,
    .marketing-site .final-cta h2 {
        max-width: 15ch;
        font-size: clamp(42px, 12vw, 54px);
        line-height: .98;
    }

    .marketing-site main .step-copy h3 { font-size: 29px; }
    .marketing-site main .mp-card h3,
    .marketing-site main .mp-section-ink .mp-grid-3 h3 { font-size: 22px; }

    .marketing-site main .mp-code,
    .marketing-site main .mp-package-terminal pre,
    .marketing-site main .api-window pre {
        font-size: 10px;
        line-height: 1.7;
    }
}

/* Closing sequence: the preceding paper surface dissolves into the conversion
   moment, then returns to the footer's night palette. Pink is light, not a panel. */
.marketing-site .final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(520px, 54vw, 720px);
    margin: 0;
    padding: clamp(116px, 13vw, 178px) 0 clamp(124px, 14vw, 188px);
    border: 0;
    border-radius: 0;
    background: #091321;
    color: #fff;
}

.marketing-site .final-cta::before,
.marketing-site .final-cta::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.marketing-site .final-cta::before {
    z-index: -2;
    background: url('/marketing/scenes/final-cta-crater.webp') 48% 56% / cover no-repeat;
    filter: saturate(.78) contrast(1.08) brightness(.65);
    transform: scale(1.015);
}

.marketing-site .final-cta::after {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(8,17,28,.58), rgba(8,17,28,.32) 48%, rgba(8,17,28,.58)),
        linear-gradient(180deg, rgba(8,17,28,.3) 0%, rgba(8,17,28,.14) 42%, #091321 100%);
}

.marketing-site .final-cta-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
}

.marketing-site .final-cta-inner > .final-cta-copy {
    width: min(100%, 1040px);
    align-items: center;
    gap: 0;
    text-align: center;
}

.marketing-site .final-cta .final-cta-copy h2 {
    max-width: 13ch;
    margin: 0 auto;
    color: #fff;
    font-size: clamp(58px, 7.2vw, 104px);
    font-weight: 520;
    letter-spacing: -.068em;
    line-height: .91;
    text-wrap: balance;
    text-shadow: 0 18px 52px rgba(0, 0, 0, .44);
}

.marketing-site .final-cta-actions {
    justify-content: center;
    margin-top: clamp(36px, 5vw, 56px);
}

@media (max-width: 560px) {
    .marketing-site .final-cta {
        min-height: 520px;
        margin: 0;
        padding: 106px 20px 118px;
    }

    .marketing-site .final-cta::before {
        background-position: 43% center;
        filter: saturate(.72) contrast(1.08) brightness(.58);
    }

    .marketing-site .final-cta::after {
        background:
            linear-gradient(90deg, rgba(8,17,28,.62), rgba(8,17,28,.38) 50%, rgba(8,17,28,.62)),
            linear-gradient(180deg, rgba(8,17,28,.38), rgba(8,17,28,.24) 48%, #091321 100%);
    }

    .marketing-site .final-cta .final-cta-copy h2 {
        max-width: 11ch;
        font-size: clamp(48px, 14vw, 64px);
        line-height: .94;
    }
}

/* Global marketing typography contract. Keep this final in the shared sheet:
   page-specific styles may shape type, but they must not replace the two
   editorial families. Technical values are the only monospace exception. */
.marketing-site,
.marketing-site :where(*) {
    font-family: var(--font-sans) !important;
}

.marketing-site :where(h1, h2, h3, h4, h5, h6),
.marketing-site .nav-usecase-manifesto > strong,
.marketing-site .nav-usecase-feature-copy strong,
.marketing-site .nav-usecase-link strong {
    font-family: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif !important;
}

.marketing-site :where(code, pre, kbd, samp),
.marketing-site :where(.board-head, .board-head *, .board-foot, .board-foot *),
.marketing-site :where(.route-node small, .route-node strong, .node-state),
.marketing-site :where(.simulator-control input, .fragment-label, .field-value),
.marketing-site :where(.dns-line *, .status-domain *, .status-table *, .event-line *),
.marketing-site :where(.api-head, .api-head *, .response-head, .response-head *),
.marketing-site :where(.stack-code-bar, .stack-code-bar *, .stack-code-panel, .stack-code-panel *, .stack-api-response, .stack-api-response *),
.marketing-site :where(.mp-package-terminal, .mp-package-terminal *, .mp-record, .mp-record *, .mp-event, .mp-event *),
.marketing-site :where(.security-control__request, .security-control__request *, .security-control__checks em),
.marketing-site :where(.final-route-domain, .final-route-domain *, .final-route-edge small, .final-route-app small, .final-route-app strong) {
    font-family: var(--font-mono) !important;
}