/* ---------------------------------------------------------------------------
   flaresinc.com

   The public face of a technology company. Restraint is the brief: confident
   typography, generous space, real product language, and nothing that glows,
   floats or pretends to be a dashboard.

   Deliberately NOT the application's stylesheet. The Workspace is a tool people
   use all day and is dense on purpose; a marketing page is read once, quickly,
   and by somebody deciding whether to trust us.
   --------------------------------------------------------------------------- */

:root {
    --ink: #0a0a0b;
    --ink-soft: #46474b;
    --ink-faint: #6f7075;
    --line: #e5e5e8;
    --line-soft: #f0f0f2;
    --paper: #ffffff;
    --paper-tint: #fafafb;
    --paper-deep: #0a0a0b;

    /* One accent, used sparingly. A page with six accents has none. */
    --flare: #1f4fd8;
    --flare-soft: #eef2fe;

    --radius: 12px;
    --radius-lg: 18px;
    --measure: 68ch;
    --shell: 1160px;

    --step-hero: clamp(2.4rem, 1.2rem + 4.2vw, 4.1rem);
    --step-h1: clamp(2rem, 1.2rem + 2.6vw, 3rem);
    --step-h2: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
    --step-h3: clamp(1.125rem, 1rem + 0.5vw, 1.3rem);
    --step-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.14; letter-spacing: -0.021em; margin: 0; font-weight: 700; }
p { margin: 0; }
img, svg { max-width: 100%; height: auto; }

a { color: var(--flare); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus must be visible for everybody, and obvious. */
:focus-visible {
    outline: 3px solid var(--flare);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: #fff;
    padding: 12px 18px;
    z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

.wrap {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 24px;
}

.measure { max-width: var(--measure); }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* --- Header ---------------------------------------------------------------
   One row. The mark, the sections, and the two things a visitor came to do. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 68px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    flex: none;
}
.brand:hover { text-decoration: none; }
.brand svg { width: 26px; height: 26px; display: block; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: 4px; }

.nav a {
    color: var(--ink-soft);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}
.nav a:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.nav a[aria-current='page'] { color: var(--ink); font-weight: 600; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* The mobile menu is a checkbox, so it works with no JavaScript at all. */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; }

@media (max-width: 900px) {
    .site-header .wrap { gap: 12px; }
    .nav-toggle-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        width: 40px;
        height: 40px;
        border: 1px solid var(--line);
        border-radius: 10px;
        cursor: pointer;
    }
    .nav {
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px;
        margin: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        display: none;
    }
    .nav a { padding: 12px; font-size: 1rem; }
    .nav-toggle:checked ~ .nav { display: flex; }
    /* Sign in stays reachable at every width. Hiding it on a tablet meant a
       parent or a member of staff could not get into Flares from the one page
       that is supposed to lead there. */
    .header-actions { margin-left: 0; gap: 6px; }
    .header-actions .btn { padding: 8px 12px; }
}

@media (max-width: 460px) {
    /* On the narrowest phones the two actions stack rather than shrink to
       nothing. Neither is dropped. */
    .site-header .wrap { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
    .nav { top: auto; }
    .header-actions { width: 100%; order: 3; }
    .header-actions .btn { flex: 1; }
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #26262a; }

.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: #c9c9cf; }

.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--line-soft); color: var(--ink); }

.btn-sm { padding: 8px 14px; font-size: 0.875rem; }
.btn-lg { padding: 15px 28px; font-size: 1rem; }
.btn-block { width: 100%; }

/* On a dark band the buttons invert, so the primary stays the loudest thing and
   the secondary stays readable.
   
   These are keyed to the classes the markup actually uses. They were written
   against a `.on-dark` class that appears nowhere, so on a dark band the
   primary button kept its near-black background — invisible — and the
   secondary kept its white one. */
.band-dark .btn-primary,
.partner-band .btn-primary {
    background: #fff;
    color: var(--ink);
}
.band-dark .btn-primary:hover,
.partner-band .btn-primary:hover { background: #eaeaee; }

.band-dark .btn-secondary,
.partner-band .btn-secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
}
.band-dark .btn-secondary:hover,
.partner-band .btn-secondary:hover {
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .06);
}

