/* ==========================================================================
   DIGISCHOOL: the public showcase pages, shared.

   What the landing page, /features/ and /modules/ have in common: the section
   rhythm and heads, the pill buttons, the tick list and the rise. Each page
   adds its own sheet after this one (home, features, modules), so a visitor
   reading /modules/ does not download the landing page's stage.
   ========================================================================== */

.ec-mk {
  --lp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Section rhythm ------------------------------------------------------
   Paper and white bands alternate under the stage, so a section ends where
   its colour does rather than where a rule is drawn. */

.lp-sec {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.lp-sec--pale { background: var(--ec-surface); }

/* --- Section heads -------------------------------------------------------
   Left-aligned, never centred: the heading on the left and the lead beside
   it on a wide screen, stacked on a phone. Built by lp_head() in index.php.
   The eyebrow is sentence case behind a short rule rather than tracked-out
   capitals. */

.lp-head {
  display: grid;
  gap: var(--ec-space-5) var(--ec-space-12);
  margin-block-end: clamp(2.25rem, 5vw, 3.75rem);
}

@media (min-width: 900px) {
  .lp-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }
}

.lp-eyebrow {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 var(--ec-space-4);
  font-size: var(--ec-text-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ec-accent);
}

.lp-eyebrow::before {
  flex-shrink: 0;
  width: 22px;
  height: 2px;
  content: '';
  background: currentColor;
  border-radius: 2px;
}

.lp-h2 {
  max-width: 20ch;
  margin: 0;
  font-family: var(--ec-font-display);
  font-size: clamp(1.875rem, 1.1rem + 2.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ec-text);
  text-wrap: balance;
}

/* mk_t() marks a phrase in every heading; on this page a heading is one
   statement, so the marked phrase reads like the rest of it. */
.lp-h2 .ec-mk-hl {
  padding: 0;
  color: inherit;
  font-weight: inherit;
  background: none;
}

.lp-lead {
  max-width: 52ch;
  margin: 0;
  font-size: var(--ec-text-lg);
  line-height: 1.6;
  color: var(--ec-text-muted);
}

.lp-head--onDark .lp-eyebrow { color: var(--ec-primary-300); }
.lp-head--onDark .lp-h2 { color: var(--ec-paper-0); }
.lp-head--onDark .lp-lead { color: var(--ec-ink-200); }

/* The tick list, shared by the subsystems, the portals and the ask. */
.lp-ticks {
  display: grid;
  gap: var(--ec-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-ticks li {
  display: flex;
  gap: var(--ec-space-3);
  align-items: flex-start;
  line-height: 1.55;
  color: var(--ec-text-muted);
}

.lp-ticks b { font-weight: 600; color: var(--ec-text); }

.lp-ticks svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 5px;
  box-sizing: border-box;
  color: var(--ec-success);
  background: var(--ec-success-soft);
  border-radius: 50%;
}

.lp-ticks--on li { color: color-mix(in srgb, var(--ec-paper-0) 90%, transparent); }
.lp-ticks--on svg { color: var(--ec-paper-0); background: rgb(255 255 255 / 16%); }

/* --- Buttons -------------------------------------------------------------
   The sheet's pill. 50px tall, full radius, and the primary one carries the
   cyan rather than the sheet's navy: navy is this application's CHROME, and a
   call to action painted the same colour as the header is not a call to
   action. */

.lp-btn {
  display: inline-flex;
  gap: var(--ec-space-2);
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding-inline: var(--ec-space-6);
  font-family: var(--ec-font-display);
  font-size: var(--ec-text-md);
  font-weight: 600;
  color: var(--ec-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--ec-radius-full);
  transition: background var(--ec-transition-fast), color var(--ec-transition-fast),
              border-color var(--ec-transition-fast), transform var(--ec-transition-fast);
}

.lp-btn:active { transform: scale(0.98); }

.lp-btn--go {
  color: var(--ec-accent-on);
  background: var(--ec-accent);
  box-shadow: 0 2px 10px -2px rgb(18 113 159 / 40%);
}

.lp-btn--go:hover { color: var(--ec-accent-on); background: var(--ec-accent-hover); }

.lp-btn--quiet {
  color: var(--ec-text);
  background: var(--ec-surface);
  border-color: var(--ec-border-strong);
}

.lp-btn--quiet:hover { background: var(--ec-bg); border-color: var(--ec-accent); }

.lp-btn--onDark {
  flex-shrink: 0;
  color: var(--ec-primary-ink);
  background: var(--ec-primary-300);
}

.lp-btn--onDark:hover { color: var(--ec-primary-ink); background: var(--ec-primary-200); }

/* On the stage. White with the ink of the cyan, so it holds in both themes
   (the stage is dark in both); the round badge is the reference's move, and
   its arrow turns to point the way on hover. */
.lp-btn--light {
  padding-inline-end: 6px;
  color: var(--ec-primary-ink);
  background: var(--ec-paper-0);
  box-shadow: 0 10px 24px -12px rgb(4 22 33 / 60%);
}

.lp-btn--light:hover { color: var(--ec-primary-ink); background: var(--ec-primary-50); }

.lp-btn__dot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-inline-start: var(--ec-space-2);
  color: var(--ec-paper-0);
  background: var(--ec-primary-600);
  border-radius: var(--ec-radius-full);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-btn:hover .lp-btn__dot { transform: rotate(45deg); }

.lp-btn--line {
  color: var(--ec-paper-0);
  border-color: rgb(255 255 255 / 55%);
}

.lp-btn--line:hover { color: var(--ec-paper-0); background: rgb(255 255 255 / 10%); }

/* ==========================================================================
   THE RISE
   The one entrance below the stage. Each card arrives tipped back and lands
   flat, as if set down on the page — the stage's tilt, carried down the page
   once per card and never again. The hidden state is added by lp.js and
   only to cards below the fold, so without the script, or with reduced
   motion, nothing waits to be revealed.
   ========================================================================== */

.lp-pre {
  opacity: 0;
  transform: perspective(1200px) translateY(40px) rotateX(16deg);
  transform-origin: 50% 100%;
}

.lp-pre.lp-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Three devices: real captures on a monitor, a tablet and a phone -------
   Shared by /features/ and /modules/. The page decides which captures go in.
   One box, 16:10.5, the devices placed in it by percentage so the group
   scales as one. The monitor sits at the back; the tablet overlaps its lower
   left, the phone its lower right. The box is capped by the window's height
   (it is about 0.66 as tall as it is wide). */

.lp-shots {
  position: relative;
  width: 100%;
  max-width: min(1100px, calc((100svh - 12rem) * 1.5));
  margin-inline: auto;
  aspect-ratio: 16 / 10.5;
}

.lp-shot { position: absolute; margin: 0; }

.lp-shot__body {
  background: var(--ec-chrome);
  border: 1px solid var(--ec-chrome-line);
  box-shadow:
    0 2px 0 0 rgb(255 255 255 / 8%) inset,
    0 40px 60px -28px rgb(6 32 46 / 50%);
}

.lp-shot img { display: block; width: 100%; height: auto; }

/* The monitor, with a neck and a foot drawn under it. */
.lp-shot--desk { top: 0; left: 13%; width: 80%; }
.lp-shot--desk .lp-shot__body { padding: 1.4%; border-radius: clamp(8px, 1.2vw, 16px); }
.lp-shot--desk img { border-radius: clamp(4px, 0.5vw, 8px); }

.lp-shot__stand {
  position: relative;
  display: block;
  width: 16%;
  height: clamp(14px, 2.2vw, 34px);
  margin-inline: auto;
  background: linear-gradient(var(--ec-chrome-2), var(--ec-chrome));
  clip-path: polygon(28% 0, 72% 0, 82% 100%, 18% 100%);
}

.lp-shot__stand::after {
  position: absolute;
  inset: auto -55% -6px;
  height: 6px;
  content: '';
  background: var(--ec-chrome);
  border-radius: 99px;
}

/* The tablet, landscape, leaning in from the left. */
.lp-shot--tab {
  bottom: 3%;
  left: 0;
  z-index: 2;
  width: 42%;
  transform: perspective(1400px) rotateY(16deg) rotateZ(-2deg);
}

.lp-shot--tab .lp-shot__body { padding: 2.4%; border-radius: clamp(10px, 1.6vw, 22px); }
.lp-shot--tab img { border-radius: clamp(4px, 0.6vw, 10px); }

/* The phone, leaning in from the right. */
.lp-shot--phone {
  right: 1%;
  bottom: 0;
  z-index: 3;
  width: 19%;
  transform: perspective(1400px) rotateY(-14deg) rotateZ(2deg);
}

.lp-shot--phone .lp-shot__body { padding: 4%; border-radius: 15% / 7%; }
.lp-shot--phone img { border-radius: 12% / 5.6%; }

@media (prefers-reduced-motion: no-preference) {
  .lp-shot { animation: lp-arrive 1s var(--lp-ease) both; }
  .lp-shot--tab { animation-delay: 0.18s; }
  .lp-shot--phone { animation-delay: 0.3s; }
}

/* translate, not transform, so each device keeps its own lean as it lands. */
@keyframes lp-arrive { from { opacity: 0; translate: 0 48px; } }

/* The floating objects: small tiles in the brand's tones, turned in 3D and
   drifting slowly. Drawings only. */
.lp-float {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(40px, 4.4vw, 68px);
  height: clamp(40px, 4.4vw, 68px);
  color: var(--ec-paper-0);
  background: linear-gradient(145deg, var(--ec-primary-400), var(--ec-primary-700));
  border-radius: 28%;
  box-shadow:
    0 2px 0 0 rgb(255 255 255 / 30%) inset,
    5px 7px 0 0 var(--ec-primary-800),
    12px 20px 26px -12px rgb(6 32 46 / 50%);
}

.lp-float svg { width: 46%; height: 46%; }

.lp-float--0 { top: 6%; left: 2%; transform: rotate(-14deg); }
.lp-float--1 {
  top: -3%;
  right: 2%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ec-success) 70%, white), var(--ec-success));
  box-shadow: 0 2px 0 0 rgb(255 255 255 / 30%) inset, 5px 7px 0 0 color-mix(in srgb, var(--ec-success) 70%, black), 12px 20px 26px -12px rgb(6 32 46 / 50%);
  transform: rotate(12deg);
}
.lp-float--2 {
  top: 44%;
  right: -2%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ec-warning) 55%, white), var(--ec-warning));
  box-shadow: 0 2px 0 0 rgb(255 255 255 / 30%) inset, 5px 7px 0 0 color-mix(in srgb, var(--ec-warning) 70%, black), 12px 20px 26px -12px rgb(6 32 46 / 50%);
  transform: rotate(-8deg);
}
.lp-float--3 {
  bottom: 2%;
  left: 46%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ec-info) 60%, white), var(--ec-info));
  box-shadow: 0 2px 0 0 rgb(255 255 255 / 30%) inset, 5px 7px 0 0 color-mix(in srgb, var(--ec-info) 70%, black), 12px 20px 26px -12px rgb(6 32 46 / 50%);
  transform: rotate(10deg);
}

