/* ============================================================================
   MagnetERP — magneterp.com marketing site
   ----------------------------------------------------------------------------
   DIRECTION CONTRACT (read before editing; the render is audited against it)

   THESIS      The page IS the document the system produces. Magnet's only honest
               proof is structural — PRODUCT.md forbids fabricated testimonials,
               client logos, benchmarks and usage claims — so this site
               DEMONSTRATES posting rather than describing it. It refuses the SaaS
               default it cannot fill truthfully: tilted dashboard screenshot,
               logo wall, three icon-heading-text cards, pricing table.
   OWN-WORLD   Published-accounts typography drenched over Ledger Blue. TWO grounds
               only — paper white and Ledger Blue Deep — and no cards anywhere.
               Rules do the work borders normally do, including a real accounting
               DOUBLE RULE under every total. Figures are tabular-lining, right
               aligned, and they foot. Red is ledger rule / credit ink only.
   STORY       A Nigerian SME finance manager sees this is the whole back office in
               one book, believes it by watching one invoice post to stock, the
               customer account, the project and the general ledger with the
               figures agreeing, and acts by writing to info@magneterp.com.
   1ST VIEWPORT Full-bleed Ledger Blue. Wordmark small, tagline set as a statement
               heading, then the posting trace: one source document on the left,
               four destination records on the right, joined by leader rules that
               draw themselves once. Primary action sits under the heading.
   FORM        Multi-part posting document + published-accounts typography.

   ----------------------------------------------------------------------------
   THIS IS THE ONLY STYLESHEET. Bootstrap was removed deliberately (8.4 MB of
   unused assets against a product principle that names low bandwidth a
   REQUIREMENT, not polish). Section components use the primitives below; they do
   not invent new colour or type values. To re-theme, edit the token block only.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS
   The Ledger Blue family is copied from the product's single source of truth,
   Magnet/wwwroot/css/theme.css. The One Accent Rule holds here: no accent
   outside this family. Two stops are ADDED for this surface only (--field-deep
   and the on-field inks) because a marketing page drenches colour at page scale
   where the app only ever accents it. Both are stops in the same family.
   --------------------------------------------------------------------------- */
:root {
    /* Ledger Blue — the product accent */
    --accent: #2563EB;
    --accent-bright: #60A5FA;
    --accent-600: #1D4ED8;
    --accent-press: #1E40AF;
    --accent-deep: #1E3A8A;
    --accent-soft: #EEF2FE;
    --accent-line: #C7D6F5;

    /* The two grounds. Everything on this site sits on one or the other. */
    --paper: #ffffff;
    --field: #1E3A8A;      /* drenched ground — white on this is 10.3:1        */
    --field-deep: #152C6B; /* the closing stop, footer only                    */

    /* Ink on paper */
    --ink: #0f172a;        /* headings                        — 17.9:1 on paper */
    --text: #334155;       /* body                            — 10.8:1 on paper */
    --strong: #475569;     /* secondary                       —  7.4:1 on paper */
    --muted: #64748b;      /* tertiary, the floor             —  4.8:1 on paper */
    --line: #e9edf2;       /* hairline rules                                    */
    --line-firm: #cbd5e1;  /* column-head and total rules                       */

    /* Ink on field — tinted from the hue, never grey (craft floor) */
    --on-field: #ffffff;      /* 10.3:1 on --field */
    --on-field-soft: #C7D6F5; /*  7.1:1 on --field */
    --on-field-rule: rgba(199, 214, 245, 0.28);

    /* The second ink. Ledger convention: red rules the totals and marks the
       credit side. It decorates nothing. Both stops are the product's own
       documented reds (theme.css --danger-strong / --danger-border). */
    --rule-red: #b91c1c;         /* 6.4:1 on paper */
    --credit-on-field: #fecaca;  /* ~8:1 on --field  */

    /* Type */
    --face: Heebo, "Segoe UI", system-ui, -apple-system, sans-serif;
    --face-mark: CACNormHeavy, Heebo, "Segoe UI", system-ui, sans-serif;

    --t-display: clamp(2.5rem, 6.4vw, 4.5rem);
    --t-h2: clamp(1.75rem, 3.4vw, 2.5rem);
    --t-h3: clamp(1.15rem, 1.8vw, 1.4rem);
    --t-lead: clamp(1.08rem, 1.6vw, 1.3rem);
    --t-body: 1.0625rem;
    --t-small: 0.9375rem;
    --t-label: 0.72rem;
    --t-mark: 1.35rem;   /* the wordmark step — this surface only */

    /* Rhythm. More space above a heading than below it, everywhere. */
    --s-1: 8px;
    --s-2: 12px;
    --s-3: 16px;
    --s-4: 24px;
    --s-5: 40px;
    --s-6: 64px;
    --s-7: 96px;
    --wrap: 1180px;

    /* Motion — one strong curve, per the design-engineering floor. The built-in
       CSS easings are too weak; ease-in is never used. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* The wordmark face carries the product name and nothing else (One Family Rule).
   Everything else on this site is Heebo. */
@font-face {
    font-family: CACNormHeavy;
    src: url("fonts/CACNormHeavy.ttf") format("truetype");
    font-weight: 400 900;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--face);
    font-size: var(--t-body);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* The focus ring is the same promise the product makes: 2px accent, 2px offset,
   on :focus-visible, everywhere, no exceptions. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.on-field :focus-visible,
.sheet--field :focus-visible,
.sheet--deep :focus-visible { outline-color: var(--accent-bright); }

/* Skip link — the first tab stop on every page. */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--paper);
    color: var(--accent-press);
    padding: var(--s-2) var(--s-3);
    font-weight: 700;
}
.skip:focus { left: var(--s-3); top: var(--s-3); }

