/*
    The site around the designer: navigation, landing page, pricing, footer.

    Deliberately separate from ERDesignerRCL's app.css, and loaded only by the web host — the
    desktop shell has no marketing pages and should not carry a stylesheet for them. The custom
    properties come from app.css, so the two never drift into different blues.

    One thing to know: app.css sets `body { display: flex; flex-direction: column }` so the project
    menu can be a fixed strip with the designer filling what is left. Every block here is a direct
    child of that flex column, which is why widths are set with max-width and margin rather than by
    assuming a normal block layout.
*/

/* ---------- brand type ---------- */

/*
    The WoodFireERD typefaces, served from this site rather than a font CDN, so a visitor's browser
    never contacts a third party just to render a heading. Latin subset only: every page is English.
    All three are SIL Open Font License; see THIRD-PARTY-NOTICES.txt.

    Archivo is variable in width as well as weight, which is what gives the wordmark its heavy
    condensed "WoodFire" beside a light expanded "ERD", and the headings their tight, stamped look.
*/
@font-face {
    font-family: "Archivo";
    src: url("fonts/archivo-latin.woff2") format("woff2");
    font-weight: 400 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

@font-face {
    font-family: "Instrument Sans";
    src: url("fonts/instrument-sans-latin.woff2") format("woff2");
    font-weight: 400 600;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
    font-weight: 400 500;
    font-display: swap;
}

/*
    Site-only tokens. The palette itself comes from app.css; these add the brand faces and the dark
    band the landing page uses. The band is dark in both themes, so the colours drawn on it are the
    same in both and are defined once.
*/
:root {
    --display: "Archivo", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
    --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
    --mono-brand: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
    --ember-soft: #fbe9dd;
    --char: #141820;
    --char-line: #141820;
    --on-char: #e8ebf0;
    --char-muted: #a3acba;
    --ember-on-char: #f07a35;
    --key-on-char: #8fb0f5;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ember-soft: #3a2418;
        --char: #0b0e13;
        --char-line: #2a313d;
    }
}

:root[data-theme="dark"] {
    --ember-soft: #3a2418;
    --char: #0b0e13;
    --char-line: #2a313d;
}

/* ---------- shared page furniture ---------- */

.erd-site {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    flex: 1;
}

.erd-page {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.erd-page-narrow { max-width: 680px; }

/* Pricing, About, Download, Billing, the legal pages: body in the brand sans, headings in Archivo. */
.erd-page { font-family: var(--sans); font-size: 15px; line-height: 1.6; }

.erd-page h1 {
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 8px 0 20px;
}

.erd-page h2 {
    font-family: var(--display);
    font-size: 1.45rem;
    font-weight: 700;
    font-stretch: 92%;
    line-height: 1.15;
    text-wrap: balance;
}

.erd-muted { color: var(--muted); }

.erd-notice {
    background: var(--warn-soft);
    border: 1px solid var(--warn-border);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 20px;
}

.erd-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
}

/* ---------- top navigation ---------- */

.erd-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 clamp(16px, 4vw, 48px);
    height: 64px;
    font-family: var(--sans);
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;           /* never let the nav stretch inside the body flex column */
}

.erd-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
}

/* The wordmark, as the brand kit sets it: a heavy condensed "WoodFire" beside a light expanded
   "ERD" in ember. Same face, opposite ends of its width and weight axes. */
.erd-wordmark {
    font-family: var(--display);
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.erd-wordmark .wf { font-weight: 850; font-stretch: 80%; }
.erd-wordmark .erd { font-weight: 450; font-stretch: 120%; color: var(--ember); }

.erd-brand:hover .wf { color: var(--accent); }

.erd-nav-links {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-right: auto;       /* pushes the account controls to the far right */
}

.erd-nav-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
}

.erd-nav-links a:hover { color: var(--text); }
.erd-nav-links a.active { color: var(--text); font-weight: 600; }

/* The Workspace menu: the application's own three pages, one level down, so the bar itself reads
   as a single row of equals. Built on <details>, which is why there is no JavaScript here — the
   layout renders statically and a handler would never fire. */
