/* ── inner-pages.css — shared building blocks for the feature pages ──────
   (academy, commercial, enquire, iot, oem, partner, providers, residential,
   suppliers, technicians).
   The landing's look carried onto inner pages: a page hero with the glass
   icon and a big rounded photo that a thin "digital line" runs into, then
   point cards, steps, split bands and a navy CTA panel. Tokens: theme.css. */

.p6-hero { position: relative; padding: 128px 0 clamp(56px, 8vh, 96px); overflow-x: clip; }
.p6-hero .s6-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.p6-hero .p6-icon { width: clamp(84px, 7vw, 108px); height: auto; margin: 0 0 14px -8px; filter: drop-shadow(0 18px 24px rgba(0, 57, 108, .14)); }
.p6-hero h1 { font: 700 clamp(36px, 4.2vw, 64px)/1.04 var(--font); letter-spacing: -.025em; color: var(--ink); margin: 0; }
.p6-hero h1 .mut { color: var(--slate); }
.p6-hero .s6-lede { margin-top: 18px; }
.p6-hero .p6-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.p6-hero .p6-media { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lift); }
.p6-hero .p6-media img { width: 100%; height: 100%; object-fit: cover; }
.p6-hero .p6-media .p6-tag { position: absolute; top: 16px; left: 16px; }
/* the digital line into the hero photo (static SVG path; a packet flows along it under fx-motion) */
.p6-line { position: absolute; pointer-events: none; overflow: visible; z-index: 0; }
.p6-line path { fill: none; stroke: var(--line-navy); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p6-line .pk { stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 60 2000; stroke-dashoffset: 60; }
html.fx-motion .p6-line .pk { animation: p6pk 3.2s linear infinite; }
@keyframes p6pk { to { stroke-dashoffset: -1400; } }

.p6-tag { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 6px 9px; border-radius: 7px; background: #FDE9C7; color: #7A4F08; }
.p6-tag.live { background: #DDF3E6; color: #17663A; } .p6-tag.preview { background: #DDE9F6; color: #1D4F80; }

.p6-sec { padding: clamp(64px, 9vh, 120px) 0; }
.p6-sec.tight { padding-top: 0; }
.p6-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vh, 44px); }
.p6-head .s6-lede { margin-top: 10px; }

/* point cards */
.p6-points { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; }
.p6-point { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.p6-point:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: transparent; }
.p6-point .ib { width: 46px; height: 46px; border-radius: 13px; background: #EAF1F8; display: grid; place-items: center; }
.p6-point .ib .i2 { width: 24px; height: 24px; color: var(--navy); --acc: var(--gold); }
.p6-point h3 { font: 700 18px/1.25 var(--font); color: var(--ink); margin: 0; }
.p6-point p { margin: 0; font: 500 14.5px/1.55 var(--font); color: var(--muted); }

/* numbered steps */
.p6-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; counter-reset: p6; }
.p6-step { position: relative; padding: 22px 20px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.p6-step::before { counter-increment: p6; content: counter(p6, decimal-leading-zero); display: block; font: 600 13px/1 var(--mono); color: var(--gold-ink); margin-bottom: 16px; letter-spacing: .1em; }
.p6-step b { display: block; font: 700 16.5px/1.3 var(--font); color: var(--ink); } .p6-step span { display: block; margin-top: 6px; font: 500 14px/1.5 var(--font); color: var(--muted); }

/* split band: photo + text */
.p6-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.p6-split.flip > .p6-split-media { order: 2; }
.p6-split-media { border-radius: 26px; overflow: hidden; aspect-ratio: 3 / 2; } .p6-split-media img { width: 100%; height: 100%; object-fit: cover; }
.p6-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.p6-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font: 600 15px/1.5 var(--font); color: var(--text); }
.p6-list li .i2 { width: 20px; height: 20px; color: #17803F; margin-top: 2px; }

/* navy CTA panel */
.p6-cta { border-radius: var(--r-panel); background: radial-gradient(70% 90% at 90% 20%, rgba(26, 90, 150, .6), transparent 70%), var(--navy); color: #D5E1EE; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 28px; align-items: center; }
.p6-cta h2 { color: #fff; } .p6-cta .s6-lede { color: #A9BDD1; margin-top: 10px; }
.p6-cta .p6-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1100px) { .p6-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p6-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .p6-hero { padding-top: 104px; } .p6-hero .s6-wrap, .p6-split, .p6-cta { grid-template-columns: minmax(0, 1fr); }
  .p6-split.flip > .p6-split-media { order: 0; }
}
@media (max-width: 600px) { .p6-points, .p6-steps { grid-template-columns: minmax(0, 1fr); } }

/* ── owner's inputs, 2026-09-28, on the seven feature pages ──────────────────────────────────
   Each page wears its feature's colour (body[data-f] → --c, --cd, --ct from theme.css), its column is
   narrower, and every plain section (no background of its own) alternates a tinted band (.f-band, set by
   assets/js/site.js), so each section reads as its own block. Icons are the new glass icons (.gi). */
body[data-f] { --s6-max: 1180px; }
body[data-f] .s6-eyebrow { color: var(--cd); } body[data-f] .s6-eyebrow::before { background: var(--c); }
body[data-f] .s6-eyebrow.on-dark, body[data-f] .s6-dark .s6-eyebrow { color: var(--c2); }
body[data-f] .p6-point .ib { background: var(--ct); } body[data-f] .p6-point .ib .i2 { color: var(--cd); --acc: var(--c); }
body[data-f] .p6-point:hover { border-color: color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 22px 40px -28px color-mix(in srgb, var(--c) 65%, transparent); }
body[data-f] .p6-step { border-top: 3px solid var(--c); } body[data-f] .p6-step::before { color: var(--cd); }
body[data-f] .p6-list li .i2 { color: var(--cd); }
body[data-f] .p6-line .pk { stroke: var(--c); }
body[data-f] .p6-hero { background: radial-gradient(55% 70% at 88% 28%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%); }
body[data-f] .p6-hero .p6-media { box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--c) 75%, transparent); }
body[data-f] .p6-cta { background: radial-gradient(70% 90% at 90% 20%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%), var(--navy); }
.f-band { background: linear-gradient(180deg, color-mix(in srgb, var(--ct) 55%, var(--page)), var(--ct) 22%, var(--ct) 78%, color-mix(in srgb, var(--ct) 55%, var(--page)));
  border-block: 1px solid color-mix(in srgb, var(--c) 14%, transparent); }
/* the glass icons in the pages' own slots */
.gi-wrap { display: inline-block; flex: none; line-height: 0; }
.p6-hero .p6-icon.gi-wrap { width: auto; height: auto; filter: none; margin: 0 0 18px 0; }
.p6-hero .p6-icon > .gi { --s: clamp(70px, 6vw, 92px); }
.tp-way .gi-wrap { margin: 0 0 14px 0; filter: none; } .tp-way .gi-wrap > .gi { --s: 62px; }
@media (max-width: 760px) { .p6-hero .p6-icon > .gi { --s: 64px; } }
/* IoT & AI: its own theme, a slowly moving gradient behind the hero and on its accents */
body[data-f="iot"] .p6-hero { isolation: isolate; }
body[data-f="iot"] .p6-hero::before { content: ""; position: absolute; inset: -10% -5% 0; z-index: -1; pointer-events: none; opacity: .5;
  background: radial-gradient(28% 36% at 70% 26%, rgba(255, 212, 135, .5), transparent 70%), radial-gradient(30% 38% at 88% 58%, rgba(186, 206, 223, .7), transparent 70%), radial-gradient(26% 32% at 58% 76%, rgba(247, 183, 68, .32), transparent 70%);
  animation: iot-page-drift 18s ease-in-out infinite alternate; }
@keyframes iot-page-drift { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-4%, 3%) rotate(6deg); } 100% { transform: translate(3%, -3%) rotate(-5deg); } }
html.fx-calm body[data-f="iot"] .p6-hero::before { animation: none; }   /* calm (app/fx.js): the glow holds still */
body[data-f="iot"] .p6-hero h1 .mut { background: linear-gradient(90deg, #00396C, #0A5A9E 50%, #B7700C); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-f="iot"] .f-band { background: linear-gradient(120deg, rgba(255, 212, 135, .14), rgba(186, 206, 223, .22) 50%, rgba(247, 183, 68, .1)); }