:root {
            --ink:#151515;
            --paper:#fffaf0;
            --yellow:#ffd83d;
            --red:#ef493f;
            --blue:#1779ba;
            --muted:#5d5a54;
            --line:#d8d1c4;
        }
        * { box-sizing:border-box; }
        html { scroll-behavior:smooth; max-width:100%; overflow-x:hidden; }
        body {
            margin:0;
            min-height:100vh;
            color:var(--ink);
            background:var(--paper);
            font-family:Arial, Helvetica, sans-serif;
            line-height:1.5;
            max-width:100%;
            overflow-x:hidden;
        }
        a { color:inherit; }
        .topline {
            background:var(--ink);
            color:#fff;
            padding:.35rem 1rem;
            text-align:center;
            font-size:.82rem;
            font-weight:900;
            letter-spacing:.08em;
            overflow-wrap:anywhere;
        }
        .site-header {
            width:100%;
            max-width:1120px;
            margin:auto;
            padding:.6rem 1.25rem;
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:1rem;
            flex-wrap:wrap;
        }
        .brand {
            font-size:clamp(1.45rem,4vw,2rem);
            font-weight:900;
            letter-spacing:-.055em;
            text-decoration:none;
        }
        .brand span { color:var(--red); }
        nav { display:flex; align-items:center; justify-content:flex-end; gap:1rem; flex-wrap:wrap; font-size:.9rem; font-weight:800; }
        nav a { text-underline-offset:3px; }
        nav .login-link {
            padding:.48rem .78rem;
            color:#fff;
            background:var(--blue);
            border:2px solid var(--ink);
            box-shadow:3px 3px 0 var(--ink);
            text-decoration:none;
        }
        nav .login-link:hover, nav .login-link:focus-visible {
            transform:translate(1px,1px);
            box-shadow:2px 2px 0 var(--ink);
        }
        .hero {
            border-block:3px solid var(--ink);
            background:linear-gradient(125deg,var(--yellow) 0 62%,#fff 62%);
        }
        .hero-inner {
            width:100%;
            max-width:1120px;
            margin:auto;
            padding:clamp(.9rem,2vw,1.5rem) 1.25rem;
            display:grid;
            grid-template-columns:minmax(0,1.35fr) minmax(210px,.65fr);
            gap:2rem;
            align-items:center;
        }
        .hero-inner > *, .card-grid > * { min-width:0; }
        .eyebrow {
            display:inline-block;
            padding:.38rem .72rem;
            color:#fff;
            background:var(--ink);
            font-size:.78rem;
            font-weight:900;
            letter-spacing:.13em;
            text-transform:uppercase;
            transform:rotate(-1deg);
        }
        h1 {
            max-width:780px;
            margin:1.1rem 0;
            font-size:clamp(3.2rem,8.5vw,6.9rem);
            line-height:.86;
            letter-spacing:-.08em;
        }
        h1 span {
            color:var(--red);
            text-shadow:3px 3px 0 var(--ink);
            -webkit-text-stroke:1px var(--ink);
            white-space:nowrap;
        }
        h1 .domain-com {
            color:var(--ink);
            margin-left:.04em;
            font-size:.48em;
            letter-spacing:-.03em;
            text-shadow:none;
            -webkit-text-stroke:0;
            vertical-align:baseline;
        }
        .lead { max-width:670px; margin:0; font-size:clamp(1.08rem,2.2vw,1.38rem); font-weight:700; overflow-wrap:anywhere; }
        .burst {
            width:min(260px,70vw);
            aspect-ratio:1;
            margin:auto;
            padding:2rem;
            display:grid;
            place-items:center;
            text-align:center;
            color:#fff;
            background:var(--red);
            border:4px solid var(--ink);
            border-radius:50%;
            box-shadow:10px 10px 0 var(--ink);
            font-size:clamp(1.25rem,3vw,1.85rem);
            font-weight:900;
            line-height:1.05;
            transform:rotate(6deg);
        }
        .actions {
            width:100%;
            max-width:960px;
            margin:auto;
            padding:2rem 1.25rem 2.5rem;
        }
        .actions h2 { margin:0 0 .65rem; font-size:clamp(2.1rem,5vw,3.5rem); line-height:1; letter-spacing:-.055em; }
        .intro { max-width:700px; margin:0 0 2rem; color:#45423e; font-size:1.08rem; overflow-wrap:anywhere; }
        .card-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.35rem; }
        .card {
            min-height:280px;
            padding:clamp(1.4rem,4vw,2.2rem);
            display:flex;
            flex-direction:column;
            align-items:flex-start;
            background:#fff;
            border:3px solid var(--ink);
            box-shadow:8px 8px 0 var(--ink);
        }
        .card.alt { background:#fff5c4; box-shadow:8px 8px 0 var(--red); }
        .number {
            width:2.4rem;
            height:2.4rem;
            display:grid;
            place-items:center;
            background:var(--ink);
            color:#fff;
            border-radius:50%;
            font-weight:900;
        }
        .card h3 { margin:1rem 0 .45rem; font-size:clamp(1.6rem,3.5vw,2.3rem); line-height:1; letter-spacing:-.04em; }
        .card p { margin:.25rem 0 1.4rem; color:var(--muted); overflow-wrap:anywhere; }
        .button {
            margin-top:auto;
            padding:.9rem 1.15rem;
            display:inline-block;
            background:var(--blue);
            color:#fff;
            border:3px solid var(--ink);
            box-shadow:4px 4px 0 var(--ink);
            font-weight:900;
            text-decoration:none;
        }
        .button.red { background:var(--red); }
        .button:hover, .button:focus-visible { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
        .back-home {
            margin-top:2.5rem;
            padding:1.15rem 1.25rem;
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:1rem;
            background:#fff;
            border:2px solid var(--ink);
            box-shadow:5px 5px 0 var(--yellow);
        }
        .back-home strong { font-size:1.1rem; }
        .back-home a { color:var(--blue); font-weight:900; }
        footer { padding:1rem 1.25rem; color:#fff; background:var(--ink); text-align:center; font-size:.85rem; }
        footer div + div { margin-top:.5rem; }
        footer a { margin:0 .45rem; }
        @media (max-width:720px) {
            .topline { padding:.3rem .75rem; font-size:.68rem; letter-spacing:.045em; }
            .site-header { display:block; }
            nav { margin-top:.55rem; justify-content:flex-start; gap:.85rem; text-align:left; }
            .hero { background:var(--yellow); }
            .hero-inner { grid-template-columns:1fr; }
            h1 { font-size:clamp(2.35rem,11vw,3.4rem); letter-spacing:-.065em; }
            h1 span { display:block; text-shadow:2px 2px 0 var(--ink); }
            .burst { width:190px; }
            .card-grid { grid-template-columns:1fr; }
            .actions h2 { font-size:2.2rem; }
            .back-home { align-items:flex-start; flex-direction:column; }
        }