/* Groundfloor brand system — two colours with jobs, not one accent used everywhere.
   SIGNAL (amber)  = what the customer owns: their application, their choice, the action to take.
   STEEL (blue-grey) = what Groundfloor runs: the managed layer, the wiring, the ground it sits on.
   The hero diagram, the section rail and the capability explorer all read off that split,
   so the portability argument is carried by the colour before a word is read.
   GAP (rust) is a restricted tint with exactly one job: the production gap in the headline.

   Other palettes keep working: the role tokens below fall back to the single-accent
   scheme, so the eight review palettes are unchanged. */

:root{
 --signal:var(--amber);--signal-soft:var(--amber-light);--signal-deep:var(--amber-deep);
 --steel:var(--gray);--steel-soft:var(--gray);--steel-deep:var(--gray-dark);
 --gap:var(--muted);
 --plate:var(--surface);
}

/* --- The brand family. One identity, six colourways. ---------------------------
   Every gf-* palette shares the same ground, the same type colour and the same
   structure. Only three things move: the SIGNAL hue, the STEEL hue and the GAP tint.
   The five dark ones sit on identical graphite so a comparison shows the pair and
   nothing else; gf-porcelain is the same pair on a light ground, for contrast. */

:root[data-palette^="gf-"]{
 --ink:#eceae5;--paper:#0d1014;--surface:#14181e;--wash:#1a1f27;
 --muted:#a3a9b4;--gray:#a3a9b4;--gray-dark:#7b8290;
 --line:#272d37;--control-line:#4b5462;--dark-line:#272d37;
 --plate:var(--surface);--closing-bg:#08090c;
 /* The hero is the deepest plate on the page; every band lifts off it. */
 --hero-bg:#08090c;--hero-text:var(--ink);--hero-muted:#9aa0ab;
 /* Legacy single-accent tokens all read off SIGNAL, so untouched CSS stays correct. */
 --accent:var(--signal);--accent-light:var(--signal-soft);--accent-deep:var(--signal);
 --amber:var(--signal);--amber-light:var(--signal-soft);--amber-deep:var(--signal);
 --brand:var(--signal);--brand-text:var(--on-signal);--hero-accent:var(--signal);
 color-scheme:dark;
}
:root[data-palette^="gf-"] .closing{background:var(--closing-bg)}

/* 1. Amber + steel. Warm signal, cool ground. Craft over corporate. */
:root[data-palette="gf-amber"]{
 --signal:#ffb13c;--signal-soft:#ffd08f;--signal-deep:#c67c15;
 --steel:#7fa3b4;--steel-soft:#b4ccd6;--steel-deep:#3f5563;
 --gap:#d8775c;--on-signal:#0d1014;
}

/* 2. Jade + slate. The same split, read as engineering rather than craft. */
:root[data-palette="gf-jade"]{
 --signal:#4fcf96;--signal-soft:#9ae5c3;--signal-deep:#2e9d6c;
 --steel:#8b95a8;--steel-soft:#c0c7d4;--steel-deep:#474f5e;
 --gap:#e07a5f;--on-signal:#06130d;
}

/* 3. Cobalt + sand. Temperature inverted: cool signal over a warm managed layer. */
:root[data-palette="gf-cobalt"]{
 --signal:#6b9bff;--signal-soft:#a9c4ff;--signal-deep:#3b6fd4;
 --steel:#a89e8f;--steel-soft:#d2c9ba;--steel-deep:#5c554b;
 --gap:#e4795c;--on-signal:#05091a;
}

/* 4. Citron + steel. Highest contrast on graphite. Most recall, most risk. */
:root[data-palette="gf-citron"]{
 --signal:#cfee5f;--signal-soft:#e4f6a4;--signal-deep:#93ad2f;
 --steel:#7f8f9e;--steel-soft:#b5c2cd;--steel-deep:#414c57;
 --gap:#e8775a;--on-signal:#111405;
}

/* 5. Copper + teal. Both roles saturated; the gap moves off rust to stay separate. */
:root[data-palette="gf-copper"]{
 --signal:#f3904f;--signal-soft:#f9bd94;--signal-deep:#bd5f23;
 --steel:#5fa09c;--steel-soft:#a3cecb;--steel-deep:#2f5553;
 --gap:#c2607f;--on-signal:#140a04;
}