.band-dark .btn-ghost,
.partner-band .btn-ghost { color: rgba(255, 255, 255, .8); }
.band-dark .btn-ghost:hover,
.partner-band .btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* --- Sections and type ---------------------------------------------------- */
.band { padding: clamp(64px, 8vw, 128px) 0; }
.band-tint { background: var(--paper-tint); }
.band-dark { background: var(--paper-deep); color: #fff; }
.band-dark p { color: rgba(255,255,255,.72); }
/* Prose links only. Without the exclusion this beats .btn-secondary on
   specificity and paints its label white on a white button — the label
   disappears entirely, which is exactly what happened. */
.band-dark a:not(.btn) { color: #fff; }
.band + .band { border-top: 1px solid var(--line); }
.band-dark + .band, .band + .band-dark { border-top: 0; }

.eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 14px;
}
.band-dark .eyebrow { color: rgba(255,255,255,.55); }

.hero-title { font-size: var(--step-hero); letter-spacing: -0.032em; }
h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); }

.lead {
    font-size: var(--step-lead);
    color: var(--ink-soft);
    line-height: 1.55;
}
.band-dark .lead { color: rgba(255,255,255,.72); }

.section-head { margin-bottom: clamp(32px, 4.5vw, 56px); }
.section-head p { margin-top: 12px; }

/* --- Grids ---------------------------------------------------------------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; }

@media (min-width: 640px) {
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Cards ---------------------------------------------------------------- */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: 0.9375rem; }

a.card { color: inherit; display: block; }
a.card:hover { border-color: #c9c9cf; text-decoration: none; }

.band-dark .card {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
}

/* The product mark on a card: the application's own icon, at a size that reads
   as an icon rather than as a bullet. */
.card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--flare-soft);
    color: var(--flare);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.card-icon .icon { width: 24px; height: 24px; display: block; }
.band-dark .card-icon { background: rgba(255,255,255,.1); color: #fff; }

.icon { width: 20px; height: 20px; flex: none; }

/* Product cards carry a real drawing and a sentence, so they get room. */
.grid-4 .card { padding: 28px 26px; }
.grid-4 .card h3 { font-size: 1.125rem; }
.grid-4 .card p { font-size: 0.9375rem; line-height: 1.55; }

/* A product that is not shipping says so, quietly and honestly. */
.status {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    vertical-align: middle;
}
.status-soon { background: #fff8e6; border-color: #f3e2b3; color: #8a6400; }

/* --- The connected-workflow diagram ---------------------------------------
   The strongest argument Flares has is that these are not separate products,
   so the page shows the path rather than asserting it.

   A GRID, not a flex row: eight steps in a flex row put seven on one line and
   left the eighth stranded across the full width, which read as a mistake
   rather than a sequence. A grid gives even rows at every width, and the
   arrows between steps make it a flow rather than a pile of boxes. */
.flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    counter-reset: step;
}

@media (min-width: 700px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.flow li {
    position: relative;
    padding: 22px 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.flow li span {
    display: block;
    margin-top: 6px;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink-faint);
}

.flow li::before {
    counter-increment: step;
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--flare-soft);
    color: var(--flare);
    font-size: 0.875rem;
    font-weight: 700;
}

/* The arrow between one step and the next. Decorative, so it is hidden from
   assistive technology — the numbers already carry the order. */
.flow li::after {
    content: '';
    position: absolute;
    top: 37px;
    right: -11px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--line);
    border-right: 2px solid var(--line);
    transform: rotate(45deg);
}

/* No arrow off the end of a row, or after the final step. */
.flow li:nth-child(2n)::after { content: none; }
.flow li:last-child::after { content: none; }

@media (min-width: 700px) {
    .flow li:nth-child(2n)::after { content: ''; }
    .flow li:nth-child(3n)::after { content: none; }
    .flow li:last-child::after { content: none; }
}

@media (min-width: 1000px) {
    .flow li:nth-child(2n)::after,
    .flow li:nth-child(3n)::after { content: ''; }
    .flow li:nth-child(4n)::after { content: none; }
    .flow li:last-child::after { content: none; }
}

