/*
    The public face.

    Kept apart from app.css on purpose. That file dresses an operator's console and is full of narrow overrides
    that fight MudBlazor's layout; this one dresses a page strangers read and shares nothing with it but the
    document. Two audiences, two stylesheets, and changing one cannot quietly change the other.

    Everything here is written in logical properties, as app.css is, so right-to-left is deliberate rather than
    accidental — and every colour is a token, so dark mode is a second set of values rather than a second
    stylesheet.
*/

/* ---- the typeface -------------------------------------------------------------------------------------
   The same self-hosted Vazirmatn the accounting product already ships, subset the same way. Self-hosted and
   not a CDN: this platform is installed on servers that may never reach the internet, and a landing page that
   falls back to Tahoma on exactly those servers is the opposite of what a landing page is for. */

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/vazirmatn/vazirmatn-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/vazirmatn/vazirmatn-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/vazirmatn/vazirmatn-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens -------------------------------------------------------------------------------------------
   One ramp for ink, one for surfaces, one accent, and one warm tone for things that are time-bound. Nothing
   below this block writes a raw colour, which is what makes dark mode a second set of values rather than a
   second stylesheet. */

.pub {
    --ink: #0f1729;
    --ink-soft: #46556f;
    --ink-faint: #6b7a93;
    --surface: #ffffff;
    --surface-sunken: #f6f8fc;
    --surface-raised: #ffffff;
    --line: #e3e9f2;
    --line-strong: #cfd8e6;

    --accent: #4f46e5;
    --accent-strong: #4338ca;
    --accent-ink: #ffffff;
    --accent-soft: #eef1fe;
    --accent-line: #c7cdfa;

    --warm: #9a5b06;
    --warm-soft: #fef6e7;
    --warm-line: #f2ddb4;

    --shadow-sm: 0 1px 2px rgba(15, 23, 41, .05), 0 1px 3px rgba(15, 23, 41, .04);
    --shadow-md: 0 4px 6px rgba(15, 23, 41, .04), 0 12px 28px rgba(15, 23, 41, .07);
    --shadow-lg: 0 8px 16px rgba(15, 23, 41, .05), 0 24px 56px rgba(15, 23, 41, .10);
    --ring: 0 0 0 4px var(--accent-soft);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --shell: 1140px;
    --gutter: clamp(16px, 4vw, 32px);
    --section-space: clamp(56px, 8vw, 104px);

    /* A fluid scale rather than a handful of fixed sizes: the same rhythm from a phone to a wide screen. */
    --display: clamp(2rem, 1.25rem + 3.2vw, 3.5rem);
    --h2: clamp(1.45rem, 1.15rem + 1.3vw, 2.15rem);
    --h3: clamp(1.1rem, 1rem + .35vw, 1.3rem);
    --lead: clamp(1.05rem, 1rem + .35vw, 1.25rem);

    font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
    /* 16px at 1.9. The console runs 14px at 1.43, which is cramped for a script with this many ascenders,
       descenders and diacritics — and this is the page people read rather than operate. */
    font-size: 16px;
    line-height: 1.9;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
}

@media (prefers-color-scheme: dark) {
    .pub {
        --ink: #e6ecf7;
        --ink-soft: #a3b0c6;
        --ink-faint: #8593ab;
        --surface: #0c1220;
        --surface-sunken: #101828;
        --surface-raised: #141d30;
        --line: #1e2942;
        --line-strong: #2b3954;

        --accent: #8b93f8;
        --accent-strong: #a5abfb;
        --accent-ink: #0c1220;
        --accent-soft: #1a2142;
        --accent-line: #333c6b;

        --warm: #eab676;
        --warm-soft: #2a2113;
        --warm-line: #4a3a1d;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .45);
        --shadow-lg: 0 8px 16px rgba(0, 0, 0, .35), 0 24px 56px rgba(0, 0, 0, .5);
        --ring: 0 0 0 4px rgba(139, 147, 248, .22);
    }
}

/* ---- base ---------------------------------------------------------------------------------------------- */