@media (prefers-reduced-motion: no-preference) {
  .lp-float { animation: lp-drift 7s ease-in-out infinite alternate; }
  .lp-float--1 { animation-duration: 8s; animation-delay: -2s; }
  .lp-float--2 { animation-duration: 6.5s; animation-delay: -4s; }
  .lp-float--3 { animation-duration: 9s; animation-delay: -1s; }
}

@keyframes lp-drift { to { translate: 0 -12px; } }

@media (max-width: 599.98px) {
  .lp-float--1,
  .lp-float--3 { display: none; }
}

@media print { .lp-shots, .lp-float { display: none; } }

/* --- Width ------------------------------------------------------------------
   Every page that loads this sheet runs fluid: 90% of a wide window, up to
   2100px, rather than a fixed column with empty margins either side. The
   header and the footer follow, so the page lines up edge to edge. */

.ec-mk { --lp-wide: clamp(1240px, 90vw, 2100px); }

.ec-mk .ec-mk-wrap:not(.ec-mk-wrap--narrow),
.ec-mk .ec-mk-head__inner { max-width: var(--lp-wide); }

/* --- The split hero ----------------------------------------------------------
   The opening of every product page after the landing page: the statement on
   the left, a picture of the product on the right, on a dotted field that
   fades towards the edges. Sized against the window's height as well as its
   width, so the whole hero fits the first screen. */

