:root { color-scheme: light; --ink: #112d3c; --muted: #58707a; --teal: #007f7d; --paper: #f5f8f6; }
    * { box-sizing: border-box; }
    body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
    a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
    a:focus-visible { outline: 3px solid var(--teal); outline-offset: 6px; border-radius: 3px; }
    .shell { width: min(1160px, calc(100% - 48px)); margin: auto; }
    header { display: flex; justify-content: space-between; align-items: center; padding: 30px 0; border-bottom: 1px solid #dce5df; }
    .brand { display: inline-flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 750; letter-spacing: -.8px; text-decoration: none; }
    .brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: white; background: var(--ink); font-size: 20px; letter-spacing: -3px; padding-right: 3px; }
    .header-note { color: var(--muted); font-size: 13px; }
    main { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 48px; min-height: min(690px, 75vh); padding: 80px 0; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 24px; color: var(--teal); font-size: 12px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
    .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    h1 { max-width: 690px; margin: 0 0 26px; font-size: clamp(38px, 5vw, 65px); font-weight: 650; line-height: 1.1; letter-spacing: -.055em; }
    h1 span { color: var(--teal); }
    .intro { max-width: 440px; color: var(--muted); font-size: 17px; margin: 0 0 30px; }
    .domain { display: inline-block; max-width: 100%; padding: 8px 14px; border: 1px solid #d3e4dd; border-radius: 8px; background: #fff; color: #39515d; font-size: 13px; overflow-wrap: anywhere; }
    .art { width: 100%; max-width: 435px; justify-self: end; }
    .hosting-note { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 30px; background: #e9f0eb; border-radius: 16px; }
    .hosting-note h2 { font-size: 18px; margin: 0 0 4px; font-weight: 650; letter-spacing: -.02em; }
    .hosting-note p { margin: 0; color: var(--muted); font-size: 14px; }
    .button { display: inline-flex; flex-shrink: 0; align-items: center; gap: 15px; padding: 11px 17px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
    .button:hover { background: #1e4457; }
    footer { display: flex; justify-content: space-between; gap: 20px; padding: 25px 0 32px; color: var(--muted); font-size: 12px; }
    @media (max-width: 740px) {
      .shell { width: calc(100% - 36px); }
      header { padding: 22px 0; }
      .header-note { display: none; }
      main { grid-template-columns: 1fr; gap: 30px; padding: 58px 0 44px; min-height: 0; }
      h1 { font-size: clamp(37px, 9vw, 55px); }
      .art { max-width: 320px; justify-self: center; }
      .hosting-note { align-items: flex-start; flex-direction: column; padding: 24px; gap: 19px; }
      footer { flex-wrap: wrap; gap: 5px; }
    }

.demo-banner{background:#112d3c;color:#e6f6ed;padding:11px 18px;text-align:center;font-size:12px;line-height:1.7}.demo-banner a{color:#a6f5d0;margin-left:8px}.skip-link{position:absolute;top:10px;left:14px;transform:translateY(-160%);background:#112d3c;color:white;padding:12px 16px;z-index:10;border-radius:6px}.skip-link:focus{transform:translateY(0)}footer a{white-space:nowrap}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}