/* ============================================================================
 * style.css · Omega-API · fase 2 stub minimal · sess 36c
 * 
 * Vincoli applicati · UI_CONSTRAINTS_v0_1:
 *   · 2 colori base (bg · ink · rule)
 *   · 3 colori segnale (PROCEED · CLARIFY · STOP) · solo per badge decision
 *   · Plex Sans + Plex Mono · pesi 400/600
 *   · max-width 960px · spacing scale 4/8/16/24/32/48
 *   · NO gradients · NO box-shadow > 0 1px 2px · radius max 4px
 *   · NO animazioni gratuite · NO icone decorative · NO dark mode
 * 
 * Scope fase 2 · stub minimal:
 *   · layout base
 *   · form · input · button
 *   · navbar · footer
 *   · message (error · success · info)
 * 
 * Fuori scope fase 2:
 *   · dashboard cards · table layout · chart · sparkline
 *   · responsive avanzato
 *   · animation
 * ========================================================================== */

/* ----- custom properties ----- */
:root {
    --bg:         #FAFAFA;
    --ink:        #1A1A1A;
    --rule:       #E5E5E5;
    --muted:      #6A6A6A;
    --green:      #2D7A3E;
    --amber:      #C77A1A;
    --red:        #B83232;
    /* F2-01 · V-B7 · spiral motion direction (ω) · non-valence · colour-blind-safe · blu↔ambra */
    --dir-conv:   #2C6FB0;
    --dir-hold:   #7A7A7A;
    --dir-drift:  #C77A1A;
    --font-sans:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono:  'IBM Plex Mono', 'Courier New', monospace;
}

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

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
}

/* ----- typography base ----- */
h1, h2, h3 {
    font-weight: 600;
    margin: 0 0 16px;
}

h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }

p {
    margin: 0 0 16px;
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover {
    text-decoration: none;
}

code, .mono {
    font-family: var(--font-mono);
    font-size: 13px;
}

/* ----- layout container ----- */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 24px;
}

.container-narrow {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* ----- navbar ----- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
}

.navbar .brand {
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
}

.navbar .nav-links {
    display: flex;
    gap: 24px;
}

.navbar .nav-links a {
    text-decoration: none;
    font-size: 14px;
}

.navbar .nav-links a:hover {
    text-decoration: underline;
}

