/* =============================================================================
 * NeuraCoreWeb — the landing site's own layer.
 * -----------------------------------------------------------------------------
 * Loaded AFTER the shared theme (`neuracore.css`), which it refines and never
 * replaces. Nothing here redefines a colour: every value is a token from the
 * theme, so a change to the palette reaches this site without being edited
 * here.
 *
 * What belongs in this file is layout that is genuinely this site's alone — the
 * hero, the section rhythm, the diagram. Anything two NeuraCore sites would
 * both want belongs in the shared theme instead.
 * ========================================================================== */

/* --- Page frame ---------------------------------------------------------- */
.nc-body,
.nc-body-compact {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.nc-body-compact main { flex: 1 0 auto; display: flex; align-items: center; }
.nc-body main { flex: 1 0 auto; }

/* --- Header -------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(18, 18, 20, 0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--nc-line-soft);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nc-space-4);
    padding-block: var(--nc-space-3);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--nc-space-4);
    flex-wrap: wrap;
}

.site-nav__link {
    color: var(--nc-text-dim);
    font-size: var(--nc-size-sm);
    font-weight: 600;
}
.site-nav__link:hover { color: var(--nc-cyan); text-decoration: none; }

/* The language switcher. Seven links, not a control: the site has no JavaScript
   and the Content-Security-Policy forbids script outright.
 *
 * It was a two-option pill, a single rounded capsule with the halves flush
 * against each other and `overflow: hidden` clipping them to its curve. Seven
 * of those do not fit a phone header, and a flex row that wraps inside a
 * clipped capsule breaks the shape: the second line has square ends and the
 * clip cuts it. So the capsule moved from the group to each option, which wraps
 * cleanly at any count and needs no clipping at all. */
.site-lang {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--nc-space-1);
    max-width: 22rem;
}
.site-lang__option {
    min-width: 2.1rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-radius-pill);
    font-size: var(--nc-size-xs);
    font-weight: 700;
    color: var(--nc-text-dim);
    letter-spacing: 0.04em;
    text-align: center;
}
.site-lang__option:hover { border-color: var(--nc-cyan); }
.site-lang__option:hover { color: var(--nc-cyan); text-decoration: none; }
/* Cyan fill, therefore dark text — AGENTS.md, and the shared theme's rule. */
.site-lang__option--active,
.site-lang__option--active:hover {
    background: var(--nc-cyan);
    border-color: var(--nc-cyan);
    color: var(--nc-on-accent);
}

/* --- The operator's banner ----------------------------------------------- */
/* Shown only to a visitor who is seeing a closed site because their address is
   excepted. Without it, an administrator who closed the site and then looked at
   it would conclude the switch was broken. */
.site-banner {
    background: rgba(255, 140, 0, 0.12);
    border-bottom: 1px solid var(--nc-orange);
    padding-block: var(--nc-space-3);
    font-size: var(--nc-size-sm);
    color: var(--nc-text);
}
.site-banner .nc-badge { margin-right: var(--nc-space-2); }

/* --- Hero ---------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--nc-space-24) var(--nc-space-16);
    border-bottom: 1px solid var(--nc-line-soft);
}

.hero__glow {
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
}

.hero__inner { position: relative; z-index: 1; }

.hero__headline {
    font-size: var(--nc-size-3xl);
    max-width: 18ch;
    margin-bottom: var(--nc-space-4);
    /* The gradient is decorative; `color` underneath it is what a browser that
       cannot clip a background to text falls back to. */
    color: #fff;
    background: linear-gradient(100deg, #ffffff 30%, var(--nc-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__actions { margin-block: var(--nc-space-8) var(--nc-space-4); }
.hero__note { font-size: var(--nc-size-sm); }

/* --- Sections ------------------------------------------------------------ */
.section__title {
    max-width: 24ch;
    margin-bottom: var(--nc-space-8);
}

/* Alternating ground, so the eye can tell one section from the next without a
   rule between them. */
.section--panel {
    background: linear-gradient(180deg, transparent, rgba(30, 30, 34, 0.55) 12%,
                rgba(30, 30, 34, 0.55) 88%, transparent);
}

/* --- Pillars ------------------------------------------------------------- */
.pillar__index {
    display: block;
    font-family: var(--nc-font-mono);
    font-size: var(--nc-size-sm);
    color: var(--nc-cyan);
    margin-bottom: var(--nc-space-3);
    letter-spacing: 0.1em;
}

/* --- Features ------------------------------------------------------------ */
.feature__glyph {
    width: 30px;
    height: 30px;
    color: var(--nc-cyan);
    margin-bottom: var(--nc-space-4);
}

/* --- Architecture -------------------------------------------------------- */
.architecture__lead { margin-bottom: var(--nc-space-8); }

.architecture {
    display: grid;
    gap: var(--nc-space-8);
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    align-items: start;
}

.architecture__diagram {
    background: var(--nc-panel);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-radius-lg);
    padding: var(--nc-space-6);
    /* The drawing has a fixed aspect ratio and a narrow column would squash it;
       it scrolls inside its own box rather than widening the page. */
    overflow-x: auto;
}