.lp-sh {
  position: relative;
  isolation: isolate;
  padding-block: clamp(1.5rem, 5vh, 4rem) clamp(2.5rem, 7vh, 5rem);
  overflow: hidden;
}

.lp-sh::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background-image: radial-gradient(color-mix(in srgb, var(--ec-text) 16%, transparent) 1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 45%, black, transparent);
  mask-image: radial-gradient(70% 70% at 70% 45%, black, transparent);
}

.lp-sh__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 960px) {
  .lp-sh__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.lp-sh__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

.lp-sh__copy .lp-eyebrow { margin-block-end: var(--ec-space-4); }

.lp-sh__title {
  max-width: 16ch;
  margin: 0;
  font-family: var(--ec-font-display);
  font-size: clamp(2.125rem, min(1.2rem + 3.2vw, 7vh), 5rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.04em;
  color: var(--ec-text);
  text-wrap: balance;
}

/* mk_t() marks the words to stress; here they take the accent, no underline. */
.lp-sh__title .ec-mk-hl { padding: 0; color: var(--ec-accent); font-weight: inherit; background: none; }

.lp-sh__lead {
  max-width: 52ch;
  margin: var(--ec-space-4) 0 0;
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ec-text-muted);
}

.lp-sh__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-space-3);
  margin-block-start: clamp(var(--ec-space-5), 3.5vh, var(--ec-space-8));
}