.band-dark .flow li { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.band-dark .flow li span { color: rgba(255,255,255,.62); }
.band-dark .flow li::before { background: rgba(255,255,255,.12); color: #fff; }
.band-dark .flow li::after { border-color: rgba(255,255,255,.2); }

/* --- Tables (plan comparison) --------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.compare {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    font-size: 0.9375rem;
}
table.compare th, table.compare td {
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
table.compare thead th { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
table.compare tbody th { font-weight: 500; color: var(--ink-soft); }
table.compare td.yes { color: var(--flare); font-weight: 700; }
table.compare td.no { color: var(--ink-faint); }
table.compare caption { text-align: left; padding-bottom: 12px; color: var(--ink-faint); font-size: 0.875rem; }

/* --- Forms ---------------------------------------------------------------- */
.field { display: block; margin-bottom: 18px; }
.field > span, .field > label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; }
.field .hint { font-weight: 400; color: var(--ink-faint); font-size: 0.8125rem; margin-top: 6px; }

.input, .select, .textarea {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--flare); }
.textarea { min-height: 120px; resize: vertical; }

.field-row { display: grid; gap: 0 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

.error { color: #b3261e; font-size: 0.875rem; margin-top: 6px; }

.notice {
    padding: 16px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--paper-tint);
    font-size: 0.9375rem;
}
.notice-good { background: #eefaf1; border-color: #bfe6cb; }
.notice-bad { background: #fdeeed; border-color: #f2c6c2; }

/* --- Pricing -------------------------------------------------------------- */
.plan { display: flex; flex-direction: column; }
.plan .price { margin: 18px 0 6px; }
.plan .amount { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; }
.plan .per { color: var(--ink-faint); font-size: 0.875rem; }
.plan .rates { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.plan .rates div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9375rem; padding: 4px 0; }
.plan .rates .label { color: var(--ink-soft); }
.plan ul { list-style: none; margin: 18px 0 0; padding: 0; font-size: 0.9375rem; }
.plan ul li { padding: 5px 0 5px 24px; position: relative; color: var(--ink-soft); }
.plan ul li::before { content: '✓'; position: absolute; left: 0; color: var(--flare); font-weight: 700; }
.plan .btn { margin-top: 22px; }

/* --- Partner School Program ----------------------------------------------
   Its own treatment, and deliberately restrained. Prestige here comes from
   selectivity and from what the program actually gives a school — not from a
   gold banner. */
.partner-band {
    background:
        radial-gradient(1100px 420px at 12% -10%, rgba(31,79,216,.18), transparent 62%),
        var(--paper-deep);
    color: #fff;
}
.partner-band p { color: rgba(255,255,255,.72); }
/* Prose links only, as on the other dark band — and white rather than the
   accent blue, which does not carry enough contrast against near-black. */
.partner-band a:not(.btn) { color: #fff; }

.emblem {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 10px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.emblem svg { width: 16px; height: 16px; }

.benefit { padding: 22px 0; border-top: 1px solid var(--line); }
.benefit:first-of-type { border-top: 0; }
.benefit h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.benefit p { color: var(--ink-soft); font-size: 0.9375rem; }
.band-dark .benefit { border-color: rgba(255,255,255,.12); }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
    background: var(--paper-deep);
    color: rgba(255,255,255,.7);
    padding: 64px 0 36px;
    font-size: 0.9375rem;
}
.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: #fff; }
.site-footer h2 {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-bottom: 14px;
    font-weight: 700;
}
.footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.4fr repeat(4, minmax(0,1fr)); } }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { padding: 5px 0; }
.footer-base {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
    font-size: 0.875rem;
    color: rgba(255,255,255,.5);
}

/* --- Utilities ------------------------------------------------------------ */
.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.muted { color: var(--ink-faint); }
.small { font-size: 0.875rem; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- A card that opens something ------------------------------------------
   A card the whole of which is a link needs to say so. Without this the
   product grid read as eight paragraphs rather than eight doors. */
.card-more {
    margin-top: 16px;
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--flare);
}

a.card:hover .card-more { text-decoration: underline; }

.product-card .product-tagline {
    margin-top: 8px;
    font-weight: 600;
    color: var(--ink);
    font-size: 0.9375rem;
}

.product-card p + p { margin-top: 10px; }
.product-card h2 { font-size: 1.25rem; }