/* Shared lens table + banner layout.
   Used by "Lens Summary with Prices.html" and premiumlens.html.
   Edit here, not in either page. */

:root{
--blue-primary:#00437f;--blue-solid:#25508b;--blue-header:#18467e;--green:#48944f;
    --white:#fff;--bg-grey:#fafafa;--line-grey:#e6e6e6;--text-dark:#1a1a1a;--muted:#5d6470;
    --brown:#a85f31;
    --silver-a:#d8dce1;--silver-b:#b3bac3;--silver-tint:#f2f4f6;
    --gold-a:#f4d479;--gold-b:#dca81f;--gold-tint:#fbf4dd;
    --plat-a:#eef2f7;--plat-b:#c5d0dd;--plat-tint:#eef3f8;
    --std-a:#eceff2;--std-b:#d7dce1;--std-tint:#f7f8fa;
    /* The column colours live here because two things wear them: the table, and the
       word roller under it. A chip must never drift from the column it names. */
    --col-std:#fff;
    --col-tor:#d6d6d6;
    --col-mul:#f6d92e;
    --col-lal:repeating-linear-gradient(115deg,rgba(150,162,180,.13) 0 1px,transparent 1px 17px),repeating-linear-gradient(58deg,rgba(150,162,180,.10) 0 1px,transparent 1px 22px),#fff;
}

  /* Don't inherit type metrics from the host page: Webflow's body sets a fixed
   line-height:20px, which collapses the 29px table headings on top of each other. */
  .ls-table,.lens-details{font-family:'Libre Franklin',sans-serif;line-height:1.5}
  .ls-table .nm,.lens-media__eyebrow,.lens-media__credit,.info-watch{font-family:inherit}
  .ls-table{width:100%;max-width:calc(min(1320px,96vw)*var(--ls-scale,1));font-size:calc(clamp(16px,1.7vw,25px)*var(--ls-scale,1));line-height:1.35}
  .ls-frame{position:relative;border:7px solid #000;border-radius:10px;overflow:hidden;background:#fff}
  /* One per column, transparent: only the shadow renders, falling on the neighbours
     so the hovered column reads as lifted. Placed in JS from the header cell, and
     only opacity transitions - so columns cross-fade instead of one sliding across. */
  .ls-lift{position:absolute;bottom:0;z-index:1;pointer-events:none;opacity:0;
    box-shadow:0 0 30px 5px rgba(0,0,0,.5);transition:opacity .22s ease}
  .ls-table.hover-std .ls-lift[data-col="std"],
  .ls-table.hover-tor .ls-lift[data-col="tor"],
  .ls-table.hover-mul .ls-lift[data-col="mul"],
  .ls-table.hover-lal .ls-lift[data-col="lal"]{opacity:1}
  /* The whole column comes forward: the CELLS scale, carrying their borders and their
     background with them, so the grid lines move too. Scaling only the type left the
     lines pinned and the 3-D never landed. border-collapse:separate is what lets a
     cell keep its own border through a transform. The origin is shared across the
     column (set in js) so the cells scale as one piece instead of overlapping at the
     seams. Standard grows with the rest even though clicking it goes nowhere; the
     price buttons sit outside table.ls and stay put, as the lift shadow does.
     .ls-cell still wraps the text: it is what the ink paints under. */
  .ls-cell{display:inline-block}
  table.ls :is(th,td){transition:transform .22s ease}
  .ls-table.hover-std table.ls :is(th,td).col-std,
  .ls-table.hover-tor table.ls :is(th,td).col-tor,
  .ls-table.hover-mul table.ls :is(th,td).col-mul,
  .ls-table.hover-lal table.ls :is(th,td).col-lal{transform:scale(1.045);z-index:3}
  /* Highlighter. It sits INSIDE the cell, under the text: the cell keeps z-index auto
     so it never becomes a stacking context, which is what lets the ink's multiply see
     the column's own background as its backdrop. Isolating it (a stacking context on
     the cell or on .ls-cell) would blend the ink against transparency instead, and the
     pink would land flat on the yellow rather than going coral.
     Classic highlighter yellow - the Multifocal column's own #f6d92e. Note the
     consequence: multiplied over that column it can only ever go a darker gold, so the
     two Multifocal marks read far softer than the ones on grey or white. Deliberate.
     Hover-only is gated on opacity as well as the dash offset, belt and braces. */
  .ls-table td:is(.col-std,.col-tor,.col-mul,.col-lal){position:relative}
  /* The ink needs no transform of its own: it lives inside the cell, so the cell's
     scale carries it along with the text it marks. */
  .ls-mark{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none;
    opacity:0;mix-blend-mode:multiply;transition:opacity .12s ease}
  .ls-cell{position:relative;z-index:1}     /* glyphs paint over the ink, not under it */
  .ls-mark path{fill:none;stroke:#f6d92e;stroke-linecap:butt;   /* chisel tip, not a nib */
    stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
    transition:stroke-dashoffset .7s cubic-bezier(.25,.7,.35,1)}
  .ls-mark .ls-hl{stroke-opacity:.5}        /* widths come from the measured line box */
  .ls-mark .ls-hl-edge{stroke-opacity:.2}   /* ink pooling along the lower edge */
  .ls-table.hover-tor .ls-mark[data-col="tor"],
  .ls-table.hover-mul .ls-mark[data-col="mul"],
  .ls-table.hover-lal .ls-mark[data-col="lal"]{opacity:1;
    transition-delay:calc(var(--i,0) * .34s)}
  .ls-table.hover-tor .ls-mark[data-col="tor"] path,
  .ls-table.hover-mul .ls-mark[data-col="mul"] path,
  .ls-table.hover-lal .ls-mark[data-col="lal"] path{stroke-dashoffset:0;
    transition-delay:calc(var(--i,0) * .34s + var(--j,0) * .19s)}   /* line 2 after line 1 */
  /* Standard lifts like the rest but goes nowhere, so no pointer on it. */
  .ls-table :is(th,td):is(.col-tor,.col-mul,.col-lal){cursor:pointer}
  table.ls{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
  /* The phone grid, built in js from the table above it. Hidden until the desktop
     table runs out of room; see the swap at the foot of this file. */
  table.ls-m{display:none;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
  .ls-title td{text-align:center;font-weight:800;font-size:1.5em;line-height:1.25;letter-spacing:.3px;color:#000;padding:.55em .5em;border-bottom:3px solid #000;text-transform:uppercase}
  table.ls th{text-align:center;font-weight:800;font-size:1.2em;line-height:1.25;color:#000;padding:.7em .5em;vertical-align:middle;border:1px solid #111;position:relative}
  table.ls td{text-align:center;font-size:1em;color:#000;padding:.8em .65em;vertical-align:middle;border:1px solid #111;line-height:1.3}
  .col-std{background:var(--col-std)}
  .col-tor{background:var(--col-tor)}
  .col-mul{background:var(--col-mul)}
  .col-lal{background:var(--col-lal)}
  .colbtns{position:absolute;top:.4em;right:.45em;display:flex;gap:.32em;opacity:0;transition:opacity .15s;z-index:2}
  table.ls th:hover .colbtns{opacity:1}
  .colbtn{width:1.55em;height:1.55em;border-radius:50%;border:1.5px solid #b3bbc5;background:#fff;color:#5d6470;font-size:.6em;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit}
  .colbtn:hover{background:#eef1f4}
  .colbtn.x:hover{border-color:#c0392b;color:#c0392b;background:#fbeeec}
  .colbtn.info{font-style:italic;font-family:Georgia,'Times New Roman',serif;font-weight:700}
  .colbtn.info:hover{border-color:var(--blue-solid);color:var(--blue-solid);background:#eef3fa}
  .ls-table.x-std th.col-std .colbtns,.ls-table.x-tor th.col-tor .colbtns,.ls-table.x-mul th.col-mul .colbtns,.ls-table.x-lal th.col-lal .colbtns{opacity:1}
  .ls-table.x-std th.col-std .colbtn.x,.ls-table.x-tor th.col-tor .colbtn.x,.ls-table.x-mul th.col-mul .colbtn.x,.ls-table.x-lal th.col-lal .colbtn.x{background:#c0392b;border-color:#c0392b;color:#fff}
  .ls-table.hover-std th.col-std .colbtns,.ls-table.hover-tor th.col-tor .colbtns,.ls-table.hover-mul th.col-mul .colbtns,.ls-table.hover-lal th.col-lal .colbtns{opacity:1}
  /* No brightness pass on hover: the Light Adjustable column's crosshatch is only 13%
     alpha on white, so brightening erased it. The scale and the shadow carry the lift. */
  @media(prefers-reduced-motion:reduce){#view-table.active{scroll-behavior:auto}}

  /* ── Per-lens detail sections below the table ── */
  .lens-details{padding:12px 3vw 0;background:var(--bg-grey)}
  .ld-inner{max-width:860px;margin:0 auto}
  .lens-section{background:#fff;border:1px solid var(--line-grey);border-radius:16px;padding:26px 28px;margin-bottom:20px;scroll-margin-top:24px;box-shadow:0 4px 18px rgba(0,0,0,.05)}
  .lens-section > h3{font-size:22px;font-weight:800;color:var(--blue-primary);margin-bottom:14px}
  /* A section that is all banners needs no card around it — the banners are the section.
     No bottom margin either: the bands butt up against each other into one strip. */
  .lens-section.has-media{background:none;border:none;border-radius:0;padding:0;box-shadow:none;margin-bottom:0}
  .info-item{margin-bottom:24px}
  .info-item:last-child{margin-bottom:0}
  .info-item h4{font-size:17px;font-weight:800;color:var(--blue-solid);margin-bottom:6px}
  .info-item p{font-size:15.5px;line-height:1.55;color:var(--text-dark);margin-bottom:12px}
  .info-video{position:relative;display:block;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:#000;text-decoration:none;max-width:420px;
    box-shadow:0 6px 22px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.22);transition:box-shadow .18s ease,transform .18s ease}
  .info-video:hover{box-shadow:0 10px 30px rgba(0,0,0,.36),0 2px 5px rgba(0,0,0,.26);transform:translateY(-1px)}
  .info-video img{width:100%;height:100%;max-width:none;object-fit:cover;display:block}
  .info-video__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
  .info-video.is-playing{cursor:default}
  .info-video.is-playing:hover{transform:none}
  .info-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;border-radius:13px;background:rgba(0,0,0,.72);transition:background .15s}
  .info-play::after{content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}
  .info-video:hover .info-play{background:#c4302b}
  .info-watch{position:absolute;bottom:9px;right:11px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:700;padding:4px 9px;border-radius:6px}
  /* Dark media panels. The footage renders on black, so the band breaks out of the
     card and runs to both edges of the screen. --stage-w is the scroll container's
     client width, set in JS: 100vw would include the scrollbar and force a
     horizontal scroll. */
  .lens-media{position:relative;width:var(--stage-w,100vw);margin-left:calc(50% - var(--stage-w,100vw)/2);background:#000}

  /* ── Diagnostics carousel ──
     Below 880px the caption stacks under the artwork, so a fixed-height slide has
     nowhere to put it: the slides simply stack and the controls disappear. The
     carousel proper only exists at widths where the copy overlays. */
  .lens-carousel{position:relative}
  .lens-carousel__track{position:relative}
  .lens-dots,.lens-arrow{display:none}
  .lens-media + .lens-media{border-top:1px solid rgba(255,255,255,.14)}
  .lens-media__vid{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover;background:inherit}
  /* RxSight's artwork is brand purple, not black — carry the hue through the band. */
  .lens-media--plum{background:#54204e}
  /* ── Still bands (VERITAS) ──
     A device cut out of the brochure, sitting on the band's own gradient rather than in
     a photograph: the cut-outs carry real alpha, so the band shows through around them
     and they belong to the page instead of looking pasted on. */
  .lens-media--ink{background:linear-gradient(135deg,#0b1a2b 0%,#12293f 45%,#0d1f31 100%)}
  /* White with a purple wash, picking up the console's own screen rather than fighting
     it: the VERITAS interface is violet, and on a dark band the screen was the only
     bright thing in the frame. */
  .lens-media--lilac{background:
    radial-gradient(120% 100% at 88% 50%, rgba(124,77,168,.16) 0%, rgba(124,77,168,0) 62%),
    linear-gradient(135deg,#ffffff 0%,#faf7fd 42%,#f0e9f8 100%)}
  /* Standing on its own, a shot band has to make its own height: everything inside it
     is absolutely positioned, so without this it collapses to nothing - which is what
     happened the moment the carousel came off and its track stopped holding the height
     open. Same 2.42 and floors the carousel track uses, so the two bands match. */
  .lens-media--shot{position:relative;overflow:hidden}
  .lens-media--shot:not(.lens-slide){aspect-ratio:2.42/1;min-height:544px;max-height:78vh}
  .lens-media__shot{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;
    object-fit:contain;object-position:right center;z-index:0;pointer-events:none}
  /* 100%, not 112%: the console is the full height of its own cut-out, so anything over
     100 lops the monitor off the top of the band. */
  /* The console photo has a white studio background rather than a cut-out, so it
     multiplies over the band: the white takes the lilac exactly and only the machine
     and its soft shadow stay. Cutting it out was the wrong tool - the machine is white
     too, so any threshold that removed the background would have eaten the console. */
  /* Anchored to the bottom edge, not centred: the console stands on the band the way it
     stands on a floor, and a gap under it read as a mistake. Its white margin is trimmed
     off, so the image's bottom IS the base of the machine - which means the height sets
     the headroom above it directly. 88% leaves the monitor clear of the top edge without
     lifting the base off the bottom. */
  .lens-media--shot.shot-tall .lens-media__shot{right:14%;height:88%;top:auto;bottom:0;
    mix-blend-mode:multiply}
  .lens-media--shot.shot-wide .lens-media__shot{right:-2%;height:auto;width:58%;
    top:50%;transform:translateY(-50%)}
  /* A photograph fills the band instead, and takes a scrim so the copy stays readable. */
  .lens-media--photo .lens-media__shot{inset:0;width:100%;height:100%;object-fit:cover;
    object-position:center}
  .lens-media--ink .lens-media__eyebrow{color:#7fd4d0}
  :is(.lens-media--ink,.lens-media--photo) .lens-media__cap h4{color:#fff}
  :is(.lens-media--ink,.lens-media--photo) .lens-media__cap p{color:rgba(255,255,255,.8)}
  .lens-media--lilac .lens-media__eyebrow{color:#7c4da8}
  .lens-media--lilac .lens-media__cap h4{color:var(--blue-primary)}
  .lens-media--lilac .lens-media__cap p{color:var(--text-dark)}
  /* Accordion buttons (phones only; see the narrow-screen block). Declared hidden here
     so the desktop carousel never shows them. */
  .lens-acc{display:none}
  /* The title card: type on black, nothing else. It fills the slide the same way a
     clip would, so the band's height never jumps when the carousel turns to it. */
  .lens-media--card{background:#000;display:flex;align-items:center;justify-content:center;
    text-align:center}
  .lens-media--card.lens-media--football{
    background:#000 url('../images/footballbackground.png') center bottom/50% auto no-repeat;
  }
  .lens-media__cardin{max-width:940px;padding:44px 28px}
  .lens-media--card .lens-media__eyebrow{color:#8fb4e0;margin-bottom:14px}
  .lens-media--card h4{margin:0 0 20px;color:#fff;font-weight:800;letter-spacing:-.5px;
    line-height:1.02;font-size:clamp(30px,5.6vw,72px);text-wrap:balance}
  .lens-media--card p{margin:0 auto;max-width:660px;color:rgba(255,255,255,.72);
    font-size:clamp(15px,1.35vw,19px);line-height:1.62}
  .lens-media--plum .lens-media__eyebrow{color:#d7a6ce}
  /* The lens renders are shot on white; invert the band rather than the artwork. */
  /* The lens renders are shot on white, so those bands invert: dark type on light.
     --gold ties the multifocal band to the yellow Multifocal column in the table. */
  .lens-media--silver,.lens-media--gold{background:#fcfcfc}
  :is(.lens-media--silver,.lens-media--gold) .lens-media__eyebrow{color:var(--blue-solid)}
  :is(.lens-media--silver,.lens-media--gold) .lens-media__cap h4{color:var(--blue-primary)}
  :is(.lens-media--silver,.lens-media--gold) .lens-media__cap p{color:var(--text-dark)}
  :is(.lens-media--silver,.lens-media--gold) .lens-media__cap p em{color:var(--blue-primary)}
  :is(.lens-media--silver,.lens-media--gold) .lens-media__credit{color:var(--muted)}
  :is(.lens-media--silver,.lens-media--gold) .lens-media__stats li{border-top-color:rgba(0,0,0,.16)}
  :is(.lens-media--silver,.lens-media--gold) .lens-media__stats li:last-child{border-bottom-color:rgba(0,0,0,.16)}
  :is(.lens-media--silver,.lens-media--gold) .lens-media__stats b{color:var(--blue-primary)}
  :is(.lens-media--silver,.lens-media--gold) .lens-media__stats span{color:var(--text-dark)}
  :is(.lens-media--silver,.lens-media--gold) .lens-media__stats span b{color:var(--blue-primary)}
  .lens-media__cap{padding:24px 0 28px}
  /* Copy sits in a centred column so the banners keep margins and stay centred on
     large monitors, rather than running out to the edges. */
  .lens-media__capinner{width:100%;max-width:860px;margin:0 auto;padding:0 28px}
  .lens-media__eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#8fb4e0;margin-bottom:6px}
  .lens-media__cap h4{font-family:inherit;font-size:18px;font-weight:800;line-height:1.25;color:#fff;margin:0 0 7px}
  .lens-media__cap p{font-family:inherit;font-size:15px;line-height:1.6;color:#c9d2dd;margin:0 0 12px}
  .lens-media__cap p em{font-style:normal;color:#fff;font-weight:700}
  /* Subtitle sits under the heading and reads as part of it, not as body copy.
     Scoped past `.lens-media__cap p`, which would otherwise out-specify it. */
  .lens-media__cap .lens-media__sub{font-family:inherit;font-size:16px;font-weight:600;line-height:1.3;color:#b9c4d1;margin:-3px 0 2px}
  :is(.lens-media--silver,.lens-media--gold) .lens-media__cap .lens-media__sub{color:var(--muted)}
  /* Plain-language sentence: what the machine actually does. */
  .lens-media__cap .lens-media__lead{font-size:14.5px;line-height:1.5;margin:8px 0 0}
  .lens-media__credit{display:block;font-size:11.5px;line-height:1.45;color:#79838f}
  .lens-media__yt{margin-top:18px}
  /* Call to action: sits in the copy column, under the text. */
  .lens-media__cta{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
    background:var(--blue-primary);color:#fff;text-decoration:none;font-family:inherit;
    font-weight:700;font-size:17px;line-height:1;padding:16px 30px;border-radius:999px;
    box-shadow:0 6px 22px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.22);
    transition:background .15s ease,box-shadow .18s ease,transform .18s ease}
  .lens-media__cta::after{content:'\2192';font-size:19px;line-height:1}
  .lens-media__cta:hover{background:var(--blue-solid);
    box-shadow:0 10px 30px rgba(0,0,0,.36),0 2px 5px rgba(0,0,0,.26);transform:translateY(-1px)}
  /* At-a-glance figures: value first, so the numbers read down the left edge. */
  .lens-media__stats{list-style:none;margin:14px 0 13px;padding:0;font-family:inherit}
  .lens-media__stats li{display:flex;gap:14px;align-items:baseline;margin:0;padding:9px 0;font-family:inherit;font-size:inherit;color:inherit;border-top:1px solid rgba(255,255,255,.13)}
  .lens-media__stats li:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
  .lens-media__stats b{flex:0 0 88px;color:#fff;font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-0.3px}
  .lens-media__stats span{font-size:13.5px;line-height:1.5;color:#c2cbd6}
  .lens-media__stats span b{display:inline;flex:none;font-size:inherit;color:#fff}

  /* Wide screens: the copy sits over the banner, as on the manufacturers' own pages —
     text left, instrument right, with a scrim so it stays readable over the artwork.
     min-height keeps a short banner from crushing the text. Narrow screens stack it
     underneath instead, where there is no room to overlay. */
  @media(min-width:880px){
    /* One band, three slides. Fixed aspect so the height never jumps between
       slides whose clips have different native ratios. */
    .lens-carousel{width:var(--stage-w,100vw);margin-left:calc(50% - var(--stage-w,100vw)/2);
      background:#000;overflow:hidden}
    /* width must be pinned: with width:auto the min-height floor makes the browser
       derive width FROM height via aspect-ratio (520 x 2.42 = 1258px of overflow). */
    .lens-carousel__track{width:100%;aspect-ratio:2.42/1;min-height:544px;max-height:78vh}
    .lens-carousel .lens-slide{position:absolute;inset:0;width:100%;margin:0;
      opacity:0;visibility:hidden;transition:opacity .5s ease}
    .lens-carousel .lens-slide.is-active{opacity:1;visibility:visible}
    .lens-carousel .lens-slide .lens-media__vid{position:absolute;inset:0;
      width:100%;height:100%;min-height:0;max-height:none;object-fit:cover}
    .lens-arrow{display:flex;align-items:center;justify-content:center;position:absolute;
      top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;
      border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);cursor:pointer;
      padding:0;transition:background .15s,border-color .15s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
    .lens-arrow:hover{background:rgba(0,0,0,.8);border-color:#fff}
    .lens-arrow::before{content:'';width:11px;height:11px;border-top:2px solid #fff;border-right:2px solid #fff}
    .lens-arrow--prev{left:16px}
    .lens-arrow--prev::before{transform:rotate(-135deg);margin-left:4px}
    .lens-arrow--next{right:16px}
    .lens-arrow--next::before{transform:rotate(45deg);margin-right:4px}
    /* Sits above the dots and belongs to the band, not to a slide. The hover lift has
       to re-state translateX or the button jumps out of centre when it rises. */
    .lens-carousel__cta{position:absolute;left:50%;bottom:46px;transform:translateX(-50%);
      margin-top:0;z-index:4}
    .lens-carousel__cta:hover{transform:translateX(-50%) translateY(-1px)}
    .lens-dots{display:flex;gap:8px;position:absolute;left:50%;transform:translateX(-50%);
      bottom:16px;z-index:4}
    .lens-dot{width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
      border:1px solid rgba(255,255,255,.6);background:transparent;transition:background .2s}
    .lens-dot.is-active{background:#fff}

    .lens-media__vid{min-height:490px}
    /* Layout for every overlaid band; the scrim colour is per-tone below. Keeping the
       two apart stops the default dark scrim from out-specifying the tone rules. */
    .lens-media:not(.lens-media--strip) .lens-media__cap{position:absolute;inset:0;padding:0;
      display:flex;align-items:center}
    /* The still bands get the same left-hand scrim the dark clips use, so the copy has
       something to sit on where the device overlaps it. */
    .lens-media--shot .lens-media__cap{position:absolute;inset:0;padding:0;
      display:flex;align-items:center;
      background:linear-gradient(90deg,rgba(9,20,33,.95) 0%,rgba(9,20,33,.86) 34%,rgba(9,20,33,.4) 58%,rgba(9,20,33,0) 76%)}
    .lens-media--lilac .lens-media__cap{
      background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.8) 36%,rgba(255,255,255,.25) 60%,rgba(255,255,255,0) 78%)}
    .lens-media--photo .lens-media__cap{
      background:linear-gradient(90deg,rgba(9,20,33,.92) 0%,rgba(9,20,33,.8) 38%,rgba(9,20,33,.35) 62%,rgba(9,20,33,.05) 82%)}
    /* Each :not() adds its argument's weight, so this selector is (0,6,0) and quietly
       beats any per-tone scrim written as .lens-media--x .lens-media__cap (0,2,0). Every
       tone with its own scrim has to be excluded here or it silently gets the dark one -
       which is exactly how the lilac band came out with a black left half. */
    .lens-media:not(.lens-media--strip):not(.lens-media--plum):not(.lens-media--silver):not(.lens-media--gold):not(.lens-media--lilac) .lens-media__cap{
      background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.85) 34%,rgba(0,0,0,.45) 57%,rgba(0,0,0,0) 77%)}
    .lens-media__capinner{display:flex;align-items:center;gap:38px}
    .lens-media:not(.lens-media--strip) .lens-media__copy{flex:1 1 auto;max-width:min(52%,430px)}
    /* The clip sits opposite the copy, in the empty half of the banner. */
    .lens-media__capinner > .lens-media__yt{flex:0 0 auto;width:min(47%,410px);max-width:none;margin:0 0 0 auto}
    .lens-media--silver .lens-media__cap{background:linear-gradient(95deg,#e4e8ec 0%,rgba(226,230,235,.94) 34%,rgba(232,236,240,.5) 54%,rgba(240,243,246,0) 72%)}
    /* Gold wash keyed to the Multifocal column in the table (#f6d92e). */
    .lens-media--gold .lens-media__eyebrow{color:#3b2d07}
    .lens-media--gold .lens-media__cap{background:linear-gradient(95deg,#c9971a 0%,#dcae23 30%,rgba(240,206,52,.55) 54%,rgba(248,232,150,0) 72%)}
    .lens-media:not(.lens-media--strip) .lens-media__cap h4{font-size:27px;line-height:1.18;margin-bottom:11px}
    .lens-media__cap p{font-size:15.5px;color:#dde4ec;margin-bottom:14px}
    .lens-media__credit{font-size:11px;color:#8b949f}
    /* Topography: the colour map sits in the left 44% of the frame, so this one
       mirrors the others — copy to the right, scrim fading out before the map. */
    .lens-media--strip .lens-media__vid{min-height:440px}
    /* The whole strip sat too far left: the map crowded the left edge and the right of
       the band was dead. Clip, scrim and copy all shift across by the SAME distance, so
       their alignment to each other never changes and the scrim still lands where it
       did on the map. The distance is measured off the band, not each element's own
       width: past 1700px the clip is capped and centred while the scrim spans the whole
       band, so a percentage would move them by different amounts and walk the copy onto
       the map. object-position can't do any of this - the box is the clip's own 2.42,
       so there is no crop to slide - hence a real translate, with the clip's left edge
       feathered into the band's black rather than ending on a line. */
    .lens-media--strip :is(.lens-media__vid,.lens-media__cap){
      transform:translateX(calc(var(--stage-w,100vw) * .04))}
    .lens-media--strip .lens-media__vid{
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%);
              mask-image:linear-gradient(90deg,transparent 0,#000 9%)}
    .lens-media--strip .lens-media__cap{position:absolute;inset:0;padding:0;
      display:flex;align-items:center;
      background:linear-gradient(270deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.88) 24%,rgba(0,0,0,.55) 42%,rgba(0,0,0,0) 52%)}
    .lens-media--strip .lens-media__copy{max-width:min(52%,430px);margin-left:auto}
    .lens-media--strip .lens-media__cap h4{font-size:23px;line-height:1.2;margin-bottom:9px}
    /* Plum panels get a purple scrim; a black one would grey out the brand colour. */
    .lens-media--plum .lens-media__cap{background:linear-gradient(90deg,rgba(42,15,39,.90) 0%,rgba(42,15,39,.72) 34%,rgba(42,15,39,.28) 58%,rgba(42,15,39,0) 78%)}
  }
  /* ── Narrow screens ──
     The clips are ~2.4:1, so at phone widths they collapse to a shallow strip of
     mostly-empty artwork sitting above the text, which reads as dead space. Give the
     clip real height, frame it on the instrument, and lift the heading onto it. */
  /* ── Very large screens ──
     Band height follows band width, so past ~1700px the clip balloons (over 1000px
     tall at 2560) and dwarfs the copy. Stop the artwork growing and let the band's
     own colour carry the extra width; scale the copy up to match.
     The IOLMaster/Pentacam/lens clips have flat edges matching their band, so they
     letterbox invisibly. Topography and the RxSight wave have live edges, so they
     get a soft fade into the band instead of a hard seam. */
  @media(min-width:1700px){
    .lens-media__vid{max-width:1700px;margin-left:auto;margin-right:auto}
    /* Cap the track's HEIGHT to match, or the clip gets cropped. The video is pinned to
       1700px wide but still fills the track's height, so on a tall screen the box goes
       taller than the clip's own 2.42 and object-fit:cover eats the sides - 30px off
       each edge at 2258x934, straight through the instrument. Height derived from the
       same two numbers keeps the box exactly the clip's shape. */
    .lens-carousel__track{max-height:calc(1700px / 2.42)}
    .lens-media--shot:not(.lens-slide){max-height:calc(1700px / 2.42)}
    /* The band runs to both screen edges; only the artwork inside it is capped. The
       track and slides stay full-bleed so the active slide's own tone paints the full
       width - that is what covers the wrapper's black and makes the section read as
       edge-to-edge. Cap the track instead and the wrapper's black shows either side. */
    /* Strip keeps its own left feather (it is pushed across, so its right edge runs off
       the band anyway); this is for the wave, whose edges are live on both sides. */
    .lens-media--plum .lens-media__vid{
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
              mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
    .lens-media__capinner{max-width:1080px}
    .lens-media:not(.lens-media--strip) .lens-media__cap h4{font-size:32px}
    .lens-media--strip .lens-media__cap h4{font-size:27px}
    .lens-media__cap .lens-media__sub{font-size:18px}
    .lens-media__cap .lens-media__lead{font-size:16.5px}
    .lens-media__cap p{font-size:17px}
    .lens-media__stats b{font-size:22px;flex-basis:104px}
    .lens-media__stats span{font-size:15px}
    .lens-media__eyebrow{font-size:12px}
    .lens-media:not(.lens-media--strip) .lens-media__copy{max-width:min(52%,520px)}
    .lens-media--strip .lens-media__copy{max-width:min(52%,520px)}
  }
  @media(max-width:879px){
    /* The clip's subject sits 15-84% down the frame whatever height we give the box
       (cover only crops width here), so the heading and the subject must share space.
       Rather than fight it: park the subject right of centre, and put the heading on a
       solid field that fades into the artwork below it. */
    .lens-media__vid{min-height:205px;object-fit:cover;object-position:58% center}
    .lens-media--strip .lens-media__vid{object-position:22% center}  /* the map sits left of frame */
    .lens-media__head{position:absolute;top:0;left:0;right:0;z-index:2;padding:18px 20px 30px}
    .lens-media__head > *{max-width:64%}
    /* Radial from the top-left corner, not a full-width bar: the scrim only needs to
       sit behind the type, and a band across the whole width wipes out the artwork.
       Each stop fades to alpha 0 of its own colour, so there is no grey fringe. */
    .lens-media__head::before{content:'';position:absolute;inset:0 0 -60px 0;z-index:-1;
      background:radial-gradient(130% 125% at 0% 0%,
        rgba(0,0,0,.97) 0%, rgba(0,0,0,.9) 42%, rgba(0,0,0,0) 80%)}
    :is(.lens-media--silver,.lens-media--gold) .lens-media__head::before{
      background:radial-gradient(130% 125% at 0% 0%,
        rgba(252,252,252,.97) 0%, rgba(252,252,252,.92) 42%, rgba(252,252,252,0) 80%)}
    .lens-media--plum .lens-media__head::before{
      background:radial-gradient(130% 125% at 0% 0%,
        rgba(84,32,78,.97) 0%, rgba(84,32,78,.9) 42%, rgba(84,32,78,0) 80%)}
    .lens-media__cap{padding-top:6px}
    .lens-media__cap h4{font-size:19px}
    /* RxSight's artwork is an abstract wash with no subject to avoid, so on phones it
       backs the whole band and the copy sits over it - as it does on wide screens.
       The instrument and lens clips can't do this: their subject would be behind the
       text. */
    .lens-media--plum .lens-media__vid{position:absolute;inset:0;width:100%;height:100%;
      min-height:0;max-height:none;object-fit:cover;object-position:center}
    .lens-media--plum .lens-media__cap{position:relative;z-index:1;padding-top:26px}
    .lens-media--plum .lens-media__head{position:static;padding:0}
    .lens-media--plum .lens-media__head::before{content:none}
    .lens-media--plum .lens-media__head > *{max-width:none}
    /* The lens bands do the same: the clip backs the whole band and the copy sits on
       top of it, instead of the clip taking a slab of height and shoving the text
       down the page.
       The tint is what makes it work. The clip is a lens on a white field, so the band
       carries a silver or gold gradient and the clip multiplies over it: white pixels
       take the tint exactly, and only the lens itself stays dark. Laying the clip on
       top opaquely would hide the tint; putting the tint on top would grey the lens. */
    /* overflow:hidden, or the scaled clip runs past the band and its multiply lands on
       whatever section is underneath - a grey slab across the video card below it. */
    .lens-media--silver{background:linear-gradient(155deg,#f5f7f9 0%,#dfe4ea 58%,#cfd7e0 100%);
      overflow:hidden}
    .lens-media--gold{background:linear-gradient(155deg,#fdf7e3 0%,#f4e1a6 58%,#ecd079 100%);
      overflow:hidden}
    /* contain, not cover. The lens sits at 76% across its frame and spans 55-100%, so a
       centred cover crop - only ~29% of the clip's width at this aspect - missed the
       lens completely and left a plain tinted band. contain costs nothing here BECAUSE
       of the multiply: the clip's white surround takes the tint exactly, so the
       letterbox is invisible and only the lens itself shows. Scaled up and pushed left
       so it sits behind the copy rather than hugging the right edge. */
    /* Anchored to the TOP of the band, not centred: contain letterboxes the clip into a
       horizontal stripe, and centred, that stripe's white field started mid-section with
       a strip of raw band gradient above it - a visible seam right over the heading.
       object-position and transform-origin move together, or the scale would slide the
       top edge away again. The bottom edge fades out through a mask instead of ending
       on a line. */
    :is(.lens-media--silver,.lens-media--gold) .lens-media__vid{
      position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;
      object-fit:contain;object-position:center top;mix-blend-mode:multiply;
      transform-origin:top center;transform:scale(1.75) translateX(-9%);
      -webkit-mask-image:linear-gradient(180deg,#000 0,#000 74%,transparent 98%);
              mask-image:linear-gradient(180deg,#000 0,#000 74%,transparent 98%)}
    :is(.lens-media--silver,.lens-media--gold) .lens-media__cap{position:relative;z-index:1;
      padding-top:26px}
    :is(.lens-media--silver,.lens-media--gold) .lens-media__head{position:static;padding:0}
    :is(.lens-media--silver,.lens-media--gold) .lens-media__head::before{content:none}
    :is(.lens-media--silver,.lens-media--gold) .lens-media__head > *{max-width:none}
    /* A white glow rather than a panel behind the words: it lets the lens read through
       the gaps between letters, which a solid scrim would cover. Stacked shadows - a
       tight one for legibility against the lens's own edges, wide ones to lift the
       whole block off the tint. */
    :is(.lens-media--silver,.lens-media--gold) .lens-media__cap :is(h4,p,span,b,li,em){
      text-shadow:0 0 6px #fff, 0 0 14px #fff, 0 0 26px rgba(255,255,255,.95),
                  0 0 40px rgba(255,255,255,.8)}
    /* The rules that separate the stat rows would cut across the glow. */
    :is(.lens-media--silver,.lens-media--gold) .lens-media__stats li{border-color:rgba(0,0,0,.28)}
    /* A shot band stacks on a phone. Held at 2.42 the console filled the whole band and
       the copy landed on top of its dark screen - dark blue type on a navy monitor,
       unreadable. Let the band size to its content, and let the photo be a photo:
       centred, capped, in the flow above the words. It still multiplies, so its white
       studio background keeps dissolving into the lilac. */
    .lens-media--shot:not(.lens-slide){aspect-ratio:auto;min-height:0;max-height:none;
      display:flex;flex-direction:row-reverse;align-items:center;gap:6px;
      padding:18px 20px 20px}
    /* row-reverse, so the console lands right of the copy: the img comes FIRST in the
       markup (it is the band's backdrop on a wide screen), and reversing puts it last
       visually without reordering the DOM a screen reader walks. */
    /* The .shot-tall variant is named too, or this loses on specificity: the desktop
       framing rule (.lens-media--shot.shot-tall ..., right:14%, height:88%) is (0,3,0)
       against this rule's (0,2,0) and sits outside any media query - so its 14% push
       leaked into the phone layout and shoved the console over the heading. Equal
       specificity + later in the file = the phone rule wins. */
    .lens-media--shot .lens-media__shot,
    .lens-media--shot.shot-tall .lens-media__shot{position:relative;inset:auto;
      flex:0 0 38%;width:38%;height:auto;max-width:none;max-height:300px;margin:0;
      display:block;object-fit:contain;object-position:center}
    .lens-media--shot .lens-media__cap{position:relative;flex:1 1 auto;min-width:0;
      padding:0}
    .lens-media--shot .lens-media__capinner{padding:0}
    .lens-media--shot .lens-media__head{position:static;padding:0}
    .lens-media--shot .lens-media__head::before{content:none}
    .lens-media--shot .lens-media__head > *{max-width:none}
    .lens-media--lilac .lens-media__cap h4{font-size:19px;line-height:1.2}
    .lens-media--lilac .lens-media__cap p{font-size:14px;line-height:1.5}
    .lens-media--lilac .lens-media__eyebrow{font-size:9.5px;letter-spacing:1px}
    /* ── The diagnostics accordion ──
       Slides collapse behind their buttons; the intro title card is the section's own
       title, so it stays visible. The arrows, dots and cta belong to the desktop
       carousel - below the breakpoint they were rendering as stray unstyled buttons. */
    .lens-carousel .lens-slide:not(.lens-media--card){display:none}
    .lens-carousel .lens-slide.acc-open{display:block}
    .lens-carousel :is(.lens-arrow,.lens-dots,.lens-carousel__cta){display:none}
    .lens-acc{display:flex;align-items:center;gap:12px;
      width:var(--stage-w,100vw);margin-left:calc(50% - var(--stage-w,100vw)/2);
      background:#000;color:#fff;text-align:left;border:0;
      border-top:1px solid rgba(255,255,255,.16);
      padding:15px 20px;font-family:inherit;cursor:pointer}
    .lens-acc__txt{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0}
    .lens-acc__eyebrow{font-size:10px;font-weight:800;letter-spacing:1.2px;
      text-transform:uppercase;color:#8fb4e0}
    .lens-acc__title{font-size:17px;font-weight:800;line-height:1.25;color:#fff}
    .lens-acc__sub{font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.65)}
    .lens-acc__chev{flex:0 0 auto;width:9px;height:9px;margin-right:3px;
      border-right:2px solid #fff;border-bottom:2px solid #fff;
      transform:rotate(45deg);transition:transform .2s ease}
    .lens-acc.is-open .lens-acc__chev{transform:rotate(225deg)}
    /* The button IS the open slide's title - the slide repeating its own eyebrow,
       heading and subtitle directly underneath read as a stutter. */
    .lens-carousel .lens-slide.acc-open .lens-media__head{display:none}
    /* ── YouTube cards fill the column and sit centred ──
       The desktop cap is a row and sizes the card against the copy; on a phone the
       420px cap left it small and left-hanging. */
    .lens-media__cap .info-video,.info-item .info-video{
      max-width:none;width:100%;margin-left:auto;margin-right:auto}
    /* The lens-options band drops its clip on phones: it is a signpost to the premium
       lens page, not a showcase, and the rotating lens behind the copy was doing more
       work than the section needed. The silver tint stays. */
    #lens-lensoptions .lens-media__vid{display:none}
    /* No lift on phones - the card sits flat on the artwork. */
    .info-video,.info-video:hover{box-shadow:none;transform:none}
  }
  @media(max-width:600px){
    .lens-section{padding:22px 20px}
    .lens-media__cap{padding:16px 0 22px}
    .lens-media__capinner{padding:0 20px}
  }
  /* The button belongs to the last band, so the foot continues its background rather
     than sitting on a shelf. Flat plum read wrong: the LAL band's bottom edge is the
     wave clip under its scrim, running #32132e at the left to ~#52254a at 70%. These
     stops are sampled off that edge so the join is invisible. */
  .ld-foot{width:var(--stage-w,100vw);margin-left:calc(50% - var(--stage-w,100vw)/2);
    background:linear-gradient(90deg,#32132e 0%,#371633 15%,#3c1836 30%,#4b1f44 50%,
      #52254a 70%,#4e2348 85%,#462042 100%);
    padding:4px 20px 44px;text-align:center}
  .ld-top{display:inline-flex;align-items:center;gap:8px;background:#fff;
    border:1.5px solid rgba(255,255,255,.85);border-radius:999px;color:var(--blue-primary);
    font-family:inherit;font-size:14px;font-weight:700;padding:11px 22px;cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,.28);transition:background .15s,transform .15s}
  .ld-top:hover{background:#eef3fa;transform:translateY(-1px)}
  /* Cross out the CONTENT, not the cell. Fading the td faded its background and its
     borders with it, so a struck-out column washed pale and its grid lines vanished -
     which killed the lift, since the lift is the cells' own borders moving. The header
     made it worse: only its .nm faded, so it kept solid colour while the cells below
     went pale. Everything text-bearing sits in .ls-cell, so fade that and the cell
     keeps its colour, its borders and its 3-D. The x button is outside .ls-cell, so it
     stays solid and clickable. */
  .ls-table.x-std :is(th,td).col-std .ls-cell, .ls-table.x-std .ls-price.col-std,
  .ls-table.x-tor :is(th,td).col-tor .ls-cell, .ls-table.x-tor .ls-price.col-tor,
  .ls-table.x-mul :is(th,td).col-mul .ls-cell, .ls-table.x-mul .ls-price.col-mul,
  .ls-table.x-lal :is(th,td).col-lal .ls-cell, .ls-table.x-lal .ls-price.col-lal{
    opacity:.38;text-decoration:line-through}
  /* A struck-out column has nothing to sell, so don't ink it. */
  .ls-table.x-tor .ls-mark[data-col="tor"],
  .ls-table.x-mul .ls-mark[data-col="mul"],
  .ls-table.x-lal .ls-mark[data-col="lal"]{opacity:0 !important}

/* ---- The claim under the table -------------------------------------------------
   "All [toric] lenses are not created equal", where the word rides a three-sided drum
   that turns to the next lens. Each face wears its own column's colour from the table
   above (via --col-*), so the chip and the column always agree.
   Three faces, so they sit 120 apart on the drum and the radius is (h/2)/tan(60) =
   0.2887h; at 1.25em tall that is .361em of translateZ. The drum only ever turns one
   way - the angle keeps decreasing - so it never snaps back to re-align. */
/* Breaks out to the full width of whatever is scrolling, the same way the bands do.
   On the summary page it lands inside .ld-inner - an 860px column on a grey field - so
   without this its white would stop at the column and read as a grey band. */
.lens-claim{background:#fff;padding:44px 3vw 48px;text-align:center;
  font-family:'Libre Franklin',sans-serif;
  width:var(--stage-w,100vw);margin-left:calc(50% - var(--stage-w,100vw)/2)}
.lc-inner{max-width:820px;margin:0 auto}
.lc-line{margin:0;font-size:clamp(23px,3vw,38px);line-height:1.3;font-weight:800;
  color:var(--text-dark);letter-spacing:-.2px}
/* The drum reads as four words to a screen reader, which is nonsense to hear; give
   it the sentence once, in full, and hide the moving parts. */
.lc-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lc-note{max-width:620px;margin:20px auto 0;font-size:16px;line-height:1.65;color:var(--muted)}
.lc-note + .lc-note{margin-top:8px;color:var(--text-dark);font-weight:600}
.lc-note b{color:var(--text-dark);font-weight:700}
/* Nudged up a hair: emoji sit low against the cap-height of the words beside them.
   Segoe/Apple Color Emoji is named first so Windows doesn't fall back to a mono glyph. */
.lc-flag{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  font-size:1.05em;line-height:1;margin-right:.28em;vertical-align:-.06em;
  white-space:nowrap}

/* The ghost is the whole trick. It holds the longest word, in flow but invisible, so
   it does two jobs at once: it fixes the box at one width (no word can spill past the
   chip, and the sentence never reflows as the drum turns), and it gives .wr a baseline.
   An inline-block's baseline is its last in-flow line box, so the chip now sits on the
   sentence's baseline instead of being centred on it by eye. The faces are pinned to
   inset:0 - the same box the ghost opened - so their text lands on the ghost's baseline
   too. Nothing here is a magic number. */
.wr{display:inline-block;position:relative;perspective:600px;line-height:1.25}
.wr__ghost{display:inline-block;white-space:nowrap;padding:0 .22em;
  border:1px solid transparent;visibility:hidden}
.wr__drum{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--rot,0deg));
  transition:transform .8s cubic-bezier(.55,.05,.25,1)}
.wr__face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  white-space:nowrap;border:1px solid #111;border-radius:0;padding:0 .22em;
  backface-visibility:hidden;transform:rotateX(var(--a,0deg)) translateZ(var(--r,.361em))}
.wr__face--std{background:var(--col-std);--a:0deg}
.wr__face--tor{background:var(--col-tor);--a:90deg}
.wr__face--mul{background:var(--col-mul);--a:180deg}
.wr__face--lal{background:var(--col-lal);--a:270deg}

@media(max-width:600px){
  .lens-claim{padding:32px 18px 36px}
  .lc-note{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .wr__drum,.wr{transition:none}
}

/* ---- Phones: the table turns on its side -----------------------------------------
   Four lens columns will not fit 390px - at that width the headers spill straight out
   of their cells. Below 700px the desktop table is swapped for the js-built grid where
   lenses are rows and the benefits are three narrow tick columns, which is the only
   shape that still lets you see what each lens ADDS over the one before it.
   The desktop table stays in the DOM (display:none) so it remains the accessible copy
   and the details sections keep working; the grid is aria-hidden. */
@media(max-width:700px){
  .ls-table table.ls{display:none}
  .ls-table table.ls-m{display:table}
  .ls-m .ls-title td{font-size:1.05em;padding:.5em .5em}
  .ls-m th,.ls-m td{border:1px solid #111;padding:.55em .25em;text-align:center;
    vertical-align:middle;color:#000}
  /* Not uppercased, and small: "Adjustable" is the widest word here and at 5 columns
     it has ~68px to live in. Uppercase costs about 15% more width for nothing. */
  .ls-m-head th{font-size:.62em;font-weight:800;line-height:1.15;background:#fff;
    overflow-wrap:break-word}
  /* 30%, not more: the four narrow columns need ~53px of content each - the width of
     "Adjustable" and of "Deductible" at their sizes, measured, not guessed. At 36% they
     got 49px and both words hyphenated onto an orphan letter. */
  .ls-m-c1{width:30%}
  .ls-m-nm{text-align:left !important;padding-left:.5em !important;
    font-size:.78em;font-weight:800;line-height:1.2;overflow-wrap:break-word}
  .ls-m-row td{font-size:1.05em;font-weight:700}
  .ls-m .is-off{color:#b9bec6}          /* a dash, not an absence: the row still reads */
  .ls-m .is-on{color:#1a7f37}
  /* Must wrap: the Standard row's "price" is the words Copay & Deductible. */
  .ls-m-price{font-size:.62em !important;font-weight:800;line-height:1.25;
    white-space:normal;overflow-wrap:break-word}
  /* The big black price buttons are a desktop row of four; the grid has a Price
     column instead, so they would only repeat themselves and overflow the screen. */
  .ls-prices{display:none !important}
  /* Rows wear their column's colour, so the grid and the bands still agree. */
  .ls-m-row.col-std{background:var(--col-std)}
  .ls-m-row.col-tor{background:var(--col-tor)}
  .ls-m-row.col-mul{background:var(--col-mul)}
  .ls-m-row.col-lal{background:var(--col-lal)}
  .ls-m-row.col-tor,.ls-m-row.col-mul,.ls-m-row.col-lal{cursor:pointer}
}