.erd-menu { position: relative; }

.erd-menu summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--muted);
    font-size: 14px;
    list-style: none;              /* Firefox draws a disclosure triangle without this */
}

.erd-menu summary::-webkit-details-marker { display: none; }

/* The caret is drawn rather than typed, so it can turn to point up when the menu is open and so it
   inherits the colour of the label it belongs to. */
.erd-menu summary::after {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.12s ease;
}

.erd-menu[open] summary::after { transform: translateY(1px) rotate(225deg); }

.erd-menu summary:hover { color: var(--text); }
.erd-menu.active summary { color: var(--text); font-weight: 600; }

.erd-menu-items {
    position: absolute;
    top: calc(100% + 14px);
    left: -10px;
    z-index: 40;                   /* above the project strip, which the designer pages put below */
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgb(0 0 0 / 18%);
}

.erd-nav-links .erd-menu-items a {
    padding: 8px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.erd-nav-links .erd-menu-items a:hover {
    background: var(--accent-soft);
    color: var(--text);
}

.erd-nav-account {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

/* The sign-out form is a POST, so it is a real form — it must not add layout of its own. */
.erd-nav-account form { margin: 0; display: inline; }

/* ---------- shared callout ---------- */

/* A tinted callout block — used for the sign-up prompts, nothing to do with safety. */
.erd-callout {
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    border-radius: 10px;
    padding: 22px 24px;
    margin-bottom: 48px;
}

.erd-callout h2 { margin: 0 0 10px; }
.erd-callout p { margin: 0 0 8px; line-height: 1.6; }
.erd-callout p:last-child { margin-bottom: 0; }

/* ---------- landing page ---------- */

/*
    The public front door, and the only page most visitors read before deciding. Every class is
    prefixed wf- so none of it collides with the designer's own .landing and .card rules in app.css.
*/

.wf-land {
    flex: 0 0 auto;           /* a direct child of the body flex column: never squash it */
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
}

.wf-wrap {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
}

.wf-land h1,
.wf-land h2,
.wf-land h3 {
    font-family: var(--display);
    text-wrap: balance;
    margin: 0;
}

.wf-eyebrow {
    font: 500 12px/1.4 var(--mono-brand);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.wf-land .btn {
    padding: 11px 20px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
}

/* -- hero: the motto on the left, the product's own idea drawn on the right -- */

.wf-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px);
}

.wf-hero-copy { display: grid; gap: 22px; justify-items: start; }

.wf-hero h1 {
    font-size: clamp(2.7rem, 5.4vw, 4.6rem);
    font-weight: 850;
    font-stretch: 82%;
    line-height: 0.98;
    letter-spacing: -0.015em;
}

.wf-hero h1 em { font-style: normal; color: var(--ember); }

.wf-lead { margin: 0; font-size: 1.15rem; color: var(--muted); max-width: 46ch; }

.wf-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.wf-note { margin: 0; font-size: 13px; color: var(--muted); }

.wf-hop { margin: 0; display: grid; gap: 12px; }
.wf-hop svg { display: block; width: 100%; height: auto; max-width: 100%; }

.wf-hop figcaption {
    font: 12px/1.5 var(--mono-brand);
    color: var(--muted);
    text-align: center;
}

.wf-hop figcaption b { color: var(--text); font-weight: 500; }

.hop-ring { fill: none; stroke: var(--border); stroke-width: 1.2; stroke-dasharray: 2 6; }
.hop-edge { stroke: var(--accent); stroke-width: 1.6; }
.hop-edge.far { stroke-width: 1.2; opacity: 0.45; }
.hop-card rect { fill: var(--panel); stroke: var(--border); stroke-width: 1; }
.hop-card text { font: 500 11px var(--mono-brand); fill: var(--text); }
.hop-card.far rect { fill: var(--bg); }
.hop-card.far text { fill: var(--muted); }
.hop-hub rect { fill: var(--ember-soft); stroke: var(--ember); stroke-width: 2; }
.hop-hub .name { font: 600 13px var(--mono-brand); fill: var(--text); }
.hop-hub .meta { font: 500 10.5px var(--mono-brand); fill: var(--ember); }

.hop-label {
    font: 500 10px var(--mono-brand);
    letter-spacing: 0.1em;
    fill: var(--muted);
    paint-order: stroke;
    stroke: var(--bg);
    stroke-width: 5px;
    stroke-linejoin: round;
}

/* -- the dark band: the problem, stated once -- */

.wf-band {
    background: var(--char);
    color: var(--on-char);
    border-block: 1px solid var(--char-line);
}

.wf-band-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 20px clamp(32px, 5vw, 72px);
    align-items: end;
    padding-block: clamp(48px, 6vw, 88px);
}

