/* Iteration 7's own Options rows (hero, line art, stages, audience) */
.opt__r--7 { display: none; }
html[data-min][data-r7] .opt .opt__r.opt__r--7 { display: flex; }

/* Iteration 7, "Revisited": only what differs from Minimal (iter3.css) and Refined flow (iter6.css). */

/* Floating bar: the one call to action, always in view; its button at the 12px label floor */
.i7-bar .i3-btn { font-size: 12px; }
/* Who it is for: the four names in one line under the workflow headline, divided by a small accent dot or square
   (Options > Audience). Each name keeps its divider with it, so a wrapped line never starts with one. */
.i7-aud { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
.i7-aud li { display: inline-flex; align-items: center; font-size: 13px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--t2); white-space: nowrap; }
.i7-aud li + li::before { content: ""; flex: none; width: 5px; height: 5px; margin: 0 14px; border-radius: 50%; background: var(--i3a); }
html[data-aud="square"] .i7-aud li + li::before { border-radius: 0; width: 5px; height: 5px; }
.i7-aud .i7-aud__br { display: none; }
.i7-aud .i7-aud__br + li::before { display: block; } /* the divider between the two pairs, when they share a line */
@media (max-width: 34.99rem) { .i7-aud .i7-aud__br { display: block; flex-basis: 100%; height: 0; } .i7-aud .i7-aud__br::before, .i7-aud .i7-aud__br + li::before { display: none; } }
html[data-min] .i7 .i6-flow .i6-stages > li h3 { margin: 0; }
/* Assistance cells: drawing, then a heading and one line */
.i7 .i7-caps p:not(.i3-mod__k) { margin: 8px 0 0; max-width: none; text-wrap: balance; } /* full width, so the three break (or not) alike; balanced when they do */
/* Deployment: four ways to deploy beside the server room (wide), or in a two-by-two grid under it (narrower) */
.i7 .i7-dep .i6-dep__opts { grid-template-rows: repeat(4, 1fr); }
.i7 .i7-dep .i6-dep__opts li { padding: 0 clamp(20px, 2.4vw, 32px); }
.i7 .i7-dep .i6-dep__opts h3 { font-size: clamp(18px, 1.4vw, 21px); }
.i7 .i7-dep .i6-dep__opts p { margin-top: 4px; font-size: 15px; }
@media (max-width: 63.99rem) {
  .i7 .i7-dep .i6-dep__opts { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .i7 .i7-dep .i6-dep__opts li { padding: 16px 18px; box-shadow: none; }
  .i7 .i7-dep .i6-dep__opts li:nth-child(2) { box-shadow: -1px 0 0 var(--gl); }
  .i7 .i7-dep .i6-dep__opts li:nth-child(3) { box-shadow: 0 -1px 0 var(--gl); }
  .i7 .i7-dep .i6-dep__opts li:nth-child(4) { box-shadow: -1px 0 0 var(--gl), 0 -1px 0 var(--gl); }
}
@media (max-width: 47.99rem) { .i7 .i7-dep .i6-dep__opts { grid-template-columns: 1fr 1fr; } .i7 .i7-dep .i6-dep__opts h3 { font-size: 17px; } .i7 .i7-dep .i6-dep__opts p { font-size: 14px; } }

/* ---- Fit and spacing (heights measured in iter7.js) ---- */
/* Every fold ends with the same gap: the floating bar's zone, so folds are evenly spaced and nothing sits under the bar */
.i7 { --i7-barz: 140px; }
.i7 .i6-sec, .i7 .i6-priv { padding-bottom: var(--i7-barz); }
html[data-min][data-mvoy="art"] .i7 .i3-voy__stick { padding-bottom: var(--i7-barz); }
.i7 .i6-head { gap: 14px; }
/* Phones: tighter tops; the three assistance cells become compact rows, drawing left and text right */
/* Tablets: the three assistance cells stack as rows (drawing left), so drawing heights are shared between them; in rows
   the heading sits above its line, both beside the drawing */
@media (min-width: 48rem) and (max-width: 63.99rem) and (orientation: portrait) { .i7 .i6-cells--3 h3 { align-self: end; } .i7 .i6-cells--3 p { align-self: start; margin-top: 6px; } }
@media (max-width: 63.99rem) { .i7 .i6-cells--3 .i6-cell__art { max-height: none; } }
@media (max-width: 47.99rem) {
  .i7 .i6-sec, html[data-min][data-mvoy="art"] .i7 .i3-voy__stick { padding-top: 64px; }
  /* assistance: the three cards stack, each drawing the card's full width (no sideways scrolling: it caught the page's
     own scroll gestures). On phones this fold runs a little past one screen so the drawings stay readable. */
  .i7 .i7-caps { grid-template-columns: 1fr; }
  .i7 .i7-caps > li { padding: 18px 20px 20px; }
  .i7 .i7-caps .i6-cell__art { margin: 0 0 12px; }
  .i7 .i7-caps h3 { font-size: 18px; }
  .i7 .i7-caps p { margin-top: 6px; font-size: 15px; }
  /* stages: number inline with the name, so each is one short row */
  html[data-min] .i7 .i6-cells--6 { grid-template-columns: 1fr 1fr; } /* stages 01-06 as three rows of two */
  .i7 .i6-cells--6 > li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; }
  .i7 .i6-cells--6 .i3-mod__k { margin: 0; flex: none; } /* the number above the name, so every name fits on one line */
  .i7 .i6-cells--6 h3 { font-size: 15px; }
}
/* Short phones (iPhone SE and similar): tighter tops so each fold still ends above the bar */
@media (max-width: 47.99rem) and (max-height: 700px) {
  .i7 .i6-sec, html[data-min][data-mvoy="art"] .i7 .i3-voy__stick { padding-top: 28px; }
  .i7 .i7-aud { margin-top: 12px; }
}

