/* dndware.dev
   Flat throughout. Not one gradient, no glow, no blur: the surfaces are solid
   colours and the only lines are hairlines, so what carries the page is spacing
   and precision rather than atmosphere.

   Colours come straight off the loader, so the site and the product read as one
   thing, and the chrome is borrowed from the overlay itself. */

:root {
    --base:  #0a0d14;   /* loader Base( ) */
    --text:  #ecf0f8;
    --muted: #7a8497;
    --faint: #454d5e;

    --hair:   rgba(255, 255, 255, .07);
    --hair-2: rgba(255, 255, 255, .15);
    --wash:   rgba(255, 255, 255, .04);

    --accent:  #1e7bff;
    --accent-h:#3a8dff;

    /* Two faces, doing two jobs. Mono is the chrome: a tool that reads memory
       addresses and instance paths already speaks in it, so the frame labels
       are set the way the product's own output is.

       No webfont on purpose. Pulling one from a CDN hands a third party a log
       of every visitor, which is the one thing this site will not do. */
    --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono",
            Consolas, "Liberation Mono", monospace;
    --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
            "Helvetica Neue", Arial, sans-serif;

    --inset: 22px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--base);
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

/* ── the frame ────────────────────────────────────────────────────────────── */

/* The radius is shared with the brackets below. They sit exactly on top of this
   border, so if the two curves disagree the square corner shows through the
   round one. */
:root { --frame-radius: 9px; }

.frame {
    position: fixed;
    inset: var(--inset);
    border: 1px solid var(--hair);
    border-radius: var(--frame-radius);
    pointer-events: none;
    z-index: 1;
}

/* Accent brackets at each corner, the marks an overlay puts down to show the
   region it has claimed. Two borders on an empty box, with the radius applied
   only to the corner those two borders actually meet at - so the turn is
   rounded and the two arms run straight out from it. */
.tick {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 0 solid var(--accent);
}

.tl {
    top: -1px; left: -1px;
    border-top-width: 1px; border-left-width: 1px;
    border-top-left-radius: var(--frame-radius);
}

.tr {
    top: -1px; right: -1px;
    border-top-width: 1px; border-right-width: 1px;
    border-top-right-radius: var(--frame-radius);
}

.bl {
    bottom: -1px; left: -1px;
    border-bottom-width: 1px; border-left-width: 1px;
    border-bottom-left-radius: var(--frame-radius);
}

.br {
    bottom: -1px; right: -1px;
    border-bottom-width: 1px; border-right-width: 1px;
    border-bottom-right-radius: var(--frame-radius);
}

/* ── layout ───────────────────────────────────────────────────────────────── */

.sheet {
    position: relative;
    z-index: 2;

    min-height: 100dvh;
    padding: calc(var(--inset) + 18px) calc(var(--inset) + 26px);

    display: grid;
    grid-template-rows: auto 1fr auto;   /* header, content, footer line */
    gap: 24px;
}

/* ── header ───────────────────────────────────────────────────────────────── */
/*
   A soft pill floating inside a hard, square frame. The tension is the point:
   the frame is the machine marking out its region, the bar is the part you
   actually touch. Everything else on the page keeps its 6px corners.
*/

.bar {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;

    /* Three tracks with the outer two equal, so the nav sits on the true centre
       of the bar rather than wherever the logo and the button happen to leave
       it. A flex row with auto margins would centre it between them instead,
       which drifts as either side changes width. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;

    padding: 7px 7px 7px 16px;

    /* Darker than the page, not lighter. The bar reads as something set into
       the surface rather than floating above it. */
    background: #06080e;
    border: 1px solid var(--hair-2);
    border-radius: 999px;
}

.bar-mark {
    display: flex;
    align-items: center;
    justify-self: start;
}

.bar-mark img {
    display: block;
    width: 62px;
    height: auto;
}

.bar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-self: center;
}

/* Sans rather than mono here. The mono is for machine-flavoured chrome; these
   are ordinary words a person reads, and they carry better set plainly. */
.bar-link {
    padding: 7px 13px;
    border-radius: 999px;

    color: var(--muted);
    font-family: var(--sans);
    font-size: 14px;
    text-decoration: none;

    transition: background .15s linear, color .15s linear;
}

.bar-link:hover {
    background: var(--wash);
    color: var(--text);
}

.cta {
    justify-self: end;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    height: 34px;
    padding: 0 16px;
    border-radius: 999px;

    background: var(--accent);
    color: #fff;
    font-family: var(--mono);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;

    transition: background .15s linear;
}

.cta:hover { background: var(--accent-h); }

