/* Iteration 6, "Refined flow": only what its new sections need. Everything else comes from Minimal (iter3.css). */

/* The audience line under the workflow heading */
.i6-who, .i6-foot__who { margin: 14px 0 0; font-size: 14px; color: var(--t2); letter-spacing: .02em; }
.i6-who span, .i6-foot__who span { margin-right: 6px; color: var(--t1); font-weight: 500; }
.i6-who b, .i6-foot__who b { font-weight: inherit; white-space: nowrap; }
.i6-who b:not(:last-child)::after, .i6-foot__who b:not(:last-child)::after { content: "·"; margin: 0 4px 0 8px; opacity: .5; } /* each name keeps its dot, so a wrapped line never starts with one */

/* Section heading: centred, like Minimal's voyage heading */
.i6-sec { padding: clamp(88px, 12vh, 120px) 0 clamp(72px, 10vh, 112px); }
.i6-head { display: grid; justify-items: center; gap: 18px; text-align: center; }
.i6-head .i3-h2 { max-width: 15em; }
.i6-head .i3-lead { max-width: 38em; margin: 0; }

/* Ruled cells: a full-width band with rules top and bottom (corner marks on the rails, as in Minimal's grid boxes) and
   the cells inside the rails, divided by 1px rules */
.i6-cells { position: relative; z-index: 2; list-style: none; margin: clamp(40px, 5vw, 56px) 0 0; padding: 0 calc((100% - var(--rail)) / 2); border-block: 1px solid var(--gl); display: grid; }
.i6-cells::before, .i6-cells::after { content: ""; position: absolute; left: 50%; width: calc(var(--rail) + 9px); height: 9px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 0 50% / 9px 1px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 4px 0 / 1px 9px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 100% 50% / 9px 1px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) calc(100% - 4px) 0 / 1px 9px no-repeat; }
.i6-cells::before { top: -5px; }
.i6-cells::after { bottom: -5px; }
.i6-cells > li { min-width: 0; padding: clamp(24px, 3vw, 40px); box-shadow: -1px 0 0 var(--gl), 0 -1px 0 var(--gl); }
.i6-cells .i3-mod__k { justify-content: flex-start; margin-bottom: 14px; }
.i6-cells h3 { margin: 0; font-size: clamp(19px, 1.55vw, 22px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.i6-cells p:not(.i3-mod__k) { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--t2); }
.i6-cells--3 { grid-template-columns: repeat(3, 1fr); }
.i6-cells--6 { grid-template-columns: repeat(6, 1fr); }
.i6-cells--6 > li { padding: clamp(20px, 2vw, 28px) clamp(16px, 1.6vw, 24px); }
.i6-cells--6 h3 { font-size: clamp(16px, 1.2vw, 18px); }
/* Fold 2, Illustration view. Wide screens: one ruled box, the stages listed down the left and the network drawing on the
   right, sized to fit the screen under the heading. Narrower: the drawing, then the stages in a grid of cells. */
.i6-flow { position: relative; z-index: 2; margin-top: clamp(32px, 4vw, 48px); }
.i6-flow .i5-vart { margin: 0 !important; }
.i6-stages { margin-top: 0; border-top: 0; }
.i6-stages::before { display: none; }
@media (min-width: 64rem) {
  .i6-flow { padding: 0 calc((100% - var(--rail)) / 2); border-block: 1px solid var(--gl); display: grid; grid-template-columns: minmax(260px, 32%) 1fr; height: clamp(340px, calc(100svh - 470px), 540px); }
  .i6-flow::before, .i6-flow::after { content: ""; position: absolute; left: 50%; width: calc(var(--rail) + 9px); height: 9px; transform: translateX(-50%); pointer-events: none;
    background: linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 0 50% / 9px 1px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 4px 0 / 1px 9px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 100% 50% / 9px 1px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) calc(100% - 4px) 0 / 1px 9px no-repeat; }
  .i6-flow::before { top: -5px; }
  .i6-flow::after { bottom: -5px; }
  html[data-min] .i6-flow .i5-vart { border: 0 !important; min-width: 0; min-height: 0; width: auto; overflow: hidden; } /* stays inside its column */
  html[data-min] .i6-flow .i5-vart::before, .i6-flow .i5-vart::after { display: none; }
  html[data-min] .i6-flow .i5-vart__in { width: auto; height: 100%; padding: clamp(16px, 2.5vw, 32px); }
  html[data-min] .i6-flow .i5-vart .i3-art, html[data-min] .i6-flow .i5-vart .i3-art > * { width: 100%; max-width: none; height: 100%; min-width: 0; }
  html[data-min] .i6-flow .i5-vart svg { display: block; width: 100%; height: 100%; }
  html[data-min][data-mvoy="art"] .i6-flow .i6-stages { display: flex; flex-direction: column; padding: 0; border: 0; box-shadow: 1px 0 0 var(--gl); }
  .i6-flow .i6-stages::after { display: none; }
  .i6-flow .i6-stages > li { flex: 1; display: flex; align-items: center; gap: 16px; padding: 0 clamp(16px, 2vw, 28px); box-shadow: 0 -1px 0 var(--gl); }
  .i6-flow .i6-stages > li:first-child { box-shadow: none; }
  .i6-flow .i6-stages .i3-mod__k { margin: 0; flex: none; }
}
@media (max-width: 63.99rem) { .i6-flow { display: flex; flex-direction: column; } .i6-flow .i6-stages { order: 2; } } /* drawing first, as in Fold 4 */
@media (max-width: 63.99rem) { .i6-cells--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 47.99rem) {
  .i6-cells--3 { grid-template-columns: 1fr; }
  .i6-cells--6 { grid-template-columns: repeat(2, 1fr); }
  .i6-cells > li { padding: 22px 20px; }
}