/* Hero headline: always two lines, broken at the comma, never more. Its size is set so the longer line
   ("PURPOSE-BUILT FOR THE BEST") fits the rails, and so it stays calm on tall, short and wide screens. */
html[data-min] .i7 .i3-hero__t .i3-h1 { max-width: none; font-size: max(20px, min(68px, calc(var(--rail) / 13.5), 8.6vh)); line-height: 1.04; }
/* the headline always leads: never under 20px, and the supporting line steps down on phones so the headline stays at
   least about 1.35 times its size (measured: the longer line is 13.2 headline-heights wide) */
@media (max-width: 47.99rem) { html[data-min] .i7 .i3-hero .i3-lead { font-size: 15px; } }
/* hero logo: scales gently with the width (about 160px on a small phone to 275px on a wide screen); the framed logo
   shares its box, so it scales with it */
html[data-min] .i7 .i5-hero__logo { width: clamp(150px, 128px + 9vw, 275px); }
.i7 .i7-l { display: block; white-space: nowrap; }

/* ---- Assistance drawings (i2art/caps7.js): the accent parts move; paused off screen, still with reduced motion ---- */
.i6-assist [data-live="eco"] .ia .flow, .i6-assist [data-live="tenx"] .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="eco"] .ia path.acc.dash { animation: i6-breathe 2.6s ease-in-out infinite; }
.i6-assist [data-live="flag"] .ia .i7-row { animation: i6-blink 1.6s ease-in-out infinite; }
/* the flag is the one red on the page, solid, because it marks something critical; the flagged row is red to match */
html[data-min] .i3-art .ia .i7-alert { fill: #ff3b30; stroke: #ff3b30; }
html[data-min] .i3-art .ia .i7-alert-row { fill: rgba(255, 59, 48, .22); stroke: #ff3b30; }
.i6-assist [data-live="flag"] .ia .i7-flag { animation: i7-wave 2.4s ease-in-out infinite; }
@keyframes i7-wave { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
.i6-assist [data-live="flag"] .ia .i7-date { stroke-width: 1.6; animation: i6-blink 1.6s ease-in-out .5s infinite; }
.i6-assist [data-live="tenx"] .ia .i7-ten { animation: i7-climb 2.6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * .26s); } /* each tile lights as its own lane lands a job */
@keyframes i7-climb { 0%, 100% { opacity: .25; } 25%, 70% { opacity: 1; } }
html .i6-assist:not(.is-live) [data-live] .ia :is(.flow, .accf, .acc, .i7-row, .i7-flag, .i7-date, .i7-ten) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .i6-assist [data-live] .ia :is(.flow, .accf, .acc, .i7-row, .i7-flag, .i7-date, .i7-ten) { animation: none !important; } }

/* ---- Workflow > Stages > Timeline: Minimal's scroll timeline in place of the list. A ship sails down a line as the page
   scrolls, the line behind it fills in the accent, and each stage it reaches lights up (iter3.js drives it). ---- */
html[data-min][data-mvoy="art"][data-stg="line"] .i7 .i7-flow .i6-stages { display: none; }
html[data-min][data-mvoy="art"][data-stg="line"] .i7 .i7-flow .i5-vlist { display: block; position: relative; width: auto; margin: 0; border: 0; padding: 4px 0; box-shadow: 1px 0 0 var(--gl); }
html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist::before, html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist::after { display: none; }
html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist ol { list-style: none; margin: 0; padding: 0; }
html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist li { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 12px 20px 12px 56px; }
html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist li .i3-mod__k { margin: 0; color: var(--t2); }
html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist li h3 { margin: 0; font-size: clamp(16px, 1.2vw, 18px); font-weight: 600; line-height: 1.25; color: var(--t2); transition: color .3s; }
html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist li.on h3 { color: var(--t1); }
html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist li.on .i3-mod__k span { color: var(--i3a); }
html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist__end { position: relative; margin: 0; padding: 10px 20px 10px 56px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); }
html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist__node { position: absolute; left: 28px; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 1px solid rgba(var(--rgb), .5); background: var(--i3d); z-index: 2; transition: background .3s, border-color .3s; }
html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist li.on .i5-vlist__node { background: var(--i3a); border-color: var(--i3a); }
html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist__track { position: absolute; left: 28px; top: 18px; bottom: 18px; width: 0; border-left: 1px dashed rgba(var(--rgb), .3); z-index: 1; }
html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist__done { position: absolute; left: -1px; top: 0; width: 1.5px; height: 0; background: var(--i3a); }
html[data-min][data-stg="line"] .i7 .i7-flow .i5-vship { position: absolute; left: 0; top: 0; width: 18px; height: auto; transform: translate(-50%, -14px); z-index: 3; overflow: visible; }
@media (min-width: 64rem) { html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist { display: flex; flex-direction: column; justify-content: center; } }
@media (max-width: 63.99rem) { html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist { order: 2; box-shadow: 0 -1px 0 var(--gl); } }

/* ---- Line art > Simple: flat faces (no dotted texture) and no faint detail lines, on every drawing on the page (hero,
   vessel, workflow, assistance, the server room), so the drawings read at a glance with less visual noise ---- */
html[data-min][data-lart="simple"] .i7 .i3-art .ia .tex { fill: var(--bg) !important; }
html[data-min][data-lart="simple"] .i7 .i3-art .ia .l3:not(.dot) { display: none; }
html[data-min][data-lart="simple"] .i7 .i3-art .ia .l3.dot { stroke: rgba(var(--rgb), .16); }
html[data-min][data-lart="simple"] .i7 .i3-art .ia .l2 { stroke: rgba(var(--rgb), .38); }

/* ---- Hero experiments (Options > Hero). Line art: the terminal (today). Vessel: one simple ship in the same box.
   Text only: no drawing, the words centred in the first screen. Photo: the ship photograph fills the first screen and
   the second section (the same photograph) goes. ---- */