.arrow {
    width: 14px;
    height: 14px;
    /* Nudges forward on hover: the arrow means "onward", so it should behave
       like it. */
    transition: transform .18s cubic-bezier(.2, .7, .2, 1);
}

.cta:hover .arrow { transform: translateX(2px); }

.bar-link:focus-visible,
.cta:focus-visible,
.bar-mark:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

/* One line, centred. It was a two-up row while there was something to sit
   opposite the copyright; with a single item, space-between would just pin it
   to the left edge. */
.rail {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 18px;

    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--muted);
}

.dim { color: var(--faint); }

main {
    display: grid;
    place-items: center;
    place-content: center;
    text-align: center;

    /* Only the footer takes a row now, so the content already sits above true
       centre. Pulling it up further would read as misaligned rather than as a
       deliberate optical adjustment. */
}

/* ── document pages ───────────────────────────────────────────────────────── */

.doc {
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
    padding: 48px 0 72px;
    align-self: start;
    text-align: left;
}

.doc h1 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text);
}

.doc-updated {
    margin: 0 0 32px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--faint);
}

/* The opening paragraph carries the whole document in one breath, so it is set
   a step up from the body and given the accent rule to mark it as the summary
   rather than the first clause. */
.doc-lead {
    margin: 0 0 40px;
    padding-left: 16px;
    border-left: 2px solid var(--accent);

    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text);
}

.doc-section { margin-bottom: 34px; }

.doc h2 {
    display: flex;
    align-items: baseline;
    gap: 12px;

    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

/* The numbers are real: these clauses get referred to by number, so they are
   part of the content rather than decoration. Mono and accent keeps them
   legible as references without competing with the heading. */
.doc-n {
    flex: 0 0 auto;
    min-width: 22px;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--accent);
}

.doc p {
    margin: 0 0 14px;
    padding-left: 34px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--muted);
}

.doc-lead { padding-left: 16px; }

.doc ul {
    margin: 0 0 14px;
    padding-left: 52px;
    list-style: none;
}

.doc li {
    position: relative;
    margin-bottom: 9px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
}

/* A dash rather than a bullet: it sits on the text baseline and matches the
   hairline language the rest of the page uses. */
.doc li::before {
    content: "";
    position: absolute;
    left: -18px;
    top: .78em;
    width: 8px;
    height: 1px;
    background: var(--faint);
}

.doc li b {
    color: var(--text);
    font-weight: 600;
}

@media (max-width: 640px) {
    .doc p, .doc h2 { padding-left: 0; }
    .doc h2 { gap: 8px; }
    .doc ul { padding-left: 20px; }
}

/* ── content ──────────────────────────────────────────────────────────────── */

.mark {
    width: 268px;
    max-width: 62vw;
    height: auto;
    display: block;
}

.actions {
    /* Straight under the mark now that there is no line of prose between them,
       so the gap is the one the wordmark needs rather than one inherited from
       a paragraph that used to sit here. */
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}

/* Same shape as the buttons inside the product: 6px corners, 34px tall, one
   filled accent action with quiet outlined ones beside it. */
.btn {
    --bg: transparent;
    --bd: var(--hair-2);
    --fg: var(--muted);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 36px;
    padding: 0 20px;

    border: 1px solid var(--bd);
    border-radius: 6px;
    background: var(--bg);

    color: var(--fg);
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: .01em;
    text-decoration: none;

    transition: background .15s linear, border-color .15s linear, color .15s linear;
}

.btn:hover {
    --bg: var(--wash);
    --bd: rgba(255, 255, 255, .28);
    --fg: var(--text);
}

.btn-primary {
    --bg: var(--accent);
    --bd: var(--accent);
    --fg: #fff;
}

.btn-primary:hover {
    --bg: var(--accent-h);
    --bd: var(--accent-h);
    --fg: #fff;
}

.btn:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

/* ── entrance ─────────────────────────────────────────────────────────────── */
/* One orchestrated moment on load: the frame arrives, then what it contains. */

.frame { animation: fade .5s ease both; }
.rail  { animation: fade .5s ease .18s both; }
main   { animation: lift .55s cubic-bezier(.2, .7, .2, 1) .1s both; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lift { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── small screens ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    :root { --inset: 12px; }

    .sheet { padding: 26px 20px; gap: 20px; }

    .bar { padding: 6px 6px 6px 12px; gap: 4px; }
    .bar-mark img { width: 50px; }
    .bar-link { padding: 6px 9px; font-size: 13px; }
    .cta { height: 31px; padding: 0 13px; font-size: 11.5px; }

    .rail { font-size: 10.5px; }
    .rail span:last-child { display: none; }

    .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .frame, .rail, main { animation: none; }
    .btn { transition: none; }
}