/* The stage row belongs to the Illustration view; the Route view shows the stages along the route instead */
.i6-stages { display: none; }
html[data-min][data-mvoy="art"] .i6-stages { display: grid; }

/* Capability drawings: one height for all three, so the headings line up */
.i6-cell__art { height: clamp(120px, min(15vw, calc(100svh - 600px)), 210px); margin: 0 0 20px; }
/* The drawing fits inside its box at any width, keeping its proportions (the box is a plain block, so the 100% heights
   below resolve against it; inside a grid they fell back to the drawing's own height and it spilled into the next cell) */
html[data-min] .i6-cell__art :is(.i3-art, .ia-wrap) { width: 100%; height: 100%; }
html[data-min] .i6-cell__art svg.ia { display: block; width: 100%; height: 100%; overflow: hidden; }

/* Fold 4: one ruled box sized to fit the screen under the heading, so both deployment choices and the server room are
   seen together. Choices stacked on the left, the drawing on the right; on phones the drawing comes first, then the choices. */
.i6-priv { padding-bottom: 0; }
.i6-dep { position: relative; z-index: 2; margin-top: clamp(32px, 4vw, 48px); padding: 0 calc((100% - var(--rail)) / 2); border-block: 1px solid var(--gl);
  display: grid; grid-template-columns: minmax(260px, 32%) 1fr; height: clamp(320px, calc(100svh - 440px), 540px); }