.i7-halt, .i7-hphoto { display: none; }
html[data-hero="ship"] .i7 .i3-hero__art { visibility: hidden; }
html[data-hero="ship"] .i7 .i7-halt { display: block; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.i7-halt__in { width: var(--rail); height: 100%; margin: 0 auto; padding: clamp(14px, 2.4vh, 28px) clamp(16px, 3vw, 48px); }
.i7-halt__in .i3-art, .i7-halt__in .ia-wrap { width: 100%; height: 100%; }
.i7-halt__in svg { display: block; width: 100%; height: 100%; }
html[data-hero="text"] .i7 :is(.i3-hero__art, .i5-frame), html[data-hero="photo"] .i7 :is(.i3-hero__art, .i5-frame) { display: none; }
html[data-min][data-hero="text"] .i7 .i3-hero { justify-content: center; padding-top: 0; padding-bottom: var(--i7-barz); }
html[data-min][data-hero="photo"] .i7 .i3-hero { justify-content: flex-start; }
html[data-hero="photo"] .i7 .i7-hphoto { display: block; position: absolute; inset: 38% 0 0; z-index: 0; margin: 0; } /* the photograph starts under the words */
.i7-hphoto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: grayscale(1) contrast(1.08) brightness(.82); }
.i7-hphoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--i3d-rgb), 1) 0%, rgba(var(--i3d-rgb), 0) 28%, rgba(var(--i3d-rgb), 0) 82%, rgba(var(--i3d-rgb), .9) 100%); } /* fades in from the dark above, so the words never sit on the photograph */
html[data-hero="photo"] .i7 .i3-band { display: none; }
html[data-hero="photo"] .i7 .i3-hero + * { border-top: 1px solid var(--gl); }
@media (max-width: 47.99rem) { .i7-hphoto img { object-position: 30% 80%; } }
/* short laptop screens: the timeline's rows tighten so the fold still ends above the bar */
@media (min-width: 64rem) and (max-height: 800px) {
  html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist li { padding-block: 8px; }
  html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist__end { padding-block: 6px; }
}
@media (min-width: 64rem) and (max-height: 740px) {
  html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist li { padding-block: 5px; }
  html[data-min][data-stg="line"] .i7 .i7-flow .i5-vlist__end { padding-block: 3px; }
}

/* ---- Hero photographs (Options > Hero: Photo or Framed, mono or colour; Options > Photo: which picture). iter7.js sizes
   and places the picture in its box so the ship sits clear of the words and the floating bar. ---- */
.i7-hsea { display: none; margin: 0; pointer-events: none; overflow: hidden; }
.i7-hsea img { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-ptone="mono"] .i7-hsea img { filter: grayscale(1) contrast(1.06) brightness(.92); }
.i7 .i7-hsea.is-floating::before { content: ""; position: absolute; inset: -80px; background: var(--bgpic) center top / 100% 1400% no-repeat; filter: blur(36px) brightness(.96) saturate(.95); }
html[data-ptone="mono"] .i7 .i7-hsea.is-floating::before { filter: blur(36px) brightness(.96) grayscale(1); }
html[data-hero="sea"] .i7 :is(.i3-hero__art, .i5-frame) { display: none; }
html[data-min][data-hero="sea"] .i7 .i3-hero { justify-content: flex-start; }
html[data-hero="sea"] .i7 .i7-hsea { display: block; position: absolute; inset: 0; z-index: 0; }
/* a graduated shade over the sky down to the words (where they end is set by iter7.js), darker for the brighter pictures
   so the words always read, and a little dark at the foot to meet the next section */
.i7 { --hs: .28; --hr: .22; }
html[data-hpic="golden"] .i7 { --hs: .48; --hr: .6; }
html[data-hpic="coast"] .i7 { --hs: .5; --hr: .76; }
html[data-hpic="topdown"] .i7 { --hs: .18; --hr: .3; }
html[data-hero="sea"] .i7 .i7-hsea::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(var(--wrx, 40%) var(--wry, 20%) at 50% var(--wc, 30%), rgba(var(--i3d-rgb), var(--hr, 0)) 0%, rgba(var(--i3d-rgb), calc(var(--hr, 0) * .85)) 30%, rgba(var(--i3d-rgb), calc(var(--hr, 0) * .5)) 62%, rgba(var(--i3d-rgb), calc(var(--hr, 0) * .18)) 85%, rgba(var(--i3d-rgb), 0) 100%),
  linear-gradient(180deg, rgba(var(--i3d-rgb), var(--hs)) 0%, rgba(var(--i3d-rgb), calc(var(--hs) * .78)) calc(var(--wb, 45%) - 30px), rgba(var(--i3d-rgb), 0) calc(var(--wb, 45%) + 18%)),
  linear-gradient(180deg, rgba(var(--i3d-rgb), 0) 84%, rgba(var(--i3d-rgb), .85) 100%); } /* a graduated shade: no edge, like a graduated filter */
