/* CloudyERP prototype — W8 editorial layer (loaded after pages.css on every page)
 *
 * 1. Tone system: sections opt into a light "paper"/"mist" canvas or a deep "ink" band by
 *    re-declaring the design tokens locally. Existing components read tokens, so they adapt
 *    without forks. Rhythm on each page alternates dark ↔ light instead of one long navy wall.
 * 2. Product windows (.win) are always light: they read as real application screens on any canvas.
 * 3. Styles for components W7 rendered but never styled (flow, features, availability notes,
 *    not-yet lists, pricing steps, footer CTA, …).
 */

/* ===================== 1 · TONES ===================== */
.tone-paper, .block--paper, .tone-mist, .win, .canvas-light, .site-header.is-light {
  --bg-0: #e9edf5;
  --bg-1: #f6f7fa;
  --bg-2: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f2f5fb;
  --surface-3: #e2e8f4;
  --surface-glass: rgb(255 255 255 / .86);
  --line-1: rgb(16 34 80 / .08);
  --line-2: rgb(16 34 80 / .14);
  --line-3: rgb(16 34 80 / .26);
  --text-1: #0a1430;
  --text-2: #36435f;
  --text-3: #5b6787;
  --text-inv: #ffffff;
  --blue-200: #1747b8;
  --blue-300: #1a56d1;
  --blue-400: #2d6cf0;
  --blue-tint: rgb(45 108 240 / .08);
  --blue-tint-2: rgb(45 108 240 / .15);
  --ok: #0b8457;
  --ok-tint: rgb(11 132 87 / .09);
  --warn: #935c00;
  --warn-tint: rgb(214 140 20 / .12);
  --bad: #c03636;
  --shadow-1: 0 1px 2px rgb(10 20 48 / .06), 0 12px 28px -18px rgb(10 20 48 / .3);
  --shadow-2: 0 0 0 1px rgb(16 34 80 / .07), 0 2px 4px rgb(10 20 48 / .04), 0 34px 70px -34px rgb(10 20 48 / .38);
  --focus: 0 0 0 2px #fff, 0 0 0 4px #1a56d1;
  --focus-ring: #1a56d1;
  color: var(--text-1);
}
.tone-paper, .block--paper { background: var(--bg-1); border-block: 1px solid var(--line-1); }
.tone-mist {
  --bg-1: #ebf0f9;
  background:
    radial-gradient(70% 60% at 100% 0%, rgb(45 108 240 / .07), transparent 70%),
    var(--bg-1);
  border-block: 1px solid var(--line-1);
}
/* Ink: a saturated deep-blue band for statements, distinct from the near-black sections */
.tone-ink {
  --bg-1: #0a1a45;
  --surface-1: #10245a;
  --surface-2: #142c6a;
  --line-1: rgb(170 196 255 / .14);
  --line-2: rgb(170 196 255 / .24);
  --line-3: rgb(170 196 255 / .38);
  --text-2: #c3d1f2;
  --text-3: #9fb2de;
  background:
    radial-gradient(60% 90% at 0% 100%, rgb(47 123 255 / .35), transparent 70%),
    radial-gradient(50% 70% at 100% 0%, rgb(140 184 255 / .14), transparent 70%),
    var(--bg-1);
  color: var(--text-1);
}