/* ----- footer ----- */
.footer {
    border-top: 1px solid var(--rule);
    padding: 24px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* ----- form ----- */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.form-label-optional {
    color: var(--muted);
    font-weight: 400;
}

.form-input {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 4px;
}

.form-input:focus {
    outline: none;
    border-color: var(--ink);
}

.form-help {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
}

/* ----- button ----- */
.button {
    display: inline-block;
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

.button:hover {
    background: var(--ink);
    color: var(--bg);
}

.button-primary {
    color: var(--bg);
    background: var(--ink);
    border-color: var(--ink);
}

.button-primary:hover {
    background: var(--bg);
    color: var(--ink);
}

.button-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* ----- message · error · success · info ----- */
.message {
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    font-size: 14px;
}

.message-error {
    border-color: var(--red);
    color: var(--red);
}

.message-success {
    border-color: var(--green);
    color: var(--green);
}

.message-info {
    border-color: var(--ink);
    color: var(--ink);
}

/* ----- table-admin · admin list layout ----- */
.table-admin {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 13px; /* Q56-B1B-bis · -1pt */
}

.table-admin th,
.table-admin td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

.table-admin th {
    font-weight: 600;
    color: var(--muted);
    font-size: 11px; /* Q56-B1B-bis · -1pt */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

/* ----- badge · decision signal · solo PROCEED/CLARIFY/STOP ----- */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--rule);
}

.badge-proceed {
    color: var(--green);
    border-color: var(--green);
}

.badge-clarify {
    color: var(--amber);
    border-color: var(--amber);
}

.badge-stop {
    color: var(--red);
    border-color: var(--red);
}

/* ----- code-block · snippet integration ----- */
.code-block {
    padding: 16px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: #FFFFFF;
    font-size: 13px;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}

/* ----- home ----- */
.home-hero {
    padding: 48px 0;
    border-bottom: 1px solid var(--rule);
}

.home-hero h1 {
    font-size: 32px;
    margin-bottom: 24px;
}

.home-lead {
    font-size: 18px;
}

.home-verdicts {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
}

.home-section {
    padding: 32px 0;
    border-bottom: 1px solid var(--rule);
}

.home-example {
    padding-left: 16px;
    border-left: 2px solid var(--rule);
}

/* ----- pricing ----- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.pricing-card {
    padding: 24px;
    border: 1px solid var(--rule);
    border-radius: 4px;
}

.pricing-price {
    font-size: 24px;
    margin: 16px 0 8px;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.pricing-features li {
    padding: 4px 0;
    font-size: 14px;
}

/* ----- pricing alignment (Q8) · card flex · testata uniforme · CTA in fondo ----- */
.pricing-card {
    display: flex;
    flex-direction: column;
}
.pricing-card h2 {
    margin-top: 0;
}
.pricing-card .pricing-price {
    min-height: 32px;
}
/* la tagline sotto il prezzo: altezza uniforme così le sezioni partono pari */
.pricing-card > p:first-of-type {
    min-height: 48px;
}
/* spinge il blocco CTA (ultimo .mt-24 + nota) verso il fondo della card */
.pricing-card .button-block {
    margin-top: auto;
}

@media (max-width: 640px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* ----- utility ----- */
.text-muted   { color: var(--muted); }
.text-center  { text-align: center; }
.mt-8         { margin-top: 8px; }
.mt-16        { margin-top: 16px; }
.mt-24        { margin-top: 24px; }
.mb-8         { margin-bottom: 8px; }
.mb-16        { margin-bottom: 16px; }
.mb-24        { margin-bottom: 24px; }

/* ----- Q54-B · dashboard minimal · diagnostics collapse + card ----- */
.card {
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 10px 12px;
    margin-top: 8px;
}
.card-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
details.diag {
    border-top: 1px solid var(--rule);
    margin-top: 12px;
    padding-top: 8px;
}
details.diag > summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
    list-style: none;
    user-select: none;
}
details.diag > summary::-webkit-details-marker { display: none; }
details.diag > summary::before { content: "\25B8  "; color: var(--muted); }
details.diag[open] > summary::before { content: "\25BE  "; }
details.diag > *:not(summary) { margin-top: 8px; }

/* ----- F3-02 · Project pagella · Agent Grade + Operator gap + readout cards ----- */
/* grade token NEUTRO · mai semaforo di valenza (V-B6 / L3) · il colore vive solo dove e' direzione */
.pagella { margin: 8px 0 28px; }
.grade-hero { border: 1px solid var(--rule); border-radius: 6px; padding: 18px 20px; background: #fff; }
.grade-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.grade-token { font-family: var(--font-mono); font-size: 30px; font-weight: 600; line-height: 1; color: var(--ink); border: 1px solid var(--rule); border-radius: 4px; padding: 4px 12px; }
.grade-label { font-size: 18px; font-weight: 500; color: var(--ink); }
.grade-sec { margin-top: 12px; }
.grade-sec-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.grade-line { font-size: 14px; color: var(--ink); line-height: 1.5; }
.grade-action { font-weight: 500; }
.op-cta { margin-top: 14px; font-size: 13.5px; color: var(--dir-conv); font-weight: 500; }
.readout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.readout-card { border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; }
.readout-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.readout-value { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.readout-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ==========================================================================
   F3-R+2 · UNIT B · OPERATOR readout · Ω→S Vertex-B · vai Vertex-C
   Zero colori nuovi. La palette direzione (--dir-conv/hold/drift) resta ESCLUSIVA
   della spirale (L6 · V-B7): questo pannello non la tocca.
   La gerarchia e' tipografica: una cifra, un ledger, tre righe, un caveat.
   Nessun grafico, nessuna barra, nessuna percentuale (G43).
   ========================================================================== */
.op-panel {
    margin-top: 14px;                 /* fratello del grade-hero, non figlio (Δ65) */
    padding: 16px 18px 14px;
    border: 1px solid var(--ink);
    border-radius: 6px;
    background: #fff;
}
.op-panel-h {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink); font-weight: 600; margin-bottom: 2px;
}
.op-panel-sub { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.op-figure { display: flex; align-items: baseline; gap: 10px; }
.op-fig-n {
    font-family: var(--font-mono); font-size: 34px; font-weight: 600;
    line-height: 1; color: var(--ink); letter-spacing: -.02em;
}
.op-fig-l { font-size: 14px; color: var(--ink); }
.op-ledger { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 6px; }

.op-rows { margin-top: 14px; }
.op-row {
    display: flex; align-items: baseline; gap: 12px;
    padding: 5px 0; border-top: 1px solid var(--rule);
}
.op-row:first-child { border-top: none; }
.op-row-n {
    font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink);
    min-width: 40px; text-align: right;
}
.op-row-l { font-size: 13.5px; color: var(--ink); line-height: 1.4; }

.op-safety {
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule);
    font-size: 13px; color: var(--muted);
}
.op-after { margin-top: 12px; }
.op-after-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.op-after-l { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }
.op-caveat { margin-top: 12px; font-size: 12px; color: var(--muted); font-style: italic; }

@media (max-width: 640px) {
    .op-fig-n { font-size: 28px; }
    .op-row-n { min-width: 32px; }
}

/* F3-02c · header compatto + setup in tendina */
.proj-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 20px; }
.proj-name { font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.proj-meta { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.setup { margin: 26px 0 8px; border-top: 1px solid var(--rule); padding-top: 10px; }
.setup > summary { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer; list-style: none; }
.setup > summary::-webkit-details-marker { display: none; }
.setup > summary::before { content: "▸ "; }
.setup[open] > summary::before { content: "▾ "; }
.setup h2 { font-size: 16px; margin-top: 18px; }

/* F3-02c.1 · setup drawer · sezioni ordinate */
.setup-body { margin-top: 16px; }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 22px 34px; }
.setup-sec { min-width: 0; }
.setup-sec-h { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--rule); }
.setup-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 3px 0; color: var(--ink); }
.setup-kv > span:first-child { color: var(--muted); }
.setup-sub { font-size: 12px; color: var(--muted); margin: 10px 0 2px; }
.setup-list { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink); }
.setup-list li { margin: 2px 0; }
.setup-events { width: 100%; border-collapse: collapse; font-size: 13px; }
.setup-events td { padding: 4px 10px 4px 0; vertical-align: top; color: var(--ink); }
.setup-events td:first-child { color: var(--muted); white-space: nowrap; width: 128px; }
.setup-full { margin-top: 22px; }
.setup-admin { display: flex; gap: 10px; flex-wrap: wrap; }

