/* ============================================================
   Platinum — icon system & journey lines
   Implements docs/NEW/V6/Design.pdf ("Platinum icon library",
   Design & Web Handoff v1.0) as real CSS.

   Companion asset: templates/includes/icon_sprite.html
   (the 38-symbol sprite — 11 duotone d-*, 14 line i-*,
    9 workflow unprefixed, 4 bespoke chiro-*).

   Load order: after brand-blocks-2026.css and after the page's
   own {% block extra_css %}, so the standard wins over the
   per-page timeline/icon rules the pages carried before V6.
   ============================================================ */


/* ── 01 · Tokens ───────────────────────────────────────────── */
:root {
  /* line / node ramp — the three brand stops the journey rule runs through */
  --ico-sky: #3B86BC;
  --ico-sage: #7A9E8E;
  --ico-persimmon: #E8593A;
  --ico-navy: #0D1B3E;

  /* Fixed module tints (V6 p.5 "Colour coding: one tint per module").
     The mapping is FIXED — a module keeps its tint on its own page, on a
     card in a grid, on a row in pricing and on a node in a timeline.
     Persimmon sits on Engagement and nowhere else. */
  --tint-scheduling:   #EBF4FB;   /* PMS / scheduling      */
  --tint-patient-app:  #EBF4FB;   /* Patient App           */
  --tint-ehr:          #E7F0F8;   /* EHR                   */
  --tint-billing:      #EDF2EE;   /* Billing & RCM         */
  --tint-payments:     #EDF2EE;   /* Payments              */
  --tint-engagement:   #FCEDE9;   /* CRM & Engagement — the only persimmon tint */
  --tint-analytics:    #E6ECF5;   /* Analytics — SURFACE-2027: duotone-navy tile (was cream) */
  --tint-ai:           #E6ECF5;   /* AI Tools — SURFACE-2027: duotone-navy tile (was cream) */
  --tint-integrations: #E6ECF5;   /* Marketplace — SURFACE-2027: duotone-navy tile (was stone) */
}


/* ── 02 · Base icon ────────────────────────────────────────── *
   Icons are 1em square: size them with font-size (or an explicit
   width/height), colour the stroke with `color`. Stroke stays 1.7
   at every size — never re-weight it.                            */
.ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -.14em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico .f { stroke: none; }        /* keeps duotone tint fills clean */

/* Stroke weight is part of the library. Nothing re-weights it. */
.pv6 .ico,
.pv6 .chk li .cc .ico,
.pv6 .node .dot .ico { stroke-width: 1.7; }


/* ── 03 · Size scale — six steps, nothing in between ───────── *
   16 inline in body text / table cells
   20 checklists, nav, buttons
   24 default — inside the tinted square, list rows
   32 feature tiles, bento cells
   40 section headers, module identity
   56 hero and marquee, bespoke only                               */
.ico-16 { font-size: 16px; width: 16px; height: 16px; }
.ico-20 { font-size: 20px; width: 20px; height: 20px; }
.ico-24 { font-size: 24px; width: 24px; height: 24px; }
.ico-32 { font-size: 32px; width: 32px; height: 32px; }
.ico-40 { font-size: 40px; width: 40px; height: 40px; }
.ico-56 { font-size: 56px; width: 56px; height: 56px; }


/* ── 04 · Container treatment A — tinted square ────────────── *
   Module identity and stat callouts. 44px square, radius 12px,
   container ≈1.8× the icon. Tint comes from the module's own
   colour; the stroke stays navy.                                 */
.ico-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--tint-scheduling);
  color: var(--ico-navy);
}
.ico-box .ico { font-size: 24px; width: 24px; height: 24px; }

/* 36px square (radius 10, icon 20) — the anatomy used by cards
   that describe a module or feature. */
.ico-box--sm { width: 36px; height: 36px; border-radius: 10px; }
.ico-box--sm .ico { font-size: 20px; width: 20px; height: 20px; }