@media (max-width: 47.99rem) { /* phones: the picture starts under the words, so the shade clears right there, with no band between */
  html[data-hero="sea"] .i7 .i7-hsea::after { background:
    radial-gradient(var(--wrx, 40%) var(--wry, 20%) at 50% var(--wc, 30%), rgba(var(--i3d-rgb), calc(var(--hr, 0) * 1.25 + .1)) 0%, rgba(var(--i3d-rgb), calc(var(--hr, 0) * .8 + .06)) 50%, rgba(var(--i3d-rgb), 0) 100%),
    linear-gradient(180deg, rgba(var(--i3d-rgb), var(--hs)) 0%, rgba(var(--i3d-rgb), calc(var(--hs) * .78)) calc(var(--wb, 45%) - 40px), rgba(var(--i3d-rgb), 0) calc(var(--wb, 45%) + 10px)),
    linear-gradient(180deg, rgba(var(--i3d-rgb), 0) 84%, rgba(var(--i3d-rgb), .85) 100%); }
}
html[data-hero="sea"] .i7 .i3-hero :is(.i3-h1, .i3-lead) { text-shadow: 0 1px 24px rgba(var(--i3d-rgb), .45); }
html[data-hero="sea"] .i7 .i3-hero .i3-lead { color: rgba(245, 243, 239, .84); }
/* Text backdrop (Options): how the words stay readable over the photograph, kept subtle. No pool of dark around the
   words and no glow on the letters. --v is each photo's strength (brighter skies need more).
   Veil: one even shade, full width, from the top down to the words, clearing just below them.
   Tint: the same shape, but it multiplies a deep blue into the sky, so the sky deepens in its own colour (a grade, not grey).
   Frost: a faint frosted band behind the words, full width, that softens and dims the sky there and fades out above and below.
   Crisp: a light veil, and a tight shadow on the letters only, like captions on film. */
/* --vb: each photo's full strength; --sk: the Shade slider in Options (0 to 1), which scales every treatment */
html[data-tbg] .i7 { --vb: .44; --v: calc(var(--vb) * var(--sk, .25)); }
html[data-tbg][data-hpic="golden"] .i7 { --vb: .7; }
html[data-tbg][data-hpic="coast"] .i7 { --vb: .74; }
@media (max-width: 47.99rem) and (max-height: 700px) { html[data-tbg][data-hpic="coast"] .i7 { --vb: .86; } }
html[data-tbg][data-hpic="topdown"] .i7 { --vb: .36; }
html[data-tbg="frost"] .i7 { --v2: calc(var(--v) * .8); }
html[data-hero="sea"][data-tbg] .i7 .i3-hero :is(.i3-h1, .i3-lead) { text-shadow: none; }
html[data-hero="sea"][data-tbg] .i7 .i3-hero .i3-lead { color: #f5f3ef; } /* solid, so a lighter shade still reads */
html[data-hero="sea"][data-tbg] .i7 .i7-hsea::after { background:
  linear-gradient(180deg, rgba(var(--i3d-rgb), var(--v2, var(--v))) 0%, rgba(var(--i3d-rgb), calc(var(--v2, var(--v)) * .9)) calc(var(--wb, 45%) - 20px), rgba(var(--i3d-rgb), 0) calc(var(--wb, 45%) + 16%)),
  linear-gradient(180deg, rgba(var(--i3d-rgb), 0) 84%, rgba(var(--i3d-rgb), .85) 100%); }
html[data-hero="sea"][data-tbg="tint"] .i7 .i7-hsea::after { background:
  linear-gradient(180deg, rgba(14, 26, 54, calc(var(--v) * 1.1)) 0%, rgba(14, 26, 54, calc(var(--v) * 1)) calc(var(--wb, 45%) - 20px), rgba(14, 26, 54, 0) calc(var(--wb, 45%) + 16%)),
  linear-gradient(180deg, rgba(var(--i3d-rgb), 0) 84%, rgba(var(--i3d-rgb), .85) 100%); mix-blend-mode: multiply; }
html[data-hero="sea"][data-tbg="frost"] .i7 .i3-hero__t { position: relative; z-index: 1; }
html[data-hero="sea"][data-tbg="frost"] .i7 .i3-hero__t::before { content: ""; position: absolute; z-index: -1; top: -48px; bottom: -48px; left: 50%; width: 100vw; transform: translateX(-50%);
  -webkit-backdrop-filter: blur(calc(18px * var(--sk, .25))) brightness(calc(1 - .34 * var(--sk, .25))); backdrop-filter: blur(calc(18px * var(--sk, .25))) brightness(calc(1 - .34 * var(--sk, .25)));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%); }