.wf-band .wf-eyebrow { grid-column: 1 / -1; color: var(--char-muted); }

.wf-statement {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 700;
    font-stretch: 90%;
    line-height: 1.08;
    text-wrap: balance;
}

.wf-statement em { font-style: normal; color: var(--ember-on-char); }

.wf-band-copy { display: grid; gap: 12px; color: var(--char-muted); font-size: 1.05rem; }
.wf-band-copy p { margin: 0; }
.wf-crumb { font: 500 12.5px/1.5 var(--mono-brand); color: var(--key-on-char); }

/* -- sections -- */

.wf-section { display: grid; gap: 36px; padding-block: clamp(56px, 7vw, 96px) 0; }
.wf-section-head { display: grid; gap: 10px; max-width: 760px; }

.wf-section-head h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 800;
    font-stretch: 88%;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

/* What it does: ruled columns rather than boxes. The first rule is ember because the first
   feature is the one nobody else offers. */
.wf-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(24px, 3vw, 48px);
}

.wf-features article {
    display: grid;
    gap: 8px;
    align-content: start;
    padding-block: 20px 30px;
    border-top: 1px solid var(--border);
}

.wf-features article:first-child { border-top: 2px solid var(--ember); padding-top: 19px; }
.wf-features h3 { font-size: 1.2rem; font-weight: 700; font-stretch: 95%; line-height: 1.2; }
.wf-features p { margin: 0; color: var(--muted); }

/* How it works: a real sequence, so the numbers carry information. Set light and expanded, the
   same way the wordmark sets "ERD". */
.wf-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.5vw, 36px);
}

.wf-steps li { display: grid; gap: 8px; align-content: start; }

.wf-step-n {
    font-family: var(--display);
    font-size: 2.6rem;
    font-weight: 300;
    font-stretch: 125%;
    line-height: 1;
    color: var(--ember);
    font-variant-numeric: tabular-nums;
}

.wf-steps h3 { font-size: 1.2rem; font-weight: 700; font-stretch: 95%; }
.wf-steps p { margin: 0; color: var(--muted); }