/* light canvases: soften the blue kicker motif and buttons */
:is(.tone-paper, .block--paper, .tone-mist) .btn--ghost { --_bg: #fff; --_bd: var(--line-2); }
:is(.tone-paper, .block--paper, .tone-mist) .btn--ghost:hover { --_bd: var(--blue-400); }
:is(.tone-paper, .block--paper, .tone-mist) .btn--primary { box-shadow: 0 10px 24px -12px rgb(31 99 232 / .55); }
:is(.tone-paper, .block--paper, .tone-mist) .motif { color: var(--blue-400); }
:is(.tone-paper, .block--paper, .tone-mist) .field input { background: #fff; }

/* ===================== 2 · LIGHT PRODUCT WINDOWS ===================== */
.win {
  background: #fff; color: var(--text-2);
  box-shadow: 0 0 0 1px rgb(16 34 80 / .08), 0 2px 6px rgb(10 20 48 / .05), 0 40px 80px -40px rgb(4 10 30 / .55);
}
.win__bar { background: #f3f5fa; border-bottom: 1px solid var(--line-1); }
.win__dots i { background: #d5dcea; }
.win__dots i:first-child { background: #f1a4a4; } .win__dots i:nth-child(2) { background: #f3d18a; } .win__dots i:nth-child(3) { background: #9fdcbc; }
.win td { color: var(--text-1); }
.win .demo-tag { color: #8a5600; background: #fff4dc; border-color: #edc77a; }
.win code { font-family: ui-monospace, Consolas, monospace; font-size: .76rem; color: var(--text-2); background: var(--surface-2); padding: .05rem .35rem; border-radius: 5px; }

/* flag pill inside windows */
.flag { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border-radius: 999px; font-size: var(--fs-micro); font-weight: 500; line-height: 1.7; white-space: nowrap; }
.flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.flag--ok { color: var(--ok); background: var(--ok-tint); }
.flag--warn { color: var(--warn); background: var(--warn-tint); }

/* horizontal bars inside windows */
.hbars { display: grid; gap: .45rem; }
.hbar { display: grid; grid-template-columns: 64px 1fr 56px; gap: .7rem; align-items: center; font-size: .8rem; }
.hbar span { color: var(--text-2); }
.hbar i { height: 10px; border-radius: 3px; background: linear-gradient(270deg, var(--blue-400), #6fa0ff); width: calc(var(--v) * 100%); justify-self: start; }
.hbar b { text-align: end; color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.hbar--warn i { background: linear-gradient(270deg, #d48a12, #f0bf63); }

/* document chain inside a window (product hero) */
.win-chain { position: relative; display: grid; gap: .1rem; counter-reset: wc; }
.win-chain::before { content: ""; position: absolute; inset-inline-start: 13px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(180deg, var(--blue-400), rgb(45 108 240 / .15)); border-radius: 2px; }
.win-chain li { position: relative; counter-increment: wc; display: grid; grid-template-columns: 28px 76px 1fr; gap: .75rem; align-items: center; padding: .65rem 0; }
.win-chain li::before { content: counter(wc); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--blue-400); color: var(--blue-300); font-size: .75rem; font-weight: 600; z-index: 1; }
.win-chain li:first-child::before { background: var(--blue-400); color: #fff; }
.win-chain b { color: var(--text-1); font-weight: 600; font-size: .9rem; }
.win-chain span { color: var(--text-2); font-size: .82rem; line-height: 1.6; }

/* product canvas behind a window: a light work surface, never a blur */
.page-hero__visual { margin: 0; display: grid; gap: .8rem; position: relative; }
.page-hero__visual > div { position: relative; }
.page-hero__visual > div::before {
  content: ""; position: absolute; inset: -18px -18px 18px 18px; border-radius: var(--r-xl); z-index: 0;
  background: linear-gradient(160deg, rgb(140 184 255 / .2), rgb(47 123 255 / .06)); border: 1px solid rgb(140 184 255 / .18);
}
.page-hero__visual .win { position: relative; z-index: 1; }
.page-hero__visual figcaption { color: var(--text-3); font-size: .8rem; line-height: 1.7; max-width: 52ch; padding-top: .9rem; }
@media (max-width: 900px) { .page-hero__visual > div::before { inset: -10px -10px 10px 10px; } }

/* ===================== 3 · AVAILABILITY NOTES (customer wording, no QA badges) ===================== */
.avail { display: inline-flex; align-items: baseline; gap: .45rem; color: var(--text-3); font-size: .84rem; line-height: 1.7; }
p.avail { display: flex; }
.avail::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--blue-400); transform: translateY(-1px); }
.avail--dev::before, .avail--unverified::before { border-color: var(--text-3); }
span.avail { font-size: var(--fs-meta); margin-inline-start: .35rem; }

/* ===================== 4 · HOME: CONNECTED WORKFLOW ===================== */
.flow__panel { gap: 1.5rem; }
.flow__copy { display: grid; gap: 1rem; }
.flow__copy > p { color: var(--text-2); line-height: 1.95; font-size: 1.02rem; max-width: var(--measure-wide); }
.flow__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-block: 1px solid var(--line-2); }
.flow__facts li { display: grid; gap: .15rem; padding: .85rem 0; padding-inline-end: 1.25rem; }
.flow__facts li + li { padding-inline: 1.25rem 0; border-inline-start: 1px solid var(--line-2); }
.flow__facts small { color: var(--blue-300); font-size: var(--fs-meta); font-weight: 600; line-height: var(--lh-meta); }
.flow__facts span { color: var(--text-1); font-size: .92rem; line-height: 1.7; }
.flow__outcome { display: flex; gap: .7rem; align-items: flex-start; color: var(--text-1); font-weight: 500; line-height: 1.75; }
.flow__outcome svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--ok-tint); color: var(--ok); margin-top: .1rem; }
.flow__screen { position: relative; padding: 1.25rem; border-radius: var(--r-lg);
  background: radial-gradient(rgb(16 34 80 / .09) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(160deg, #e6edfa, #f5f7fb); }
.tone-mist .flow__panel { background: #fff; }
@media (max-width: 560px) {
  .flow__facts { grid-template-columns: minmax(0, 1fr); }
  .flow__facts li + li { padding-inline: 0; border-inline-start: 0; border-top: 1px solid var(--line-2); }
  .flow__screen { padding: .6rem; }
}

/* ===================== 5 · HOME: CAPABILITY INDEX (editorial, numbered) ===================== */
.capgroups { counter-reset: cg; border-top: 2px solid var(--text-1); }
.capgroup { counter-increment: cg; padding-top: 1.25rem; gap: 1.1rem; }
.capgroup::before {
  content: counter(cg, decimal-leading-zero); font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem);
  line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--blue-400); letter-spacing: -.02em;
}
.capgroup__icon { display: none; }
.capgroup h3 { font-size: 1.35rem; }
.capgroup > p { color: var(--text-2); font-size: .92rem; min-height: 3.4em; }
.caplist { gap: 0; border-top: 1px solid var(--line-2); }
.caplist li { padding: .8rem 0; border-bottom: 1px solid var(--line-1); }
.caplist b { font-size: .98rem; }
.caplist span { color: var(--text-2); }
@media (max-width: 640px) { .capgroup > p { min-height: 0; } }

/* ===================== 6 · HOME: FOUNDATIONS as a statement band ===================== */
.foundations.tone-ink { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); border: 0; }
.foundations.tone-ink .foundations__title { font-family: var(--font-display); font-weight: 600; color: var(--text-1); font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.35; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 22ch; }
.foundations.tone-ink .foundations__title em { font-style: normal; color: var(--blue-300); }
.foundations.tone-ink .foundations__list { counter-reset: fd; }
.foundations.tone-ink .foundations__list li { counter-increment: fd; gap: .5rem; }
.foundations.tone-ink .foundations__list li::before { content: counter(fd, decimal-leading-zero); font-family: var(--font-num); font-size: .78rem; color: var(--blue-300); letter-spacing: .06em; }
.foundations.tone-ink .foundations__list b { font-size: 1.25rem; }
.foundations.tone-ink .foundations__list span { color: var(--text-2); line-height: 1.8; }

/* ===================== 7 · PATHS AS EDITORIAL ROWS (industries) ===================== */
.paths--rows { display: block; border-top: 1px solid var(--line-3); }
.paths--rows .path {
  display: grid; grid-template-columns: 140px minmax(0, 1.1fr) minmax(0, 1.4fr) 180px; gap: .5rem 2rem; align-items: baseline;
  padding: 1.6rem .25rem; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none;
  transition: background var(--dur-2), padding var(--dur-2);
}
.paths--rows .path:hover { transform: none; background: linear-gradient(270deg, var(--blue-tint), transparent 70%); padding-inline-start: 1rem; }
.paths--rows .path small { font-size: .82rem; }
.paths--rows .path b { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); line-height: 1.4; }
.paths--rows .path em { justify-self: end; margin: 0; white-space: nowrap; }
.paths--rows .path:focus-visible { border-radius: 8px; }
@media (max-width: 980px) {
  .paths--rows .path { grid-template-columns: minmax(0, 1fr); gap: .35rem; padding-block: 1.25rem; }
  .paths--rows .path em { justify-self: start; }
}

/* ===================== 8 · MODULE PAGES: FEATURES, CASES, NOT-YET ===================== */
/* Features: an editorial two-column index with hairlines, not a wall of boxes */
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4.5rem); border-top: 2px solid var(--text-1); counter-reset: ft; }
.feature { counter-increment: ft; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .9rem; row-gap: .45rem; align-content: start; padding: 1.4rem 0 1.5rem; border-bottom: 1px solid var(--line-2); }
.feature::before { content: counter(ft, decimal-leading-zero); grid-row: span 4; font-family: var(--font-num); font-size: .82rem; color: var(--blue-300); padding-top: .35rem; font-weight: 600; }
.feature h3 { font-size: 1.18rem; line-height: 1.45; }
.feature p { color: var(--text-2); line-height: 1.85; font-size: .95rem; }
.feature__limit { font-size: .86rem !important; color: var(--text-3) !important; }
.feature__limit b { color: var(--text-2); font-weight: 600; }
.feature--confirm h3 { color: var(--text-2); }
@media (max-width: 760px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }

/* Worked scenarios: story + light screen on the right, process on the left */
.case { background: linear-gradient(170deg, var(--surface-1), var(--bg-2) 70%); }
.case__head .win { margin-top: .6rem; }
.case__body { display: grid; gap: .9rem; align-content: start; }
.atso .is-wide { grid-column: 1 / -1; }
.atso div { background: rgb(255 255 255 / .025); }
.atso dt { font-weight: 600; }

/* "Not yet" lists, in plain language */
.notyet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--line-3); }
.notyet li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .9rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--line-1); }
.notyet li > span:last-child { grid-column: 2; color: var(--text-2); font-size: .92rem; line-height: 1.8; }
.notyet b { color: var(--text-1); font-weight: 600; }
.notyet__tag { display: inline-flex; padding: .05rem .6rem; border-radius: 999px; font-size: var(--fs-tag); font-weight: 600; white-space: nowrap; line-height: 1.7; }
.notyet__tag--no { color: var(--text-2); background: rgb(255 255 255 / .05); border: 1px solid var(--line-2); }
.notyet__tag--confirm { color: var(--blue-200); background: var(--blue-tint); border: 1px solid rgb(140 184 255 / .3); }
:is(.tone-paper, .block--paper, .tone-mist) .notyet__tag--no { background: var(--surface-3); }
.notavail li { padding: .55rem 0; border-bottom: 1px solid var(--line-1); }
@media (max-width: 760px) { .notyet { grid-template-columns: minmax(0, 1fr); } }