.opt [data-shade] { width: 9rem; accent-color: var(--i3a, #0051ff); vertical-align: middle; }
.opt [data-shade-out] { display: inline-block; min-width: 3.5ch; margin-left: 6px; font-variant-numeric: tabular-nums; }
html[data-hero="sea"][data-tbg="crisp"] .i7 .i3-hero .i3-h1 { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
html[data-hero="sea"][data-tbg="crisp"] .i7 .i3-hero .i3-lead { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .4); }
@media (max-width: 47.99rem) { /* phones: the picture starts under the words, so every treatment clears right there */
  html[data-hero="sea"][data-tbg]:not([data-tbg="tint"]) .i7 .i7-hsea::after { background:
    linear-gradient(180deg, rgba(var(--i3d-rgb), calc(var(--v2, var(--v)) * 1.3)) 0%, rgba(var(--i3d-rgb), calc(var(--v2, var(--v)) * 1.25)) calc(var(--wb, 45%) - 30px), rgba(var(--i3d-rgb), 0) calc(var(--wb, 45%) + 16px)),
    linear-gradient(180deg, rgba(var(--i3d-rgb), 0) 84%, rgba(var(--i3d-rgb), .85) 100%); }
  html[data-hero="sea"][data-tbg="tint"] .i7 .i7-hsea::after { background:
    linear-gradient(180deg, rgba(14, 26, 54, calc(var(--v) * .7)) 0%, rgba(14, 26, 54, calc(var(--v) * .6)) calc(var(--wb, 45%) - 30px), rgba(14, 26, 54, 0) calc(var(--wb, 45%) + 16px)),
    linear-gradient(180deg, rgba(var(--i3d-rgb), 0) 84%, rgba(var(--i3d-rgb), .85) 100%); }
}
 /* the supporting line a step brighter over a photograph */
/* a picture that floats (it cannot cover its box without hiding the ship) fades into the dark at its edges */
/* a picture that spans the width (phones) fades in from the dark above and out at the foot, gently */
.i7 .i7-hsea img.is-floatv { -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 4%, rgba(0,0,0,.8) 9%, #000 15%, #000 84%, rgba(0,0,0,.6) 92%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 4%, rgba(0,0,0,.8) 9%, #000 15%, #000 84%, rgba(0,0,0,.6) 92%, transparent 100%); }
.i7 .i7-hsea img.is-float { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-composite: intersect; }
html[data-hero="seabox"] .i7 .i3-hero__art { visibility: hidden; }
html[data-hero="seabox"] .i7 .i7-hsea { display: block; position: absolute; left: 50%; width: var(--rail); transform: translateX(-50%); z-index: 1; }

/* ---- Hero text (Options): a = "Maritime AI, purpose-built for the best" over the long line; b = "Pinpoint precision, in the
   blink of an eye" over a subline that carries "Maritime AI, purpose-built for the best" ---- */
.i7 .i7-tb { display: none; }
html[data-htxt="b"] .i7 .i7-ta { display: none; }
html[data-htxt="b"] .i7 .i7-tb { display: inline; }

/* ---- Audience: "For" before the four names ---- */
.i7-aud .i7-aud__for { margin-right: 12px; } /* plain, no box (owner, 8 Nov) */
/* hierarchy: the four audiences read in white, "For" stays a quieter grey lead-in */
.i7-aud li:not(.i7-aud__for) { color: var(--t1); }
.i7-aud .i7-aud__br0 + li::before { display: none; } /* no divider between the tag and the first name */
@media (max-width: 34.99rem) { .i7-aud .i7-aud__for { margin: 0 0 4px; } } /* phones: the tag on its own line, the names in two pairs below */

/* ---- Photo band (Options): the second section, the ship photograph under "Experts decide", is off by default; the hero
   photographs make it redundant ---- */
html[data-band="off"] .i7 .i3-band { display: none; }
html[data-band="off"] .i7 .i3-hero + * { border-top: 1px solid var(--gl); }

/* ---- Framed photo hero: the box's ruled lines and the page rails sit above the photograph ---- */
html[data-hero="seabox"] .i7 .i7-hsea { z-index: 0; }
html[data-hero="seabox"] .i7 .i5-frame { z-index: 2; }

/* ---- Options panel on Iteration 7: groups side by side, wrapping, so it takes less of the screen ---- */
html[data-r7] .opt__p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; max-width: min(980px, calc(100vw - 24px)); padding: 8px 10px; }
html[data-r7] .opt__p[hidden] { display: none; } /* the row layout above must not keep a closed panel on screen */
html[data-r7] .opt__p .opt__r { gap: 2px; }
/* a thin divider before each group, so the groups read apart; the first group in each wrapped line has none */
html[data-r7] .opt__p { column-gap: 0; }
html[data-r7] .opt__p .opt__r { position: relative; padding: 0 12px; }
html[data-r7] .opt__p .opt__r::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(255, 255, 255, .16); }
html[data-r7] .opt__r > span:first-child { width: auto; padding: 0 4px 0 2px; }
html[data-r7] .opt__p .opt__r.opt__r--first::before { display: none; }

/* ---- Workflow and deployment take turns (iter7.js): the current row is white with black text ---- */
.i7 :is(.i6-stages, .i6-dep__opts) > li { cursor: pointer; transition: background-color .35s ease; }
.i7 :is(.i6-stages, .i6-dep__opts) > li :is(h3, p, .i3-mod__k, .i3-mod__k span) { transition: color .35s ease; }
.i7 :is(.i6-stages, .i6-dep__opts) > li.is-sel { background: #f5f3ef; }
.i7 :is(.i6-stages, .i6-dep__opts) > li.is-sel :is(h3, .i3-mod__k, .i3-mod__k span) { color: #0a0a0a; }
.i7 .i6-dep__opts > li.is-sel p { color: rgba(10, 10, 10, .7); }
.i7 :is(.i6-stages, .i6-dep__opts) > li:focus-visible { outline: 2px solid var(--i3a); outline-offset: -2px; }
/* the buildings a stage involves light up; the rest sit at 30% (the core is always lit) */
/* Workflow: one drawing per stage, stacked in the buildings drawing's box; the current stage's drawing fades in. Operations
   (05) is the buildings drawing itself, every building lit */
.i7 .i7-flow .i5-vart__in { position: relative; }
.i7 .i7-flow .i5-vart__in > .i3-art { transition: opacity .5s ease; }
.i7 .i7-flow[data-active]:not([data-active="4"]) .i5-vart__in > .i3-art { opacity: 0; }
.i7 .i7-sarts { position: absolute; inset: 0; pointer-events: none; }
.i7 .i7-sart { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.i7 .i7-sart.is-on { opacity: 1; }
.i7 .i7-sart :is(.i3-art, .ia-wrap) { width: 100%; height: 100%; }
.i7 .i7-sart svg { display: block; width: 100%; height: 100%; }
/* Estimate: the dot map from Iteration 4's preloader; the passage draws in each time the stage comes round */
.ia .i7-mapd { fill: rgba(var(--a), .26); stroke: none; }
/* Map (Options, local): Fit, the whole stretch; Fill, cropped to the box so the dots run edge to edge */
.i7 .i7-sart .i7-mapv { position: absolute; inset: 0; }
html[data-emap="fill"] .i7 .i7-sart .i7-mapv--fit { display: none; }
html[data-emap="fit"] .i7 .i7-sart .i7-mapv--fill { display: none; }
.ia .i7-route-ahead { stroke: rgba(var(--a), .45); stroke-width: 1.3; stroke-dasharray: 0 5; }
.ia .i7-route { stroke: var(--t); stroke-width: 1.4; stroke-dasharray: 100; stroke-dashoffset: 100; }
.i7 .i7-sart.is-on .ia .i7-route { animation: i7-route 2.2s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes i7-route { to { stroke-dashoffset: 0; } }
.ia .i7-port { fill: #f5f3ef; stroke: none; }
.ia .i7-portr { fill: none; stroke: rgba(var(--a), .5); }
.ia .nos { stroke: none !important; }
.ia .i7-bubf { fill: rgba(var(--a), .07); }  /* a message's faint fill */
.ia .i7-bubfa { fill: rgba(var(--i2a-rgb), .16); }  /* the accepting message, in the accent */
/* Negotiation and FFI settlement play as short stories while their stage is on (about 5.6s; iter7.js gives these two
   stages longer turns). At rest, and with reduced motion, each shows its outcome */
.i7 .i7-sart :is(.n-b, .n-tok, .f-b, .f-tok, .n-seam, .f-done, .f-plus) { opacity: 0; }
.i7 .i7-sart .n-l { transform: translate(calc(var(--px) * -1), calc(var(--py) * -1)); }
.i7 .i7-sart .n-r { transform: translate(var(--px), var(--py)); }
.i7 .i7-sart .ia--story .ia-lock { opacity: 0; transform: scale(.85); }
@keyframes i7-bub { 0% { opacity: 0; transform: translateY(8px); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes i7-bubin { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes i7-tok { 0% { opacity: 0; transform: none; } 12% { opacity: 1; transform: none; } 88% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes i7-in { to { opacity: 1; transform: none; } }
@keyframes i7-out { to { opacity: 0; } }
@keyframes i7-badge { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } }
/* negotiation (option C): the offer goes out, it is accepted, a token comes back, the line turns blue, the handshake */
.i7 .i7-sart.is-on .f-b1 { animation: i7-bub 1.3s ease .2s both; }
.i7 .i7-sart.is-on .f-t1 { animation: i7-tok .8s ease-in-out .7s both; }
.i7 .i7-sart.is-on .f-b2 { animation: i7-bubin .35s ease 1.55s both; }
.i7 .i7-sart.is-on .f-t2 { animation: i7-tok .8s ease-in-out 2.05s both; }
.i7 .i7-sart.is-on .f-plus { animation: i7-bubin .3s ease 2.85s both; }
.i7 .i7-sart.is-on .f-b3 { animation: i7-bubin .35s ease 3s both; }
.i7 .i7-sart.is-on .f-done { animation: i7-in .4s ease 3.45s both; }
.i7 .i7-sart.is-on[data-s="2"] .ia-lock { animation: i7-badge .45s cubic-bezier(.2, .9, .3, 1.2) 3.6s both; }
/* settlement: the laytime clock runs past the allowance (the overrun sweeps in blue), a blue dot carries it to the
   invoice, whose demurrage line lights, and the $ badge shows. At rest and with reduced motion: the outcome */
.ia .i7-hand { stroke: #f5f3ef; stroke-width: 1.6; }
.i7 .i7-sart .s6-over { stroke-dasharray: 100; stroke-dashoffset: 0; }
.i7 .i7-sart .s6-dot { opacity: 0; }
.i7 .i7-sart.is-on .s6-over { animation: i7-arc .75s linear 1.45s both; }
@keyframes i7-arc { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.i7 .i7-sart.is-on .s6-dot { animation: i7-tok .9s ease-in-out 2.3s both; }
.i7 .i7-sart.is-on .s6-line { animation: i7-bubin .3s ease 3.15s both; }
.i7 .i7-sart.is-on[data-s="5"] .ia-lock { animation: i7-badge .45s cubic-bezier(.2, .9, .3, 1.2) 3.4s both; }
@media (prefers-reduced-motion: reduce) {
  .i7 .i7-sart :is(.n-l, .n-r) { transform: none; }
  .i7 .i7-sart :is(.n-seam, .f-done, .f-plus, .f-b2, .f-b3), .i7 .i7-sart .ia--story .ia-lock { opacity: 1; transform: none; }
  .i7 .i7-sart .n-line { opacity: 0; }
  .i7 .i7-sart.is-on * { animation: none !important; }
}

.ia .i7-cloudsh { fill: color-mix(in srgb, var(--i3a) 16%, #0a0a0a); } /* the cloud's depth: a filled shadow, no line */
/* the negotiation's handshake badge: the same as the on-prem shield */
.ia--neg .ia-lock { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--i2a); box-shadow: 0 0 0 6px rgba(var(--i2a-rgb), .14), 0 0 24px rgba(var(--i2a-rgb), .35); }
.ia--neg .ia-lock svg { width: 22px; height: 22px; fill: none; stroke: #050607; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* badges scale with their drawing's box (18 to 44px), so on a small phone a badge never swamps its drawing */
.i7 :is(.i7-sart, .i7-dart) { container-type: size; }
.i7 :is(.i7-sart, .i7-dart) :is(.ia--neg, .ia--vault) .ia-lock { --bd: clamp(18px, 14cqh, 44px); width: var(--bd); height: var(--bd); margin: calc(var(--bd) / -2) 0 0 calc(var(--bd) / -2); box-shadow: 0 0 0 calc(var(--bd) * .14) rgba(var(--i2a-rgb), .14), 0 0 calc(var(--bd) * .55) rgba(var(--i2a-rgb), .35); }
.i7 :is(.i7-sart, .i7-dart) :is(.ia--neg, .ia--vault) .ia-lock svg { width: 50%; height: 50%; }
/* Enquiry > Channel logos (Options, local): the line drawings, or the real logos in black and white */
html[data-clogo="real"] .ia .i7-lgl { display: none; }
html[data-clogo="line"] .ia .i7-lgr { display: none; }
@media (prefers-reduced-motion: reduce) { .ia .i7-route { stroke-dashoffset: 0; } .i7 .i7-sart.is-on .ia .i7-route { animation: none; } .ia .i7-ship { display: none; } }

/* ---- Deployment drawings: the four scenes stack, the current one shows ---- */
.i7 .i7-darts { position: relative; width: 100%; height: 100%; }
.i7 .i7-dart { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.i7 .i7-dart.is-on { opacity: 1; }
.i7 .i7-dart :is(.i3-art, .ia-wrap) { width: 100%; height: 100%; }
.i7 .i7-dart svg { display: block; width: 100%; height: 100%; }
.i7 .ia .i7-nost { stroke: none !important; }
.i7 .ia .i7-cloudfill { fill: color-mix(in srgb, var(--i3a) 9%, #0a0a0a); stroke: none; }
.i7 .ia .i7-cloud { stroke: var(--i3a); stroke-width: 1.6; fill: none; }
.i7 .ia .i7-cloudrim { stroke: var(--i3a); stroke-width: 3.2; stroke-linejoin: round; } /* half of it shows: a 1.6px rim */
.i7 .ia .i7-cloudb { stroke: rgba(var(--rgb), .3); stroke-width: 1; fill: none; }
.i7 .ia .i7-cloudh { stroke: rgba(var(--i3a-rgb), .55); stroke-width: 1.2; fill: none; }
.i7 .i7-dep .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; }
.i7 .i7-dep .ia .i7-ring { animation: i6-breathe 2.4s ease-in-out infinite; }
.i7 .i7-dep .ia .i7-ring1 { animation-delay: .4s; } .i7 .i7-dep .ia .i7-ring2 { animation-delay: .8s; }
.i7 .i7-dep .ia .i7-perim { animation: i6-breathe 2.8s ease-in-out infinite; }
.i7 .i7-dep .ia .i7-gap { stroke-width: 2; animation: i6-blink 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .i7 .i7-dep .ia :is(.flow, .i7-ring, .i7-perim, .i7-gap) { animation: none !important; } }

/* Simple line art: the long front waterline in the workflow drawing was too bright; it sits with the grid */
html[data-min][data-lart="simple"] .i7 .i3-art .nw-ground .l2 { display: none; } /* it sat beside the grid edge as a second line */
/* the smallest phones: the stage cells a touch tighter, so every stage name keeps to one line */
@media (max-width: 22.5rem) { .i7 .i6-cells--6 > li { padding: 10px 10px; } .i7 .i6-cells--6 h3 { font-size: 13.5px; letter-spacing: -.005em; } }

/* Footer wordmark: stays inside the dashed grid lines, with a little room on each side (owner, 9 Nov) */
html[data-min] .i7-word { width: calc(var(--rail) - 2 * clamp(12px, 2.4vw, 40px)); max-width: 100%; margin-inline: auto; }
/* Privacy heading on phones: its longest sentence ("Your infrastructure.", about 10.8em wide) stays on one line, with
   16px or more to the grid lines on each side (owner's copy, 9 Nov) */
@media (max-width: 767px) { html[data-min] .i7 .i6-priv .i3-h2 { font-size: min(32px, calc((var(--rail) - 32px) / 10.8)); } }

/* Operations, the voyage (i2art/caps7.js, A.sops; owner, 9 Nov). Options > Operations > Buildings brings back the
   buildings drawing. The ship leaves the load port at .6s and stops at each milestone; each milestone turns blue with a
   tick as the ship reaches it and stays blue; the route fills blue behind the ship; the discharge port turns blue on
   arrival, then the check badge shows. The stage holds 5.8s. */
html[data-ops="net"] .i7 .i7-sart[data-s="4"] { display: none; }
html[data-ops="voyage"] .i7 .i7-flow[data-active="4"] .i5-vart__in > .i3-art { opacity: 0; }
.i7 .i7-sart .o-on { opacity: 0; }
.i7 .i7-sart .o-trail { stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.i7 .i7-sart.is-on .o-ship { animation: o-sail 3.5s linear .6s both; }
.i7 .i7-sart.is-on .o-trail { animation: o-trail 3.5s linear .6s both; }
.i7 .i7-sart.is-on .o-pl { animation: o-on .35s ease .3s both; }
.i7 .i7-sart.is-on :is(.o-n1, .o-m1) { animation: o-on .35s ease 1.4s both; }
.i7 .i7-sart.is-on :is(.o-n2, .o-m2) { animation: o-on .35s ease 2.3s both; }
.i7 .i7-sart.is-on :is(.o-n3, .o-m3) { animation: o-on .35s ease 3.2s both; }
.i7 .i7-sart.is-on .o-pd { animation: o-on .35s ease 4.15s both; }
.i7 .i7-sart.is-on .o-flag { animation: o-on .35s ease 1.95s both; } /* the delay is flagged as the ship nears Sailing, and stays */
.i7 .i7-sart.is-on .o-w1 { animation: o-off .35s ease 1.4s both; }
.i7 .i7-sart.is-on .o-w2 { animation: o-off .35s ease 2.3s both; }
.i7 .i7-sart.is-on .o-w3 { animation: o-off .35s ease 3.2s both; }
.i7 .i7-sart.is-on .o-plw { animation: o-off .35s ease .3s both; }
.i7 .i7-sart.is-on .o-pdw { animation: o-off .35s ease 4.15s both; }
.i7 .i7-sart.is-on[data-s="4"] .ia-lock { animation: i7-badge .45s cubic-bezier(.2, .9, .3, 1.2) 4.4s both; }
@keyframes o-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes o-off { from { opacity: 1; } to { opacity: 0; } }
/* sail .8s, hold .2s at each milestone (quarter, half, three quarters of the route), then into the discharge berth */
@keyframes o-sail {
  0% { transform: translate(0, 0); animation-timing-function: ease-in-out; }
  22.86%, 28.57% { transform: translate(calc(var(--dx) * .25), calc(var(--dy) * .25)); animation-timing-function: ease-in-out; }
  48.57%, 54.29% { transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5)); animation-timing-function: ease-in-out; }
  74.29%, 80% { transform: translate(calc(var(--dx) * .75), calc(var(--dy) * .75)); animation-timing-function: ease-in-out; }
  100% { transform: translate(var(--dx), var(--dy)); }
}
@keyframes o-trail {
  0% { stroke-dashoffset: 1; animation-timing-function: ease-in-out; }
  22.86%, 28.57% { stroke-dashoffset: .75; animation-timing-function: ease-in-out; }
  48.57%, 54.29% { stroke-dashoffset: .5; animation-timing-function: ease-in-out; }
  74.29%, 80% { stroke-dashoffset: .25; animation-timing-function: ease-in-out; }
  100% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .i7 .i7-sart .o-on { opacity: 1; }
  .i7 .i7-sart .o-wait { opacity: 0; }
  .i7 .i7-sart .o-ship { transform: translate(var(--dx), var(--dy)); }
  .i7 .i7-sart .o-trail { stroke-dashoffset: 0; }
}
.i7 .i7-sart .ia .o-g { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.i7 .i7-sart .ia .o-gt { stroke-width: 1.8; }

/* Options > Wordmark: the dotted HULLSTACK at the foot of the page, on or off (visible on the live site) */
html[data-word="off"] .i7-word { display: none; }

/* Options > Logo colour: the channel logos in black and white (default) or in colour; visible on the live site */
html:not([data-lcol="colour"]) .ia .i7-logo--col, html[data-lcol="colour"] .ia .i7-logo--mono { display: none; }

/* Clean Fixture: while the stage is on, the heading and terms write in one line at a time, then the signature draws and
   the seal settles. At rest, and with reduced motion, the signed page shows */
.i7 .i7-sart.is-on .ia .x-ln { animation: x-ln .45s ease-out calc(.15s + var(--i) * .1s) both; }
.i7 .i7-sart.is-on .ia .x-sig { stroke-dasharray: 100; animation: x-sig .75s cubic-bezier(.4, 0, .2, 1) 1.2s both; }
.i7 .i7-sart.is-on .ia .x-seal { animation: x-seal .4s ease-out 1.9s both; }
@keyframes x-ln { from { opacity: 0; } to { opacity: 1; } }
@keyframes x-sig { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes x-seal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .i7 .i7-sart.is-on .ia :is(.x-ln, .x-sig, .x-seal) { animation: none; } }

/* Privacy, three points (Options > Deployment > Three points): three rows of a heading and a line beside the drawing
   (wide); under it, one row each, divided by rules (narrower) */
.i7 .i7-dep--3 .i6-dep__opts { grid-template-rows: repeat(4, 1fr); }
.i7 .i7-dep--3 .i6-dep__opts p { margin-top: 6px; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 63.99rem) {
  .i7 .i7-dep--3 { grid-template-columns: 1fr; }
  .i7 .i7-dep--3 .i6-dep__opts { grid-template-columns: 1fr; }
  .i7 .i7-dep--3 .i6-dep__opts li:nth-child(n) { padding: 18px clamp(18px, 3vw, 32px); box-shadow: none; }
  .i7 .i7-dep--3 .i6-dep__opts li:nth-child(n + 2) { box-shadow: 0 -1px 0 var(--gl); } /* a rule between rows, as in the workflow grid */
  .i7 .i7-dep--3 .i6-dep__opts p { max-width: 64ch; } /* tablets: the rows run full width, so keep each line readable */
}
/* "You own the intelligence": the cards drop into the strongbox one after another (each about 1.5s apart), sinking
   behind its front wall; at rest, and with reduced motion, the three float over the open box */
.i7 .i7-dep .ia .pc-card { animation: pc-drop 4.5s cubic-bezier(.45, 0, .55, 1) calc(var(--i) * 1.5s) infinite both; }
@keyframes pc-drop { 0% { opacity: 0; transform: translateY(-24px); } 14% { opacity: 1; transform: translateY(0); } 46% { opacity: 1; transform: translateY(0); }
  78% { opacity: 1; transform: translateY(70px); } 84%, 100% { opacity: 0; transform: translateY(70px); } }
@media (prefers-reduced-motion: reduce) { .i7 .i7-dep .ia .pc-card { animation: none; } }

/* Grids of cells (workflow stages, assistance): each cell draws a rule on its left, which in the first column doubled the
   page's dashed rail. The grid is clipped on its left side only, exactly at the rail (a full-width grid reaches the rail
   through its padding, (100% - rail) / 2; a grid that starts at the rail has nothing to clip), so the rules between
   columns stay and so does the stage list's own rule on its right, beside the drawing (owner, 9 Nov) */
.i7 .i6-cells { clip-path: inset(-2px -2px -2px max(0px, calc((100% - var(--rail)) / 2))); }

/* the strongbox's key (You own the intelligence): solid blue, its sides a shade darker, the keyhole cut dark */
.i7 .ia .pc-solid { fill: var(--t) !important; stroke: none !important; }
.i7 .ia .pc-dark { fill: color-mix(in srgb, var(--t) 62%, #000) !important; }
.i7 .ia .pc-hole { fill: #000 !important; }

/* Fixture: the tick inside the seal is drawn thicker, so it reads at small sizes */
.i7 .ia .x-tick { stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* "Every action on record": the log's entries write in one after another, the newest lit in blue, then the log starts a
   new page (about 6.4s a round); with reduced motion every entry shows */
.i7 .i7-dep .ia .pl-row { animation: pl-row 6.4s ease-out calc(var(--i) * .5s) infinite both; }
@keyframes pl-row { 0% { opacity: 0; } 6%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
.i7 .i7-dep .ia .pl-row { animation-duration: 6.4s; }
@media (prefers-reduced-motion: reduce) { .i7 .i7-dep .ia .pl-row { animation: none; opacity: 1; } }

/* the live site: no Options button or panel (index.html marks the local preview with data-local) */
html:not([data-local]) .opt { display: none !important; }