.lp-sh__btn { padding-inline-end: 6px; }
.lp-sh__btn .lp-btn__dot { color: var(--ec-accent); background: var(--ec-paper-0); }

.lp-sh__note {
  display: flex;
  gap: var(--ec-space-2);
  align-items: flex-start;
  max-width: 60ch;
  margin: var(--ec-space-4) 0 0;
  font-size: var(--ec-label-md);
  line-height: 1.5;
  color: var(--ec-text-subtle);
}

.lp-sh__note svg { flex-shrink: 0; margin-block-start: 2px; color: var(--ec-accent); }

/* --- The closing link -------------------------------------------------------
   The cyan band at the foot of a product page that points to the next one. */

.lp-next {
  display: grid;
  gap: var(--ec-space-5);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  color: var(--ec-paper-0);
  background: linear-gradient(170deg, var(--ec-primary-600), var(--ec-primary-800));
  border-radius: clamp(24px, 3vw, 36px);
}

[data-theme='dark'] .lp-next { background: linear-gradient(170deg, var(--ec-primary-900), var(--ec-chrome-2)); }

@media (min-width: 800px) {
  .lp-next { grid-template-columns: minmax(0, 1fr) auto; }
}

.lp-next__title {
  margin: 0 0 var(--ec-space-2);
  font-family: var(--ec-font-display);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ec-paper-0);
}

.lp-next__title .ec-mk-hl { padding: 0; color: inherit; background: none; }

.lp-next__body { max-width: 56ch; margin: 0; line-height: 1.6; color: color-mix(in srgb, var(--ec-paper-0) 88%, transparent); }

.lp-next__links { display: flex; flex-wrap: wrap; gap: var(--ec-space-3); }

@media print {
  .lp-next { color: black; background: none; border: 1px solid var(--ec-border); }
}

/* ==========================================================================
   THE STACK: four tappable layers and a panel beside them
   Used by the landing page (the four portals) and /schools/ (the four
   kinds of school). Four layers in one 3D scene. The first sits on top; pressing a
   layer lifts it clear of the stack and slides it out, and its panel turns
   in beside the scene. Every layer is a real tab.
   ========================================================================== */

/* minmax(0, 1fr): the hint is max-content wide, and an auto column would
   grow to fit it and push the panel past the screen edge on a phone. */
.lp-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 960px) {
  .lp-deck { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.lp-deck__scene {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  place-items: center;
  row-gap: var(--ec-space-4);
  min-height: clamp(360px, 48vw, 540px);
  overflow: clip;
  perspective: 1800px;
}

/* On a wide screen the lifted layer may reach into the column gap; on a
   phone the scene clips, so nothing can push the page sideways. */
@media (min-width: 960px) {
  .lp-deck__scene { overflow: visible; }
}

/* The lifted layer slides towards the right; on a narrow scene the stack
   starts left of centre so the layer still lands inside it. */
@media (max-width: 959.98px) {
  .lp-deck__stack { translate: -9% 0; }

  /* The lifted layer rises further, relative to the scene, on a phone:
     the hint needs the extra room so the layer never sits over it. */
  .lp-deck__scene { row-gap: clamp(3.5rem, 16vw, 5rem); }
  .lp-deck__hint { justify-self: stretch; width: auto; max-width: none; }
}

.lp-deck__stack {
  position: relative;
  grid-row: 2;
  width: min(320px, 62vw);
  aspect-ratio: 10 / 7;
  margin-block-start: 24%;
  transform: rotateX(58deg) rotateZ(-36deg);
  transform-style: preserve-3d;
}

.lp-plate {
  --k: 0;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ec-space-3);
  align-items: flex-start;
  justify-content: flex-end;
  padding: 22px 26px;
  font: inherit;
  color: var(--ec-text);
  text-align: start;
  cursor: pointer;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--role) 8%, var(--ec-surface)),
    color-mix(in srgb, var(--role) 24%, var(--ec-surface)));
  border: 1px solid color-mix(in srgb, var(--role) 30%, var(--ec-surface));
  border-radius: 26px;
  /* The hard offset is the layer's edge, read as thickness once the plane is
     tilted; the soft one is its shadow on the layer below. */
  box-shadow:
    9px 11px 0 -1px color-mix(in srgb, var(--role) 50%, var(--ec-surface)),
    30px 44px 50px -24px rgb(6 32 46 / 38%);
  transform: translateZ(calc(var(--k) * 64px));
  transition: transform 0.8s var(--lp-ease), background-color 0.3s;
}