.i6-dep::before, .i6-dep::after { content: ""; position: absolute; left: 50%; width: calc(var(--rail) + 9px); height: 9px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 0 50% / 9px 1px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 4px 0 / 1px 9px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) 100% 50% / 9px 1px no-repeat, linear-gradient(rgba(245, 243, 239, .5), rgba(245, 243, 239, .5)) calc(100% - 4px) 0 / 1px 9px no-repeat; }
.i6-dep::before { top: -5px; }
.i6-dep::after { bottom: -5px; }
.i6-dep__opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: 1fr 1fr; box-shadow: 1px 0 0 var(--gl); }
.i6-dep__opts li { display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 3vw, 40px); }
.i6-dep__opts li + li { box-shadow: 0 -1px 0 var(--gl); }
.i6-dep__opts .i3-mod__k { justify-content: flex-start; margin-bottom: 12px; }
.i6-dep__opts h3 { margin: 0; font-size: clamp(19px, 1.55vw, 22px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.i6-dep__opts p:not(.i3-mod__k) { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--t2); text-wrap: balance; }
.i6-dep__art { margin: 0; min-width: 0; min-height: 0; padding: clamp(16px, 2.5vw, 32px); }
.i6-dep__art > div, .i6-dep__art .i3-art, .i6-dep__art .i3-art > * { width: 100%; height: 100%; }
.i6-dep__art svg { display: block; width: 100%; height: 100%; }
@media (max-width: 63.99rem) {
  .i6-dep { grid-template-columns: 1fr; height: auto; }
  .i6-dep__art { order: -1; height: min(46vw, 340px); box-shadow: 0 1px 0 var(--gl); }
  .i6-dep__opts { grid-template-rows: none; grid-template-columns: 1fr 1fr; box-shadow: none; }
  .i6-dep__opts li + li { box-shadow: -1px 0 0 var(--gl); }
}
@media (max-width: 47.99rem) {
  .i6-dep__opts { grid-template-columns: 1fr; }
  .i6-dep__opts li + li { box-shadow: 0 -1px 0 var(--gl); }
  .i6-dep__art { order: -1; height: min(46vw, 190px); padding: 12px; box-shadow: 0 1px 0 var(--gl); }
  .i6-priv { padding-top: 64px; }
  .i6-priv .i6-head { gap: 14px; }
  .i6-dep__opts li { padding: 18px 20px; }
}

/* Footer: the closing call to action with who it is for, the sections, contact, the port map, the dotted wordmark and the
   legal line, all on Minimal's rails */
.i6-foot { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--gl); padding-top: clamp(72px, 10vh, 112px); } /* same gap as the sections */
.i6-foot::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--rail); transform: translateX(-50%); border-inline: 1px dashed var(--gl); pointer-events: none; z-index: -1; }
.i6-foot__g { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; border-block: 1px solid var(--gl); }
.i6-foot__g > * { min-width: 0; padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px); }
.i6-foot__g > * + * { box-shadow: -1px 0 0 var(--gl); }
.i6-foot__a { display: grid; justify-items: start; align-content: start; gap: 20px; }
.i6-foot__a .i5-foot__logo { width: 180px; }
.i6-foot__a .i3-cta { margin-top: 4px; }
.i6-foot__c { display: grid; align-content: start; gap: 12px; }
.i6-foot__c .i3-mod__k, .i6-foot__map .i3-mod__k { margin: 0 0 4px; }
.i6-foot__c a { color: var(--t1); font-size: 16px; line-height: 1.4; text-decoration: none; width: fit-content; }
.i6-foot__c a:hover { text-decoration: underline; text-underline-offset: 4px; }
.i6-foot__map { display: grid; align-content: start; gap: 12px; }
.i6-foot__map canvas { display: block; width: 100%; aspect-ratio: 240 / 92; }
.i6-foot__word { display: block; width: 100%; height: clamp(80px, 15vw, 250px); margin: clamp(24px, 3vw, 40px) 0; color: rgba(245, 243, 239, .5); }
.i6-foot__legal { padding-inline: clamp(20px, 2.4vw, 32px) !important; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0 calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gl); }
.i6-foot__legal p { margin: 0; text-wrap: balance; font-size: 13px; line-height: 1.5; color: var(--t2); }
.i6-foot__legal img { display: block; width: 76px; height: auto; opacity: .8; transition: opacity .2s; }
.i6-foot__legal a:hover img { opacity: 1; }
.i6-foot a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.i6-foot .i3-mod__k, .i6-foot .i3-btn { font-size: 12px; }
@media (max-width: 63.99rem) { .i6-foot__g { grid-template-columns: 1fr 1fr; } .i6-foot__g > :nth-child(3) { box-shadow: 0 -1px 0 var(--gl); } .i6-foot__g > :nth-child(4) { box-shadow: -1px 0 0 var(--gl), 0 -1px 0 var(--gl); } }
@media (max-width: 29.99rem) { .i6-foot__g { grid-template-columns: 1fr; } .i6-foot__g > * + * { box-shadow: 0 -1px 0 var(--gl); } .i6-foot__g > * { padding-inline: 20px; } }

/* The brief's workflow paragraph is longer than Minimal's one-liner: give it a reading width */
html[data-min] .i6 .i5-voy__s { max-width: 38em; margin-inline: auto; }