/* 6. Porcelain. Pair 1 on a light ground: the tints invert, the roles do not. */
:root[data-palette="gf-porcelain"]{
 --ink:#15181d;--paper:#f7f6f3;--surface:#ffffff;--wash:#eeedea;
 --muted:#5d6470;--gray:#5d6470;--gray-dark:#3f4650;
 --line:#dcdad5;--control-line:#b7b4ad;--dark-line:#dcdad5;
 --closing-bg:#15181d;
 --hero-bg:#efeeea;--hero-text:#15181d;--hero-muted:#5d6470;
 --signal:#b8730c;--signal-soft:#8f5a08;--signal-deep:#8f5a08;
 --steel:#3d6274;--steel-soft:#27475a;--steel-deep:#27475a;
 --gap:#b14328;--on-signal:#15181d;
 color-scheme:light;
}

/* PremiseHQ's own brand, read through the same two roles. Their mint is the signal,
   their logo slate is the managed layer, their lime is the signal's soft note. */
:root[data-palette="gf-premise"]{
 --signal:#50bc95;--signal-soft:#b8ce3a;--signal-deep:#2f8d6b;
 --steel:#6f9aab;--steel-soft:#a8c4cf;--steel-deep:#244d5b;
 --gap:#d9704f;--on-signal:#07130e;
}
/* The same pair on the ground their current site actually uses. The mint and the lime
   are too light to read as text on white, so both are deepened to pass contrast; the
   slate is their published hex, which already passes. */
:root[data-palette="gf-premise-light"]{
 --ink:#1b2a30;--paper:#f6f8f7;--surface:#ffffff;--wash:#edf1f0;
 --muted:#5a6a70;--gray:#5a6a70;--gray-dark:#3c4b51;
 --line:#dbe3e1;--control-line:#b2bfbc;--dark-line:#dbe3e1;
 --closing-bg:#1b2a30;
 --hero-bg:#eef3f1;--hero-text:#1b2a30;--hero-muted:#5a6a70;
 --signal:#23835f;--signal-soft:#6b7f0f;--signal-deep:#17654a;
 --steel:#244d5b;--steel-soft:#173847;--steel-deep:#173847;
 --gap:#a8402a;--on-signal:#ffffff;
 color-scheme:light;
}

/* --- The gap, in the headline. One use, nowhere else. --- */
:root[data-palette^="gf-"] .page-hero h1 .hero-problem{color:var(--gap);opacity:1}

/* --- Hero stage: the application is the customer's; everything under it is ours. --- */
.hero-gap .s-app .plate,.hero-ground .block-plate,
.hero-blocked .s-code .plate{stroke:color-mix(in srgb,var(--signal) 80%,transparent)}
.hero-gap .s-app .plate-fill,.hero-ground .block-plate,
.hero-blocked .s-code .plate-fill{fill:color-mix(in srgb,var(--signal) 10%,transparent)}
.hero-stage .s-app .t-chip,.hero-ground .s-block .t-chip{fill:var(--signal-soft)}
.hero-gap .s-app .t-label{fill:color-mix(in srgb,var(--signal) 78%,transparent)}
.hero-blocked .s-code .t-label{fill:color-mix(in srgb,var(--signal) 78%,transparent)}
.hero-blocked .code-line{fill:color-mix(in srgb,var(--signal) 54%,transparent)}
/* Landed: plain ink, so the application is neither a warning nor Groundfloor's. */
.hero-gap .s-app .t-label,.hero-blocked .s-code .t-label{transition:fill .6s ease .55s}
.hero-gap.is-closed .s-app .t-label,.hero-gap.is-closed .s-app .t-chip,
.hero-blocked.is-through .s-code .t-label{fill:var(--ink-landed,currentColor)}
/* The wall changes hands: GAP while it blocks, the same soft steel as A once it does not. */
.hero-blocked.is-absorb .t-row{fill:color-mix(in srgb,var(--steel-soft) 94%,transparent)}
.hero-ground .s-block>.t-label{fill:color-mix(in srgb,var(--signal) 78%,transparent)}
.hero-gap .s-mem .plate{stroke:color-mix(in srgb,var(--steel) 60%,transparent)}
.hero-gap .s-mem .plate-fill{fill:color-mix(in srgb,var(--steel) 12%,transparent)}
.hero-gap .t-mem,.hero-ground .t-stratum{fill:color-mix(in srgb,var(--steel-soft) 94%,transparent)}
.hero-gap .t-idx{fill:color-mix(in srgb,var(--steel-soft) 52%,transparent)}
.hero-ground .t-managed{fill:color-mix(in srgb,var(--steel-soft) 70%,transparent)}
.hero-ground .bearing{fill:color-mix(in srgb,var(--steel) 62%,transparent)}
.hero-stage .ground-plate{fill:color-mix(in srgb,var(--steel-deep) 46%,transparent);
 stroke:color-mix(in srgb,var(--steel) 42%,transparent)}
