/* ==========================================================================
   Advanced Sales Training. The light theme (2026-09-22).

   Every rule here is scoped to html[data-theme="light"]. Without that
   attribute this file matches nothing, so the dark site, which is the brand
   and the default for every visitor, is exactly what main.css says it is.

   THE IDEA (Rron's pick, direction A): the page turns to a silver ground,
   top to bottom, and the photographs stay exactly as shot. Each one sits in a
   machined frame: a 6px bevel, the page's 2px radius, and the JOLT cards'
   laser ticks on its four corners, so the frame is made of what the site
   already speaks. Where a plate's painted laser runs to its edge, the line
   carries on past the frame onto the silver. The finale becomes the largest
   frame of all: the one dark set piece the light page ends on.

   COLOUR. The token ladder is inverted rather than rewritten, so every rule
   in main.css that asks for "the strongest ink" or "the ground" still gets
   the right one:
     --white-heat  the strongest mark     #F4F6F9  ->  ink     #0B0D10
     --deep-space  the ground             #060708  ->  silver  #F6F7F9
                   (the page itself runs #EDEFF3 to #D6DBE2, top to bottom)
     --silver      body copy              #B4BBC6  ->  #3B424D
     --slate       small mono lines       #939DAE  ->  #535C69
   Every text element clears AA on the ground's darkest stop; the audit is in
   the branch's commit notes.
   The laser stays #2E6BFF and stays off text, as on the dark page.
   ========================================================================== */