/* Browser or Windows: two genuinely separate things, so two panels. */
.wf-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.wf-tier {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: clamp(22px, 3vw, 32px);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.wf-tier h3 { font-size: 1.35rem; font-weight: 750; font-stretch: 92%; line-height: 1.15; }
.wf-tier p { margin: 0; color: var(--muted); }

/* -- the close -- */

.wf-close { display: grid; justify-items: start; gap: 18px; padding-block: clamp(64px, 8vw, 112px); }

.wf-close h2 {
    font-size: clamp(2.3rem, 4.6vw, 3.8rem);
    font-weight: 850;
    font-stretch: 82%;
    line-height: 1;
    letter-spacing: -0.015em;
}

.wf-close p { margin: 0; color: var(--muted); max-width: 56ch; font-size: 1.05rem; }
.wf-close .wf-terms { font-size: 13px; }

@media (max-width: 960px) {
    .wf-hero,
    .wf-band-inner { grid-template-columns: minmax(0, 1fr); }
    .wf-features,
    .wf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .wf-features,
    .wf-steps,
    .wf-tiers { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- contact form ---------- */

.erd-form { display: grid; gap: 18px; margin: 8px 0 32px; max-width: 34rem; }

.erd-field { display: grid; gap: 6px; }

.erd-field label { font-weight: 600; font-size: 14px; }

.erd-field input,
.erd-field select,
.erd-field textarea {
    font: inherit;
    color: inherit;              /* a control paints from the browser palette unless told otherwise */
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 9px 11px;
    width: 100%;
}

.erd-field textarea { resize: vertical; min-height: 9rem; }

.erd-field input:focus-visible,
.erd-field select:focus-visible,
.erd-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.erd-form .validation-message { color: var(--danger); font-size: 13px; }

.erd-form button { justify-self: start; }

/* The honeypot. Off-screen rather than display:none, which the better robots skip. */
.erd-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- pricing ---------- */

.erd-term-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
}

.erd-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    align-items: start;
}

.erd-plan {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
}

/* The plan the visitor is already on, so it reads differently from the ones they could buy. */
.erd-plan.current {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.erd-plan h2 { margin: 0; font-size: 1.25rem; }

.erd-price {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

.erd-price .erd-muted { font-size: 0.85rem; font-weight: 400; }

.erd-plan ul {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    line-height: 1.7;
    flex: 1;                  /* keeps every card's button on the same line */
}

.erd-plan .btn { justify-content: center; padding: 9px 16px; }

.erd-current {
    margin: 0;
    font-weight: 600;
    color: var(--accent);
}

.erd-plan-saving {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
}

/* ---------- footer ---------- */

.erd-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    background: var(--panel);
    padding: 20px 24px;
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
    flex: 0 0 auto;
}

.erd-footer a { color: var(--muted); text-decoration: none; }
.erd-footer a:hover { color: var(--accent); }
.erd-footer .erd-footer-spacer { margin-right: auto; }
.erd-footer { font-family: var(--sans); font-size: 13px; padding-inline: clamp(16px, 4vw, 48px); }
.erd-footer-brand { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.erd-footer-motto { font-family: var(--mono-brand); font-size: 12px; margin-left: 6px; }

/* ---------- narrow screens ---------- */

@media (max-width: 720px) {
    .erd-nav { gap: 14px; padding: 0 14px; }
    .erd-nav-links { gap: 12px; }
    .erd-page { padding: 24px 16px 48px; }
}

/* A phone has room for the name and the two account buttons, not the page links as well.
   Plans, About and Contact stay one tap away in the footer. */
@media (max-width: 600px) {
    .erd-nav-links a,
    .erd-nav-links .erd-menu { display: none; }
    .erd-wordmark { font-size: 18px; }
    .erd-nav-account { gap: 8px; }
    .erd-nav-account .btn { white-space: nowrap; padding: 6px 10px; font-size: 12px; }
}

/* ---------- receipt and billing ---------- */

.erd-receipt {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px 24px;
    margin: 0 0 24px;
}

.erd-receipt h2 { margin: 0 0 14px; font-size: 1.05rem; }

/* Label/value pairs in two columns, so the amounts line up under one another. */
.erd-receipt dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 20px;
    margin: 0 0 18px;
}

.erd-receipt dt { color: var(--muted); }
.erd-receipt dd { margin: 0; font-weight: 600; }

.erd-table-scroll { overflow-x: auto; }

.erd-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.erd-table th,
.erd-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.erd-table th {
    background: var(--strip);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}

.erd-table tr:last-child td { border-bottom: none; }

/* Money right-aligned and tabular, so digits line up column-wise rather than by glyph width. */
.erd-table .erd-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The theme switch: a square button, so the sun and moon glyphs do not shift the nav as they swap. */
.erd-theme-toggle {
    width: 32px;
    height: 30px;
    justify-content: center;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

/* The machine id form on the download page. */
.erd-machine-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* Monospaced and wide enough for the whole fingerprint: this is typed or pasted from another
   screen, and a field that truncates what was pasted causes a licence that will never verify. */
.erd-machine-form input {
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    min-width: 260px;
    text-transform: uppercase;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.erd-receipt-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 20px;
    margin: 0 0 14px;
}

.erd-receipt-list dt { color: var(--muted); }
.erd-receipt-list dd { margin: 0; font-weight: 600; }