.hero-stage .ground-hatch{stroke:color-mix(in srgb,var(--steel) 30%,transparent)}
.hero-stage .s-ground .t-label{fill:color-mix(in srgb,var(--steel-soft) 72%,transparent)}
.hero-stage .env .t-env{fill:var(--signal)}
/* On a light ground the 46% slate fill above is darker than the labels sitting on it. */
:root[data-palette="gf-porcelain"] .hero-stage .ground-plate,
:root[data-palette="gf-premise-light"] .hero-stage .ground-plate{fill:color-mix(in srgb,var(--steel) 13%,transparent)}
:root[data-palette="gf-porcelain"] .hero-stage .s-ground .t-label,
:root[data-palette="gf-premise-light"] .hero-stage .s-ground .t-label{fill:color-mix(in srgb,var(--steel) 80%,transparent)}
.stage-controls button[aria-pressed="true"]{border-color:var(--signal);
 background:color-mix(in srgb,var(--signal) 18%,transparent);color:var(--signal-soft)}

/* --- The rail: steel carries the index, signal carries the brand mark. --- */
.band-head::before,.step::before,.roster-item::before{color:var(--steel)}
.band-head .rail-rule{background:var(--signal)}
.step h3 .step-kicker{color:var(--steel)}
.roster-lead{color:var(--steel-soft)}
.env-cell{border-top-color:var(--steel)}
.env-cell:first-child{border-top-color:var(--signal)}

/* --- Composition fixes that belong with the identity --- */
/* website.css sizes every hero h1 for a full-width headline. The split hero has half
   the width, so the three-line headline has to be sized for its own column or the
   first line wraps and the three-beat rhythm is lost. */
.page-hero.hero-split h1{font-size:clamp(2.3rem,3.6vw,3.45rem);line-height:1.07;letter-spacing:-.042em}

/* Bands are lettered, steps are numbered: the sheet index and the sequence inside it
   were both reading "01" on the same row. */
.band-head::before{content:counter(band,upper-alpha)}


/* --- The conversation, redrawn in the page's own language ------------------
   It arrived as a chat application dropped into a marketing page: a particle
   canvas behind it, 16px app-shell radii, and its own colour logic. Same
   content, same behaviour; it now reads as a plate on the sheet like every
   other block, and uses the two colour roles — steel for the frame Groundfloor
   provides, signal for the visitor's own turn. */
:root[data-palette^="gf-"] body.website #conversation #galaxy-dust{display:none}
:root[data-palette^="gf-"] body.website #conversation.galaxy-conversation{background:var(--wash);
 border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
:root[data-palette^="gf-"] body.website #conversation #conversation-component .transcript{background:var(--surface);
 border:1px solid var(--line);border-top:2px solid var(--steel);border-radius:0}
:root[data-palette^="gf-"] body.website #conversation #chat-detail{background:var(--surface);
 border:1px solid var(--line);border-top:2px solid var(--steel);border-radius:0}
:root[data-palette^="gf-"] body.website #conversation #conversation-component .question{border-radius:2px;
 background:var(--wash);border-color:color-mix(in srgb,var(--steel) 42%,transparent)}
:root[data-palette^="gf-"] body.website #conversation .message-label--answer::before{border-radius:2px;
 background:var(--signal);color:var(--brand-text);font-size:17px}
:root[data-palette^="gf-"] body.website #conversation .workspace-dot{border-radius:0;width:7px;height:7px;background:var(--signal)}
:root[data-palette^="gf-"] body.website #conversation #conversation-component .composer{border-radius:2px;background:var(--surface);
 box-shadow:none;border-color:var(--control-line)}