/* F3-02d · Sessions to inspect · radar table */
.patterns { margin: 8px 0 20px; }
.patterns-h { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pattern-row { display: flex; justify-content: space-between; gap: 16px; max-width: 460px; font-size: 13.5px; padding: 4px 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.radar-bar { display: inline-flex; gap: 8px; margin: 0 0 8px; }
.radar-sorts { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.radar-sorts a { color: var(--muted); text-decoration: none; }
.radar-sorts a:hover { color: var(--ink); text-decoration: underline; }
.radar-sorts .sort-active { color: var(--ink); font-weight: 600; }
.radar-table { width: 100%; font-size: 13px; }
.radar-table th { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: left; }
.radar-table td { vertical-align: middle; }
.radar-row { cursor: pointer; }
.radar-row:hover { background: var(--surface-1, #f6f5f2); }
.radar-row a { color: var(--ink); text-decoration: none; }
.radar-row:hover a { text-decoration: underline; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); white-space: nowrap; }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.chip-upd { color: var(--muted); font-style: italic; }
.fp { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

/* ----- F4-02 · create form · righe con radio -----
   Non e' una feature: e' il rendering minimo del nuovo bordo (goal_behavior · privacy · plan). */
.form-choice { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.form-choice input { margin: 0; }

/* ----- F4-01a · fleet radar · celle a due righe (primaria + sottotitolo muted) -----
   Stessa grammatica della cella Pattern di Project: il valore sopra, il dettaglio sotto.
   Scopato su .fleet-table · Project (congelato) resta a 13px e non cambia di un pixel. */
.fleet-table { font-size: 12px; }
.fleet-grade { font-family: var(--font-mono); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.fleet-sub   { font-size: 11px; line-height: 1.4; color: var(--muted); }
.fleet-num { text-align: right; white-space: nowrap; }
.fleet-table td.fleet-num { font-family: var(--font-mono); }


/* ============================================================================
   HOME-CSS-01 · home only · APPENDED · do not reorder · 2026-08-02
   SPEC HOME-CSS-01 v0.1 · Ω→S Vertex-B · VAI Vertex-C
   RULE: every selector below is scoped to .home-* / .gz0-* and matches NOTHING
         outside the public Home. No existing selector is modified or reordered.
         Global h1/h2/h3, body, p, a, .container, .button*, .badge*, .navbar,
         .footer, .fleet-*, .fp, :root are untouched: desk and admin do not move.
   ============================================================================ */

/* ----- rhythm · hierarchy is restored inside home scope only ----- */
.home-hero h1 { font-size: 40px; line-height: 1.12; letter-spacing: -0.4px; margin-bottom: 20px; }
.home-hero .home-lead { font-size: 19px; line-height: 1.5; max-width: 62ch; color: var(--ink); }

.home-blade {
    font-size: 26px; line-height: 1.25; font-weight: 600;
    letter-spacing: -0.2px; margin: 0 0 20px; max-width: 30ch;
}
.home-blade-sm { font-size: 17px; line-height: 1.45; font-weight: 600; margin: 20px 0 0; max-width: 60ch; }
.home-section > p { max-width: 68ch; }
.home-last { border-bottom: 0; }

/* ----- two short paragraphs side by side (meaning | shape) ----- */
.home-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; margin-bottom: 28px; }
.home-split2 p { margin: 0; max-width: 40ch; }

/* ----- GATE-0 · inline · love/hate ----- */
.gz0 {
    border: 1px solid var(--rule); border-radius: 6px;
    padding: 20px; margin: 8px 0 4px; background: #fff;
}
.gz0-grid { display: grid; grid-template-columns: 1fr 240px; gap: 24px; align-items: start; }

.gz0-meaning { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.gz0-pill {
    display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 11px; color: #fff; background: var(--green);
}
.gz0-pill.is-hostile { background: var(--red); }

.gz0-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.gz0-btn {
    padding: 6px 13px; border: 1px solid var(--rule); border-radius: 999px; background: #fff;
    font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.gz0-btn.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.gz0-btn:focus-visible { outline: 2px solid var(--dir-conv); outline-offset: 2px; }

.gz0-turns { margin: 0; }
.gz0-msg {
    margin: 0 0 8px; padding: 8px 12px; border-radius: 10px;
    font-size: 13.5px; line-height: 1.4; max-width: 84%;
}
.gz0-who { display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.gz0-supp { background: #F2F2F0; border: 1px solid var(--rule); border-bottom-left-radius: 3px; }
.gz0-cust { background: #EDF1F4; border: 1px solid #D8E0E6; border-bottom-right-radius: 3px; margin-left: auto; }
.gz0-swap { border: 2px solid var(--red); font-weight: 600; }
.gz0-more { font-size: 12px; margin: 10px 0 0; }

.gz0-fp { border: 1px solid var(--rule); border-radius: 6px; padding: 14px; }
.gz0-fp-h { margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.gz0-shape { margin: 6px 0 10px; font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--red); }
.gz0-trace { display: block; width: 100%; height: auto; color: var(--red); }
.gz0-sig { font-size: 12px; margin: 8px 0 10px; }
.gz0-chips { display: flex; gap: 5px; margin: 0; }
.gz0-chip {
    display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center;
    border-radius: 3px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #fff;
}
.gz0-c { background: var(--dir-conv); }
.gz0-s { background: var(--dir-hold); }
.gz0-unchanged { margin: 12px 0 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.gz0-unchanged.is-flash { animation: gz0Flash 1.1s ease-out 1; }
@keyframes gz0Flash { 0% { color: var(--red); } 100% { color: var(--muted); } }
@media (prefers-reduced-motion: reduce) { .gz0-unchanged.is-flash { animation: none; } }

/* ----- quadrant figure ----- */
.home-quad {
    display: block; width: 100%; height: auto; max-width: 640px;
    margin: 4px 0 18px; color: var(--ink);
}

/* ----- Shadow | Operator · two organs, one grammar ----- */
.home-two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }
.home-col { border: 1px solid var(--rule); border-radius: 6px; padding: 20px; }
.home-col-h { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 20px; font-weight: 600; }
.home-ico { width: 22px; height: 22px; flex: none; color: var(--muted); }
.home-row { margin: 0 0 14px; font-size: 14px; line-height: 1.45; }
.home-row-k {
    display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}

/* ----- responsive · single column · no horizontal scroll at any width ----- */
@media (max-width: 760px) {
    .home-hero h1 { font-size: 30px; }
    .home-hero .home-lead { font-size: 17px; }
    .home-blade { font-size: 22px; max-width: none; }
    .home-split2 { grid-template-columns: 1fr; gap: 12px; }
    .gz0 { padding: 14px; }
    .gz0-grid { grid-template-columns: 1fr; gap: 18px; }
    .gz0-msg { max-width: 94%; }
    .home-two { grid-template-columns: 1fr; gap: 18px; }
}


/* ============================================================================
   HOME-STYLE-02 · home only · APPENDED · do not reorder · 2026-08-02
   SPEC HOME-STYLE-02 v0.1 · Ω→S Vertex-B (S1-S4) · VAI Vertex-C
   Supersedes values set in the HOME-CSS-01 block above by APPENDING (never editing it).

   PALETTE LAW · ω is direction, never valence [BRIDGE §6 · atlas.php]
     --dir-conv  BLUE   links · hover · focus · navigable elements (navigating IS converging)
     --dir-drift AMBER  RESERVED TO GEOMETRY · means "drifting" · never emphasis   [Vertex-C]
     --dir-hold  GREY   RESERVED TO GEOMETRY · means "holding"
     emphasis is typographic: weight · size · space
   Global h1/h2/h3, body, p, a, .container, .button*, .badge*, .navbar, .footer,
   .fleet-*, .fp, :root remain untouched: desk and admin do not move.
   ============================================================================ */

/* ----- type scale · home scope only ----- */
.home-hero h1 { font-size: 56px; line-height: 1.05; letter-spacing: -1px; margin-bottom: 22px; }
.home-hero .home-lead { font-size: 21px; line-height: 1.5; max-width: 46ch; }
.home-blade { font-size: 34px; line-height: 1.2; letter-spacing: -0.5px; margin: 0 0 22px; max-width: 26ch; }
.home-blade-sm { font-size: 19px; line-height: 1.5; margin: 22px 0 4px; max-width: 62ch; }

/* ----- links · blue = convergence ----- */
.home-section a,
.home-hero a:not(.button) { color: var(--dir-conv); }
.home-arrow {
    display: inline-block; font-size: 15px; font-weight: 600;
    color: var(--dir-conv); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.home-arrow:hover { border-bottom-width: 2px; }
.home-section a:focus-visible,
.home-arrow:focus-visible { outline: 2px solid var(--dir-conv); outline-offset: 3px; }

/* ----- hero · S1 identity spiral (decorative · no data) ----- */
.home-hero-grid { display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: center; }
.home-spiral { width: 100%; height: auto; max-width: 260px; justify-self: end; }
.home-spiral-arc {
    stroke: var(--dir-conv);
    stroke-dasharray: 1900;
    stroke-dashoffset: 1900;
    animation: homeSpiralDraw 7s ease-in-out infinite;
}
.home-spiral-core { fill: var(--dir-hold); opacity: 0; animation: homeSpiralCore 7s ease-in-out infinite; }
@keyframes homeSpiralDraw {
    0%   { stroke-dashoffset: 1900; }
    55%  { stroke-dashoffset: 0; }
    85%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 1900; }
}
@keyframes homeSpiralCore {
    0%, 50% { opacity: 0; }
    62%, 85% { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .home-spiral-arc { animation: none; stroke-dashoffset: 0; }
    .home-spiral-core { animation: none; opacity: 1; }
}

/* ----- the ramp · two vocabularies ----- */
.home-voc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 14px; }
.home-voc-4 { grid-template-columns: 1fr 1fr; gap: 4px 28px; margin-bottom: 26px; }
.home-voc-col { border: 1px solid var(--rule); border-radius: 6px; padding: 18px 18px 20px; }
.home-voc-h {
    margin: 0 0 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--muted);
}
.home-voc-set { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.home-tag {
    display: inline-block; padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px;
    font-size: 14px; line-height: 1.2; color: var(--ink); background: #fff;
}
.home-tag.is-shape { border-color: var(--ink); font-weight: 600; }
.home-voc-cap { font-size: 16px; font-weight: 600; margin: 0 0 26px; }

/* ----- quadrant · larger ----- */
.home-quad { display: block; width: 100%; height: auto; max-width: 680px; margin: 4px 0 18px; color: var(--ink); }

/* ----- where it is used ----- */
.home-uses { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin-top: 20px; }
.home-use { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.home-use-k { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }

/* ----- how to start ----- */
.home-steps { list-style: none; padding: 0; margin: 20px 0 0; counter-reset: homestep; }
.home-steps li {
    counter-increment: homestep; position: relative; padding-left: 42px; margin-bottom: 22px;
    font-size: 15px; line-height: 1.5; max-width: 60ch;
}
.home-steps li::before {
    content: counter(homestep); position: absolute; left: 0; top: 0;
    width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%;
    background: var(--dir-conv); color: #fff; font-family: var(--font-mono); font-size: 13px; font-weight: 600;
}
.home-step-h { display: block; font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }

/* ----- responsive ----- */
@media (max-width: 760px) {
    .home-hero h1 { font-size: 34px; letter-spacing: -0.5px; }
    .home-hero .home-lead { font-size: 18px; }
    .home-blade { font-size: 24px; max-width: none; }
    .home-blade-sm { font-size: 17px; }
    .home-hero-grid { grid-template-columns: 1fr; gap: 24px; }
    .home-spiral { max-width: 180px; justify-self: start; }
    .home-voc, .home-voc-4 { grid-template-columns: 1fr; gap: 16px; }
    .home-uses { grid-template-columns: 1fr; gap: 14px; }
}


/* ============================================================================
   HOME-STYLE-03 · home only · APPENDED · do not reorder · 2026-08-02
   SPEC HOME-STYLE-03 v0.1 · Ω→S Vertex-B (T1-T4) · VAI Vertex-C
   Appends only. Never edits the HOME-CSS-01 / HOME-STYLE-02 blocks above.
   PALETTE LAW unchanged · blue = links/convergence · amber = geometry only · emphasis is typographic.
   ============================================================================ */

/* ----- D-A · true Archimedean spiral · geometric length 1619px → dasharray 1650 ----- */
.home-spiral-arc {
    stroke: var(--dir-conv);
    stroke-dasharray: 1650;
    stroke-dashoffset: 1650;
    animation: homeSpiralDraw2 8s ease-in-out infinite;
}
.home-spiral-core { fill: var(--dir-hold); opacity: 0; animation: homeSpiralCore2 8s ease-in-out infinite; }
@keyframes homeSpiralDraw2 {
    0%   { stroke-dashoffset: 1650; }
    55%  { stroke-dashoffset: 0; }
    88%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 1650; }
}
@keyframes homeSpiralCore2 {
    0%, 52% { opacity: 0; }
    64%, 88% { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .home-spiral-arc { animation: none; stroke-dashoffset: 0; }
    .home-spiral-core { animation: none; opacity: 1; }
}

/* ----- instrument glyphs · their needle · our spiral ----- */
.home-inst { display: block; width: 100%; max-width: 200px; height: auto; margin-top: 18px; color: var(--muted); }
.home-inst-sp { color: var(--dir-conv); opacity: .9; }

/* ----- the alphabet · the dictionary for C3·S2 ----- */
.home-abc { border: 1px solid var(--rule); border-radius: 6px; padding: 20px 22px; margin-top: 18px; }
.home-abc-h {
    margin: 0 0 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--muted);
}
.home-abc-row { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font-size: 15px; }
.home-abc-k {
    flex: none; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 3px;
    font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: #fff;
}
.home-abc-c { background: var(--dir-conv); }
.home-abc-s { background: var(--dir-hold); }
.home-abc-m { background: var(--dir-drift); }   /* amber HERE is geometry: M means drifting */
.home-abc-read {
    margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
    font-family: var(--font-mono); font-size: 14px; color: var(--ink);
}

/* ----- the four questions ----- */
.home-asks { margin: 0 0 30px; }
.home-ask { margin: 0 0 10px; font-size: 17px; line-height: 1.45; color: var(--muted); max-width: 60ch; }
.home-ask-k { font-weight: 600; color: var(--ink); }
.home-ask.is-ours { font-size: 20px; color: var(--ink); font-weight: 600; margin-top: 16px; }
.home-ask.is-ours .home-ask-k { color: var(--ink); }

/* ----- Shadow / Operator · value first ----- */
.home-col-value { font-size: 19px; font-weight: 600; line-height: 1.3; margin: 0 0 8px; }
.home-col-sub { font-size: 14px; line-height: 1.5; margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }

/* ----- use-case glyphs ----- */
.home-use { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.home-uico { width: 18px; height: 18px; margin-top: 3px; color: var(--muted); }

/* ----- responsive ----- */
@media (max-width: 760px) {
    .home-abc { padding: 16px; }
    .home-ask { font-size: 16px; }
    .home-ask.is-ours { font-size: 18px; }
    .home-col-value { font-size: 17px; }
    .home-inst { max-width: 170px; }
}


/* ============================================================================
   HOME-GEOMETRY-04 · home only · APPENDED · do not reorder · 2026-08-02
   SPEC HOME-GEOMETRY-04 v0.1 · Ω→S Vertex-B (G1-G4) · VAI Vertex-C
   The flat spiral is gone. One shape language: the OBJECTIVE COIL of the product.
   Segment colours are emitted inline by the coil rule (delta-d, eps 0.02) and are NOT set here:
   a colour written in CSS would be a colour chosen; a colour from the rule is a measurement.
   ============================================================================ */

/* ----- hero · objective coil ----- */
.home-coil { width: 100%; height: auto; max-width: 220px; justify-self: end; display: block; }
.home-coil-seg {
    animation: homeCoilDraw 4.4s ease-out infinite;
}
@keyframes homeCoilDraw {
    0%   { stroke-dashoffset: var(--coil-len, 120); }
    18%  { stroke-dashoffset: 0; }
    82%  { stroke-dashoffset: 0; }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
/* the draw-in is expressed per segment via inline stroke-dasharray + animation-delay:
   each turn appears after the previous one · irreversible progression, not decoration */
@media (prefers-reduced-motion: reduce) {
    .home-coil-seg { animation: none; stroke-dashoffset: 0 !important; opacity: 1 !important; }
}

/* ----- Gate-0 fingerprint · the coil glyph replaces the flat trace ----- */
.gz0-trace { display: block; width: 56px; height: 56px; margin: 6px 0 2px; color: var(--ink); }

/* ----- instrument glyph · same coil, panel scale ----- */
.home-inst-sp { width: 56px; height: 56px; max-width: 56px; margin-top: 18px; }

/* ----- Shadow · the one line toward the instrument ----- */
.home-col-tele { font-size: 13.5px; line-height: 1.45; margin: 0 0 4px; }

@media (max-width: 760px) {
    .home-coil { max-width: 170px; justify-self: start; }
}


/* ============================================================================
   HOME-FIX-05 · home only · APPENDED · do not reorder · 2026-08-02
   Bug class · authorised by Vertex-C without Vertex-B (named, not silent).
   1 · use-case rows: the description was a bare text node, so CSS Grid promoted it to a THIRD
       grid item and placed it in the 22px icon column, breaking one word per line.
       Title and description now live in one wrapper: the grid has exactly two items again.
   2 · hero coil proportions: radius reduced and vertical step raised so the irreversible descent
       reads. Geometry, series and colour rule are unchanged (they come from coil_path).
   ============================================================================ */

.home-use-b { display: block; min-width: 0; }
.home-use-k { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.home-use-d { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }
.home-use-d a { white-space: nowrap; }

.home-coil { max-width: 192px; }
@media (max-width: 760px) { .home-coil { max-width: 150px; } }

/* ============================================================
   /gate-zero · SPEC v0.2 · Ω→S Vertex-B (Z1b·Z5b·Z7·Z8·Z9) · VAI Vertex-C · 2026-08-02
   APPEND ONLY · page-scoped .gz-* · no existing selector redefined.
   Shape labels are --ink (D4) · amber stays geometry-only · no colour for emphasis.
   ============================================================ */
.gz-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.gz-sub { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 62ch; margin: 8px 0 0; }
.gz-wedge { font-size: 17px; font-weight: 600; line-height: 1.45; margin: 18px 0 0; max-width: 58ch; }

.gz-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 4px; }
.gz-tx { border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px 16px; display: flex; flex-direction: column; }
.gz-tx-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.gz-chat { max-height: 340px; overflow-y: auto; padding-right: 6px; margin-bottom: 14px; }
.gz-msg { display: block; max-width: 88%; font-size: 13.5px; line-height: 1.4; padding: 8px 11px; border-radius: 12px; margin: 0 0 8px; }
.gz-msg-s { background: #F2F2F0; border: 1px solid var(--rule); border-bottom-left-radius: 3px; }
.gz-msg-c { background: #EDF1F4; border: 1px solid #D8E0E6; border-bottom-right-radius: 3px; margin-left: auto; }
.gz-who { display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.gz-fpline { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--rule); padding-top: 12px; margin-top: auto; }
.gz-coil { display: block; width: 48px; height: auto; flex: none; }
.gz-shape { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--ink); margin: 0; white-space: nowrap; }
.gz-fp { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 2px; }
.gz-strap { font-size: 20px; font-weight: 600; margin: 20px 0 0; }
.gz-model { font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin: 16px 0 0; }
.gz-counter { display: flex; align-items: center; gap: 18px; border: 1px solid var(--rule); border-radius: 6px; padding: 16px 18px; margin-top: 8px; }
.gz-desc { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.gz-prov { border: 1px solid var(--rule); border-radius: 6px; padding: 20px 22px; margin: 8px 0 18px; }
.gz-prov-row { display: grid; grid-template-columns: 160px 1fr; gap: 14px; font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.gz-prov-row:last-child { margin-bottom: 0; }
.gz-prov-k { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.gz-audit { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.gz-audit th, .gz-audit td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.gz-audit th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.gz-audit td { font-family: var(--font-mono); font-size: 12.5px; }

@media (max-width: 760px) {
  .gz-proof { grid-template-columns: 1fr; }
  .gz-counter { flex-direction: column; align-items: flex-start; }
  .gz-audit { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 620px) { .gz-prov-row { grid-template-columns: 1fr; gap: 2px; } }

/* ============================================================
   /about · v0.4 · full-width body text (Vertex-C) · APPEND ONLY · page-scoped
   override the paragraph max-width caps ONLY under .about-page · shared selectors untouched.
   ============================================================ */
.about-page .home-hero .home-lead { max-width: none; }
.about-page .home-section > p { max-width: none; }

/* ============================================================
   /pricing · v0.2 · two-card grid (GUARD removed) · APPEND ONLY · page-scoped (P-1)
   ============================================================ */
.pricing-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .pricing-grid-2 { grid-template-columns: 1fr; } }