.ico-box--scheduling   { background: var(--tint-scheduling); }
.ico-box--patient-app  { background: var(--tint-patient-app); }
.ico-box--ehr          { background: var(--tint-ehr); }
.ico-box--billing      { background: var(--tint-billing); }
.ico-box--payments     { background: var(--tint-payments); }
.ico-box--engagement   { background: var(--tint-engagement); }
.ico-box--analytics    { background: var(--tint-analytics); }
.ico-box--ai           { background: var(--tint-ai); }
.ico-box--integrations { background: var(--tint-integrations); }

/* Container treatment B — bare icon. Feature tiles, bento cells,
   benefit lists, and the "connects to everything" row. No
   container, navy stroke, sits directly above the tile title. */
.ico-bare { color: var(--ico-navy); display: block; margin-bottom: 12px; }


/* ── 05 · On navy ──────────────────────────────────────────── *
   Drop the square, use a white line icon.                        */
.pv6 .bg-navy .ico,
.pv6 .phero .ico,
.pv6 .ctaband .ico,
.pv6 .connect .ico,
.bg-navy .ico-bare { color: #fff; }

.pv6 .bg-navy .ico-box,
.pv6 .ctaband .ico-box { background: rgba(255, 255, 255, .10); color: #fff; }

/* On a navy section the tinted square is dropped entirely — the icon sits bare
   above the card title, in white, at the feature-tile size. */
.pv6 .bg-navy .tc .ti,
.pv6 .bg-navy .fcard .fi,
.pv6 .bg-navy .fcell .fi,
.pv6 .bg-navy .aic .ai-i,
.pv6 .bg-navy .sc .si,
.pv6 .bg-navy .cxc .cxi {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  display: block;
  margin-bottom: 12px;
}
.pv6 .bg-navy .tc .ti .ico,
.pv6 .bg-navy .fcard .fi .ico,
.pv6 .bg-navy .fcell .fi .ico,
.pv6 .bg-navy .aic .ai-i .ico,
.pv6 .bg-navy .sc .si .ico,
.pv6 .bg-navy .cxc .cxi .ico {
  width: 32px;
  height: 32px;
  font-size: 32px;
  color: #fff;
}


/* ── 06 · Cards that describe a module or feature ──────────── *
   Tinted square, name, a one-line definition, then the outcome
   under a rule. Cards in a grid stay equal height, and either all
   of them carry the outcome line or none do.                     */
.pv6 .fcard .fi,
.pv6 .fcell .fi,
.pv6 .aic .ai-i,
.pv6 .sc .si,
.pv6 .modcard .mi,
.pv6 .tcard .ti {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 13px;
}
.pv6 .fcard .fi .ico,
.pv6 .fcell .fi .ico,
.pv6 .aic .ai-i .ico,
.pv6 .sc .si .ico,
.pv6 .modcard .mi .ico,
.pv6 .tcard .ti .ico {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: var(--ico-navy);
}

/* One tint per module. A module page carries its module class on the .pv6
   wrapper, and every tinted square on that page takes that one tint — the
   page never mixes two. Persimmon lives on Engagement and nowhere else. */
.pv6.mod-scheduling .fcard .fi, .pv6.mod-scheduling .fcell .fi, .pv6.mod-scheduling  .aic .ai-i, .pv6.mod-scheduling  .sc .si, .pv6.mod-scheduling  .ico-box { background: var(--tint-scheduling); }
.pv6.mod-patient-app .fcard .fi, .pv6.mod-patient-app .fcell .fi, .pv6.mod-patient-app .aic .ai-i, .pv6.mod-patient-app .sc .si, .pv6.mod-patient-app .ico-box { background: var(--tint-patient-app); }
.pv6.mod-ehr .fcard .fi, .pv6.mod-ehr .fcell .fi, .pv6.mod-ehr         .aic .ai-i, .pv6.mod-ehr         .sc .si, .pv6.mod-ehr         .ico-box { background: var(--tint-ehr); }
.pv6.mod-billing .fcard .fi, .pv6.mod-billing .fcell .fi, .pv6.mod-billing     .aic .ai-i, .pv6.mod-billing     .sc .si, .pv6.mod-billing     .ico-box { background: var(--tint-billing); }
.pv6.mod-payments .fcard .fi, .pv6.mod-payments .fcell .fi, .pv6.mod-payments    .aic .ai-i, .pv6.mod-payments    .sc .si, .pv6.mod-payments    .ico-box { background: var(--tint-payments); }
.pv6.mod-engagement .fcard .fi, .pv6.mod-engagement .fcell .fi, .pv6.mod-engagement  .aic .ai-i, .pv6.mod-engagement  .sc .si, .pv6.mod-engagement  .ico-box { background: var(--tint-engagement); }
.pv6.mod-analytics .fcard .fi, .pv6.mod-analytics .fcell .fi, .pv6.mod-analytics   .aic .ai-i, .pv6.mod-analytics   .sc .si, .pv6.mod-analytics   .ico-box { background: var(--tint-analytics); }
.pv6.mod-ai .fcard .fi, .pv6.mod-ai .fcell .fi, .pv6.mod-ai          .aic .ai-i, .pv6.mod-ai          .sc .si, .pv6.mod-ai          .ico-box { background: var(--tint-ai); }

/* the outcome line — feature first, then what it means for the practice */
.pv6 .wiif {
  font-size: 12.5px;
  color: #3d6b5a;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--light, #E3EAF2);
  line-height: 1.45;
}
.pv6 .wiif b { color: #2c5244; font-weight: 700; }

/* equal-height cards in a grid */
.pv6 .fg, .pv6 .ai3, .pv6 .conx { align-items: stretch; }
.pv6 .fg .fcard, .pv6 .ai3 .aic { display: flex; flex-direction: column; }
.pv6 .fg .fcard .wiif, .pv6 .ai3 .aic .wiif { margin-top: auto; }

/* "Connects to everything" — duotone, bare (V6 page-by-page mapping) */
.pv6 .cxc .cxi {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  display: block;
  margin-bottom: 10px;
}
.pv6 .cxc .cxi .ico {
  width: 32px;
  height: 32px;
  font-size: 32px;
  color: var(--ico-navy);
}


/* ── 07 · The journey line ─────────────────────────────────── *
   36px circular nodes, 1.5px stroke, workflow icon at 20px. Node
   colour steps along the sky → sage → persimmon gradient of the
   connecting rule, and only the last node is filled. Same gradient
   whatever the node count. Labels are action verbs, three or four
   words, one voice across the line.                               */
.pv6 .tl,
.pv6 .mig-tl { margin-top: 30px; }

.pv6 .tlrow { position: relative; }

.pv6 .tl .track,
.pv6 .mig-tl .track {
  position: absolute;
  top: 17.25px;                       /* half of the 36px node, minus half the 1.5px rule */
  left: var(--jl-inset, 0);
  right: var(--jl-inset, 0);
  height: 1.5px;
  border-radius: 2px;
  background: var(--ico-sky);
}

.pv6 .tl .nodes,
.pv6 .mig-tl .nodes { position: relative; display: grid; }

/* The rule runs centre-to-centre between the outer nodes… */
.pv6 .tl:has(.nodes--3) { --jl-inset: 16.66%; }
.pv6 .tl:has(.nodes--4) { --jl-inset: 12.5%; }
.pv6 .tl:has(.nodes--5), .pv6 .mig-tl:has(.nodes--5) { --jl-inset: 10%; }
.pv6 .tl:has(.nodes--6) { --jl-inset: 8.33%; }
.pv6 .tl:has(.nodes--7) { --jl-inset: 7.14%; }
.pv6 .tl:has(.nodes--8) { --jl-inset: 6.25%; }
.pv6 .tl:has(.nodes--9) { --jl-inset: 5.55%; }
/* …except on a phased line, where nothing is filled at the end and the
   rule carries on past the last node into recall. */
.pv6 .tl--phased { --jl-inset: 0; }

.pv6 .nodes--3 { grid-template-columns: repeat(3, 1fr); }
.pv6 .nodes--4 { grid-template-columns: repeat(4, 1fr); }
.pv6 .nodes--5 { grid-template-columns: repeat(5, 1fr); }
.pv6 .nodes--6 { grid-template-columns: repeat(6, 1fr); }
.pv6 .nodes--7 { grid-template-columns: repeat(7, 1fr); }
.pv6 .nodes--8 { grid-template-columns: repeat(8, 1fr); }
.pv6 .nodes--9 { grid-template-columns: repeat(9, 1fr); }

.pv6 .node { text-align: center; padding: 0 8px; }

.pv6 .tl .node .dot,
.pv6 .mig-tl .node .dot {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--ico-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  box-shadow: none;
  transition: transform .25s ease;
}
.pv6 .tl .node .dot .ico,
.pv6 .mig-tl .node .dot .ico {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: inherit;
}
.pv6 .tl .node:hover .dot,
.pv6 .mig-tl .node:hover .dot { transform: translateY(-2px); }

.pv6 .node .ns { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--clay, #A8998A); margin-bottom: 4px; }
.pv6 .node .nl { font-size: 13px; font-weight: 700; color: var(--navy, #0D1B3E); line-height: 1.3; margin-bottom: 3px; }
.pv6 .node .nd { font-size: 12px; color: var(--gray, #6B6B80); line-height: 1.45; max-width: 200px; margin: 0 auto; }

/* Node colour steps along the rule. One block per node count so the
   ramp lands on the same three stops however many steps there are. */
.pv6 .tl:not(.tl--phased) .nodes > .node:nth-child(1) .dot { border-color: #3B86BC; color: #3B86BC; }

.pv6 .nodes--3 > .node:nth-child(2) .dot { border-color: #7A9E8E; color: #7A9E8E; }

.pv6 .nodes--4 > .node:nth-child(2) .dot { border-color: #65969D; color: #65969D; }
.pv6 .nodes--4 > .node:nth-child(3) .dot { border-color: #9F8772; color: #9F8772; }

.pv6 .nodes--5 > .node:nth-child(2) .dot { border-color: #5A92A5; color: #5A92A5; }
.pv6 .nodes--5 > .node:nth-child(3) .dot { border-color: #7A9E8E; color: #7A9E8E; }
.pv6 .nodes--5 > .node:nth-child(4) .dot { border-color: #B17C64; color: #B17C64; }

.pv6 .nodes--6 > .node:nth-child(2) .dot { border-color: #5490AA; color: #5490AA; }
.pv6 .nodes--6 > .node:nth-child(3) .dot { border-color: #6D9997; color: #6D9997; }
.pv6 .nodes--6 > .node:nth-child(4) .dot { border-color: #90907D; color: #90907D; }
.pv6 .nodes--6 > .node:nth-child(5) .dot { border-color: #BC755C; color: #BC755C; }

.pv6 .nodes--7 > .node:nth-child(2) .dot { border-color: #508EAD; color: #508EAD; }
.pv6 .nodes--7 > .node:nth-child(3) .dot { border-color: #65969D; color: #65969D; }
.pv6 .nodes--7 > .node:nth-child(4) .dot { border-color: #7A9E8E; color: #7A9E8E; }
.pv6 .nodes--7 > .node:nth-child(5) .dot { border-color: #9F8772; color: #9F8772; }
.pv6 .nodes--7 > .node:nth-child(6) .dot { border-color: #C37056; color: #C37056; }

/* Only the last node is filled. */
.pv6 .tl:not(.tl--phased) .nodes > .node:last-child .dot {
  border-color: var(--ico-persimmon);
  background: var(--ico-persimmon);
  color: #fff;
}


/* ── 08 · The same line, split into phases ─────────────────── *
   Pills sit above the line: tint fill, 20px radius, 9px uppercase
   label in the phase colour. The rule and every node in a phase
   take that one colour, so the phase reads before the labels do.
   Nothing is filled at the end — the line carries on into recall. */
.pv6 .phases { display: grid; gap: 8px; margin-bottom: 16px; }
.pv6 .phase {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 20px;
  padding: 7px 0;
}
.pv6 .phase.b { background: var(--tint-scheduling); color: #2E6E9E; }
.pv6 .phase.d { background: var(--tint-billing);    color: #3d6b5a; }
.pv6 .phase.a { background: var(--tint-engagement); color: var(--ico-persimmon); }

/* The rule takes the phase colour too — hard stops at the phase boundaries, so
   the phase reads before the labels do. Default is an even three-way split;
   a line whose phases aren't even sets --jl-stop1 / --jl-stop2 to match its
   .phases grid (the homepage journey is 2 / 4 / 3 of nine nodes). */
.pv6 .tl--phased .track {
  background: linear-gradient(90deg,
    var(--ico-sky)       0 var(--jl-stop1, 33.33%),
    var(--ico-sage)      var(--jl-stop1, 33.33%) var(--jl-stop2, 66.66%),
    var(--ico-persimmon) var(--jl-stop2, 66.66%) 100%);
}

.pv6 .tl--phased .node.b .dot { border-color: var(--ico-sky);       color: var(--ico-sky); }
.pv6 .tl--phased .node.d .dot { border-color: var(--ico-sage);      color: #3d6b5a; }
.pv6 .tl--phased .node.a .dot { border-color: var(--ico-persimmon); color: var(--ico-persimmon); }
/* nothing filled at the end of a phased line */
.pv6 .tl--phased .nodes > .node:last-child .dot { background: #fff; }


/* ── 09 · Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  .pv6 .tl .track,
  .pv6 .mig-tl .track { display: none; }
  .pv6 .tl .nodes,
  .pv6 .mig-tl .nodes { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .pv6 .tl .phases { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pv6 .tl .nodes,
  .pv6 .mig-tl .nodes { grid-template-columns: 1fr 1fr; }
}
/* Anything tappable keeps a 44px target even though the icon doesn't grow. */
@media (hover: none) {
  .pv6 a .ico-box, .pv6 button .ico { min-width: 44px; min-height: 44px; }
}

/* Bento benefit lists are duotone and bare; a connector line carries no icon,
   so it indents to the same text column as the items around it. */
.pv6 .half li.lead-in {
  padding-left: 30px;
  font-weight: 700;
  color: var(--navy, #0D1B3E);
}

/* ── 10 · Comparison tables & pricing rows ─────────────────── *
   The line tick, never a dingbat. A missing feature is an em-dash,
   not a cross — the library has no cross and one isn't borrowed.  */
.yes .ico, .c .ico, .pcol-tick .ico { color: var(--ico-sage); }
.x, .no { color: var(--clay, #A8998A); font-weight: 700; }

/* ── 11 · Module identity header ───────────────────────────── *
   One d-* per module, at the top of the module's own page. The hero
   is navy, so the spec's on-navy rule applies: no tinted square, a
   white line icon, at the 40px section-header size.               */
.pv6 .phero .modident { margin-bottom: 14px; line-height: 0; }
.pv6 .phero .modident .ico {
  width: 40px;
  height: 40px;
  font-size: 40px;
  color: #fff;
  opacity: .92;
}
@media (max-width: 700px) {
  .pv6 .phero .modident .ico { width: 32px; height: 32px; font-size: 32px; }
}

/* ── 12 · Bespoke chiropractic set ─────────────────────────── *
   Hero, section headers and package cards only — never everyday UI.
   40–56px; these are the one place the set is allowed to carry a
   moment on its own.                                              */
.tierico { line-height: 0; margin-bottom: 12px; }
.tierico .ico { width: 40px; height: 40px; font-size: 40px; color: var(--ico-navy); }
.tier.hot .tierico .ico { color: var(--ico-persimmon); }