:root[data-theme="light"] {
  --deep-space: #F6F7F9;
  --deep-field: #E9ECF0;
  --panel: #D6DBE2;
  --white-heat: #0B0D10;
  --silver: #3B424D;
  --slate: #535C69;
  /* Hover and label blue. Darker than the dark page's sky glow, because a
     pale blue on silver is not there at all. */
  --sky-glow: #1F4FD1;

  --hairline: rgba(11, 13, 16, 0.14);
  --edge: rgba(46, 107, 255, 0.34);
  --edge-hot: rgba(46, 107, 255, 0.66);

  /* The frame, one definition for every plate and the finale. */
  --bevel: linear-gradient(160deg, #FFFFFF 0%, #EEF0F3 35%, #C4CAD3 100%);
  --frame: 6px;
  --frame-shadow: 0 0 0 1px rgba(11, 13, 16, 0.10), 0 36px 60px -36px rgba(11, 13, 16, 0.5);
  --tick: 34px;
  --tick-out: rgba(46, 107, 255, 0);
  --ticks:
    linear-gradient(90deg,  var(--live-wire), var(--tick-out)) left top / var(--tick) 2px no-repeat border-box,
    linear-gradient(180deg, var(--live-wire), var(--tick-out)) left top / 2px var(--tick) no-repeat border-box,
    linear-gradient(270deg, var(--live-wire), var(--tick-out)) right top / var(--tick) 2px no-repeat border-box,
    linear-gradient(180deg, var(--live-wire), var(--tick-out)) right top / 2px var(--tick) no-repeat border-box,
    linear-gradient(90deg,  var(--live-wire), var(--tick-out)) left bottom / var(--tick) 2px no-repeat border-box,
    linear-gradient(0deg,   var(--live-wire), var(--tick-out)) left bottom / 2px var(--tick) no-repeat border-box,
    linear-gradient(270deg, var(--live-wire), var(--tick-out)) right bottom / var(--tick) 2px no-repeat border-box,
    linear-gradient(0deg,   var(--live-wire), var(--tick-out)) right bottom / 2px var(--tick) no-repeat border-box;

  color-scheme: light;
}

/* THE GROUND. One gradient over the whole document, not one per section, so
   the page darkens once from top to bottom. The body's background propagates
   to the canvas and is sized against the root, which is the full page. */
[data-theme="light"] body {
  /* Silver from the first pixel, never white: #F6F7F9 at the top read as
     white, and over a ten-thousand-pixel page a pale ramp is invisible
     inside any one screen. */
  background: linear-gradient(180deg, #EDEFF3 0%, #E3E7EC 45%, #D6DBE2 100%);
}
/* The alternate grounds would be slabs across that gradient. */
[data-theme="light"] .section--alt::before,
[data-theme="light"] .footer::before { background: transparent; }

/* --------------------------------------------------------------------------
   Nav. Frosted silver instead of frosted night.
   -------------------------------------------------------------------------- */
[data-theme="light"] .nav { background: rgba(237, 239, 243, 0.8); }
[data-theme="light"] .nav.is-stuck { background: rgba(237, 239, 243, 0.94); }
/* The light-ground wordmark. The script swaps the src as well, for engines
   that do not honour content on an image. */
[data-theme="light"] .nav__logo img,
[data-theme="light"] .footer__brand img { content: url("../assets/logo-light.svg"); }
[data-theme="light"] .theme-toggle__sun { display: none !important; }
[data-theme="light"] .theme-toggle__moon { display: block !important; }

/* --------------------------------------------------------------------------
   Type that was drawn in light.
   -------------------------------------------------------------------------- */
/* The hero and villain heads ran white heat to silver, so the lit words read
   as a step brighter. On silver the ladder turns over: the heads run ink to
   steel, and the lit words are flat ink under a faint laser halo. */
[data-theme="light"] .hero__title .w > i,
[data-theme="light"] .vhead__l1,
[data-theme="light"] .vhead__l2 {
  background-image: linear-gradient(180deg, #1A1F27 0%, #4E5765 100%);
}
/* Flat, so the halo sits behind solid ink. Under the heads' clipped gradient
   the letters are transparent, and the halo would tint them blue. */
[data-theme="light"] .glow,
[data-theme="light"] .hero__title .w > i.glow {
  color: #0B0D10;
  -webkit-text-fill-color: #0B0D10;
  background-image: none;
  /* Tight and blue. A wide low-alpha halo goes grey on silver and reads as
     type out of focus. */
  text-shadow:
    0 0 1px rgba(46, 107, 255, 0.45),
    0 0 6px rgba(46, 107, 255, 0.26);
}
/* The JOLT letters and the session numerals: ink falling away to silver. */
[data-theme="light"] .card__letter,
[data-theme="light"] .session__num {
  background-image: linear-gradient(180deg, #0B0D10 0%, #A3ABB7 100%);
}
/* Small mono numerals in live wire sit under AA on silver. */
[data-theme="light"] .walkout__n { color: #1F4FD1; }

/* The trait icons carry their colours as attributes. */
[data-theme="light"] .trait__icon svg[stroke="#F4F6F9"],
[data-theme="light"] .trait__icon [stroke="#F4F6F9"] { stroke: #0B0D10; }
[data-theme="light"] .trait__icon [stroke="#9DC4FF"] { stroke: #2E6BFF; }

/* --------------------------------------------------------------------------
   Light the page stops spending.
   -------------------------------------------------------------------------- */
/* The hero's room light was a dark vignette on the left and a blue pool on
   the right. The vignette would be a smudge here; the pool stays, cooler. */
[data-theme="light"] .hero__field {
  background:
    radial-gradient(46% 42% at 68% 46%, rgba(46, 107, 255, 0.10) 0%, rgba(46, 107, 255, 0.03) 46%, rgba(46, 107, 255, 0) 74%);
}
/* A white hot point is invisible on silver. The two the page spends become
   live wire points with a tight blue halo. */
[data-theme="light"] .beam__tip {
  background: var(--live-wire);
  box-shadow: 0 0 5px 1px rgba(46, 107, 255, 0.55);
}
/* Except inside the finale, which is the dark site: its point stays white. */
[data-theme="light"] .cta .beam__tip {
  background: #F4F6F9;
  box-shadow:
    0 0 5px 1px rgba(244, 246, 249, 0.85),
    0 0 11px 2px rgba(157, 196, 255, 0.55);
}
/* The charge motes are light added to a dark room: grey specks on silver.
   The pointer's soft blue pool stays. */
[data-theme="light"] .ambient__motes { display: none; }

/* Buttons. The filled call buttons carry their own laser gradient and bloom
   in main.css and read the same on both grounds, so nothing is overridden
   here. */
/* The quiet section rules start on the laser itself rather than on a tint,
   so on silver they read as the beam and not as a grey divider. */
[data-theme="light"] .boundary--quiet .beam__line {
  background: linear-gradient(90deg, var(--live-wire) 0%, rgba(46, 107, 255, 0.4) 48%, rgba(46, 107, 255, 0) 100%);
}

/* The closing plate and the walkout frame keep their reticle; their ground
   turns to a white veil. */
[data-theme="light"] .closer,
[data-theme="light"] .walkout { background: rgba(255, 255, 255, 0.5); }

/* --------------------------------------------------------------------------
   THE PLATES. Direction A: the machined frame.

   The frame is a transparent 6px border over the bevel, so the figure's own
   overflow clip (which cuts at the padding box, inside the border) still
   crops the photograph and the frame is never painted over. The ticks are
   background layers in the border box, so nothing needs a pseudo element and
   nothing is clipped.

   The dark page's edge masks come off: they faded black into black. Here the
   photograph's edge IS the design.
   -------------------------------------------------------------------------- */
[data-theme="light"] .plate--side,
[data-theme="light"] .plate--band {
  -webkit-mask-image: none;
  mask-image: none;
  border: var(--frame) solid transparent;
  border-radius: 2px;
  background: var(--ticks), var(--bevel) border-box;
  box-shadow: var(--frame-shadow);
  /* The escapes below hang outside the frame, so the clip moves from the
     figure to the photograph itself. */
  overflow: visible;
}
[data-theme="light"] .plate img { border-radius: 1px; }
/* Two plates are cropped by scaling the photograph. With the figure no
   longer clipping, each photograph clips itself: the inset is the scale's
   overhang, measured in the image's own coordinates, so after the transform
   it lands exactly on the frame. (1 - 1/s) split by the transform origin. */
[data-theme="light"] .plate--how img { clip-path: inset(13.24%); }
[data-theme="light"] .plate--us img { clip-path: inset(10.82% 6.49% 7.21% 11.54%); }
/* The struck handset carries a dark vignette on its own left and right edges.
   Inside a frame it reads as a second border, so the plate crops in past it.
   Centred, so the painted beam keeps its row. */
[data-theme="light"] .plate--method img {
  transform: scale(1.08);
  transform-origin: 50% 50%;
  clip-path: inset(3.7%);
}

/* THE ESCAPES. ONE LINE, NOT TWO (the brand's own law). Where the laser
   painted into a plate runs towards an edge, the escape picks it up INSIDE
   the photograph, where the paint fades (--esc-in, measured off the render
   at the painted beam's end), and carries it across the frame onto the
   silver, so the eye reads one beam leaving the picture, never a stub parked
   on the frame. The y values are the painted beam's row in each crop
   (struck handset 502 of 1024 in a 3:1 cover at 1.08; stopwatches 532 of
   1024 in a 16:9 cover at 1.36).

   The graveyard's beam and the desk's both die well inside the picture, so
   neither plate takes an escape. Outer-edge escapes are held to one tick
   (34px), so their fade lands inside the gutter instead of at the window. */
[data-theme="light"] .plate--method::before,
[data-theme="light"] .plate--how::before,
[data-theme="light"] .plate--how::after {
  content: "";
  position: absolute;
  top: var(--esc-y, 50%);
  width: calc(var(--esc-in) + var(--frame) + var(--esc-w, 34px));
  height: 2px;
  margin-top: -1px;
  pointer-events: none;
  /* Above the photograph: a scaled image is its own layer and would paint
     over the stretch of line that is meant to overlap its painted beam. */
  z-index: 1;
}
[data-theme="light"] .plate--method::before,
[data-theme="light"] .plate--how::before {
  right: calc(100% - var(--esc-in));
  background: linear-gradient(270deg, rgba(46, 107, 255, 0) 0%, var(--live-wire) 22%, var(--live-wire) 45%, rgba(46, 107, 255, 0.5) 72%, rgba(46, 107, 255, 0) 100%);
}
[data-theme="light"] .plate--how::after {
  left: calc(100% - var(--esc-in));
  background: linear-gradient(90deg, rgba(46, 107, 255, 0) 0%, var(--live-wire) 22%, var(--live-wire) 45%, rgba(46, 107, 255, 0.5) 72%, rgba(46, 107, 255, 0) 100%);
}
[data-theme="light"] .plate--method { --esc-y: 47.8%; --esc-in: 9%; --esc-w: 34px; }
[data-theme="light"] .plate--how { --esc-y: 53.1%; --esc-in: 13%; --esc-w: 60px; }
[data-theme="light"] .plate--how::after { width: calc(var(--esc-in) + var(--frame) + 34px); }

@media (max-width: 900px) {
  /* Full-width plates have no silver beside them to run onto. */
  [data-theme="light"] .plate--method::before,
  [data-theme="light"] .plate--how::before,
  [data-theme="light"] .plate--how::after { display: none; }
  [data-theme="light"] { --tick: 22px; }
}

/* --------------------------------------------------------------------------
   THE FINALE. The largest frame on the page, and inside it, the dark site.

   The section keeps every rule main.css gives it: the receiver plate, the
   copy pool, the breathing white button, the fed beam. It is simply inset
   into the stage and framed, and the dark tokens are restored inside it, so
   the light page ends on the brand's own night. This is the one place the
   light page inverts, and it is the last thing on it.
   -------------------------------------------------------------------------- */
[data-theme="light"] .cta {
  --deep-space: #060708;
  --deep-field: #0B0D10;
  --panel: #1B1F26;
  --white-heat: #F4F6F9;
  --silver: #B4BBC6;
  --slate: #939DAE;
  --sky-glow: #9DC4FF;
  --hairline: rgba(155, 163, 175, 0.13);
  --edge: rgba(46, 107, 255, 0.16);
  --edge-hot: rgba(46, 107, 255, 0.42);
  color: var(--silver);
  color-scheme: dark;

  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  margin: 0 auto clamp(3.5rem, 7vw, 6rem);
  border: var(--frame) solid transparent;
  border-radius: 2px;
  background:
    var(--ticks),
    linear-gradient(#060708, #060708) padding-box,
    var(--bevel) border-box;
  box-shadow: 0 0 0 1px rgba(11, 13, 16, 0.12), 0 60px 90px -50px rgba(11, 13, 16, 0.6);
}
/* The discharge that opens the section would draw across the panel's top. */
[data-theme="light"] .cta > .boundary { display: none; }
/* On the dark page the boundary is the gap between FAQ and finale; here the
   frame is, and the footer's own rule would be a second line under it. */
[data-theme="light"] .footer { border-top-color: transparent; }