/* IntegrateAI · Signal Colour. The colour option of Signal: the same page, lit by the brand's own hues.
   Loaded after style.css. Overrides only, by section. Brand hues only: green #3E8E6B, blue #4A7FC0,
   amber #BA7F27 (and "sea", the green and blue mixed half and half), with their tints and shades. Red stays unused.
   One idea runs through it: every goal has a colour, and every tool, chart, panel and executive takes the
   colour of the goal it serves. Money is green, sales are blue, operations are sea, customers are amber.
   Green still means running and amber still means needs you, everywhere. Paper stays the canvas. */

/* ---------- tokens ---------- */
:root{
  --green:#3e8e6b;--green-text:#357a5c;--green-deep:#2b634b;--green-ink:#1f4a37;--green-light:#6aa98c;--green-chart:#3d8f5b;
  --blue:#4a7fc0;--blue-text:#3a67a0;--blue-deep:#2f5687;--blue-ink:#223f66;--blue-light:#92b2d9;
  --sea:#448796;--sea-text:#366c78;--sea-deep:#2e5a65;--sea-ink:#22444b;--sea-light:#8fb7c0;
  --amber:#ba7f27;--amber-text:#92641f;--amber-deep:#704c17;--amber-ink:#553a10;--amber-light:#e6b061;
  /* tints: the hue mixed into white */
  --green-50:#f5f9f8;--green-100:#ecf4f0;--green-200:#dcebe4;--green-300:#c5ddd3;
  --blue-50:#f6f9fc;--blue-100:#edf2f9;--blue-200:#dee8f4;--blue-300:#c9d9ec;
  --sea-50:#f6f9fa;--sea-100:#ecf3f5;--sea-200:#dde9ec;--sea-300:#c7dbe0;
  --amber-50:#fcf9f4;--amber-100:#f8f2e9;--amber-200:#f3e8d8;--amber-300:#ead9be;
  /* glows: the hue at low alpha (brand tints: green 10% / 40%) */
  --green-a10:rgba(62,142,107,.1);--green-a16:rgba(62,142,107,.16);--green-a40:rgba(62,142,107,.4);
  --blue-a10:rgba(74,127,192,.1);--blue-a16:rgba(74,127,192,.16);--blue-a40:rgba(74,127,192,.4);
  --sea-a10:rgba(68,135,150,.1);--sea-a16:rgba(68,135,150,.16);--sea-a40:rgba(68,135,150,.4);
  --amber-a10:rgba(186,127,39,.1);--amber-a16:rgba(186,127,39,.16);--amber-a40:rgba(186,127,39,.4);
  /* the spectrum, in the order of the four goals */
  --spectrum:linear-gradient(90deg,var(--green-light) 0%,var(--blue) 36%,var(--sea-light) 64%,var(--amber-light) 100%);
  /* goal materials */
  --mat-green:repeating-linear-gradient(0deg,rgba(255,255,255,.3) 0 1px,transparent 1px 3px),linear-gradient(128deg,#f3f9f5 0%,#d6e9de 30%,#f0f7f2 48%,#c9e1d3 72%,#e6f2eb 100%);
  --mat-blue:radial-gradient(90% 70% at 22% 10%,#ffffff 0%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#fbfcfe 0%,#e8eff9 46%,#d3e1f2 100%);
  --mat-sea:linear-gradient(112deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 62%,rgba(255,255,255,.45) 74%,rgba(255,255,255,0) 86%),linear-gradient(160deg,#f1f7f8 0%,#dbe9ec 52%,#c8dce2 100%);
  --mat-amber:linear-gradient(118deg,#fefcf9 0%,#f3e6cf 20%,#fdf9f2 38%,#ecdbbc 58%,#fbf5ea 78%,#f1e2c6 100%);
}
::selection{background:var(--green-200);color:var(--ink)}

/* hue helpers: set --c (the hue), --ct (text-safe shade), --cb (soft tint) and --cr (ring) on anything */
.hue-green{--c:var(--green);--ct:var(--green-deep);--cb:var(--green-100);--cr:var(--green-a16)}
.hue-blue{--c:var(--blue);--ct:var(--blue-deep);--cb:var(--blue-100);--cr:var(--blue-a16)}
.hue-sea{--c:var(--sea);--ct:var(--sea-deep);--cb:var(--sea-100);--cr:var(--sea-a16)}
.hue-amber{--c:var(--amber);--ct:var(--amber-deep);--cb:var(--amber-100);--cr:var(--amber-a16)}

/* ---------- buttons: ink stays the anchor; the rim turns in the brand hues ---------- */
.btn--quiet:hover{background:var(--green-100)}
.info__cta,.info__cta:hover{background:#fff}

/* ---------- nav ---------- */
/* the hairline fills in the order of the page: green first, amber by the close */
.nav__progress{height:2px;background:linear-gradient(90deg,rgba(255,255,255,.18),#c9c9cc 55%,#ffffff);opacity:.9} /* 1.6 (Chad): silver, not colour */
.nav__cta::before{content:"";flex:none;width:7px;height:7px;margin-right:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(62,142,107,.2)}

/* ---------- hero: warm morning light from the left, the brand hues glowing behind the tiles ---------- */
.hero{isolation:isolate}
.hero::before,.hero::after,.hero__grid::before{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;will-change:transform}
.hero::before{left:-24%;top:-36%;width:min(1060px,82vw);height:min(900px,74vw);background:radial-gradient(closest-side,rgba(247,212,156,0.62) 0%,rgba(247,212,156,0.546) 20%,rgba(247,212,156,0.372) 40%,rgba(247,212,156,0.198) 60%,rgba(247,212,156,0.081) 80%,rgba(247,212,156,0) 100%);animation:auraA 46s ease-in-out infinite alternate}
.hero::after{right:-18%;bottom:-34%;width:min(1100px,86vw);height:min(900px,76vw);background:radial-gradient(closest-side,rgba(164,210,188,0.78) 0%,rgba(164,210,188,0.686) 20%,rgba(164,210,188,0.468) 40%,rgba(164,210,188,0.25) 60%,rgba(164,210,188,0.101) 80%,rgba(164,210,188,0) 100%);animation:auraB 52s ease-in-out infinite alternate}
.hero__grid::before{right:-16%;top:-34%;width:min(980px,74vw);height:min(820px,66vw);background:radial-gradient(closest-side,rgba(182,207,240,0.82) 0%,rgba(182,207,240,0.722) 20%,rgba(182,207,240,0.492) 40%,rgba(182,207,240,0.262) 60%,rgba(182,207,240,0.107) 80%,rgba(182,207,240,0) 100%);animation:auraC 40s ease-in-out infinite alternate}
.hero__glow{background:radial-gradient(closest-side,rgba(255,255,255,.78),rgba(255,255,255,.36) 46%,rgba(255,255,255,0))}
/* while the twenty tiles play, the light waits a little; it blooms as the one mission control arrives */
.js:not(.rm) .hero::before,.js:not(.rm) .hero::after,.js:not(.rm) .hero__grid::before{opacity:.62;transition:opacity 2.4s cubic-bezier(.2,.7,.2,1)}
.js:not(.rm) .hero.c-lit::before,.js:not(.rm) .hero.c-lit::after,.js:not(.rm) .hero.c-lit .hero__grid::before{opacity:1}
@keyframes auraA{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5%,4%,0) scale(1.07)}100%{transform:translate3d(-2%,7%,0) scale(.96)}}
@keyframes auraB{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6%,-3%,0) scale(1.05)}100%{transform:translate3d(3%,-6%,0) scale(1.1)}}
@keyframes auraC{0%{transform:translate3d(0,0,0) scale(1.04)}50%{transform:translate3d(-4%,5%,0) scale(.95)}100%{transform:translate3d(-8%,2%,0) scale(1.06)}}
.hero .eyebrow{background:rgba(248,242,233,.9);color:var(--amber-deep);box-shadow:inset 0 0 0 1px rgba(186,127,39,.2)}
.c-stop{color:var(--green)}
.status__rest{color:var(--muted-2)}

/* the DOM tiles (no WebGL, no JS, reduced motion) wear the same palette as the 3D tiles */
.tiles .tile:nth-child(1) .tile__in{background:radial-gradient(120% 90% at 30% 0%,#5aa484 0%,#3e8e6b 55%,#2f7457 100%);color:#f3fbf7;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(0,0,0,.08),var(--shadow)}
.tiles .tile:nth-child(2) .tile__in{background:radial-gradient(90% 70% at 22% 10%,#fff 0%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#f3f7fc 0%,#dbe7f5 50%,#c9dbf2 100%);color:var(--blue-ink)}
.tiles .tile:nth-child(2) .tile__g{color:var(--blue-text)}
.tiles .tile:nth-child(3) .tile__in{background:radial-gradient(90% 70% at 22% 10%,#fff 0%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#fdf8ef 0%,#f6e6c8 50%,#f0d8a8 100%);color:var(--amber-ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),inset 0 1px 0 #fff,0 14px 34px -16px rgba(0,0,0,.2)}
.tiles .tile:nth-child(3) .tile__g{color:#a86f1c}
.tiles .tile:nth-child(4) .tile__in{background:radial-gradient(90% 70% at 22% 10%,#fff 0%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#f3f9f6 0%,#d8ebe1 50%,#c3e2d2 100%);color:var(--green-ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),inset 0 1px 0 #fff,var(--shadow)}
.tiles .tile:nth-child(4) .tile__g{color:#2c7a58}
.tiles .tile:nth-child(5) .g-line{stroke:var(--sea-text)}
.tiles .tile:nth-child(5) circle{fill:var(--sea-text);stroke:none}
.tiles .tile:nth-child(6) .g-grow{fill:var(--sea-text)}
.tiles .tile:nth-child(8) .tile__in{background:linear-gradient(160deg,rgba(252,238,212,.92),rgba(243,199,122,.72));color:#4a300a;box-shadow:inset 0 0 0 1px rgba(186,127,39,.25),inset 0 1px 0 rgba(255,255,255,.8),var(--shadow)}
.tiles .tile:nth-child(8) .tile__g{color:#9a6418}
.tiles .tile:nth-child(10) .tile__in{background:linear-gradient(160deg,rgba(236,246,241,.95),rgba(159,208,184,.7));color:#163f2e;box-shadow:inset 0 0 0 1px rgba(62,142,107,.25),inset 0 1px 0 rgba(255,255,255,.8),var(--shadow)}
.tiles .tile:nth-child(11) .tile__in{background:linear-gradient(135deg,#f4faf7 0%,#b3dac7 22%,#eef7f2 40%,#8fc3aa 58%,#e2f1e9 76%,#a6d1bd 100%);color:#12321f;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.95),0 14px 34px -16px rgba(0,0,0,.25)}
.tiles .tile:nth-child(13) .tile__in{background:radial-gradient(120% 90% at 30% 0%,#66a3b1 0%,#448796 55%,#366c78 100%);color:#f3f9fb;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(0,0,0,.08),var(--shadow)}
.tiles .tile:nth-child(16) .tile__in{background:linear-gradient(135deg,#f6f9fd 0%,#bcd2f0 22%,#f1f6fc 40%,#94b4e0 58%,#e5eef9 76%,#aac4e8 100%);color:#14284a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.95),0 14px 34px -16px rgba(0,0,0,.25)}
.tiles .tile:nth-child(17) .tile__in{background:radial-gradient(120% 90% at 30% 0%,#cf9a48 0%,#ba7f27 55%,#9a6719 100%);color:#fffaf0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(0,0,0,.08),var(--shadow)}
.tiles .tile:nth-child(18) .tile__in{background:linear-gradient(160deg,rgba(238,244,252,.95),rgba(168,198,236,.72));color:#1a3458;box-shadow:inset 0 0 0 1px rgba(74,127,192,.25),inset 0 1px 0 rgba(255,255,255,.8),var(--shadow)}
.tiles .tile:nth-child(19) .g-line{stroke:var(--blue-text)}
.tiles .tile:nth-child(19) path{fill:var(--blue)}

/* ---------- mission control (hero card and the big screen) ---------- */
.cline{stroke:var(--green-chart)}
.chart linearGradient stop:first-child{stop-color:#3d8f5b;stop-opacity:.24}
.chart linearGradient stop:last-child{stop-color:#3d8f5b;stop-opacity:0}
.cline2{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.85}
.chartw__end{background:var(--green-chart);box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(61,143,91,.3),0 0 20px 5px rgba(61,143,91,.35)}
.split__seg--w,.sw--w{background:linear-gradient(180deg,#398263,#317156);color:#fff}
.split__seg--o,.sw--o{background:linear-gradient(180deg,#4478b8,#3c6ca8);color:#fff}
.split__seg--s,.sw--s{background:repeating-linear-gradient(135deg,rgba(255,255,255,.4) 0 1px,transparent 1px 5px),linear-gradient(180deg,#eab96e,#e0a64f);color:var(--amber-ink)}
.mc .chip,.panel .chip{background:var(--green-100);color:var(--green-deep);box-shadow:inset 0 0 0 1px rgba(62,142,107,.24)}
.mc__bg{background:radial-gradient(760px circle at var(--lx,18%) var(--ly,-8%),#ffffff 0%,#fcfcfb 42%,#f5f6f3 100%)}
.mc__needs,.panel--needs.silk{background:radial-gradient(90% 80% at 18% 0%,#ffffff 0%,rgba(255,255,255,0) 58%),linear-gradient(160deg,#fffdf9 0%,#f8eedd 56%,#f1e0c2 100%);box-shadow:inset 0 0 0 1px rgba(186,127,39,.2),inset 0 1px 0 #fff,0 12px 26px -14px rgba(146,100,31,.32)}
.mc__needs p,.panel--needs .panel__text{color:#5a5a5e}
.panel--night{background:linear-gradient(160deg,#f7f9fc 0%,#eaf0f8 100%);box-shadow:inset 0 0 0 1px rgba(74,127,192,.14)}
.panel--night .panel__text{color:#56565a}
.rhythm i{background:var(--green)}
.rhythm i.gap{background:transparent;box-shadow:inset 0 0 0 2px var(--amber)}
.rhythm i.gap::before{border-top-color:rgba(186,127,39,.62)}
.screen__bg{background:radial-gradient(1200px circle at var(--lx,20%) var(--ly,-10%),#ffffff 0%,#fcfcfb 40%,#f5f6f3 100%)}
.screen__tabs span{display:inline-flex;align-items:center;gap:8px}
.screen__tabs span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--grey-2))}
.screen__tabs span:nth-child(1){--c:var(--blue)}
.screen__tabs span:nth-child(2){--c:var(--green)}
.screen__tabs span:nth-child(3),.screen__tabs span:nth-child(4){--c:var(--sea)}
.screen__tabs span:nth-child(5){--c:var(--amber)}

/* ---------- one screen: every tool in the colour of the goal it serves ---------- */
.orbit__item:nth-child(1),.orbit__item:nth-child(4),.orbit__item:nth-child(11){--c:var(--green);--ct:var(--green-deep);--cb:var(--green-50);--cr:var(--green-a16)}
.orbit__item:nth-child(2){--c:var(--blue);--ct:var(--blue-deep);--cb:var(--blue-50);--cr:var(--blue-a16)}
.orbit__item:nth-child(3),.orbit__item:nth-child(8),.orbit__item:nth-child(12){--c:var(--amber);--ct:var(--amber-deep);--cb:var(--amber-50);--cr:var(--amber-a16)}
.orbit__item:nth-child(5),.orbit__item:nth-child(6),.orbit__item:nth-child(7),.orbit__item:nth-child(9){--c:var(--sea);--ct:var(--sea-deep);--cb:var(--sea-50);--cr:var(--sea-a16)}
.orbit__pill{color:var(--ct,var(--ink));background:linear-gradient(180deg,#ffffff 0%,var(--cb,var(--card)) 100%);box-shadow:inset 0 0 0 1px var(--cr,var(--line)),inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,.03),0 12px 30px -14px var(--cr,rgba(0,0,0,.14)),0 10px 24px -14px rgba(0,0,0,.12)}
.orbit__pill:not(.orbit__pill--more)::before{content:"";flex:none;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--cr)}
.orbit__pill--more{color:var(--muted-2);background:transparent}
.orbit__card{background:linear-gradient(180deg,#ffffff 0%,var(--cb,var(--card)) 100%);box-shadow:inset 0 0 0 1px var(--cr,var(--line)),inset 0 1px 0 #fff,var(--shadow-lg)}
.orbit__card--money .label{color:var(--green-text)}
.orbit__lines line{stroke-opacity:.6}
.pills .pill{background:var(--cb,var(--pill));color:var(--ct,var(--muted-2));box-shadow:inset 0 0 0 1px var(--cr,transparent)}
.pills .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,transparent)}
.pills .pill:nth-child(1),.pills .pill:nth-child(4){--c:var(--green);--ct:var(--green-deep);--cb:var(--green-100);--cr:var(--green-a16)}
.pills .pill:nth-child(2){--c:var(--blue);--ct:var(--blue-deep);--cb:var(--blue-100);--cr:var(--blue-a16)}
.pills .pill:nth-child(3),.pills .pill:nth-child(8){--c:var(--amber);--ct:var(--amber-deep);--cb:var(--amber-100);--cr:var(--amber-a16)}
.pills .pill:nth-child(5),.pills .pill:nth-child(6),.pills .pill:nth-child(7),.pills .pill:nth-child(9){--c:var(--sea);--ct:var(--sea-deep);--cb:var(--sea-100);--cr:var(--sea-a16)}
.pills .pill--line::before{display:none}

/* ---------- your team: each executive wears the colour of the goal it owns ---------- */
.exec[data-exec="cfo"]{--c:var(--green);--cg:rgba(62,142,107,.45)}
.exec[data-exec="cro"]{--c:var(--blue);--cg:rgba(74,127,192,.4)}
.exec[data-exec="coo"]{--c:var(--sea);--cg:rgba(68,135,150,.4)}
.exec[data-exec="cmo"]{--c:var(--amber);--cg:rgba(186,127,39,.4)}
.exec[data-exec="ceo"]{--c:var(--ink);--cg:rgba(106,169,140,.35)}
.exec[data-exec="cto"]{--c:var(--blue);--cg:rgba(74,127,192,.32)}
.exec.m-graphite .exec__face{background:radial-gradient(120% 90% at 30% 0%,#56a483 0%,#3e8e6b 48%,#2c6b50 100%);color:#f2faf6;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(0,0,0,.06),var(--shadow)}
.exec.m-pearl .exec__face{background:radial-gradient(90% 70% at 22% 10%,#ffffff 0%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#f7faff 0%,#e3ecf8 46%,#cbdcf1 100%);color:var(--blue-ink);box-shadow:inset 0 0 0 1px rgba(74,127,192,.16),inset 0 1px 0 #fff,0 14px 34px -16px rgba(47,86,135,.3)}
.exec.m-chrome .exec__face{background:linear-gradient(135deg,#f7fafb 0%,#b8d3da 19%,#f0f6f8 35%,#7eaab7 55%,#e2edf1 73%,#a2c3cc 100%);background-size:220% 220%;color:var(--sea-ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.95),0 14px 34px -16px rgba(34,68,75,.32)}
.exec.m-dots .exec__face{background:radial-gradient(rgba(186,127,39,.3) 1px,transparent 1.6px) 0 0/7px 7px,linear-gradient(160deg,#fffcf6 0%,#f7ead3 100%);color:var(--amber-ink);box-shadow:inset 0 0 0 1px rgba(186,127,39,.2),inset 0 1px 0 #fff,var(--shadow)}
.exec.m-ink .exec__face{background:radial-gradient(90% 70% at 18% 110%,rgba(62,142,107,.5),rgba(62,142,107,0) 60%),radial-gradient(80% 70% at 100% 100%,rgba(186,127,39,.42),rgba(186,127,39,0) 60%),radial-gradient(90% 80% at 60% 120%,rgba(74,127,192,.45),rgba(74,127,192,0) 62%),var(--ink)}
.exec.m-outline .exec__face{background:linear-gradient(160deg,#ffffff 0%,#f3f7fc 100%);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--blue),inset 0 1px 0 #fff}
.exec.m-outline .exec__role{color:var(--blue-deep);opacity:1}
.exec.m-pearl .exec__role,.exec.m-chrome .exec__role,.exec.m-dots .exec__role{opacity:1}
.exec.is-speaking .exec__face{box-shadow:0 0 0 6px rgba(255,255,255,.9),0 0 70px 14px var(--cg),0 40px 60px -28px rgba(0,0,0,.4)}
.msg--cfo .msg__box{background:radial-gradient(120% 140% at 0% 0%,#2f7254 0%,#2a684d 55%,#235842 100%);color:#f4fbf8}
.msg--cfo .msg__who{opacity:1;color:#dcefe6}
.msg--cro .msg__box{background:radial-gradient(120% 140% at 0% 0%,#3a68a2 0%,#355f95 55%,#2e5382 100%);color:#f5f8fd}
.msg--cro .msg__who{opacity:1;color:#e4edf9}
.js:not(.rm) .msg--cfo .typing{background:#2c6b50}
.js:not(.rm) .msg--cro .typing{background:#3a67a0}
.team__grid:has(.exec[data-exec="cfo"].is-speaking) .team__path{stroke:var(--green)}
.team__grid:has(.exec[data-exec="cfo"].is-speaking) .team__spark{fill:var(--green)}
.team__grid:has(.exec[data-exec="cro"].is-speaking) .team__path{stroke:var(--blue)}
.team__grid:has(.exec[data-exec="cro"].is-speaking) .team__spark{fill:var(--blue)}
.chat__lights i:nth-child(1){background:#9fcfb9}
.chat__lights i:nth-child(2){background:#b6cde9}
.chat__lights i:nth-child(3){background:#eed2a2}
.pillrow{background:linear-gradient(180deg,#ffffff 0%,var(--green-50) 100%);box-shadow:inset 0 0 0 1px rgba(62,142,107,.14),inset 0 1px 0 #fff}

/* ---------- four goals: four colours, four materials ---------- */
.goal--save{--c:var(--green);--ct:var(--green-deep);--cr:rgba(43,99,75,.2)}
.goal--grow{--c:var(--blue);--ct:var(--blue-deep);--cr:rgba(47,86,135,.2)}
.goal--eff{--c:var(--sea);--ct:var(--sea-deep);--cr:rgba(46,90,101,.22)}
.goal--keep{--c:var(--amber);--ct:var(--amber-deep);--cr:rgba(112,76,23,.2)}
.goal--save .goal__mat{background:var(--mat-green);box-shadow:inset 0 0 0 1px rgba(62,142,107,.16),inset 0 1px 0 rgba(255,255,255,.95),0 2px 2px rgba(0,0,0,.03),0 50px 110px -40px rgba(31,74,55,.34)}
.goal--grow .goal__mat{background:var(--mat-blue);box-shadow:inset 0 0 0 1px rgba(74,127,192,.16),inset 0 1px 0 #fff,0 2px 2px rgba(0,0,0,.03),0 50px 110px -40px rgba(34,63,102,.34)}
.goal--eff .goal__mat{background:var(--mat-sea);box-shadow:inset 0 0 0 1.5px rgba(54,108,120,.5),inset 0 1px 0 #fff,inset 0 -40px 80px -40px rgba(68,135,150,.22),0 2px 2px rgba(0,0,0,.03),0 50px 110px -40px rgba(34,68,75,.34)}
.goal--keep .goal__mat{background:var(--mat-amber);box-shadow:inset 0 0 0 1px rgba(186,127,39,.2),inset 0 1px 0 #fff,0 2px 2px rgba(0,0,0,.03),0 50px 110px -40px rgba(85,58,16,.32)}
.goal__idx{color:var(--ct,var(--muted-2))}
.goal__idx::before{background:var(--c,currentColor);opacity:.45}
.goal__idx span:first-child::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--cr);vertical-align:0}
.goal__items{border-top-color:var(--cr,rgba(25,25,25,.16))}
.goal__items li{border-bottom-color:var(--cr,rgba(25,25,25,.16))}
.goal .ring{color:var(--ct);opacity:.9}
.goal .tag{color:var(--ct);opacity:1;box-shadow:inset 0 0 0 1px var(--ct)}
.goal .tag--on,.tag--on{background:rgba(62,142,107,.14);color:var(--green-deep);box-shadow:inset 0 0 0 1px rgba(62,142,107,.18)}
.goal .viz__note,.goal .goal__objcap,.goal .label{color:var(--ct)}
.key__i .ring{color:var(--muted-2)}
.goal__word .gw:last-child>span{color:var(--ct,var(--ink))}
.goal--keep .goal__word .gw:last-child>span{color:#855b1c}

/* object 1 · the invoice fan */
.fan__card{background:radial-gradient(90% 70% at 22% 10%,#ffffff 0%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#ffffff 0%,#f4f9f6 50%,#e6f1eb 100%);box-shadow:inset 0 0 0 1px rgba(62,142,107,.14),inset 0 1px 0 #fff,0 20px 40px -22px rgba(31,74,55,.38)}
.fan__card--1{background:#ffffff}
.fan__ok{display:inline-flex;align-items:center;gap:8px;color:var(--green-deep)}
.fan__ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.fan__days{color:var(--muted-2)}
.goal--save .fan__card--1 .label{color:var(--muted-2)}

/* object 2 · the basket boxes and the free-delivery plane */
.goal--grow .iso__floor{background:linear-gradient(135deg,#ffffff,#dfe8f4);box-shadow:inset 0 0 0 1px rgba(74,127,192,.14),0 0 60px rgba(47,86,135,.1)}
.goal--grow .box__top{background:#f3f7fc;box-shadow:inset 0 0 0 1px rgba(47,86,135,.12)}
.goal--grow .box__front{background:linear-gradient(0deg,#bcd0ea,#dfe9f6);box-shadow:inset 0 0 0 1px rgba(47,86,135,.08)}
.goal--grow .box__side{background:linear-gradient(90deg,#a4bfe3,#8eafdb);box-shadow:inset 0 0 0 1px rgba(47,86,135,.08)}
.goal--grow .box--hi .box__top{background:#6e9ad3}
.goal--grow .box--hi .box__front{background:linear-gradient(0deg,#3a67a0,#4a7fc0)}
.goal--grow .box--hi .box__side{background:linear-gradient(90deg,#2a4e7e,#35609a)}
.goal--grow .iso__plane{background:rgba(74,127,192,.12);box-shadow:inset 0 0 0 1px rgba(58,103,160,.55)}
.goal--grow .iso__plane::after{border-color:rgba(58,103,160,.55)}
.goal--grow .iso__plane span{color:var(--blue-deep)}

/* object 3 · twenty logins fold into one brief */
.fold__brief{box-shadow:inset 0 0 0 1px rgba(68,135,150,.16),inset 0 1px 0 #fff,0 30px 50px -26px rgba(34,68,75,.42)}
.fold__line{background:linear-gradient(90deg,#c7dbe0,#e4edf0)}
.fold__line:nth-of-type(2){background:linear-gradient(90deg,#d0e1e6,#e9f0f3)}

/* object 4 · the order-rhythm dial */
.dial__disc{background:radial-gradient(120% 100% at 30% 20%,#fffdf9 0%,#f6ecdc 50%,#e6d2b0 100%);box-shadow:inset 0 0 0 1px rgba(112,76,23,.12),inset 0 2px 0 #fff,0 30px 40px -20px rgba(85,58,16,.36)}
.dial__edge{background:#d8c19a}
.dial__ticks line{stroke:rgba(112,76,23,.34)}
.dial__ticks line.is-major{stroke:rgba(112,76,23,.7)}
.dial__track{stroke:rgba(112,76,23,.16)}
.dial__gap{stroke:rgba(186,127,39,.72)}
.dial__orders circle{fill:var(--green)}
.dial__orders circle.is-due{fill:#fffdf9;stroke:var(--amber)}
.dial__label .label{color:var(--amber-deep)}

/* ---------- joined up: each system in its own colour ---------- */
.tl__row:nth-child(3){--c:var(--blue);--ct:var(--blue-deep)}
.tl__row:nth-child(4){--c:var(--green);--ct:var(--green-deep)}
.tl__row:nth-child(5){--c:var(--sea);--ct:var(--sea-deep)}
.tl__row:nth-child(6){--c:var(--amber);--ct:var(--amber-deep)}
.tl__name{display:flex;align-items:center;gap:9px;color:var(--ct,var(--muted-2))}
.tl__name::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--c)}
.tl__track::before{background:var(--c,var(--ink));opacity:.85}
.tl__track i{background:var(--c,var(--ink))}
.tl__track i.hollow{background:var(--card);box-shadow:inset 0 0 0 2px var(--c,var(--ink)),0 0 0 3px var(--card)}
.tl__note{color:var(--green-deep)}
.tl__gap{background:repeating-linear-gradient(135deg,rgba(186,127,39,.18) 0 1px,transparent 1px 7px),rgba(186,127,39,.05);box-shadow:inset 0 0 0 1px rgba(186,127,39,.22)}
.tl__gap span{background:var(--amber-100);color:var(--amber-deep);box-shadow:inset 0 0 0 1px rgba(186,127,39,.24)}
.route::before{background:linear-gradient(90deg,var(--blue) 0%,var(--sea) 70%,var(--sea) 100%)}
.route::after{background:repeating-linear-gradient(90deg,var(--amber) 0 6px,transparent 6px 11px)}
.route__st:nth-child(1){--c:var(--blue)}
.route__st:nth-child(2),.route__st:nth-child(3){--c:var(--sea)}
.route__st:nth-child(4){--c:var(--amber)}
.route__dot{box-shadow:inset 0 0 0 2px var(--c,var(--ink)),0 0 0 5px var(--card)}
.route__st:not(.route__st--q) .route__dot::after{background:var(--c,var(--ink))}
.route__st--q .route__dot{box-shadow:inset 0 0 0 1.5px rgba(186,127,39,.45),0 0 0 5px var(--card)}
.merge__src li:nth-child(1){--c:var(--blue);--ct:var(--blue-deep)}
.merge__src li:nth-child(2),.merge__src li:nth-child(3){--c:var(--green);--ct:var(--green-deep)}
.merge__src li{background:linear-gradient(90deg,#ffffff 0%,var(--paper) 100%);box-shadow:inset 3px 0 0 var(--c),inset 0 0 0 1px var(--line-soft)}
.merge__tool{color:var(--ct,var(--muted-2))}
.merge__wires path:nth-child(1){stroke:var(--blue)}
.merge__wires path:nth-child(2),.merge__wires path:nth-child(3){stroke:var(--green)}
.merge__out{background:radial-gradient(90% 70% at 22% 10%,#ffffff 0%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#ffffff 0%,#eef6f2 60%,#e1efe8 100%);box-shadow:inset 0 0 0 1.5px var(--green),var(--shadow)}
.jd--customer .jd__n{background:var(--amber-100);color:var(--amber-deep)}
.jd--order .jd__n{background:var(--blue-100);color:var(--blue-deep)}
.jd--money .jd__n{background:var(--green-100);color:var(--green-deep)}

/* ---------- you stay in charge: green is your yes ---------- */
.charge__side{isolation:isolate}
.charge__side::before{content:"";position:absolute;z-index:-1;left:-18%;right:-18%;top:-16%;height:min(820px,130%);pointer-events:none;background:radial-gradient(closest-side,rgba(164,210,188,.72) 0%,rgba(164,210,188,.62) 20%,rgba(164,210,188,.42) 40%,rgba(164,210,188,.22) 60%,rgba(164,210,188,.08) 80%,rgba(164,210,188,0) 100%)}
.stmt:nth-child(1) .stmt__n{color:var(--green-text)}
.stmt:nth-child(2) .stmt__n{color:var(--blue-text)}
.stmt:nth-child(3) .stmt__n{color:var(--amber-text)}
.yes__key:not(.yes__key--locked){background:linear-gradient(180deg,#a9c9b9,#d4e6dc)}
.yes__key:not(.yes__key--locked) .yes__cap{background:linear-gradient(180deg,#56a483 0%,#3a8565 52%,#2c6b50 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.25),0 7px 0 #1f4f3a,0 12px 20px -6px rgba(31,74,55,.5)}
.yes__key:not(.yes__key--locked).is-down .yes__cap,.yes__key:not(.yes__key--locked):active .yes__cap{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.25),0 1px 0 #1f4f3a,0 3px 6px -2px rgba(31,74,55,.45)}
.yes__key:not(.yes__key--locked) .yes__cap-t{color:#f3fbf7}
.yes__key--locked .yes__cap-t::before{background:var(--amber)}
.yes__rules li:nth-child(1) .yes__rv{color:var(--green-deep)}
.yes__rules li:nth-child(2) .yes__rv{color:var(--blue-deep)}
.yes__rules li:nth-child(3) .yes__rv{color:var(--amber-deep)}
.yes__rules li:nth-child(4) .yes__rv{color:var(--ink)}
.yes__vault{background:linear-gradient(160deg,var(--amber-50),var(--amber-100));box-shadow:inset 0 0 0 1px rgba(186,127,39,.18)}
.yes__lock circle{fill:var(--amber)}
.yes__mail-fly{box-shadow:inset 0 0 0 1.5px var(--green),0 12px 20px -10px rgba(31,74,55,.45)}
.yes__tab[aria-selected="true"]{color:var(--green-deep)}
.yes{background:radial-gradient(90% 70% at 22% 10%,#ffffff 0%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#fbfdfc 0%,#eef6f1 48%,#dcebe3 100%);box-shadow:inset 0 0 0 1px rgba(62,142,107,.12),inset 0 1px 0 #fff,0 2px 2px rgba(0,0,0,.03),0 50px 110px -40px rgba(31,74,55,.32)}
.yes__tabs{background:rgba(43,99,75,.08)}

/* ---------- price: the card glows in all three hues ---------- */
.price__big.silk{background:radial-gradient(66% 62% at 6% 98%,rgba(106,169,140,.52),rgba(106,169,140,.2) 46%,rgba(106,169,140,0) 74%),radial-gradient(56% 54% at 98% 2%,rgba(74,127,192,.38),rgba(74,127,192,.14) 46%,rgba(74,127,192,0) 72%),radial-gradient(52% 50% at 80% 80%,rgba(230,176,97,.46),rgba(230,176,97,.16) 48%,rgba(230,176,97,0) 74%),radial-gradient(90% 70% at 30% 18%,#ffffff 0%,rgba(255,255,255,0) 64%),linear-gradient(160deg,#ffffff 0%,#f5f5f3 46%,#ecece9 100%)}
.price .sec__top .pill--line{background:var(--amber-100);color:var(--amber-deep);box-shadow:inset 0 0 0 1px rgba(186,127,39,.24)}
.info{background:linear-gradient(180deg,#f7f7f5 0%,#eeefeb 100%);box-shadow:inset 0 0 0 1px var(--line-soft)}
.info__list li::before{border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(62,142,107,.16)}

/* ---------- close: a warm, many-coloured finish ---------- */
/* the floating tiles are coloured renders (colour.js swaps them in; content: covers browsers that allow it without JS) */
.float--a{content:url(img/tile-glass-green.png)}
.float--b{content:url(img/tile-glass-amber.png)}
.float--c{content:url(img/tile-glass-blue.png)}
.float--d{content:url(img/tile-glass-sea.png)}
.fold__grid{content:url(img/grid-colour.png)}
.far-w--a .far{content:url(img/tile-glass-green.png)}
.far-w--b .far{content:url(img/tile-glass-amber.png)}
.far-w--c .far{content:url(img/tile-glass-blue.png)}
.close__box{isolation:isolate;background:var(--card)}
.close__box::after{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;will-change:transform;
  background:radial-gradient(34% 40% at 16% 18%,rgba(230,176,97,.38),rgba(230,176,97,0) 70%),radial-gradient(34% 42% at 86% 20%,rgba(74,127,192,.26),rgba(74,127,192,0) 70%),radial-gradient(40% 44% at 80% 84%,rgba(106,169,140,.36),rgba(106,169,140,0) 72%),radial-gradient(32% 36% at 20% 86%,rgba(68,135,150,.2),rgba(68,135,150,0) 72%);
  animation:auraD 48s ease-in-out infinite alternate}
.close__box::before{z-index:0}
.close__box>*{z-index:1}
@keyframes auraD{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(2%,-2%,0) rotate(8deg) scale(1.05)}100%{transform:translate3d(-2%,2%,0) rotate(-6deg) scale(.98)}}
.close__sub{color:var(--muted-2)}
.mail{background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- footer ---------- */
/* 1.6 (Chad): the footer wordmark stays monochrome (style.css silver) */

/* ---------- booking panel ---------- */
.book__card{background:radial-gradient(70% 60% at 0% 0%,rgba(230,176,97,.24),rgba(230,176,97,0) 70%),radial-gradient(70% 60% at 100% 100%,rgba(106,169,140,.26),rgba(106,169,140,0) 70%),radial-gradient(60% 50% at 100% 0%,rgba(74,127,192,.14),rgba(74,127,192,0) 70%),var(--pearl)}
.book__faces i{background:var(--green-100);color:var(--green-deep)}
.book__faces i+i{background:var(--blue-text);color:#fff}

/* ---------- phones ---------- */
@media (max-width:759px){
  .hero::before{left:-60%;top:-12%;width:150vw;height:130vw}
  .hero::after{right:-50%;bottom:-8%;width:150vw;height:140vw}
  .hero__grid::before{right:-60%;top:18%;width:140vw;height:130vw}
  .float--b{display:block;top:auto;bottom:-2%;right:-3%;width:66px}
  .route::before{background:linear-gradient(180deg,var(--blue) 0%,var(--sea) 70%,var(--sea) 100%)}
  .route::after{background:repeating-linear-gradient(180deg,var(--amber) 0 6px,transparent 6px 11px)}
}

/* ---------- reduced motion: the glows hold still ---------- */
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.hero__grid::before,.close__box::after{animation:none}
}
.rm .hero::before,.rm .hero::after,.rm .hero__grid::before,.rm .close__box::after{animation:none}