/* ===================== 9 · PRICING ===================== */
.quote-steps { position: relative; display: grid; gap: 0; counter-reset: q; padding: 1.4rem 1.5rem; border-radius: var(--r-xl); background: rgb(10 17 36 / .72); border: 1px solid var(--line-2); align-self: end; }
.quote-steps::before { content: ""; position: absolute; inset-inline-start: calc(1.5rem + 15px); top: 2.6rem; bottom: 2.6rem; width: 1px; background: linear-gradient(180deg, var(--blue-400), var(--line-2)); }
.quote-steps li { position: relative; counter-increment: q; display: grid; grid-template-columns: 32px 1fr; column-gap: 1rem; padding: .85rem 0; }
.quote-steps li::before { content: counter(q); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--blue-400); color: var(--blue-200); font-family: var(--font-num); font-size: .85rem; z-index: 1; }
.quote-steps li:last-child::before { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.quote-steps b { color: var(--text-1); font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; }
.quote-steps span { color: var(--text-2); font-size: .9rem; line-height: 1.75; }

.scope-out { background: #fff; box-shadow: var(--shadow-2); border-color: transparent; }
.scope-out__tag { justify-self: start; display: inline-flex; padding: .1rem .6rem; border-radius: 999px; font-size: var(--fs-tag); font-weight: 600; color: var(--warn); background: var(--warn-tint); }
.scope-out__note { font-size: .82rem !important; color: var(--text-3) !important; line-height: 1.75; padding-top: .7rem; border-top: 1px solid var(--line-1); }
.block-pick__card { background: #fff; }
:is(.tone-paper, .block--paper) .block-pick__card { box-shadow: 0 1px 2px rgb(10 20 48 / .04); }
.block-pick__card b svg { width: 22px; height: 22px; padding: 4px; border-radius: 7px; background: var(--blue-tint); color: var(--blue-300); box-sizing: content-box; }
.block-pick input:checked + .block-pick__card { background: #f4f8ff; }

.foundation-list { display: grid; gap: 0; border-top: 2px solid var(--text-1); counter-reset: fl; }
.foundation-list li { counter-increment: fl; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .9rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-2); }
.foundation-list li::before { content: counter(fl, decimal-leading-zero); grid-row: span 2; font-family: var(--font-num); font-size: .82rem; font-weight: 600; color: var(--blue-300); padding-top: .2rem; }
.foundation-list b { color: var(--text-1); font-weight: 600; font-size: 1.05rem; }
.foundation-list span { color: var(--text-2); font-size: .93rem; line-height: 1.8; }

/* ===================== 10 · SHARED: FOOTER CTA, FOOTNOTES ===================== */
.footer-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 3rem; align-items: center;
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); border-bottom: 1px solid var(--line-1);
}
.footer-cta__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2rem); color: var(--text-1); line-height: 1.45; max-width: 26ch; }
.footer-cta p + p { margin-top: .5rem; color: var(--text-2); }
@media (max-width: 760px) { .footer-cta { grid-template-columns: minmax(0, 1fr); } .footer-cta .btn { justify-self: start; } }
.footnote { display: block; margin-top: .6rem; color: var(--text-3); font-size: .84rem; line-height: 1.8; }
.footnote .link-arrow { font-size: .84rem; }