/* ---- Typography (checked with scripts/type-audit.cjs) ---- */
/* A sentence in a headline stays on one line where it fits */
.i6 .i6-s { display: inline-block; }
/* Section paragraphs: about 60–65 characters a line */
html[data-min] .i6 .i5-voy__s, .i6-head .i3-lead { max-width: 62ch; }
/* Short blocks end without a one-word last line */
.i6-cells h3, .i6-who, .i6-foot__who { text-wrap: balance; }
.i6-cells p:not(.i3-mod__k) { text-wrap: balance; } /* short descriptions: even lines, no lone last word */
/* Labels (numbers and the button) at the 12px floor */
.i6 .i3-mod__k, .i6 .i3-btn { font-size: 12px; }
/* Portrait tablet: three capability cells side by side are too narrow to read, so each cell is a row: drawing left, text
   right. Landscape tablets keep them side by side, as on desktop. */
@media (min-width: 48rem) and (max-width: 63.99rem) and (orientation: portrait) {
  .i6-cells--3 { grid-template-columns: 1fr; }
  .i6-cells--3 > li { display: grid; grid-template-columns: minmax(200px, 38%) 1fr; column-gap: 32px; align-items: center; }
  .i6-cells--3 .i6-cell__art { grid-row: 1 / span 2; margin: 0; }
  .i6-cells--3 .i3-mod__k { align-self: end; margin-bottom: 8px; }
  .i6-cells--3 h3 { align-self: start; }
}

/* ---- Fold 3: the drawings' accent parts move (set up in iter6.js); paused off screen, still with reduced motion ---- */
/* 1 · reads: the data line flows, the accent bars light up one after another */
.i6-assist [data-live="1"] .ia .flow { stroke: var(--i3a); stroke-width: 1.4; stroke-opacity: 1; stroke-dasharray: 3 7; --p: 10; animation: i6-march 1.1s linear infinite; }
.i6-assist [data-live="1"] .ia .accf { animation: i6-scan 2.8s ease-in-out infinite; animation-delay: calc(var(--k, 0) * .35s); }
/* 2 · advises: the firm offer flows along its arc from the tower to the office; the contract sheet glows */
.i6-assist [data-live="2"] .ia path.acc:not(.f) { stroke-width: 1.4; stroke-dasharray: 6 10; --p: 16; animation: i6-march 1.2s linear infinite; }
.i6-assist [data-live="2"] .ia path.f.acc { animation: i6-breathe 2.6s ease-in-out infinite; }
/* 3 · flags: sand falls down the hourglass, the sand pile breathes, the flag on the missing paper marches and blinks */
.i6-assist [data-live="3"] .ia .glow { stroke-width: 1.6; stroke-dasharray: 2 5; --p: 7; animation: i6-march .7s linear infinite; }
.i6-assist [data-live="3"] .ia path.acc:not(.dash) { animation: i6-breathe 2.4s ease-in-out infinite; }
.i6-assist [data-live="3"] .ia path.acc.dash { stroke-width: 1.4; stroke-dasharray: 5 5; --p: 10; animation: i6-march 1s linear infinite, i6-blink 1.6s ease-in-out infinite; }
/* travelling dots in the accent, solid */
.i6-assist [data-live] .ia circle.dot-m { fill: var(--i3a); }
/* paused while the section is off screen (after the rules above, whose animation shorthand would reset it) */
html .i6-assist:not(.is-live) [data-live] .ia :is(.flow, .accf, .acc, .glow) { animation-play-state: paused; }
@keyframes i6-march { to { stroke-dashoffset: calc(var(--p, 10) * -2); } } /* two whole dash patterns per loop, so it never jumps */
@keyframes i6-scan { 0%, 100% { opacity: .35; } 18%, 40% { opacity: 1; } }
@keyframes i6-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes i6-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .i6-assist [data-live] .ia :is(.flow, .accf, .acc, .glow) { animation: none !important; } }

/* Lock badge on the server room (Iterations 6 and 7): today's badge, sized against the drawing it sits on, so a small
   drawing gets a smaller badge: 9% of the drawing's width, between 22px and today's 40px */
html[data-min] .i6-dep .ia--vault { container-type: inline-size; }
html[data-min] .i6-dep .ia--vault .ia-lock { --d: clamp(22px, 9cqw, 40px); width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); box-shadow: 0 0 0 calc(var(--d) * .15) rgba(var(--i3a-rgb), .14); }
html[data-min] .i6-dep .ia--vault .ia-lock svg { width: calc(var(--d) * .45); height: calc(var(--d) * .45); }