/* StruXure.co product pages (wave 2): three options that fit all eleven pages.
   Loads after _shared/sx-tokens.css, sx-draw.css and sx-chrome.css. Anything here that more than these pages
   could use is listed as a shared-CSS request in the report rather than written into _shared/. */

/* ---- drawing classes the product drawings add to the kit ------------------------------------ */
.k-bar.crit { fill: rgba(0, 161, 224, .32); stroke: var(--blue); stroke-width: 1.2; }
.k-mile { fill: var(--navy); }
.k-dep { fill: none; stroke: var(--blue-deep); stroke-width: 1; }
.k-mon { fill: none; stroke: var(--navy); stroke-width: 2.4; }
.k-pinhead { fill: var(--red); }
.k-wm { fill: rgba(0, 161, 224, .45); }
.k-lockb { fill: var(--tint); }
.k-hatp { fill: #fff; stroke: var(--ink); stroke-width: 1.4; }
.k-node { fill: var(--blue); }
.sx-tag.kn { min-width: 26px; height: 26px; padding: 0 4px; display: grid; place-items: center; border: 1.5px solid var(--navy); border-radius: 0; color: var(--navy); font: 700 13px/1 var(--display);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: #fff; outline: 0; }
.sx-tag.kn { background: var(--navy); color: #fff; border: 0; min-width: 28px; height: 25px; }
.v-narrow { display: none; }
@media (max-width: 639px) {
  .v-wide { display: none; }
  .v-narrow { display: block; }
}
/* the real screen on a sheet without a laptop base (the trailer wall monitor) */
.sx-scr-mon .sx-scr-g { padding: 0; border: 0; box-shadow: none; border-radius: 2px; }
.sx-scr-mon .sx-scr-g img { border-radius: 2px; }
.sx-scr-mon .sx-scr-lab, .sx-scr-phone .sx-scr-lab { left: 10px; }

/* highlight zones on a sheet (option 3 lights the one being read) */
.pz { position: absolute; z-index: 1; border: 2px solid var(--blue); border-radius: 6px; background: rgba(0, 161, 224, .07); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.pz.on { opacity: 1; }

/* ---- shared page pieces ------------------------------------------------------------------- */
.prod h1 .h1-lead { color: inherit; }
.p-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.p-stats div { margin: 0; }
.p-stats dt { font: 600 1.05rem/1.2 var(--display); color: var(--navy); }
.p-stats dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.p-aside { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--ink-soft); }
.p-note { margin-top: 32px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.p-note h3 { font-size: 1.15rem; margin-bottom: 8px; }
.p-note p { color: var(--ink-soft); }
.ticks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 24px; color: var(--ink-soft); }
.ticks li::before { content: ''; position: absolute; left: 2px; top: .52em; width: 12px; height: 6px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.btn-line { margin-top: 24px; }

/* the real product screen in its line laptop */
.p-screen { position: relative; margin: 0; }
.p-screen .sx-scr-lab { position: absolute; left: 16px; top: 0; transform: translateY(-55%); z-index: 2; }
.p-screen .lap { display: block; }
.p-screen .lap-scr { display: block; padding: 8px 8px 8px; background: #fff; border: 1.5px solid var(--navy); border-radius: 8px 8px 0 0; box-shadow: var(--shadow), 0 22px 40px -24px rgba(16, 45, 123, .28); }
.p-screen .lap-in img { width: 100%; border: 1px solid var(--line); border-radius: 0; }
.p-screen .lap::after { content: ''; display: block; height: 10px; margin: 0 -6%; background: var(--tint); border: 1.5px solid var(--navy); border-top-width: 1px; border-radius: 0 0 8px 8px; }
.p-scr-phone { max-width: 260px; margin-inline: auto; }
.p-scr-phone .lap-scr { border-radius: 22px; padding: 8px; }
.p-scr-phone .lap-in img { border-radius: 14px; }
.p-scr-phone .lap::after { display: none; }

/* a real StruXure.co screenshot already framed as a floating card (no laptop/phone chin of its own) */
.p-scr-card .lap-scr { padding: 0; border: 0; border-radius: 8px; box-shadow: none; background: transparent; }
.p-scr-card .lap-in img { border: 0; border-radius: 8px; }
.p-scr-card .lap::after { display: none; }

/* a second, smaller real screenshot placed in a feature row's own text column: proof next to, never over,
   the row's hand-drawn detail (6 Nov, live-media audit). Sits after the row's copy, never absolutely
   positioned over the drawing, so it can never cover a drawing label at any width. */
.p-row-shot { margin: 24px 0 0; max-width: 300px; }
.p-row-shot.p-scr-phone { max-width: 190px; margin-inline: 0; }
.p-row-shot .sx-scr-lab { font-size: 11px; padding: 3px 7px; }
@media (max-width: 1023px) {
  .p-row-shot { max-width: 260px; }
  .p-row-shot.p-scr-phone { max-width: 170px; }
}

/* video facades: the real screen until someone asks to watch (pattern ported from platform.css / platform.js,
   reused here rather than edited there; also applies to the pinned real screen on the trailer wall, option 3) */
.p-screen .lap-in .mp4, .sx-scr-g .mp4, .iso-scr .mp4 { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.p-screen .lap-in .mp4 img, .sx-scr-g .mp4 img, .iso-scr .mp4 img { display: block; transition: filter .3s ease-out; }
.p-screen .lap-in .mp4:hover img, .sx-scr-g .mp4:hover img, .iso-scr .mp4:hover img { filter: brightness(.94); }
.p-screen .lap-in .mp4 .play, .sx-scr-g .mp4 .play, .iso-scr .mp4 .play { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: var(--teal-deep); display: grid; place-items: center; box-shadow: 0 8px 24px -8px rgba(16, 45, 123, .5); transition: background-color .18s, transform .18s var(--ease); }
.p-screen .lap-in .mp4 .play::before, .sx-scr-g .mp4 .play::before, .iso-scr .mp4 .play::before { content: ''; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.p-screen .lap-in .mp4:hover .play, .sx-scr-g .mp4:hover .play, .iso-scr .mp4:hover .play { background: var(--navy); transform: scale(1.06); }
.p-screen .lap-in .mp4:focus-visible, .sx-scr-g .mp4:focus-visible, .iso-scr .mp4:focus-visible { outline-offset: 4px; }
.p-screen .lap-in video.played { display: block; width: 100%; background: #000; border-radius: 0; }
.p-scr-phone .lap-in video.played { border-radius: 14px; }
.sx-scr-g video.played { display: block; width: 100%; background: #000; border-radius: 3px; }
.sx-scr-phone .sx-scr-g video.played { border-radius: 13px; }
@media (max-width: 480px) {
  .p-screen .lap-in .mp4 .play, .sx-scr-g .mp4 .play, .iso-scr .mp4 .play { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .p-screen .lap-in .mp4 .play::before, .sx-scr-g .mp4 .play::before, .iso-scr .mp4 .play::before { border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; }
}

/* closing band, FAQ, explore */
.p-close-g { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: end; }
.p-close .lead { margin: 16px 0 24px; max-width: 54ch; }
.p-close .h2 { max-width: 22ch; }
.p-crane-w { opacity: .9; }
.p-crane .k-obj, .p-crane .k-ground { stroke: rgba(255, 255, 255, .7); }
.p-crane .k-thin, .p-crane .k-hid { stroke: rgba(179, 232, 247, .5); }
.p-crane .k-wallf { fill: var(--blue); }
.p-faq-g { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.p-faq-g > h2 { position: sticky; top: 110px; align-self: start; }
.qa-list { border-top: 2px solid var(--navy); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 4px; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font: 600 1.125rem/1.25 var(--display); color: var(--navy); letter-spacing: -0.005em; }
.qa summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--teal-deep); border-bottom: 2px solid var(--teal-deep); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease); }
.qa[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.qa summary:hover h3 { color: var(--teal-deep); }
.qa summary:focus-visible { outline-offset: -2px; }
.qa-a { padding: 0 4px 24px; color: var(--ink-soft); max-width: 70ch; display: grid; gap: 12px; }
.p-explore-g { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.p-explore .lead { margin-top: 12px; max-width: 60ch; }

/* sheet frames used by the options */
.sx-sheet .sx-tb .k { font-size: 12px; }

/* ================= option 1: The Sheet ================================================== */
.p1-hero { background: var(--grid-paper), linear-gradient(180deg, #fff 0, var(--tint) 100%); border-bottom: 1px solid var(--line); padding: 48px 0 64px; }
@media (max-width: 900px) { .p1-hero { padding: 32px 0 48px; } }
.p1-hero-g { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: 48px; align-items: center; }
.p1-hero .display { font-size: clamp(2.3rem, 3.9vw, 3.4rem); }
.p1-hero .lead { margin-top: 16px; max-width: 46ch; }
.p1-hero .btns { margin-top: 24px; }
.p1-hero .kicker { margin-bottom: 16px; }
.p1-sheet { margin: 0; grid-template-columns: minmax(0, 1fr); }
.p1-sheet .sx-area { padding: 18px 16px 10px; }
.p1-sheet .sx-tb, .p3-doc .sx-tb, .p2-site .sx-tb { flex-direction: row; margin: 0 6px 6px; border-left: 0; border-top: 1px solid var(--navy); }
.p1-sheet .sx-tb > div, .p3-doc .sx-tb > div, .p2-site .sx-tb > div { border-bottom: 0; border-right: 1px solid var(--navy); padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; }
.p1-sheet .sx-tb > div:last-child, .p3-doc .sx-tb > div:last-child, .p2-site .sx-tb > div:last-child { border-right: 0; }
.p1-sheet .sx-tb .ttl, .p3-doc .sx-tb .ttl, .p2-site .sx-tb .ttl { flex: 1; font-size: 15px; }
.p1-sheet .sx-tb .no, .p3-doc .sx-tb .no, .p2-site .sx-tb .no { font-size: 24px; }

.p1-intro-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.p1-intro-t .lead { margin-top: 16px; }
.p1-intro-t .go { margin-top: 16px; }
.p1-keys { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--navy); }
.p1-keys li { position: relative; padding: 24px 24px 8px 0; }
.p1-keys li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.kn-m { display: inline-grid; place-items: center; width: 30px; height: 26px; margin-bottom: 16px; background: var(--navy); color: #fff; font: 700 13px/1 var(--display);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.p1-keys h3 { font-size: 1.2rem; margin-bottom: 8px; }
.p1-keys p { font-size: 15px; color: var(--ink-soft); }

.p1-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.p1-row + .p1-row { margin-top: 96px; }
.p1-row.flip .p1-txt { order: 2; }
.p1-txt .kicker { margin-bottom: 16px; }
.p1-txt .h3 { font-size: clamp(1.6rem, 2.5vw, 2.15rem); line-height: 1.12; margin-bottom: 16px; }
.p1-txt > p { color: var(--ink-soft); }
.p1-det { margin: 0; background: #fff; border: 1.5px solid var(--navy); border-radius: 3px; box-shadow: var(--shadow); padding: 14px 18px 18px; }
.p1-det figcaption { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--navy); font: 600 13px/1 var(--sans); color: var(--navy); }
.p1-det .bub { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--navy); border-radius: 50%; font: 700 13px/1 var(--display); }

/* ================= option 2: On the Job ================================================= */
.p2-hero { background: var(--grid-paper), #fff; padding: 32px 0 48px; border-bottom: 1px solid var(--line); }
.p2-copy { max-width: 820px; margin: 0 auto; text-align: center; }
.p2-copy .display { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
.p2-copy .lead { margin: 16px auto 0; max-width: 60ch; }
.p2-copy .btns { justify-content: center; margin-top: 24px; }
.p2-copy .kicker { margin-bottom: 16px; }
.p2-copy .p-stats { text-align: left; }
.p2-site { margin: 48px 0 0; grid-template-columns: minmax(0, 1fr); }
.p2-site .sx-area { padding: 16px 18px 8px; }
.p2-intro-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: start; }
.p2-intro-g .lead { margin: 0; }
.p2-intro-g .go { grid-column: 2; }
.p2-stops { position: relative; list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.p2-stops::before { content: ''; position: absolute; left: 7px; right: 7px; top: 7px; border-top: 2.5px dashed var(--blue); }
.p2-stops li { position: relative; padding-top: 32px; }
.p2-stops .node { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #fff; }
.p2-stops h3 { font-size: 1.2rem; margin-bottom: 8px; }
.p2-stops p { font-size: 15px; color: var(--ink-soft); }
.p2-route { position: relative; list-style: none; margin: 0; padding: 0; }
.p2-route::before { content: ''; position: absolute; left: 209px; top: 40px; bottom: 40px; border-left: 2.5px dashed var(--blue); }
.p2-stop { position: relative; display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 48px; align-items: start; }
.p2-stop + .p2-stop { margin-top: 96px; }
.p2-place { position: relative; background: #fff; border: 1.5px solid var(--navy); border-radius: 3px; padding: 10px; box-shadow: var(--shadow); }
.p2-pl { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--navy); font: 600 13px/1.2 var(--sans); color: var(--navy); text-align: center; }
.p2-txt { max-width: 760px; }
.p2-txt .kicker { margin-bottom: 16px; }
.p2-txt .h3 { font-size: clamp(1.6rem, 2.5vw, 2.15rem); line-height: 1.12; margin-bottom: 16px; }
.p2-txt > p { color: var(--ink-soft); max-width: 62ch; }
.p2-txt > p.kicker { color: var(--teal-deep); }
.p2-txt .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.p2-scr { margin-top: 32px; max-width: 680px; }
.p2-scr.p-scr-phone { max-width: 240px; margin-inline: 0; }
.p2-scr-solo { margin: 64px 0 0 calc(220px + 64px); max-width: 680px; }

/* ================= option 3: The Trailer Wall ========================================== */
.p3-hero { padding: 48px 0 64px; color: var(--on-navy); }
@media (max-width: 900px) { .p3-hero { padding: 32px 0 48px; } }
.p3-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 48px; align-items: end; }
.p3-copy .kicker { grid-column: 1 / -1; color: var(--cyan-light); }
.p3-copy h1 { color: #fff; font-size: clamp(2.3rem, 4.2vw, 3.6rem); grid-column: 1; }
.p3-copy h1 .h1-lead { color: inherit; }
.p3-copy .lead { color: var(--on-navy); grid-column: 2; grid-row: 2; }
.p3-copy .lead + .lead { grid-row: auto; }
.p3-copy .btns { grid-column: 2; }
.p3-copy .btn { background: #fff; border-color: #fff; color: var(--navy); }
.p3-copy .btn:hover { background: var(--cyan-light); border-color: var(--cyan-light); }
.p3-copy .p-stats { grid-column: 1 / -1; border-top-color: rgba(255, 255, 255, .2); }
.p3-copy .p-stats dt { color: #fff; }
.p3-copy .p-stats dd { color: var(--on-navy); }
.p3-wall { margin: 48px 0 0; }
.p3-wall .k-obj.wl, .p3-wall .k-ground.wl { stroke: rgba(255, 255, 255, .85); }
.p3-wall .k-thin.wl { stroke: rgba(255, 255, 255, .5); }
.p3-wall .k-mon { stroke: #fff; }
.p3-wall .k-paper { fill: #fff; }
.p3-wall .k-route { stroke: var(--blue); }
.p3-wall .sx-tag.on-edge { background: var(--blue); border-color: var(--blue); color: #0a1f5c; }
.p3-tiles { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.p3-tiles li { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .22); }
.p3-tiles .chip { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 8px; background: var(--amber-bright); vertical-align: 1px; }
.p3-tiles .chip.g { background: #2FB27A; }
.p3-tiles h3 { display: inline; color: #fff; font-size: 1.15rem; }
.p3-tiles p { margin-top: 12px; font-size: 15px; color: var(--on-navy); }
.p3-intro-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: start; }
.p3-intro-g .go { grid-column: 2; }
.p3-intro-g .lead { margin: 0; }
.p3-feats { padding-top: 0; }
.p3-g { display: grid; grid-template-columns: 200px minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.p3-menu { position: sticky; top: 110px; }
.p3-menu ol { list-style: none; margin: 0; padding: 0; border: 1.5px solid var(--navy); border-radius: 3px; background: #fff; }
.p3-menu li + li { border-top: 1px solid var(--navy); }
.p3-menu a { display: grid; gap: 4px; padding: 12px 14px; color: var(--ink-soft); font-weight: 600; font-size: 14px; line-height: 1.3; text-decoration: none; transition: background-color .16s, color .16s; }
.p3-menu .no { font: 600 12px/1 var(--display); color: var(--teal-deep); }
.p3-menu a:hover { background: var(--slate); color: var(--navy); }
.p3-menu a.on { background: var(--navy); color: #fff; }
.p3-menu a.on .no { color: var(--cyan-light); }
.p3-feat { padding: 8px 0 clamp(64px, 9vh, 128px); scroll-margin-top: 110px; }
.p3-feat .kicker { margin-bottom: 12px; }
.p3-feat .h3 { font-size: clamp(1.5rem, 2.2vw, 1.95rem); line-height: 1.15; margin-bottom: 16px; }
.p3-feat > p { color: var(--ink-soft); }
.p3-doc { position: sticky; top: 100px; margin: 0; grid-template-columns: minmax(0, 1fr); }
.p3-doc .sx-area { padding: 14px; }
.p3-faq .qa-list { border-top: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.p3-faq .qa { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; padding: 0 16px; }
.p3-faq { background: var(--tint); }

/* ---- responsive --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .p3-g { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .p3-menu { display: none; }
}
@media (max-width: 960px) {
  .p1-hero-g, .p1-intro-g, .p1-row, .p2-intro-g, .p3-intro-g, .p3-copy, .p-faq-g, .p-close-g { grid-template-columns: minmax(0, 1fr); }
  .p1-row.flip .p1-txt { order: 0; }
  .p1-keys, .p2-stops, .p3-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .p1-keys li:nth-child(3) { padding-left: 0; border-left: 0; }
  .p2-stops::before { display: none; }
  .p2-intro-g .go, .p3-intro-g .go { grid-column: 1; }
  .p3-copy h1, .p3-copy .lead, .p3-copy .btns { grid-column: 1; grid-row: auto; }
  .p-faq-g > h2 { position: static; }
  .p-crane-w { display: none; }
  .p3-g { grid-template-columns: minmax(0, 1fr); }
  .p3-doc { position: relative; top: 0; order: -1; }
  .p3-feat { padding-bottom: 48px; }
}
/* phone row rhythm: the desktop gap/margin clamps' lower bound, fixed (Phase B spacing scale, 6 Nov 2026) */
@media (max-width: 900px) {
  .p-faq-g { gap: 24px; }
  .p1-hero-g { gap: 24px; }
  .p1-intro-g { gap: 32px; }
  .p1-keys { margin: 48px 0 0; }
  .p1-row { gap: 32px; }
  .p1-row + .p1-row { margin-top: 64px; }
  .p2-site { margin: 32px 0 0; }
  .p2-intro-g { gap: 16px 32px; }
  .p2-stops { margin: 48px 0 0; }
  .p2-stop { gap: 32px; }
  .p2-stop + .p2-stop { margin-top: 48px; }
  .p3-wall { margin: 32px 0 0; }
  .p3-tiles { margin: 32px 0 0; }
  .p3-intro-g { gap: 16px 32px; }
  .p3-g { gap: 24px; }
}
@media (max-width: 720px) {
  .p2-stop { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .p2-place { max-width: 520px; }
  .p2-route::before { display: none; }
  .p2-txt .ticks { grid-template-columns: minmax(0, 1fr); }
  .p2-scr-solo { margin-left: 0; }
}
@media (max-width: 639px) {
  .p1-keys, .p2-stops, .p3-tiles, .p-stats { grid-template-columns: minmax(0, 1fr); }
  .p1-keys li, .p1-keys li + li { padding-left: 0; border-left: 0; padding-top: 16px; }
  .p1-keys li + li { border-top: 1px solid var(--line); }
  .p1-sheet .sx-tb, .p3-doc .sx-tb, .p2-site .sx-tb { flex-wrap: wrap; }
  .p1-det { padding: 10px 10px 12px; }
}
/* phone hero buttons: full width and stacked, like the family heroes (brand compare #7, product pages only) */
@media (max-width: 600px) {
  .p1-hero .btns, .p2-hero .btns, .p3-copy .btns { flex-direction: column; align-items: stretch; }
  .p1-hero .btns .btn, .p2-hero .btns .btn, .p3-copy .btns .btn { width: 100%; text-align: center; }
}

/* phones: keep the laptop base inside the column */
@media (max-width: 720px) {
  .p-screen { padding: 0 5%; }
  .p-screen .lap::after { margin: 0 -5.5%; }
}
.prod main { overflow-x: clip; }
@media (max-width: 1080px) and (min-width: 721px) {
  .p2-stop { grid-template-columns: 320px minmax(0, 1fr); }
  .p2-route::before { left: 159px; }
  .p2-txt .ticks { grid-template-columns: minmax(0, 1fr); }
}

/* option 2 hero: copy and the whole site sheet inside one 1440x900 screen */
@media (min-width: 721px) {
  .p2-hero { padding: 32px 0 48px; }
  .p2-copy { max-width: 1100px; }
  .p2-copy .display { font-size: clamp(2.2rem, 3.6vw, 3rem); }
  .p2-copy .kicker { margin-bottom: 12px; }
  .p2-copy .lead { margin-top: 12px; max-width: 96ch; }
  .p2-copy .btns { margin-top: 16px; }
  .p2-site { max-width: 980px; margin: 24px auto 0; }
  .p2-site .sx-area { padding: 10px 12px 4px; }
  .p2-site .sx-tb > div { padding: 5px 12px; }
  .p2-site .sx-tb .no { font-size: 20px; }
}
.p2-hero > .w > .p-stats { max-width: 980px; margin: 24px auto 0; }

/* 6 Nov night (story review): the key that names the numbered pins, under the drawing where they first appear */
.kn-legend { list-style: none; margin: 0; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; border-top: 1px solid var(--line); background: #fff; }
.kn-legend a { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font: 600 14px/1.3 var(--sans); text-decoration: none; }
.kn-legend a:hover, .kn-legend a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.kn-b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 12px/1 var(--sans); flex: none; }
.sx-isofig .sx-tag.kn { transition: transform .18s var(--ease), background-color .18s; }
.kn-on-1 .sx-tag.kn-1, .kn-on-2 .sx-tag.kn-2, .kn-on-3 .sx-tag.kn-3, .kn-on-4 .sx-tag.kn-4 { background: var(--blue); transform: translate(-50%, -50%) scale(1.25); z-index: 4; }

/* the small drawing on each feature tile */
.p-tile-art { margin: 0 0 16px; }
.p-tile-art .sx-drawing { max-width: 280px; }
.p1-keys .p-tile-art, .p2-stops .p-tile-art { margin-top: 8px; }
.p2-stops li:has(.p-tile-art) .node { top: 0; }
.p3-tiles .p-tile-art { background: #fff; border-radius: 8px; padding: 8px; margin-bottom: 16px; }

/* the intro screen on a 3D device (isokit.device_fig) */
.p-dev { margin: 0; }
.p-dev > .sx-drawing { width: 100%; }
.p-row-shot.p-dev { margin-top: 16px; max-width: 340px; }
.p-row-shot.p-dev-phone { max-width: 220px; }
.p2-txt .p-screen.p-dev { max-width: 480px; margin-top: 24px; }
.p2-txt:has(.p-screen) .p-row-shot { display: none; }   /* one device per row: the intro video wins */
/* the four tile drawings share one baseline so the numbers line up */
.p1-keys li, .p3-tiles li { display: flex; flex-direction: column; }
.p1-keys .p-tile-art, .p3-tiles .p-tile-art { min-height: 236px; display: flex; align-items: flex-end; justify-content: center; }
.p2-stops .p-tile-art { min-height: 236px; display: flex; align-items: flex-end; }
@media (max-width: 760px) { .p1-keys .p-tile-art, .p3-tiles .p-tile-art, .p2-stops .p-tile-art { min-height: 0; } }
/* phone intros stay phone-sized; an intro with no copy centres its device instead of leaving an empty left column */
.p-dev.p-dev-phone { max-width: 380px; }
.p-dev.p-dev-laptop.p1-scr { max-width: 620px; }
.p1-intro-g:has(> div:empty) { grid-template-columns: 1fr; justify-items: center; }
.p1-intro-g > div:empty { display: none; }

/* 7 Nov (fresh-eyes motion pass): the packet that walks each route on a loop (products.js), and a quieter stamp.
   The shared stamp lands from scale(1.7) with an overshooting curve, which reads as a pop; on product pages it
   settles from 1.15 on a plain ease-out instead. */
.sx-iso .k-pkt { pointer-events: none; }
.sx-iso .k-pkt .tdoc, .sx-iso .k-pkt .tdoc-l { vector-effect: non-scaling-stroke; }
html.js:not(.rm) body.prod.iso:not(.pf) .sx-draw.play:not(.stamped) .k-final { transform: scale(1.15); }
html.js:not(.rm) body.prod.iso:not(.pf) .sx-draw.stamped .k-final { transition: opacity .2s ease-out, transform .3s cubic-bezier(.23, 1, .32, 1); }

/* 7 Nov (Max: "the whole thing doesn't fit on screen"): on desktop the option 3 hero sets the headline beside the
   wall drawing, so the copy and the whole drawing fit in one screen */
@media (min-width: 1100px) {
  .p3-hero > .w { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 40px; align-items: center; }
  .p3-hero .p3-copy { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .p3-hero .p3-copy h1, .p3-hero .p3-copy .lead, .p3-hero .p3-copy .btns { grid-column: 1; grid-row: auto; }
  .p3-hero .p3-copy h1 { font-size: clamp(2.2rem, 3.2vw, 3rem); }
  .p3-hero .p3-wall { margin: 0; }
  .p3-hero > .w > :not(.p3-copy):not(.p3-wall) { grid-column: 1 / -1; }
}

/* 7 Nov (scheme 1): sizes for the front-facing devices (device.css). The row screenshots were 340px wide and
   unreadable; they now take the text column, and every still opens large on click. */
.p-dev.dv-laptop.p1-scr, .p-dev.dv-laptop.p2-scr { max-width: 640px; }
.p-row-shot.p-dev.dv-laptop { max-width: 560px; margin-top: 28px; }
.p-row-shot.p-dev.dv-phone { max-width: 220px; margin: 28px 0 0; }
.p-dev.dv-phone.p1-scr, .p-dev.dv-phone.p2-scr { max-width: 290px; }
.p-dev.dv-on { max-width: 100% !important; }
@media (max-width: 1023px) {
  .p-row-shot.p-dev.dv-laptop { max-width: 100%; }
  .p-row-shot.p-dev.dv-phone { max-width: 220px; }
}

/* 7 Nov (Max: "Ready to Start ... not loading correctly"): the crane's mast, jib, ties and cable were navy lines on
   the navy band, so only the cab and the load showed and they floated. Light lines on navy. */
.p-crane-w.on-navy .sx-iso .mast, .p-crane-w.on-navy .sx-iso .jib, .p-crane-w.on-navy .sx-iso .tie { stroke: rgba(214, 232, 250, .9); }
.p-crane-w.on-navy .sx-iso .mast.thin, .p-crane-w.on-navy .sx-iso .jib.thin { stroke: rgba(214, 232, 250, .55); }
.p-crane-w.on-navy .sx-iso .cable { stroke: rgba(214, 232, 250, .8); }
/* 7 Nov carry-over (device.css .dv-on): the wall video fills the drawing's box while it plays */
.vid-on { position: relative; }
.vid-on > :not(.wall-vid) { visibility: hidden; }
.vid-on > .wall-vid { display: flex; position: absolute; inset: 0; z-index: 6; align-items: center; justify-content: center; background: #0d1626; border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(16, 45, 123, .55); animation: dv-in .26s cubic-bezier(.23, 1, .32, 1); }
.vid-on > .wall-vid video { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; background: #0d1626; }
.wall-vid video::-webkit-media-controls-fullscreen-button { display: none; }
@media (prefers-reduced-motion: reduce) { .vid-on > .wall-vid { animation: none; } }