/* The white paper pages in deep glass (22 Oct 2026). Written by papers/glass_pass.py; scoped to main.wpg.
   glasscraft rules: dark ground first, crisp brand discs and a hairline grid for the frost to act on, frosted dark
   panels (white tint under .14) with a masked rim bright at the top left, one light from the top left, the blur on a
   pseudo layer behind the words. On the beige hero: light glass (dark hairline rim, white specular, contact shadow)
   over soft brand light. Brand colours only: navy, Bright Blue, Light Blue, cream, white. */
main.wpg {
  --wg-ground: linear-gradient(158deg, #17286a 0%, #0B1440 62%, #091034 100%);
  --wg-grid: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px) 0 0 / 48px 48px;
  --wg-rim: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.2) 30%, rgba(255,255,255,.05) 58%, rgba(102,182,230,.42) 100%);
  --wg-rim-lit: linear-gradient(135deg, #D6EEFB, #66B6E6 28%, rgba(47,107,235,.5) 62%, rgba(102,182,230,.75) 100%);
  --wg-face: linear-gradient(160deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 40%, rgba(9,15,46,.30) 100%);
  --wg-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.05), 0 30px 60px -30px rgba(2,6,24,.8), 0 2px 6px rgba(2,6,24,.22);
  --wg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --wg-ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------------------------------------------------------------- the hero (22 Oct, Mark: "full screen and one colour",
   the title like the rest of the site): one flat navy, the site's own hero colour (#0B1440, as the platform page), the
   nav in its dark state, the title in white. The form is glass carried by rim, light and shadow alone on the plain
   ground (his rule for glass on a one-colour board); the cover floats on the same colour. */