.diagram {
    width: 100%;
    min-width: 380px;
    height: auto;
    color: var(--nc-cyan);
}
.diagram__node rect {
    fill: var(--nc-panel-high);
    stroke: var(--nc-line);
    stroke-width: 1.2;
}
.diagram__node text {
    fill: var(--nc-text);
    font-family: var(--nc-font);
    font-size: 13px;
    font-weight: 600;
    text-anchor: middle;
}
.diagram__node--accent rect {
    fill: rgba(34, 195, 195, 0.12);
    stroke: var(--nc-cyan);
}
.diagram__node--accent text { fill: var(--nc-cyan); }
.diagram__edge { color: var(--nc-text-faint); }

.architecture__item + .architecture__item {
    margin-top: var(--nc-space-6);
    padding-top: var(--nc-space-6);
    border-top: 1px solid var(--nc-line-soft);
}
.architecture__item h4 { color: var(--nc-cyan); margin-bottom: var(--nc-space-2); }
.architecture__item p { margin-bottom: 0; }

/* --- Licensing ----------------------------------------------------------- */
.licensing__grid { margin-block: var(--nc-space-8) var(--nc-space-4); }
.tier { display: flex; flex-direction: column; gap: var(--nc-space-3); }
.tier .nc-badge { align-self: flex-start; }
.tier__body { margin-bottom: 0; font-size: var(--nc-size-sm); }
.licensing__note { margin-bottom: var(--nc-space-6); }

/* --- The licence matrix --------------------------------------------------
 *
 * Three columns, one row per capability. The cards above say what each product
 * IS; this says what a reader loses by choosing the cheaper one, which is the
 * question they actually arrived with and which is a grid rather than a
 * paragraph.
 *
 * Each column carries its tier's accent through `--tier`, so a tick is the
 * colour of the badge it belongs under and the three columns are told apart
 * without reading a heading. */
.matrix {
    margin-block: var(--nc-space-8) var(--nc-space-8);
}

/* The only thing on the page allowed to scroll sideways. Thirteen rows of
   translated labels across three columns is the one block that can outgrow a
   phone, and the page widening would take the whole document with it. */
.matrix__scroll {
    max-width: 100%;
    overflow-x: auto;
    background: var(--nc-panel);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-radius-lg);
}

/* `separate` rather than `collapse`, and every rule below is drawn with an
   inset shadow rather than a border. A collapsed table owns its borders at the
   table level, and a `position: sticky` cell inside one loses them as it
   scrolls: the row lines stop at the frozen first column in several browsers.
   Shadows belong to the cell and travel with it. */
.matrix__table {
    width: 100%;
    min-width: 620px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--nc-size-sm);
}

/* Outside the scrolling box, so it wraps to the reader's screen instead of to
   the table's minimum width. */
.matrix__caption {
    margin-bottom: var(--nc-space-3);
    max-width: var(--nc-measure);
    color: var(--nc-text-faint);
    font-size: var(--nc-size-xs);
}

/* Frozen with the label column beneath it, or the heads would slide out from
   under their own rows. */
.matrix__corner {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--nc-panel);
    box-shadow: inset 0 -1px 0 var(--nc-line),
                inset -1px 0 0 var(--nc-line-soft);
}

/* Column widths, declared on the head row because that is where a table decides
   them. The labels had been taking whatever they wanted, which left Free, whose
   answers are the shortest, narrower than the sentence sitting in the Business
   column beside it. The three tiers now share what is left equally, so the
   comparison looks like a comparison rather than like one column mattering
   more than the others. */
.matrix__corner { width: 31%; }
.matrix__head   { width: 23%; }