.pub h1, .pub h2, .pub h3 { margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
.pub h1 { font-size: var(--display); line-height: 1.28; }
.pub h2 { font-size: var(--h2); line-height: 1.35; }
.pub h3 { font-size: var(--h3); line-height: 1.5; }
.pub p { margin: 0 0 1em; }
.pub p:last-child { margin-block-end: 0; }
.pub a { color: var(--accent); text-underline-offset: .25em; }

.pub-shell { inline-size: 100%; max-inline-size: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.pub-prose { max-inline-size: 68ch; }

/* Keyboard first, once, for everything focusable. app.css removes its outline and replaces it with nothing;
   this does the opposite. */
.pub :is(a, button, input, textarea, summary):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.pub-skip {
    position: absolute; inset-block-start: -200px; inset-inline-start: var(--gutter); z-index: 20;
    padding: 12px 20px; background: var(--accent); color: var(--accent-ink);
    border-end-start-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm);
    font-weight: 600; text-decoration: none;
}
.pub-skip:focus { inset-block-start: 0; }
#pub-main { flex: 1; }

/* The router focuses the h1 after every navigation so a screen reader announces the new page. That is a
   programmatic focus on something nobody can tab to, and the browser's default ring draws a black rectangle
   the full width of the page around the headline. The console solves the same problem on its main element;
   this solves it wherever the router puts focus. */
.pub :is(h1, h2, h3, [tabindex="-1"]):focus { outline: none; }

/* ---- header -------------------------------------------------------------------------------------------- */

.pub-header {
    position: sticky; inset-block-start: 0; z-index: 10;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-block-end: 1px solid var(--line);
}
.pub-header-inner {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
    padding-block: 14px;
}
.pub-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.pub-brand-mark {
    display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 12px;
    background: linear-gradient(140deg, var(--accent), var(--accent-strong));
    color: var(--accent-ink); font-weight: 800; font-size: 1.1rem; box-shadow: var(--shadow-sm);
}
.pub-brand-name { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.pub-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pub-nav a {
    padding: 8px 14px; border-radius: var(--radius-pill); text-decoration: none; color: var(--ink-soft);
    font-weight: 600; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pub-nav a:hover { background: var(--surface-sunken); color: var(--ink); }
.pub-signin { border: 1px solid var(--line-strong); }
.pub-signin:hover { border-color: var(--accent-line); }

/* ---- hero ---------------------------------------------------------------------------------------------- */

.pub-hero {
    position: relative; overflow: hidden;
    padding-block: clamp(56px, 9vw, 120px);
    background:
        radial-gradient(60rem 30rem at 85% -10%, var(--accent-soft), transparent 60%),
        radial-gradient(45rem 26rem at 5% 10%, color-mix(in srgb, var(--accent-soft) 70%, transparent), transparent 55%),
        var(--surface-sunken);
    border-block-end: 1px solid var(--line);
}
.pub-hero h1 { max-inline-size: 18ch; }
.pub-hero-body { font-size: var(--lead); color: var(--ink-soft); max-inline-size: 58ch; }
.pub-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 32px; }

/* ---- sections ------------------------------------------------------------------------------------------ */

.pub-section { padding-block: var(--section-space); }
.pub-section-plans { background: var(--surface-sunken); border-block-start: 1px solid var(--line); }
.pub-eyebrow {
    display: inline-block; margin-block-end: 12px; padding: 5px 14px; border-radius: var(--radius-pill);
    background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-line);
    font-size: .82rem; font-weight: 700; letter-spacing: .02em;
}
.pub-lead { font-size: var(--lead); color: var(--ink-soft); max-inline-size: 62ch; }

/* ---- buttons ------------------------------------------------------------------------------------------
   ".pub .pub-cta", not ".pub-cta": ".pub a" above is one class and one element, which outranks a bare class,
   so a call to action that happens to be a link painted accent-coloured text on an accent background and read
   as an empty button. That is a defect this page actually shipped with. */

.pub .pub-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 30px; border: 1px solid transparent; border-radius: var(--radius-pill);
    background: linear-gradient(140deg, var(--accent), var(--accent-strong));
    color: var(--accent-ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pub .pub-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.pub .pub-cta:active { transform: translateY(0); }
.pub .pub-cta-quiet {
    background: var(--surface); color: var(--accent); border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
}
.pub .pub-cta-quiet:hover { border-color: var(--accent-line); background: var(--surface-raised); }
.pub-link { font-weight: 700; text-decoration: none; border-block-end: 2px solid var(--accent-line); }
.pub-link:hover { border-block-end-color: var(--accent); }

/* ---- announcements ------------------------------------------------------------------------------------- */

.pub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.pub-card {
    position: relative; min-inline-size: 0; padding: 26px 28px;
    background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.pub-card h3 { margin-block-start: 0; }
.pub-card p { color: var(--ink-soft); }
.pub-card-announcement { border-inline-start: 4px solid var(--warm); }
.pub-card-chip {
    display: inline-block; margin-block-end: 10px; padding: 3px 12px; border-radius: var(--radius-pill);
    background: var(--warm-soft); color: var(--warm); border: 1px solid var(--warm-line);
    font-size: .78rem; font-weight: 700;
}

/* ---- plans --------------------------------------------------------------------------------------------- */

.pub-signup { display: grid; gap: clamp(28px, 4vw, 44px); }
.pub-plan-choice { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.pub-plan-choice legend {
    padding: 0; margin-block-end: 20px; font-size: var(--h3); font-weight: 700; color: var(--ink-soft);
}
.pub-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 22px; }
/* Positioned, so the visually-hidden radio is placed against its own card. Absolute with no positioned
   ancestor escapes to the page box and pushes the document wider than the viewport — which it did, and which
   clipped the right edge of every line on a phone until this line existed. */
.pub-plan { position: relative; min-inline-size: 0; }

/* Off-screen rather than display:none, so it keeps its place in the tab order and keeps telling a screen
   reader that these are alternatives. The card is its label. */
.pub-plan-radio {
    position: absolute; inset-block-start: 0; inset-inline-start: 0;
    inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%);
}
.pub-plan-label {
    position: relative; display: grid; gap: 14px; block-size: 100%; padding: 28px; cursor: pointer;
    background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pub-plan-label:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
.pub-plan-radio:checked + .pub-plan-label { border-color: var(--accent); box-shadow: var(--shadow-md), var(--ring); }
/* A tick that exists only once a card is chosen, so "which one did I pick" is answered by more than colour. */
.pub-plan-label::after {
    content: "✓";
    position: absolute; inset-block-start: 20px; inset-inline-end: 20px;
    display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .9rem;
    opacity: 0; transform: scale(.7); transition: opacity .15s ease, transform .15s ease;
}
.pub-plan-radio:checked + .pub-plan-label::after { opacity: 1; transform: scale(1); }
.pub-plan-radio:focus-visible + .pub-plan-label { outline: 2px solid var(--accent); outline-offset: 3px; }

.pub-plan-name { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; padding-inline-end: 36px; }
.pub-plan-product { color: var(--ink-faint); font-size: .9rem; margin-block-start: -10px; }
.pub-plan-prices { display: grid; gap: 6px; }
.pub-plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pub-plan-amount { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.pub-plan-currency { color: var(--ink-faint); font-weight: 600; font-size: .95rem; }
.pub-plan-period { color: var(--ink-faint); font-size: .9rem; }
.pub-plan-description { color: var(--ink-soft); }
.pub-plan-features { display: grid; gap: 10px; padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.pub-plan-feature { display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
.pub-plan-feature::before {
    content: "✓"; flex: none; display: grid; place-items: center;
    inline-size: 20px; block-size: 20px; margin-block-start: 4px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-strong); font-size: .72rem; font-weight: 800;
}

/* ---- the one form -------------------------------------------------------------------------------------- */

.pub-signup-fields {
    padding: clamp(24px, 3vw, 36px);
    background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.pub-signup-fields h3 { margin-block-start: 0; }
.pub-signup-note { color: var(--ink-faint); margin-block-end: 24px; }
.pub-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.pub-signup label { display: grid; gap: 8px; min-inline-size: 0; font-weight: 600; color: var(--ink-soft); font-size: .95rem; }
.pub-field-wide { margin-block-start: 18px; }
.pub-signup input, .pub-signup textarea {
    font: inherit; font-weight: 400; color: var(--ink); inline-size: 100%; box-sizing: border-box;
    padding: 13px 15px; background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pub-signup input:hover, .pub-signup textarea:hover { border-color: var(--accent-line); }
.pub-signup input:focus, .pub-signup textarea:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.pub-signup textarea { resize: vertical; min-block-size: 96px; }
.pub-signup-submit { margin-block-start: 26px; }

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

.pub-footer { border-block-start: 1px solid var(--line); background: var(--surface-sunken); padding-block: 40px; }
.pub-footer-inner {
    display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: baseline; justify-content: space-between;
    color: var(--ink-faint);
}
.pub-footer p { margin: 0; }
.pub-footer a { color: var(--ink-soft); }

/* ---- smallest screens ---------------------------------------------------------------------------------- */

@media (max-width: 560px) {
    .pub-header-inner { padding-block: 12px; }
    .pub-nav { gap: 4px; }
    .pub-nav a { padding: 7px 11px; font-size: .92rem; }
    .pub-hero-actions { flex-direction: column; align-items: stretch; }
    .pub .pub-cta { inline-size: 100%; }
    .pub-plan-label, .pub-card { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .pub *, .pub *::before, .pub *::after { transition: none !important; }
    .pub .pub-cta:hover, .pub-plan-label:hover { transform: none; }
}