/* ---------------------------------------------------------------------------
   3. STRUCTURE
   A sheet is a full-bleed horizontal band of the document. There are no cards
   on this site: a sheet either sits on paper or on the Ledger Blue field, and
   rules separate what borders would otherwise box.
   --------------------------------------------------------------------------- */
.sheet {
    padding: var(--s-7) var(--s-4);
    position: relative;
}
.sheet--tight { padding-block: var(--s-6); }

.sheet--field {
    background: var(--field);
    color: var(--on-field);
}
.sheet--deep {
    background: var(--field-deep);
    color: var(--on-field);
}
.sheet--field a:not(.btn),
.sheet--deep a:not(.btn) { color: var(--on-field); }

.wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    width: 100%;
}
.wrap--narrow { max-width: 760px; }

/* ---------------------------------------------------------------------------
   4. TYPE
   --------------------------------------------------------------------------- */

/* The eyebrow is the product's page-header signature, inherited here so the
   site and the app open the same way: uppercase label, accent dot, then title. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-600);
    margin: 0 0 var(--s-3);
}
.eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
    flex: none;
}
.sheet--field .eyebrow,
.sheet--deep .eyebrow { color: var(--accent-bright); }
.sheet--field .eyebrow::before,
.sheet--deep .eyebrow::before {
    background: var(--accent-bright);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
}

.display {
    font-size: var(--t-display);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.03em;
    text-wrap: balance;
    color: var(--ink);
    margin: 0;
}
.sheet--field .display,
.sheet--deep .display { color: var(--on-field); }

.h2 {
    font-size: var(--t-h2);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--ink);
}
.sheet--field .h2,
.sheet--deep .h2 { color: var(--on-field); }

.h3 {
    font-size: var(--t-h3);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.sheet--field .h3,
.sheet--deep .h3 { color: var(--on-field); }

.lead {
    font-size: var(--t-lead);
    line-height: 1.5;
    color: var(--strong);
    max-width: 62ch;
}
.sheet--field .lead,
.sheet--deep .lead { color: var(--on-field-soft); }

/* Body copy holds a 65–75ch measure. */
.prose { max-width: 68ch; }
.prose p + p { margin-top: var(--s-3); }
.sheet--field .prose,
.sheet--deep .prose { color: var(--on-field-soft); }

.small {
    font-size: var(--t-small);
    color: var(--strong);
}
.sheet--field .small,
.sheet--deep .small { color: var(--on-field-soft); }

/* A caption that names a demonstration as a demonstration. Every illustrative
   figure on this site carries one — PRODUCT.md's no-fabricated-proof rule means
   example data must never be mistakable for a customer's. */
.synthetic {
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--muted);
}
.sheet--field .synthetic,
.sheet--deep .synthetic { color: var(--on-field-soft); opacity: 0.85; }

/* ---------------------------------------------------------------------------
   5. LEDGER MARKS
   The vocabulary an accountant reads without being taught: column heads ruled
   underneath, figures in tabular lining numerals, a single rule above a total
   and a DOUBLE rule beneath it, red for the credit side.
   --------------------------------------------------------------------------- */
.fig {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    text-align: right;
    white-space: nowrap;
}
.credit { color: var(--rule-red); }
/* The credit ink lifted for the blue field. --danger-border is the product's own
   light-red step (theme.css); on --field it reads at ~8:1. */
.sheet--field .credit,
.sheet--deep .credit { color: var(--credit-on-field); }

.colhead {
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: var(--s-1);
    border-bottom: 1px solid var(--line-firm);
}
.sheet--field .colhead,
.sheet--deep .colhead {
    color: var(--on-field-soft);
    border-bottom-color: var(--on-field-rule);
}

.rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0;
}
.rule--firm { border-top-color: var(--line-firm); }
.sheet--field .rule,
.sheet--deep .rule { border-top-color: var(--on-field-rule); }

/* The double rule. A total is closed with it in every set of published accounts,
   and nothing else on this site uses it. */
.rule--double {
    border: 0;
    border-top: 1px solid var(--rule-red);
    border-bottom: 1px solid var(--rule-red);
    height: 3px;
    margin: 0;
}
.sheet--field .rule--double,
.sheet--deep .rule--double {
    border-top-color: var(--accent-bright);
    border-bottom-color: var(--accent-bright);
}

/* ---------------------------------------------------------------------------
   6. THE SCHEDULE
   The site's list form, used wherever a lesser page would reach for a grid of
   identical cards. It is a ruled schedule: label left, definition centre,
   reference right — the shape a statement note actually takes.
   --------------------------------------------------------------------------- */
.schedule { border-top: 1px solid var(--line-firm); }
.sheet--field .schedule,
.sheet--deep .schedule { border-top-color: var(--on-field-rule); }

.schedule__row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
    gap: var(--s-3) var(--s-5);
    align-items: baseline;
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
}
.sheet--field .schedule__row,
.sheet--deep .schedule__row { border-bottom-color: var(--on-field-rule); }

.schedule__name {
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    font-size: var(--t-body);
}
.sheet--field .schedule__name,
.sheet--deep .schedule__name { color: var(--on-field); }

.schedule__note { color: var(--text); }
.sheet--field .schedule__note,
.sheet--deep .schedule__note { color: var(--on-field-soft); }

.schedule__ref {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-variant-numeric: tabular-nums lining-nums;
}

/* A live row tints rather than growing a coloured bar down its edge — a thick
   accent border on a list item is the decoration this direction refuses. The
   tint bleeds past the text block so the whole line reads as one target. */
@media (hover: hover) and (pointer: fine) {
    .schedule__row {
        margin-inline: calc(var(--s-3) * -1);
        padding-inline: var(--s-3);
        border-radius: 4px;
        transition: background-color 180ms var(--ease-out);
    }

    .schedule__row:hover { background: var(--accent-soft); }

    .sheet--field .schedule__row:hover,
    .sheet--deep .schedule__row:hover { background: rgba(255, 255, 255, 0.055); }
}
.sheet--field .schedule__ref,
.sheet--deep .schedule__ref { color: var(--accent-bright); }