.lp-plate:nth-child(1) { --k: 3; }
.lp-plate:nth-child(2) { --k: 2; }
.lp-plate:nth-child(3) { --k: 1; }

.lp-plate:hover { transform: translateZ(calc(var(--k) * 64px + 18px)); }

/* The chosen layer rises above the whole stack and slides out of it. */
.lp-deck.is-tabbed .lp-plate[aria-selected='true'] {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--role) 18%, var(--ec-surface)),
    color-mix(in srgb, var(--role) 40%, var(--ec-surface)));
  transform: translateZ(210px) translateX(10%) translateY(6%);
}

.lp-plate__ico {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--ec-surface);
  background: var(--role);
  border-radius: 13px;
}

.lp-plate__name {
  font-family: var(--ec-font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.375rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* The chevron after each name says "this opens something", on the strip of
   each layer that stays visible under the one above it. */
.lp-plate__name { display: inline-flex; gap: var(--ec-space-2); align-items: center; }

.lp-plate__go {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--ec-surface);
  background: var(--role);
  border-radius: var(--ec-radius-full);
  transition: opacity 0.3s, translate 0.3s var(--lp-ease);
}

.lp-plate:hover .lp-plate__go { translate: 3px 0; }
.lp-deck:not(.is-tabbed) .lp-plate__go,
.lp-deck.is-tabbed .lp-plate[aria-selected='true'] .lp-plate__go { opacity: 0; }

/* The instruction, set where the eye lands first: above the stack, in the
   accent, rather than as a muted line under it. */
.lp-deck__hint {
  grid-row: 1;
  display: inline-flex;
  gap: var(--ec-space-2);
  align-items: center;
  width: max-content;
  max-width: calc(100% - var(--ec-space-4));
  margin: 0;
  padding: 8px 16px 8px 12px;
  font-size: var(--ec-text-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ec-accent);
  background: var(--ec-accent-soft);
  border-radius: var(--ec-radius-full);
}

/* Once, as the stack scrolls into view, each layer lifts in turn from the
   top: it shows they come apart. lp.js adds .is-fanning and takes it off
   again; nothing loops. translate composes with each layer's transform, so
   the chosen layer keeps its place. */
@media (prefers-reduced-motion: no-preference) {
  .lp-deck.is-fanning .lp-plate {
    animation: lp-fan 0.9s var(--lp-ease) calc((3 - var(--k)) * 0.25s) both;
  }
}

@keyframes lp-fan {
  0%, 100% { translate: 0 0 0; }
  45%      { translate: 0 0 80px; }
}

.lp-deck:not(.is-tabbed) .lp-deck__hint { display: none; }

.lp-deck__info { display: grid; gap: var(--ec-space-6); }

.lp-deck.is-tabbed .lp-deck__panel { grid-area: 1 / 1; }

.lp-deck__panel {
  overflow: hidden;
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-radius: clamp(22px, 3vw, 30px);
}

.lp-deck__media { margin: 0; }

.lp-deck__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  object-position: 50% 35%;
}

/* A photograph whose upper part carries signage: show its lower half. */
.lp-deck__media--low img { object-position: 50% 92%; }

.lp-deck__copy { padding: clamp(1.25rem, 3.5vw, 2.25rem); }

.lp-deck__title {
  display: flex;
  gap: var(--ec-space-3);
  align-items: center;
  margin: 0 0 var(--ec-space-3);
  font-family: var(--ec-font-display);
  font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ec-text);
}

.lp-deck__body {
  margin: 0 0 var(--ec-space-5);
  font-size: var(--ec-text-md);
  line-height: 1.6;
  color: var(--ec-text-muted);
}

.lp-deck.is-tabbed .lp-deck__panel:not(.is-on) .lp-deck__media {
  transform: perspective(1400px) rotateY(-14deg) translateX(8%);
  opacity: 0;
}

.lp-deck.is-tabbed .lp-deck__panel:not(.is-on) .lp-deck__copy { transform: translateY(20px); }

.lp-plate:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .lp-deck__panel { transition: opacity 0.5s ease, visibility 0s linear 0s; }
  .lp-deck__media,
  .lp-deck__copy { transition: transform 0.9s var(--lp-ease), opacity 0.6s ease; }
}

.lp-deck.is-tabbed .lp-deck__panel:not(.is-on) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}