/* Website Development: a browser window assembles itself from square-pixel blocks, then resolves into this page. */

.hd-nav a[aria-current] { color: var(--fg); }
.crumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; font: 400 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.crumb a { color: var(--fg-2); text-decoration: none; }
.crumb a:hover { color: var(--fg); }

.pg-h { font: 900 clamp(3rem, 6.4vw, 6.6rem)/.92 var(--f-display); letter-spacing: -0.04em; margin-left: -0.03em; max-width: 11ch; text-wrap: balance; }
.pg-lede { max-width: 50ch; margin-top: 28px; color: var(--fg-2); font-size: var(--t-s); }
.bx .actions { margin-top: 34px; }

/* THE BUILD (still by default: copy, then four panels) */
.bx { position: relative; }
.bx-stage { position: relative; padding-top: calc(var(--hd) + 48px); padding-bottom: clamp(64px, 10vh, 120px); }
.bx-canvas, .bx-crisp, .bx-tag, .bx-hint { display: none; }
.bx-fact { margin-top: clamp(72px, 12vh, 140px); max-width: 720px; }
.bx-fact-h { font: 700 var(--t-xl)/1.06 var(--f-display); letter-spacing: -0.025em; text-wrap: balance; max-width: 20ch; }
.bx-steps { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 32px; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.bx-steps li { display: flex; align-items: center; gap: 10px; transition: color .4s var(--ease); }
.bx-steps li::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--fg-3); transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.bx-steps li.on { color: var(--fg); }
.bx-steps li.on::before { background: var(--accent); border-color: var(--accent); }
.bx-steps li.done::before { background: var(--fg-3); }
.bx-still { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.bx-still figure { background: var(--ink-1); border: 1px solid var(--rule-soft); }
.bx-still canvas { display: block; width: 100%; aspect-ratio: 4 / 3; }
.bx-still figcaption { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--rule-soft); font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.bx-still figcaption::before { content: ""; width: 7px; height: 7px; background: var(--accent); }
@media (min-width: 1024px) { .bx-still { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* GL: pinned for four screens, the copy swaps from the hero to the challenge, the mark builds on the right */
.gl .bx { height: 460vh; }
.gl .bx-stage { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; padding: 0; }
.gl .bx-canvas { display: block; position: absolute; inset: 0; }
.gl .bx-canvas canvas { display: block; width: 100%; height: 100%; }
.gl .bx-crisp { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.gl .bx-tag { display: block; position: absolute; opacity: 0; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); padding: 7px 9px; border: 1px solid var(--rule); transition: opacity .5s var(--ease); }
.gl .bx-tag.on { opacity: 1; }
.gl .bx-copy { position: relative; height: 100%; pointer-events: none; }
.gl .bx-copy > * { pointer-events: auto; }
.gl .bx-hero, .gl .bx-fact { position: absolute; left: var(--pad); width: min(44%, 600px); top: 50%; transform: translateY(-50%); margin: 0; will-change: opacity, transform; }
.gl .bx-hero { top: calc(50% + var(--hd) / 2); }
.gl .bx-fact { width: min(38%, 520px); opacity: 0; visibility: hidden; }
.gl .bx-hint { display: flex; align-items: center; gap: 12px; margin-top: 40px; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.gl .bx-hint i { width: 8px; height: 8px; background: var(--accent); animation: hintStep 1.04s steps(1) infinite; }
@keyframes hintStep { 50% { transform: translateY(8px); } }
.gl .bx-still { display: none; }

/* SECTIONS */
.pg-sec { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.pg-h2 { font: 700 var(--t-2xl)/1 var(--f-display); letter-spacing: -0.025em; text-wrap: balance; }
.pg-para { color: var(--fg-2); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; max-width: 62ch; }
.pg-split { display: grid; gap: 28px 64px; }
@media (min-width: 900px) { .pg-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

.ruled { margin-top: clamp(40px, 6vh, 64px); }
.ruled li { display: grid; gap: 12px 64px; padding-block: 30px; border-top: 1px solid var(--rule-soft); }
.ruled li:last-child { border-bottom: 1px solid var(--rule-soft); }
.ruled h3 { display: flex; align-items: baseline; gap: 16px; font: 700 var(--t-l)/1.1 var(--f-display); letter-spacing: -0.015em; }
.ruled h3::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--fg-3); transform: translateY(-3px); transition: background-color .4s var(--ease); }
.ruled li:hover h3::before { background: var(--accent); }
.ruled p { color: var(--fg-2); max-width: 60ch; }
@media (min-width: 900px) { .ruled li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.pg-paper { position: relative; isolation: isolate; background: var(--paper); color: var(--paper-ink); overflow: hidden; }
.pg-paper-img { position: absolute; inset: 0 0 0 42%; z-index: -1; background: var(--plate) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.pg-paper-in { padding-block: clamp(96px, 16vh, 180px); }
.pg-paper-in > * { max-width: 560px; }
.pg-paper .pg-para { color: var(--paper-ink-2); margin-top: 26px; }
.pg-cap { position: absolute; right: var(--pad); bottom: 22px; font: 400 .6875rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink-2); background: var(--paper); padding: 6px 8px; }

.steps { display: grid; gap: 40px 28px; margin-top: clamp(40px, 6vh, 64px); }
.steps li { position: relative; padding-top: 30px; border-top: 1px solid var(--rule); }
.steps li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--accent); }
.steps li:not(:first-child)::before { background: var(--ink-0); outline: 1.5px solid var(--fg-3); outline-offset: -1.5px; }
.steps h3 { font: 700 var(--t-l)/1.1 var(--f-display); letter-spacing: -0.015em; }
.steps p { color: var(--fg-2); margin-top: 14px; font-size: 1rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pg-faq { display: grid; gap: 36px 64px; }
@media (min-width: 900px) { .pg-faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.faq details { border-top: 1px solid var(--rule-soft); }
.faq details:last-child { border-bottom: 1px solid var(--rule-soft); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding-block: 18px; font: 600 var(--t-m)/1.3 var(--f-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(var(--fg), var(--fg)) center / 100% 2px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 2px 100% no-repeat; transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: transparent; }
.faq details[open] summary { color: var(--fg); }
.faq summary:hover { color: var(--fg); }
.faq details p { color: var(--fg-2); max-width: 62ch; padding-bottom: 24px; }

.closing-stage { min-height: 88svh; }
.close-alt { display: flex; gap: 8px 32px; flex-wrap: wrap; }
.close-alt .link { margin-top: 18px; }

.pg-next { padding-block: 56px; border-top: 1px solid var(--rule-soft); }
.pg-next-h { font: 400 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 18px; }
.pg-next ul { display: grid; gap: 0 32px; }
@media (min-width: 900px) { .pg-next ul { grid-template-columns: repeat(3, 1fr); } }
.pg-next a { display: flex; justify-content: space-between; align-items: center; min-height: 64px; border-top: 1px solid var(--rule-soft); font: 700 var(--t-m)/1.2 var(--f-display); text-decoration: none; }
.pg-next a::after { content: ""; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .4s var(--ease); }
.pg-next a:hover::after { transform: translateX(5px) rotate(45deg); }

@media (max-width: 767px) {
  .pg-h { font-size: clamp(2.6rem, 12.4vw, 3.4rem); }
  .bx-still { grid-template-columns: minmax(0, 1fr); }
  .pg-paper-img { inset: auto 0 0 0; height: 46%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
  .pg-paper-in { padding-bottom: 62%; }
  .faq summary { font-size: 1.125rem; }
}

/* THE MOCK: this preview's own page, drawn in code at 880 by 580 and scaled to its slot */
.mk-slot { position: relative; margin: 40px var(--pad) 0; aspect-ratio: 880 / 580; overflow: hidden; }
.mk { position: absolute; left: 0; top: 0; width: 880px; height: 580px; transform-origin: 0 0; transform: scale(var(--k, 1));
  background: var(--ink-1); color: var(--fg); font-family: var(--f-body); overflow: hidden; user-select: none; }
.mk-frame { position: absolute; inset: 0; border: 1px solid var(--rule); pointer-events: none; }
.mk-bar { height: 44px; display: flex; align-items: center; gap: 20px; padding: 0 16px; background: var(--ink-2); border-bottom: 1px solid var(--rule-soft); }
.mk-dots { display: flex; gap: 8px; }
.mk-dots i { width: 10px; height: 10px; background: var(--fg-3); }
.mk-dots i:last-child { background: var(--accent); }
.mk-url { flex: 1; height: 26px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--rule-soft); font: 400 11px/1 var(--f-mono); color: var(--fg-3); white-space: nowrap; }
.mk-page { padding: 0 36px; }
.mk-nav { height: 64px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--rule-soft); }
.mk-nav img { width: 104px; height: auto; }
.mk-links { margin-left: auto; display: flex; gap: 20px; font: 500 12px/1 var(--f-body); color: var(--fg-2); }
.mk-links span:nth-child(2) { color: var(--fg); }
.mk-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; background: var(--accent); font: 600 12px/1 var(--f-body); color: var(--fg); }
.mk-btn-sm { height: 30px; padding: 0 12px; font-size: 11px; }
.mk-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; padding-top: 36px; }
.mk-eye { display: inline-block; margin-bottom: 14px; font: 400 10px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.mk-h { font: 900 42px/.96 var(--f-display); letter-spacing: -0.035em; max-width: 420px; }
.mk-p { margin-top: 16px; font: 400 13px/1.5 var(--f-body); color: var(--fg-2); max-width: 340px; }
.mk-hero .mk-btn { margin-top: 22px; }
.mk-hero .mk-btn.is-hover { background: var(--accent-deep); }
.mk-img { height: 236px; background: url("../../shared/plates/plate-04-1280.webp") 62% center / cover no-repeat; }
.mk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.mk-grid li { height: 108px; border: 1px solid var(--rule); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.mk-grid i { width: 10px; height: 10px; background: var(--fg-3); }
.mk-grid li:first-child i { background: var(--accent); }
.mk-grid span { font: 700 14px/1.2 var(--f-display); letter-spacing: -0.01em; }
.bx-still { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.bx-still canvas { aspect-ratio: 880 / 580; }
@media (max-width: 767px) { .bx-still { grid-template-columns: minmax(0, 1fr) !important; } .mk-slot { margin-top: 28px; } }

.gl .mk-slot { position: absolute; margin: 0; aspect-ratio: auto; opacity: 0; pointer-events: none; }
.no-gl .bx-stage { display: flex; flex-direction: column; }
.no-gl .bx-stage > .wrap { width: 100%; }
.no-gl .mk-slot { order: 3; }
@media (min-width: 1024px) { .no-gl .mk-slot { width: min(100% - var(--pad) * 2, 1100px); } }
.no-gl .bx-steps { display: none; }
.bx-sample { margin-left: auto; padding: 5px 7px; border: 1px solid var(--rule); color: var(--fg-3); }
.no-gl .bx-tag { display: block; order: 4; align-self: flex-start; margin: 12px var(--pad) 0; padding: 6px 8px; border: 1px solid var(--rule); font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }

/* Hero banner (plates2): the page's own idea object sits right of the headline; the signature still draws on top */
.bx-stage { isolation: isolate; }
.hb-plate { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--ink-0) 0%, oklch(0.135 0.006 358 / .8) 30%, oklch(0.135 0.006 358 / .1) 60%, oklch(0.135 0.006 358 / 0) 100%),
              linear-gradient(0deg, var(--ink-0) 0%, oklch(0.135 0.006 358 / 0) 34%),
              var(--hb) var(--hb-x, 70%) center / cover no-repeat; }
@media (max-width: 767px) {
  .hb-plate { bottom: auto; height: var(--hb-h, 60svh);
    background: linear-gradient(0deg, var(--ink-0) 0%, oklch(0.135 0.006 358 / .5) 30%, oklch(0.135 0.006 358 / 0) 60%),
                var(--hb-s) var(--hb-sx, 70%) var(--hb-sy, center) / var(--hb-sz, cover) no-repeat; }
}
/* phone: the copy starts below the banner's idea object, as on the Solutions pages */
@media (max-width: 767px) { .bx-stage { padding-top: 40svh; } }

/* ---------- White space (Ramy, 16 Oct 2026): the paper rhythm ----------
   .paper (../../c/css/plates.css) flips the role tokens to the brand kit's Mist/white ground with near-black ink.
   The rules below keep anything drawn for the dark world readable when it sits on paper. */
.paper .btn { color: oklch(0.99 0 0); }
.paper .pk { color: var(--accent-deep); }
.paper .link { color: var(--fg); }