:root[data-palette^="gf-"] body.website #conversation #conversation-component .composer button{border-radius:2px}
:root[data-palette^="gf-"] body.website #conversation #conversation-component #join-conversation{border-radius:2px}
:root[data-palette^="gf-"] body.website #conversation .question-starters button{border-radius:2px;background:var(--surface)}
:root[data-palette^="gf-"] body.website #conversation .question-starters button:hover{border-color:var(--signal);background:var(--wash)}
:root[data-palette^="gf-"] body.website #conversation #conversation-component .demo-progress{background:var(--line)}
:root[data-palette^="gf-"] body.website #conversation .answer-card dl>div{border-top-color:color-mix(in srgb,var(--steel) 38%,transparent)}
:root[data-palette^="gf-"] body.website #conversation .answer-card dt{color:var(--steel-soft)}

/* --- The capability explorer, drawn on the colour law ----------------------
   The block had the right content and the wrong allegiances: the seven managed
   services were the loudest amber on the page, which is the colour this site
   reserves for what the customer owns. Redrawn so the diagram states the same
   split as the hero. Two applications on top in signal, because they are the
   customer's. Seven services below in steel, because they are ours. The line
   between them is drawn rather than implied. The node you pick is marked with a
   signal edge: the service is ours, the choice is yours. */
:root[data-palette^="gf-"] body.website #relationships .relationship.platform-foundation{
 background:var(--surface);border:1px solid var(--line);border-radius:0}

/* The customer's side of the line. */
:root[data-palette^="gf-"] body.website #relationships .relationship-app{
 background:var(--wash);border:1px solid var(--line);
 border-top:2px solid var(--signal);border-radius:0}
:root[data-palette^="gf-"] body.website #relationships .relationship-app>span{color:var(--muted);opacity:1}

/* The line itself. A centred rule, not a dangling connector. */
:root[data-palette^="gf-"] body.website #relationships .foundation-label{
 display:flex;align-items:center;gap:16px;padding:32px 0 18px;text-align:left}
:root[data-palette^="gf-"] body.website #relationships .foundation-label::before,
:root[data-palette^="gf-"] body.website #relationships .foundation-label::after{
 content:'';position:static;flex:1;height:0;border-left:0;
 border-top:1px solid color-mix(in srgb,var(--steel) 32%,transparent)}
:root[data-palette^="gf-"] body.website #relationships .foundation-label .eyebrow{flex:none;color:var(--steel)}

/* Ours: seven plates in steel. */
:root[data-palette^="gf-"] body.website #relationships .relationship-node{
 position:relative;border-radius:0;background:var(--wash);color:var(--ink);
 border:1px solid color-mix(in srgb,var(--steel) 30%,transparent)}
:root[data-palette^="gf-"] body.website #relationships .relationship-node .eyebrow{color:var(--steel)}
:root[data-palette^="gf-"] body.website #relationships .relationship-node strong{color:var(--ink)}
:root[data-palette^="gf-"] body.website #relationships .relationship-node:hover:not([aria-pressed="true"]){
 background:var(--surface);border-color:color-mix(in srgb,var(--steel) 62%,transparent)}
:root[data-palette^="gf-"] body.website #relationships .relationship-node[aria-pressed="true"]{
 background:color-mix(in srgb,var(--steel) 22%,transparent);color:var(--ink);
 border-color:color-mix(in srgb,var(--steel) 88%,transparent)}
:root[data-palette^="gf-"] body.website #relationships .relationship-node[aria-pressed="true"] .eyebrow{color:var(--steel-soft)}
:root[data-palette^="gf-"] body.website #relationships .relationship-node[aria-pressed="true"]::after{
 content:'';position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--signal)}

/* The detail reads off the plate it belongs to. */
:root[data-palette^="gf-"] body.website #relationships .relationship-toolbar .eyebrow{color:var(--muted)}
:root[data-palette^="gf-"] body.website #relationships #play-relationships{border-radius:2px}
:root[data-palette^="gf-"] body.website #relationships .relationship-detail{
 margin-top:28px;padding-top:24px;
 border-top:1px solid color-mix(in srgb,var(--steel) 32%,transparent)}
:root[data-palette^="gf-"] body.website #relationships .relationship-items li{
 color:var(--steel-soft);border-top-color:color-mix(in srgb,var(--steel) 30%,transparent)}
:root[data-palette^="gf-"] body.website #relationships .relationship-items li::before{background:var(--steel)}
:root[data-palette^="gf-"] body.website #relationships .review-note{border-color:color-mix(in srgb,var(--steel) 50%,transparent)}