/* ===================== 11 · EDITORIAL TYPOGRAPHY ON LIGHT CANVASES ===================== */
:is(.tone-paper, .block--paper, .tone-mist) .block__head h2 { color: var(--text-1); letter-spacing: -.005em; }
:is(.tone-paper, .block--paper, .tone-mist) .block__head p { color: var(--text-2); }
:is(.tone-paper, .block--paper, .tone-mist) .kicker { color: var(--blue-300); }
:is(.tone-paper, .block--paper, .tone-mist) .faq summary::after { background: #fff; }
:is(.tone-paper, .block--paper, .tone-mist) .persona__tabs [role="tab"] { background: rgb(255 255 255 / .6); }
:is(.tone-paper, .block--paper, .tone-mist) .persona__tabs [role="tab"][aria-selected="true"] { background: #fff; box-shadow: var(--shadow-1); }
:is(.tone-paper, .block--paper, .tone-mist) .persona__panel { background: #fff; border-color: transparent; box-shadow: var(--shadow-2); }
:is(.tone-paper, .block--paper, .tone-mist) .persona__q { font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.95rem); }
:is(.tone-paper, .block--paper, .tone-mist) .mod-tile { background: #fff; }
:is(.tone-paper, .block--paper, .tone-mist) a.mod-tile:hover { background: #f4f8ff; }
:is(.tone-paper, .block--paper, .tone-mist) .layer { border-top-color: var(--line-3); }
:is(.tone-paper, .block--paper, .tone-mist) .role { background: #fff; box-shadow: var(--shadow-1); }
:is(.tone-paper, .block--paper, .tone-mist) .feature-article { background: radial-gradient(80% 120% at 100% 0%, rgb(45 108 240 / .1), transparent 60%), #fff; box-shadow: var(--shadow-2); border-color: transparent; }
:is(.tone-paper, .block--paper, .tone-mist) .demo__steps li::before { background: #fff; }
:is(.tone-paper, .block--paper, .tone-mist) .sector { background: #fff; border-color: transparent; box-shadow: var(--shadow-2); }
:is(.tone-paper, .block--paper, .tone-mist) .moment::before { background: #fff; }
:is(.tone-paper, .block--paper, .tone-mist) .ind__mods span { color: var(--blue-300); }

/* Article reading surface: long-form reads better dark-on-paper */
.tone-paper .prose { color: var(--text-2); }
.tone-paper .toc { background: #fff; border-color: transparent; box-shadow: var(--shadow-1); }

/* ink band typography */
.tone-ink .block__head p, .tone-ink .feature-article p { color: var(--text-2); }
.tone-ink .feature-article { background: rgb(255 255 255 / .04); border-color: var(--line-2); }
.tone-ink .feature-article:hover { border-color: var(--blue-300); }

/* journey: give the reading column a clear "you are here" marker */
.step { position: relative; }
.step::before { content: ""; position: absolute; inset-inline-start: calc(-1 * clamp(1rem, 2.5vw, 2.5rem)); top: 50%; width: 3px; height: 0; border-radius: 3px; background: var(--blue-400); transform: translateY(-50%); transition: height .5s var(--ease-out); }
.step:first-child::before { top: calc(4.5rem + 1.2em); transform: none; }
.step.is-active::before { height: 4.5rem; }
@media (max-width: 1080px) { .step::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .step, .step::before { transition: none; } }