@media (max-width: 760px) {
    .schedule__row {
        grid-template-columns: 1fr auto;
        gap: var(--s-1) var(--s-3);
    }
    .schedule__note { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   6b. PLATES — reserved space for real product screenshots
   The owner supplies these. Until then a plate stays HONESTLY EMPTY: crop marks
   and a figure caption, the way artwork is reserved on a page before it is
   pasted up. It must never be dressed as a fake screenshot — PRODUCT.md forbids
   fabricated proof, and a mocked-up dashboard is exactly that.
   To fill one, drop an <img> inside .plate__area and delete .plate__await.
   --------------------------------------------------------------------------- */
.plate { margin: 0; }

.plate__area {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    padding: var(--s-5);
    background: var(--accent-soft);
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
}
.sheet--field .plate__area,
.sheet--deep .plate__area { background: rgba(255, 255, 255, 0.06); }

.plate__area > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Crop marks: four corner ticks drawn with gradients, no extra elements. */
.plate__area::before,
.plate__area::after {
    content: "";
    position: absolute;
    inset: var(--s-3);
    pointer-events: none;
    border: 1px solid var(--accent-line);
    border-radius: 4px;
    -webkit-mask:
        linear-gradient(#000 0 0) top left / 26px 26px no-repeat,
        linear-gradient(#000 0 0) top right / 26px 26px no-repeat,
        linear-gradient(#000 0 0) bottom left / 26px 26px no-repeat,
        linear-gradient(#000 0 0) bottom right / 26px 26px no-repeat;
    mask:
        linear-gradient(#000 0 0) top left / 26px 26px no-repeat,
        linear-gradient(#000 0 0) top right / 26px 26px no-repeat,
        linear-gradient(#000 0 0) bottom left / 26px 26px no-repeat,
        linear-gradient(#000 0 0) bottom right / 26px 26px no-repeat;
}
.plate__area::after { content: none; }
.sheet--field .plate__area::before,
.sheet--deep .plate__area::before { border-color: var(--on-field-rule); }

.plate__await {
    text-align: center;
    font-size: var(--t-small);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-press);
    max-width: 34ch;
}
.plate__await span {
    display: block;
    margin-top: var(--s-1);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--strong);
}
.sheet--field .plate__await { color: var(--on-field); }
.sheet--field .plate__await span { color: var(--on-field-soft); }

.plate figcaption {
    margin-top: var(--s-2);
    font-size: 0.8125rem;
    color: var(--muted);
}
.sheet--field .plate figcaption,
.sheet--deep .plate figcaption { color: var(--on-field-soft); }

/* ---------------------------------------------------------------------------
   7. CONTROLS
   Filled controls deepen on hover, never brighten — the product's rule.
   --------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    padding: 0.85rem 1.4rem;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: var(--t-small);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms var(--ease-out),
                border-color 160ms var(--ease-out),
                color 160ms var(--ease-out),
                transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn--primary {
    background: var(--accent-press);
    color: #fff;
}
.btn--ghost {
    background: var(--paper);
    border-color: var(--line-firm);
    color: var(--strong);
}
/* On the field, the primary control is the paper itself. */
.btn--paper {
    background: var(--paper);
    color: var(--accent-press);
}
.btn--outline {
    background: transparent;
    border-color: var(--on-field-rule);
    color: var(--on-field);
}

@media (hover: hover) and (pointer: fine) {
    .btn--primary:hover { background: var(--accent-deep); }
    .btn--ghost:hover { background: #f8fafc; color: var(--ink); }
    .btn--paper:hover { background: var(--accent-soft); }
    .btn--outline:hover { border-color: var(--on-field-soft); background: rgba(255, 255, 255, 0.08); }
}

/* A text link that reads as a reference in the document, not a button. */
.link {
    color: var(--accent-press);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid var(--accent-line);
    padding-bottom: 1px;
    transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.sheet--field .link,
.sheet--deep .link {
    color: var(--on-field);
    border-bottom-color: var(--accent-bright);
}
@media (hover: hover) and (pointer: fine) {
    .link:hover { border-bottom-color: currentColor; }
}

/* ---------------------------------------------------------------------------
   8. THE WORDMARK
   --------------------------------------------------------------------------- */
.mark {
    font-family: var(--face-mark);
    font-size: var(--t-mark);
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0.28em;
    white-space: nowrap;
}
.mark em {
    font-style: normal;
    color: var(--accent);
}
.on-field .mark,
.sheet--field .mark,
.sheet--deep .mark { color: var(--on-field); }
.on-field .mark em,
.sheet--field .mark em,
.sheet--deep .mark em { color: var(--accent-bright); }

/* ---------------------------------------------------------------------------
   9. MOTION
   The site has ONE authored moment — the posting trace drawing itself — and a
   quiet reveal grammar around it. Everything here is PROGRESSIVE ENHANCEMENT:
   the hidden start states are scoped to `html.js`, a class set by an inline
   script before first paint. If the script never runs, or fails, or the visitor
   blocks it, every word on this site is visible at full opacity. That is not a
   nicety — low bandwidth is a product REQUIREMENT (PRODUCT.md), and content
   that depends on JavaScript to become visible is content that can vanish.
   --------------------------------------------------------------------------- */

/* Cross-document view transitions. Fifteen static pages that share a masthead
   and a footer; without this every navigation is a white flash, with it the
   chrome holds still while the document changes underneath. Browsers that do
   not support it simply navigate as before. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation-duration: 140ms; }
::view-transition-new(root) { animation-duration: 220ms; }

/* The masthead and footer persist across the transition instead of cross-fading
   with the page body. */
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }

@media (prefers-reduced-motion: no-preference) {
    /* Scroll reveal. Enters from an already-settled default — a short rise and
       a fade, never a scale from nothing. */
    html.js .reveal {
        opacity: 0;
        transform: translateY(16px);
    }

    html.js .reveal.is-in {
        opacity: 1;
        transform: none;
        transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
        transition-delay: var(--reveal-delay, 0ms);
    }
}

/* Reduced motion means fewer and gentler animations, not none: the opacity
   change still aids comprehension, the movement goes. */
@media (prefers-reduced-motion: reduce) {
    html.js .reveal { opacity: 0; }
    html.js .reveal.is-in {
        opacity: 1;
        transform: none;
        transition: opacity 240ms ease;
    }

    @view-transition { navigation: none; }
}

/* ---------------------------------------------------------------------------
   10. PRINT
   The jotter is a printed piece and this site is its companion; a visitor who
   prints a page should get the document, not a screenshot of a website.
   --------------------------------------------------------------------------- */
@media print {
    .sheet--field,
    .sheet--deep {
        background: #fff !important;
        color: #000 !important;
    }
    .sheet--field *,
    .sheet--deep * { color: #000 !important; }
    .site-header,
    .site-footer nav,
    .btn { display: none !important; }
    .sheet { padding: var(--s-4) 0; break-inside: avoid; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}