/* The tier heads. A rule in the tier's own colour sits above each name, which
   is the whole of the decoration: a filled header would fight the badges the
   reader has just looked at directly above the table. */
.matrix__head {
    padding: var(--nc-space-4) var(--nc-space-4) var(--nc-space-3);
    box-shadow: inset 0 -1px 0 var(--nc-line);
    text-align: center;
    vertical-align: bottom;
    white-space: nowrap;
}
.matrix__tier {
    display: block;
    padding-top: var(--nc-space-3);
    border-top: 3px solid var(--tier);
    color: var(--tier);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.matrix--free       { --tier: var(--nc-green); }
.matrix--individual { --tier: var(--nc-purple); }
.matrix--business   { --tier: var(--nc-orange); }

/* The most complete column, tinted end to end so the eye finds it without a
   label saying so. Painted as an image rather than a colour, so the row hover
   below composes with it instead of replacing it. */
.matrix__head.matrix--business,
.matrix__cell.matrix--business {
    background-image: linear-gradient(rgba(255, 140, 0, 0.07), rgba(255, 140, 0, 0.07));
}

/* The row label, held in place while the columns scroll under it. Without this
   a reader who has scrolled to the Business column on a phone is looking at
   three values with nothing saying what they are values of. */
.matrix__label {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 11rem;
    padding: var(--nc-space-3) var(--nc-space-4);
    background: var(--nc-panel);
    box-shadow: inset 0 -1px 0 var(--nc-line-soft),
                inset -1px 0 0 var(--nc-line-soft);
    color: var(--nc-text-dim);
    font-weight: 600;
    text-align: left;
}

.matrix__cell {
    padding: var(--nc-space-3) var(--nc-space-4);
    box-shadow: inset 0 -1px 0 var(--nc-line-soft);
    text-align: center;
    vertical-align: middle;
}

.matrix__table tbody tr:last-child .matrix__cell { box-shadow: none; }
.matrix__table tbody tr:last-child .matrix__label {
    box-shadow: inset -1px 0 0 var(--nc-line-soft);
}

.matrix__table tbody tr:hover .matrix__label,
.matrix__table tbody tr:hover .matrix__cell { background-color: var(--nc-panel-high); }

.matrix__mark {
    display: inline-block;
    width: 20px;
    height: 20px;
    color: var(--nc-text-faint);
}
/* A tick takes the column's colour; a dash stays muted, because "not in this
   tier" is not a fault and should not shout. */
.matrix__mark--yes { color: var(--tier); }

.matrix__value {
    display: inline-block;
    max-width: 16rem;
    color: var(--nc-text);
}

/* Named for a screen reader, invisible to everyone else: a tick that is only a
   shape says nothing, and "Included" is exactly what the shape means. */
.matrix__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Trust --------------------------------------------------------------- */
.trust p { margin-bottom: 0; font-size: var(--nc-size-sm); }

/* --- Standalone pages: maintenance and failure --------------------------- */
.standalone {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-block: var(--nc-space-24);
    text-align: center;
}
.standalone__glow { top: -180px; left: 50%; transform: translateX(-50%); }
.standalone__inner { position: relative; z-index: 1; }
.standalone__headline {
    font-size: var(--nc-size-2xl);
    margin-block: var(--nc-space-4);
}
/* The centred column has to be centred as a block, not only as text: `p` in the
   shared theme carries a reading-width maximum, and left alone it would sit
   against the left edge of a wide viewport. */
.standalone__inner p,
.standalone__message {
    margin-inline: auto;
    max-width: 56ch;
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--nc-line-soft);
    padding-block: var(--nc-space-8);
    margin-top: auto;
}
.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--nc-space-6);
}
.site-footer__tagline {
    font-size: var(--nc-size-sm);
    margin: var(--nc-space-2) 0 0;
    max-width: 42ch;
}
.site-footer__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--nc-space-1);
    font-size: var(--nc-size-sm);
}

/* --- Narrow viewports ---------------------------------------------------- */
@media (max-width: 900px) {
    .architecture { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .site-header__inner { flex-wrap: wrap; }
    .site-nav { width: 100%; justify-content: flex-start; }
    .hero__headline { max-width: none; }
    .site-footer__inner { flex-direction: column; align-items: flex-start; }
    .site-footer__meta { align-items: flex-start; }
}