body.wpg-page main.wpg .wph { position: relative; isolation: isolate; min-height: 100svh; box-sizing: border-box; display: grid; align-content: center;
  padding: calc(var(--tbo, 40px) + 96px) 0 64px; background: #0B1440; color: #fff; }
@media (max-height: 640px) { body.wpg-page main.wpg .wph { min-height: 0; } }
main.wpg .wph .wph__grid { align-items: center; }
main.wpg .wph .h1, main.wpg .wph .h1 b { color: #fff; }
main.wpg .wph .sub { color: rgba(255,255,255,.78); }
main.wpg .gate { position: relative; isolation: isolate; background: none; border-radius: 24px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.04), inset 0 -50px 80px -40px rgba(0,0,0,.28), 0 40px 80px -40px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.25); }
main.wpg .gate::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.045) 42%, rgba(0,0,0,.16) 100%); }
main.wpg .gate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.16) 30%, rgba(255,255,255,.04) 60%, rgba(102,182,230,.4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
main.wpg .gate b, main.wpg .gate__done b { color: #fff; }
main.wpg .gate label, main.wpg .gate .paperlang legend { color: rgba(255,255,255,.78); }
main.wpg .gate input[type=text], main.wpg .gate input[type=email] { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.18) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; transition: border-color .2s, box-shadow .2s, background .2s; }
main.wpg .gate input:focus { border-color: #66B6E6 !important; box-shadow: 0 0 0 4px rgba(102,182,230,.22) !important; background: rgba(255,255,255,.1) !important; outline: none; }
main.wpg .gate .paperlang span { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
main.wpg .gate .paperlang input:checked + span { background: #fff; border-color: #fff; color: #0B1440; }
main.wpg .gate .btn--demo { position: relative; background: linear-gradient(180deg, #4C86F2, #2F6BEB 55%, #2453D6) !important; border: 0 !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(11,20,64,.25), 0 16px 34px -12px rgba(47,107,235,.85) !important; }
main.wpg .gate .btn--demo:hover { filter: brightness(1.08); }
main.wpg .gate__consent { color: rgba(255,255,255,.6) !important; }
main.wpg .gate__consent a, main.wpg .gate__done .golink { color: #9FD3F3 !important; }
main.wpg .gate__done p { color: rgba(255,255,255,.78); }
main.wpg .wph__cover--img { background: none !important; padding: 0 !important; box-shadow: none !important; }
main.wpg .wph__cover--img img { border-radius: 12px; transform: perspective(1400px) rotateY(-10deg) rotateX(3deg);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 36px 50px 90px -30px rgba(0,0,0,.7), 0 0 110px -16px rgba(102,182,230,.45);
  -webkit-box-reflect: below 12px linear-gradient(transparent 64%, rgba(255,255,255,.14)); }

/* ---------------------------------------------------------------- the stage */
main.wpg .wgx { padding: 0; background: #0B1440; }
main.wpg .wgx > .wrap { max-width: none; padding: 0; margin: 0; width: 100%; }
main.wpg .wgx-stage { position: relative; isolation: isolate; overflow: hidden; border-radius: 0; color: #fff; padding: clamp(40px, 6vw, 96px) max(20px, calc((100% - 1320px) / 2)) clamp(56px, 8vw, 120px);
  background: radial-gradient(circle at 90% 22%, #66B6E6 0 clamp(80px, 10vw, 170px), transparent calc(clamp(80px, 10vw, 170px) + 1px)),
              radial-gradient(circle at 46% 58%, rgba(47,107,235,.95) 0 clamp(70px, 9vw, 150px), transparent calc(clamp(70px, 9vw, 150px) + 1px)),
              radial-gradient(circle at 0% 100%, #2F6BEB 0 clamp(110px, 16vw, 280px), transparent calc(clamp(110px, 16vw, 280px) + 1px)),
              #0B1440;
  box-shadow: none; }
main.wpg .wgx-stage::after { content: ""; position: absolute; inset: 0; background: var(--wg-grain); opacity: .09; mix-blend-mode: overlay; pointer-events: none; z-index: 0; }
main.wpg .wgx-head { position: relative; z-index: 1; margin: 0 0 clamp(22px, 3vw, 36px); }
main.wpg .wgx-head h2 { margin: 0 0 8px; font: 900 clamp(32px, 4.4vw, 58px)/1.02 var(--font-display); letter-spacing: -.035em; color: #fff; }
main.wpg .wgx-head p { margin: 0; font: 500 clamp(16px, 1.4vw, 19px)/1.45 var(--font-body); color: rgba(255,255,255,.72); }
main.wpg .wgx-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: clamp(12px, 1.6vw, 20px); }
.wgx--03 .wgx-p--eq { grid-column: span 7; } .wgx--03 .wgx-p--stmt { grid-column: span 5; }
.wgx--03 .wgx-p--bars { grid-column: span 5; } .wgx--03 .wgx-p--ladder { grid-column: span 7; } .wgx--03 .wgx-p--stats { grid-column: span 12; }
.wgx--02 .wgx-p--dial { grid-column: span 7; } .wgx--02 .wgx-p--stmt { grid-column: span 5; }
.wgx--02 .wgx-p--line { grid-column: span 12; } .wgx--02 .wgx-p--cost { grid-column: span 7; } .wgx--02 .wgx-p--tax { grid-column: span 5; }

/* the panel: frosted dark, lit rim, the blur behind the words */
main.wpg .wgx-p { position: relative; isolation: isolate; border-radius: 24px; box-shadow: var(--wg-shadow); min-width: 0; }
main.wpg .wgx-p::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--wg-face);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); }
main.wpg .wgx-p::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none; background: var(--wg-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
main.wpg .wgx-p--lit { box-shadow: var(--wg-shadow), 0 0 60px 6px rgba(102,182,230,.10); }
main.wpg .wgx-p--lit::after { padding: 2px; background: var(--wg-rim-lit); }
main.wpg .wgx-c { position: relative; z-index: 1; padding: clamp(20px, 2.4vw, 32px); height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
main.wpg .wgx-t { margin: 0 0 6px; font: 800 clamp(19px, 1.7vw, 24px)/1.2 var(--font-display); letter-spacing: -.018em; color: #fff; text-wrap: balance; }
main.wpg .wgx-sub { margin: 0 0 14px; font: 500 15px/1.45 var(--font-body); color: rgba(255,255,255,.72); }
main.wpg .wgx-note { margin: auto 0 0; padding-top: 16px; font: 500 13.5px/1.45 var(--font-body); color: rgba(255,255,255,.58); }
main.wpg .wgx-foot { margin: 18px 0 0; font: 800 clamp(18px, 1.6vw, 22px)/1.25 var(--font-display); color: #fff; letter-spacing: -.015em; }

/* 03: the equation */
.wgx-eq { display: flex; align-items: flex-end; flex-wrap: wrap; gap: clamp(8px, 1.3vw, 18px); margin: clamp(14px, 2vw, 26px) 0 4px; }
.wgx-eq em { font: 300 clamp(30px, 3.2vw, 46px)/1 var(--font-display); font-style: normal; color: rgba(255,255,255,.45); padding-bottom: 24px; }
.wgx-eq__n b { display: block; font: 900 clamp(40px, 4.6vw, 74px)/.95 var(--font-display); letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums; }
.wgx-eq__n i { display: block; margin-top: 8px; font: 600 13.5px/1.3 var(--font-display); font-style: normal; color: rgba(255,255,255,.64); max-width: 15ch; }
.wgx-eq__n--hi b { background: linear-gradient(180deg, #fff 10%, #9FD3F3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(102,182,230,.45)); }

/* bars (03 validity, 02 cost) */
.wgx-bars { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 14px; }
.wgx-bars li { display: grid; grid-template-columns: minmax(0, 9.6em) minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.wgx-bars li > span:first-child { font: 600 14.5px/1.3 var(--font-display); color: rgba(255,255,255,.82); }
.wgx-bars li b { font: 900 clamp(20px, 1.9vw, 26px)/1 var(--font-display); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
.wgx-bars--cost li b { font-size: clamp(15px, 1.3vw, 17px); min-width: 0; }
.wgx-bar { position: relative; height: 14px; border-radius: 99px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; }
.wgx-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: linear-gradient(90deg, rgba(102,182,230,.55), rgba(102,182,230,.85)); }
.wgx-bars li.is-hi .wgx-bar i { background: linear-gradient(90deg, #2F6BEB, #66B6E6); box-shadow: 0 0 18px rgba(102,182,230,.6); }
.wgx-axis { display: flex; justify-content: space-between; margin: 10px 0 0 calc(9.6em + 14px); margin-right: calc(2.6em + 14px); font: 500 12px/1 var(--font-body); color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }
html.wgx-on .wgx:not(.is-in) .wgx-bar i { width: 0; }
.wgx-bar i { transition: width 1.4s var(--wg-ease); }
.wgx-bars li:nth-child(2) .wgx-bar i { transition-delay: .12s; } .wgx-bars li:nth-child(3) .wgx-bar i { transition-delay: .24s; }

/* 03: the Proof Ladder as a staircase of thin glass steps */
.wgx-ladder { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 8px; min-height: 270px; }
.wgx-rung { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 12px 10px 14px; border-radius: 14px;
  height: calc(92px + var(--i) * 36px); box-sizing: border-box; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.12); }
.wgx-rung__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 800 13px/1 var(--font-display); color: #0B1440; background: #F8F3E9; }
.wgx-rung--2 .wgx-rung__n { background: #66B6E6; } .wgx-rung--3 .wgx-rung__n { background: #2F6BEB; color: #fff; }
.wgx-rung--4 .wgx-rung__n { background: #0B1440; color: #fff; box-shadow: 0 0 0 1.5px rgba(255,255,255,.6); } .wgx-rung--5 .wgx-rung__n { background: #fff; }
.wgx-rung b { font: 800 14px/1.15 var(--font-display); color: #fff; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.wgx-rung span:last-child { font: 500 12.5px/1.35 var(--font-body); color: rgba(255,255,255,.7); }
.wgx-band { display: grid; grid-template-columns: 4fr 1fr; gap: 8px; margin-top: 8px; }
.wgx-band span { padding: 6px 10px; border-radius: 99px; font: 600 12px/1.2 var(--font-display); color: rgba(255,255,255,.75); text-align: center; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.wgx-band span:last-child { color: #0B1440; background: #fff; }
html.wgx-on .wgx:not(.is-in) .wgx-rung { transform: translateY(18px); opacity: 0; }
.wgx-rung { transition: transform .9s var(--wg-ease), opacity .9s var(--wg-ease); transition-delay: calc(var(--i) * 90ms); }

/* statements */
.wgx-stmt { margin: auto 0 10px; font: 900 clamp(28px, 3.2vw, 44px)/1.04 var(--font-display); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.wgx-p--stmt .wgx-c { justify-content: flex-end; min-height: 220px; }
.wgx-p--stmt .wgx-sub { margin: 0; }

/* 03: context stats */
.wgx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
.wgx-stat b { display: block; font: 900 clamp(34px, 4vw, 54px)/1 var(--font-display); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.wgx-stat span { display: block; margin-top: 10px; font: 500 14.5px/1.45 var(--font-body); color: rgba(255,255,255,.76); }
.wgx-stat i { display: block; margin-top: 8px; font: 600 12.5px/1.3 var(--font-display); font-style: normal; color: rgba(255,255,255,.5); }

/* 02: the dial */
.wgx-dialrow { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(16px, 2.6vw, 34px); align-items: center; margin-top: 8px; }
.wgx-dial { width: 100%; height: auto; overflow: visible; }
.wgx-dial__day { fill: none; stroke: rgba(255,255,255,.17); stroke-width: 16; stroke-linecap: butt; }
.wgx-dial__work { fill: none; stroke: #9FD3F3; stroke-width: 24; stroke-linecap: butt; filter: drop-shadow(0 0 7px rgba(102,182,230,1)); }
.wgx-dial__big { font: 900 76px/1 var(--font-display); letter-spacing: -.05em; fill: #fff; }
.wgx-big { margin: 0 0 10px; font: 900 clamp(22px, 2vw, 28px)/1.1 var(--font-display); letter-spacing: -.02em; color: #fff; }
.wgx-big span { font-weight: 600; color: rgba(255,255,255,.72); font-size: .7em; letter-spacing: -.01em; }
.wgx-lede { margin: 0 0 14px; font: 500 17px/1.45 var(--font-body); color: rgba(255,255,255,.8); }
.wgx-lede b { color: #fff; }
.wgx-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wgx-key li { position: relative; padding-left: 22px; font: 500 13.5px/1.4 var(--font-body); color: rgba(255,255,255,.66); }
.wgx-key li::before { content: ""; position: absolute; left: 0; top: .32em; width: 12px; height: 12px; border-radius: 4px; background: rgba(255,255,255,.18); }
.wgx-key li.is-work::before { background: #66B6E6; box-shadow: 0 0 8px rgba(102,182,230,.9); }
html.wgx-on .wgx:not(.is-in) .wgx-dial__work { opacity: 0; }
.wgx-dial__work { transition: opacity 1.2s var(--wg-ease) .4s; }

/* 02: the handoff line */
.wgx-line { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; position: relative; }
.wgx-line::before { content: ""; position: absolute; left: 6%; right: 6%; top: 15px; height: 2px; background: linear-gradient(90deg, rgba(102,182,230,.2), #66B6E6 50%, rgba(102,182,230,.2)); }
.wgx-line li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 6px; }
.wgx-line li b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 800 12px/1 var(--font-display); color: #0B1440;
  background: radial-gradient(circle at 35% 30%, #fff, #CDE9FA 60%, #66B6E6); box-shadow: 0 0 0 5px rgba(102,182,230,.14), 0 0 18px rgba(102,182,230,.6); }
.wgx-line li span { font: 500 13px/1.35 var(--font-body); color: rgba(255,255,255,.76); text-wrap: balance; }
html.wgx-on .wgx:not(.is-in) .wgx-line li { opacity: 0; transform: translateY(10px); }
.wgx-line li { transition: opacity .7s var(--wg-ease), transform .7s var(--wg-ease); transition-delay: calc(var(--i) * 80ms); }

/* 02: the total */
.wgx-total { margin: 22px 0 0; font: 500 15px/1.5 var(--font-body); color: rgba(255,255,255,.76); }
.wgx-total b { display: inline-block; margin: 4px 4px; padding: 6px 14px; border-radius: 99px; font: 900 clamp(22px, 2.2vw, 30px)/1.1 var(--font-display); letter-spacing: -.025em; color: #fff;
  background: linear-gradient(180deg, rgba(102,182,230,.32), rgba(47,107,235,.5)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(155,213,245,.55), 0 0 30px rgba(102,182,230,.35); }

/* 02: the five parts */
.wgx-tax { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: t; }
.wgx-tax li { counter-increment: t; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 11px 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.1); }
.wgx-tax li::before { content: counter(t); grid-row: span 2; align-self: center; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 800 12.5px/1 var(--font-display); color: #0B1440; background: #66B6E6; }
.wgx-tax li b { font: 800 16px/1.2 var(--font-display); color: #fff; }
.wgx-tax li span { font: 500 13.5px/1.4 var(--font-body); color: rgba(255,255,255,.7); }

/* ---------------------------------------------------------------- the reading band: contents as numbered glass chips */
main.wpg .band.paper .reading ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: c; }
main.wpg .band.paper .reading ul li { counter-increment: c; position: relative; margin: 0; padding: 14px 16px 14px 54px; border-radius: 16px; font: 500 15px/1.4 var(--font-body); color: #0B1440;
  background: linear-gradient(170deg, rgba(255,255,255,.86), rgba(255,255,255,.6));
  box-shadow: inset 0 0 0 1px rgba(11,20,64,.08), inset 0 1.5px 0 #fff, 0 1px 2px rgba(11,20,64,.06), 0 16px 30px -20px rgba(11,20,64,.3); }
main.wpg .band.paper .reading ul li::before { content: counter(c, decimal-leading-zero); position: absolute; left: 16px; top: 13px; font: 800 14px/1.4 var(--font-display); color: #2F6BEB; font-variant-numeric: tabular-nums; }
main.wpg .band.paper .reading ul li::marker { content: none; }
/* related tiles: a lit rim on the deep tile */
main.wpg .related .tile { position: relative; box-shadow: 0 30px 60px -36px rgba(11,20,64,.5); }
main.wpg .related .tile__top { position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(circle at 96% 0%, #66B6E6 0 70px, transparent 71px), var(--wg-ground) !important; }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 980px) {
  main.wpg .wgx-grid > .wgx-p { grid-column: span 12 !important; }
  .wgx-stats { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wgx-bars li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .wgx-bars li .wgx-bar { grid-column: 1 / -1; grid-row: 2; }
  .wgx-axis { margin-left: 0; margin-right: 0; }
  .wgx-ladder { grid-template-columns: 1fr; min-height: 0; }
  .wgx-rung { height: auto; width: 100%; margin: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; }
  .wgx-rung span:last-child { grid-column: 2; }
  .wgx-ladder { display: flex; flex-direction: column-reverse; }
  .wgx-band { grid-template-columns: 1fr 1fr; }
  .wgx-dialrow { grid-template-columns: 1fr; justify-items: center; }
  .wgx-dial { max-width: 220px; }
  .wgx-line { grid-template-columns: 1fr; gap: 12px; }
  .wgx-line::before { left: 15px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(102,182,230,.2), #66B6E6 50%, rgba(102,182,230,.2)); }
  .wgx-line li { flex-direction: row; text-align: left; align-items: center; padding: 0; }
  .wgx-eq__n b { font-size: clamp(40px, 13vw, 60px); }
  .wgx-eq em { padding-bottom: 22px; font-size: 30px; }
  main.wpg .band.paper .reading ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { main.wpg * { transition: none !important; } }
/* short laptop screens (1366x768, 1280x720): the hero stays one screen high */
@media (min-width: 861px) and (max-height: 860px) {
  body.wpg-page main.wpg .wph { padding: calc(var(--tbo, 40px) + 76px) 0 36px; }
  main.wpg .wph .h1 { font-size: clamp(30px, 3.3vw, 46px); }
  main.wpg .wph .sub { font-size: 16px; line-height: 1.5; margin-bottom: 0; }
  main.wpg .wph .gate { margin-top: 22px; padding: 20px 22px; }
  main.wpg .wph .gate b { margin-bottom: 10px; }
  main.wpg .wph .paperlang { margin: 10px 0 12px; }
  main.wpg .wph .gate__grid { gap: 8px 12px; }
  main.wpg .wph .gate input[type=text], main.wpg .wph .gate input[type=email] { padding-top: 10px !important; padding-bottom: 10px !important; }
}
@media (min-width: 861px) and (max-height: 760px) {
  main.wpg .wph .h1 { font-size: clamp(28px, 2.9vw, 40px); }
  main.wpg .wph .sub { font-size: 15px; }
  main.wpg .wph .gate { margin-top: 16px; padding: 16px 20px; }
  main.wpg .wph .gate__consent { margin-top: 8px !important; }
}
/* the phone: phone.js moves the form into its own section after the hero; it stays on the same navy */
main.wpg section.wph-gate { background: #0B1440 !important; }
main.wpg .rh-wp-cta { background: linear-gradient(180deg, #4C86F2, #2F6BEB 55%, #2453D6) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 16px 34px -12px rgba(47,107,235,.85) !important; }
/* the library (/white-papers): its opening band is the same full-screen navy */
body.wpg-page main.wpg-lib .phero { min-height: 100svh; box-sizing: border-box; display: grid; align-content: center; background: #0B1440 !important; color: #fff; }
body.wpg-page main.wpg-lib .phero :is(h1, h1 b, .h1, .h1 b) { color: #fff !important; }
body.wpg-page main.wpg-lib .phero :is(p, .sub, .lead) { color: rgba(255,255,255,.78) !important; }
@media (max-height: 640px) { body.wpg-page main.wpg-lib .phero { min-height: 0; } }