/* ==========================================================================
   AI Pest Detection — the cinematic cut.

   Four films, scrubbed by the scrollbar, with every word drawn in the page over
   the top. The technique is the one already proven by the home page hero and the
   drop sequence: a reader controls the pace, so the story can take exactly as
   long as they want it to, and the typography stays crisp at any size and
   switches EN/BM with the rest of the site because it was never baked into the
   film.

   Everything here is namespaced .p* so it cannot collide with hero.css, which
   this page does not load.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The stage
   -------------------------------------------------------------------------- */

/* Each film is a tall section with a sticky viewport inside it. The height is
   the film's pacing control: more height is more scroll per second of footage,
   which is what makes a scrub feel smooth. It is set per section in the markup
   via --pfilm-h rather than here, because the right number depends on how much
   happens in that particular film, not on any global rule. */
.pfilm{position:relative;height:var(--pfilm-h,700vh);background:#0A0E05;z-index:1}
.pstage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:#0A0E05;isolation:isolate;color:var(--bone)}

.pvid,.ppost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ppost{background:#0A0E05 center/cover no-repeat;opacity:1;
  transition:opacity .7s var(--ease)}
.pstage.film-ready .ppost{opacity:0}
.pvid{opacity:0;transition:opacity .7s var(--ease)}
.pstage.film-ready .pvid{opacity:1}

/* The loading ring. It is the only thing on screen before the film arrives, so
   it is deliberately quiet: a visitor on a slow connection should read the
   poster, not watch a spinner. */
.pring{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border:1px solid rgba(245,239,229,.2);border-top-color:rgba(245,239,229,.7);
  border-radius:50%;animation:pspin 1s linear infinite;opacity:.75;
  transition:opacity .4s linear}
.pstage.film-ready .pring,.pstage.film-failed .pring{opacity:0}
@keyframes pspin{to{transform:rotate(360deg)}}

/* Two gradients, not one. The vignette steadies the corners under floating
   words; the floor is what makes a caption sitting low in frame legible over
   bright soil without dimming the whole picture. */
.pveil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 94% 80% at 50% 46%,
    rgba(7,11,4,0) 32%,rgba(7,11,4,.5) 80%,rgba(7,11,4,.76) 100%)}
.pfloor{position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;
  background:linear-gradient(to top,rgba(7,11,4,.92) 0%,rgba(7,11,4,.74) 26%,
    rgba(7,11,4,.38) 58%,rgba(7,11,4,.1) 84%,rgba(7,11,4,0) 100%);
  opacity:var(--floor,.55);transition:opacity .45s linear}

/* --------------------------------------------------------------------------
   Beats — the words over the film
   -------------------------------------------------------------------------- */

.pbeats{position:absolute;inset:0;pointer-events:none}

/* A beat holds the stage for a window of scroll and then hands over. The outer
   element never transitions: it is placed once and left alone. The inner one
   does the arriving, which is why they are two elements. */
.pbeat{position:absolute;inset:0;display:flex;padding:0 var(--pad);
  align-items:center;justify-content:center;text-align:center}
.pbeat .pb{max-width:min(1180px,100%);width:100%;
  opacity:0;transform:translateY(18px);
  transition:opacity .62s var(--ease),transform .62s var(--ease);
  /* the scrim below escapes to the back of the block rather than the stage */
  position:relative;isolation:isolate}
.pbeat.on .pb{opacity:1;transform:none}

/* Cream type over a bright hazy greenhouse is the hardest case on this page, and
   a text shadow alone does not carry it: the opening frame is nearly white
   behind the headline and the kicker all but disappeared. The home page hero
   solves the same problem with a soft radial scrim painted behind each band, and
   the reason it is per band rather than one flat overlay is that a flat overlay
   dulls the whole picture to fix one part of it. So the scrim belongs to the
   beat, arrives and leaves with it, and the rest of the shot is untouched. */
.pbeat .pb::before{content:"";position:absolute;inset:-72% -32%;
  pointer-events:none;z-index:-1;
  /* The ellipse has to reach zero well inside the box. At 92% it was still
     faintly opaque where the box ended, and the background clips at the box, so
     the scrim drew its own edge straight across the frame. Half the extent, and
     a much larger box to fade inside, leaves no edge to see. */
  background:radial-gradient(ellipse 52% 52% at 50% 50%,
    rgba(8,12,4,.62) 0%,rgba(8,12,4,.45) 40%,rgba(8,12,4,.17) 68%,rgba(8,12,4,0) 88%)}

/* Where a beat sits. Centre is the default; the others exist so consecutive
   beats do not all land in the same place, which is what makes a sequence feel
   composed rather than like a slideshow with one text box. */
.pbeat.at-top{align-items:flex-start;padding-top:clamp(96px,14vh,180px)}
.pbeat.at-low{align-items:flex-end;padding-bottom:clamp(72px,11vh,132px)}
.pbeat.at-left{justify-content:flex-start;text-align:left}
.pbeat.at-left .pb{max-width:min(680px,100%)}
.pbeat.at-right{justify-content:flex-end;text-align:left}
.pbeat.at-right .pb{max-width:min(560px,100%)}

.pbeat .kicker{color:var(--sand);text-shadow:var(--tshadow)}
.pbeat h1,.pbeat h2{font-family:var(--display);font-weight:400;color:var(--bone);
  margin:16px auto 0;letter-spacing:-.024em;line-height:1.04;
  font-size:clamp(2.1rem,5.4vw,4.6rem);text-shadow:var(--tshadow);max-width:18ch}
.pbeat.at-left h1,.pbeat.at-left h2,.pbeat.at-right h1,.pbeat.at-right h2{margin-left:0}
.pbeat .lede{margin:clamp(16px,2.2vh,28px) auto 0;max-width:46ch;
  font-size:clamp(1rem,1.5vw,1.28rem);line-height:1.5;color:var(--bone);
  opacity:.86;text-shadow:var(--tshadow)}
.pbeat.at-left .lede,.pbeat.at-right .lede{margin-left:0}

/* The one-word labels the brief asks for: TRAPS, CAPTURE, DETECT. Set in the
   mono face at a size that reads as an instrument label rather than a heading,
   because the film is doing the explaining. */
.plabel{font-family:var(--mono);font-size:clamp(11px,1.15vw,13.5px);
  letter-spacing:.34em;text-transform:uppercase;color:var(--bone);
  display:inline-flex;align-items:center;gap:12px;text-shadow:var(--tshadow)}
.plabel::before{content:"";width:34px;height:1px;background:var(--sand);opacity:.9}
.pbeat .plabel + h2{margin-top:14px}

.pbeat .btnrow{justify-content:center;pointer-events:auto;margin-top:clamp(24px,3.4vh,40px)}
.pbeat.at-left .btnrow,.pbeat.at-right .btnrow{justify-content:flex-start}
.pstage .btn-2{border-color:rgba(245,239,229,.45);color:var(--bone)}
.pstage .btn-2:hover{border-color:var(--bone);color:#fff}

/* --------------------------------------------------------------------------
   The detection overlay — bounding boxes and the count
   --------------------------------------------------------------------------
   These are the computer vision beats. They are drawn in the page rather than
   generated into the film for three reasons: they stay sharp on a 4K display,
   they read the same in BM as in EN, and a bounding box that is really a DOM
   element can be positioned against the insect it belongs to instead of being
   frozen wherever the model happened to put it. */

.pdet{position:absolute;inset:0;pointer-events:none;
  opacity:var(--det,0);transition:opacity .4s linear}
.pbox{position:absolute;border:1px solid rgba(245,239,229,.82);
  width:var(--bw,7%);aspect-ratio:1;left:var(--bx,50%);top:var(--by,50%);
  /* left, top and width are overwritten in px by placeBoxes() once the stage
     has been measured; these are only what is used before that happens */
  transform:translate(-50%,-50%) scale(var(--bs,1.35));
  transition:transform .55s var(--ease),opacity .35s linear;
  opacity:0}
.pbox.on{opacity:1;--bs:1}
/* corner ticks, so the box reads as an instrument and not as a plain rectangle */
.pbox::before,.pbox::after{content:"";position:absolute;width:7px;height:7px;
  border:1px solid var(--sand)}
.pbox::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.pbox::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.pbox b{position:absolute;left:0;top:calc(100% + 7px);white-space:nowrap;
  font-family:var(--mono);font-weight:400;font-size:clamp(9px,.86vw,10.5px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone);
  text-shadow:var(--tshadow)}
.pbox b i{font-style:normal;color:var(--sand);margin-left:8px}

/* the running total, bottom left, in the same place as the home page's HUD */
.pcount{position:absolute;left:var(--pad);bottom:clamp(30px,5vh,56px);
  opacity:var(--cnt,0);transition:opacity .4s linear;pointer-events:none}
.pcount .lbl{font-family:var(--mono);font-size:clamp(10px,1vw,11.5px);
  letter-spacing:.28em;text-transform:uppercase;color:var(--sand);
  text-shadow:var(--tshadow)}
.pcount .n{display:block;margin-top:6px;font-family:var(--display);font-weight:400;
  font-size:clamp(3rem,7.6vw,6.2rem);line-height:.94;color:var(--bone);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-shadow:var(--tshadow)}
.pcount .sub{display:block;margin-top:8px;font-family:var(--mono);
  font-size:clamp(9.5px,.92vw,11px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);opacity:.66;text-shadow:var(--tshadow)}

/* --------------------------------------------------------------------------
   The data beat — a trend, not a dashboard
   --------------------------------------------------------------------------
   The brief asks for the most important information only, and warns against
   looking like a generic SaaS dashboard. So this is one sparkline, one axis of
   dates and one threshold line: the minimum that makes "population is climbing"
   an argument rather than an assertion. */

.pdata{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
  width:min(420px,38vw);pointer-events:none;
  opacity:var(--dat,0);transition:opacity .5s linear}
.pdata .hd{font-family:var(--mono);font-size:clamp(9.5px,.92vw,11px);
  letter-spacing:.26em;text-transform:uppercase;color:var(--sand);
  text-shadow:var(--tshadow)}
.pdata .plot{margin-top:14px;position:relative;height:clamp(110px,16vh,168px);
  border-left:1px solid rgba(245,239,229,.22);
  border-bottom:1px solid rgba(245,239,229,.22)}
.pdata svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pdata .trend{fill:none;stroke:var(--bone);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,300);stroke-dashoffset:calc(var(--len,300) * (1 - var(--draw,0)))}
.pdata .fill{fill:rgba(224,86,22,.13);stroke:none;opacity:var(--draw,0)}
.pdata .thresh{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 4;opacity:.85}
.pdata .dot{fill:var(--accent);opacity:var(--draw,0)}
.pdata .axis{margin-top:10px;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:clamp(9px,.86vw,10px);letter-spacing:.16em;
  color:var(--bone);opacity:.6;text-shadow:var(--tshadow)}
.pdata .note{margin-top:14px;font-size:clamp(.82rem,1.1vw,.94rem);line-height:1.5;
  color:var(--bone);opacity:.82;text-shadow:var(--tshadow)}
.pdata .note b{font-weight:500;color:var(--sand)}

/* --------------------------------------------------------------------------
   The alert beat — one notification, on one phone
   -------------------------------------------------------------------------- */

.palert{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(360px,80vw);pointer-events:none;
  opacity:var(--alr,0);transition:opacity .45s linear}
.pnote{background:rgba(14,19,9,.82);-webkit-backdrop-filter:blur(18px) saturate(1.1);
  backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid rgba(245,239,229,.16);border-radius:18px;
  padding:clamp(15px,1.7vw,20px) clamp(16px,1.8vw,22px);
  box-shadow:0 24px 70px rgba(4,7,2,.6);
  transform:translateY(calc((1 - var(--alr,0)) * 14px));
  transition:transform .5s var(--ease)}
.pnote .top{display:flex;align-items:center;gap:10px}
.pnote .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(224,86,22,.5);animation:ppulse 2.6s var(--ease-soft) infinite}
@keyframes ppulse{
  0%{box-shadow:0 0 0 0 rgba(224,86,22,.45)}
  70%{box-shadow:0 0 0 11px rgba(224,86,22,0)}
  100%{box-shadow:0 0 0 0 rgba(224,86,22,0)}
}
.pnote .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sand)}
.pnote .when{margin-left:auto;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;color:var(--bone);opacity:.5}
.pnote h3{margin:13px 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.16;letter-spacing:-.015em;
  color:var(--bone)}
.pnote p{margin:8px 0 0;font-size:clamp(.84rem,1.1vw,.92rem);line-height:1.5;
  color:var(--bone);opacity:.76}

/* --------------------------------------------------------------------------
   The customisable-detection beat — silhouettes under a scan
   -------------------------------------------------------------------------- */

.pscan{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  opacity:var(--scn,0);transition:opacity .5s linear}
/* One pass of light, tied to the scrollbar rather than to a timer, so it cannot
   keep sweeping while the reader has stopped reading. */
.pscanline{position:absolute;left:0;right:0;height:34%;
  top:calc(var(--scanpos,0) * 118% - 17%);
  background:linear-gradient(to bottom,rgba(174,190,140,0) 0%,
    rgba(174,190,140,.14) 46%,rgba(174,190,140,.26) 50%,
    rgba(174,190,140,.14) 54%,rgba(174,190,140,0) 100%)}

/* the crops the system can be pointed at, as a quiet row of chips rather than a
   second list of names */
.pchips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
  margin-top:clamp(20px,2.8vh,32px)}
.pchip{font-family:var(--mono);font-size:clamp(9.5px,.94vw,11px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);opacity:.8;
  border:1px solid rgba(245,239,229,.3);border-radius:999px;
  padding:6px 13px;text-shadow:var(--tshadow)}
.pchip.key{color:var(--accent-hover);border-color:rgba(240,117,46,.55);opacity:1}

/* --------------------------------------------------------------------------
   The interface beats — what the operator actually sees
   --------------------------------------------------------------------------
   The brief warns twice against looking like a generic SaaS dashboard, and it is
   right to: a wall of widgets says "software" where this page has to say "the
   pest in your block has a name and a number". So this is one row of readings
   and a status, and nothing else. It is real markup rather than a picture of an
   interface, which is what lets it stay sharp and switch language. */

.pui{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,84vw);pointer-events:none;
  opacity:var(--ui,0);transition:opacity .5s linear}
.puiwin{background:rgba(12,17,7,.8);-webkit-backdrop-filter:blur(20px) saturate(1.1);
  backdrop-filter:blur(20px) saturate(1.1);
  border:1px solid rgba(245,239,229,.15);border-radius:16px;overflow:hidden;
  box-shadow:0 28px 80px rgba(4,7,2,.62);
  transform:translateY(calc((1 - var(--ui,0)) * 16px));
  transition:transform .55s var(--ease)}
.puibar{display:flex;align-items:center;gap:9px;padding:12px 16px;
  border-bottom:1px solid rgba(245,239,229,.11)}
.puibar i{width:6px;height:6px;border-radius:50%;background:rgba(245,239,229,.26)}
.puibar span{margin-left:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone);opacity:.55}
.puibody{padding:clamp(16px,2vw,22px)}
.puirow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,2vw,22px)}
.puicell .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sand)}
.puicell .v{display:block;margin-top:7px;font-family:var(--display);font-weight:400;
  font-size:clamp(1.2rem,2.4vw,1.72rem);line-height:1;color:var(--bone);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.puistat{margin-top:clamp(15px,1.9vw,20px);padding-top:clamp(13px,1.7vw,17px);
  border-top:1px solid rgba(245,239,229,.11);
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.puistat i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.puistat b{font-weight:400;color:var(--accent-hover)}
.puistat em{font-style:normal;margin-left:auto;color:var(--bone);opacity:.45}

/* the same reading, on the two things people actually hold and sit at */
.pdevices{position:absolute;left:0;right:0;bottom:clamp(52px,8vh,96px);
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(20px,4vw,54px);
  padding:0 var(--pad);pointer-events:none;
  opacity:var(--dev,0);transition:opacity .5s linear}
.pdev{border:1px solid rgba(245,239,229,.24);background:rgba(12,17,7,.74);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 22px 60px rgba(4,7,2,.55);
  transform:translateY(calc((1 - var(--dev,0)) * 18px));
  transition:transform .55s var(--ease)}
.pdev.phone{width:clamp(112px,13vw,150px);aspect-ratio:9/18;border-radius:18px;padding:14px 12px}
.pdev.desk{width:clamp(230px,28vw,340px);aspect-ratio:16/10;border-radius:10px;padding:16px}
.pdev .t{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sand)}
.pdev .big{display:block;margin-top:8px;font-family:var(--display);font-weight:400;
  line-height:1;color:var(--bone);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  font-size:clamp(1.3rem,3vw,2.1rem)}
.pdev .m{display:block;margin-top:7px;font-size:clamp(.62rem,1vw,.74rem);
  line-height:1.4;color:var(--bone);opacity:.66}
.pdev .bars{display:flex;align-items:flex-end;gap:4px;height:34px;margin-top:12px}
.pdev .bars i{flex:1;background:rgba(245,239,229,.28);border-radius:1px}
.pdev .bars i:last-child{background:var(--accent)}
@media (max-width:860px){
  .pdevices{gap:14px;bottom:clamp(40px,7vh,72px)}
  .pdev.desk{display:none}
  .pdev.phone{width:clamp(104px,30vw,132px)}
  .pui{width:min(420px,88vw)}
  .puirow{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .puicell .v{font-size:clamp(1rem,4.6vw,1.3rem)}
}

/* --------------------------------------------------------------------------
   Reduced motion, short landscape screens, and no JS
   --------------------------------------------------------------------------
   Same two exits as the rest of the site, plus the no-JS case. All of them get
   the whole story as an ordinary page: every word that appears over a film also
   exists in the static block, so nothing is only available to people whose
   device and settings happen to allow a scrubbed video. */

.pstatic{display:none}
/* site.js stamps .js on the root element, so this is the no-JavaScript case */
html:not(.js) .pstage{display:none}
html:not(.js) .pfilm{height:auto;background:var(--bone-2)}
html:not(.js) .pstatic{display:block}

@media (prefers-reduced-motion:reduce),
       (orientation:landscape) and (pointer:coarse) and (max-height:480px){
  .pfilm{height:auto;background:var(--bone-2)}
  .pstage{display:none}
  .pstatic{display:block}
}

.pstatic{padding:var(--gap-sec) 0}
.pstatic.alt{background:var(--bone-2)}
.pstatic .shot{margin-top:clamp(34px,5vw,56px);border-radius:18px;overflow:hidden;
  background:var(--bone-2)}
.pstatic .shot img{width:100%;height:auto;display:block}
.pstatic .plist{margin-top:clamp(34px,5vw,54px);display:grid;gap:0}
.pstatic .plist > div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:clamp(16px,3vw,42px);padding:clamp(18px,2.4vw,26px) 0;
  border-top:1px solid var(--line)}
.pstatic .plist > div:last-child{border-bottom:1px solid var(--line)}
.pstatic .plist .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3);padding-top:4px}
.pstatic .plist .v{color:var(--text-2);line-height:1.6}
.pstatic .plist .v b{color:var(--text);font-weight:500}
@media (max-width:720px){
  .pstatic .plist > div{grid-template-columns:1fr;gap:8px}
}

/* --------------------------------------------------------------------------
   Phones
   --------------------------------------------------------------------------
   The brief is explicit that the phone should not be the desktop animation made
   smaller, and it is right: the same beats at the same pace on a 390px screen
   are unreadable, and the desktop cut is four times the bytes a phone should
   have to fetch. So the phone gets its own shorter films (loaded in pest.js),
   fewer beats per film, and the side panels move to the bottom of the frame
   where there is room for them. The story is the same one: pest, trap,
   detection, data, alert, action. */

@media (max-width:860px){
  /* The same story, told in less thumb. Each film keeps all of its beats and all
     of its footage; only the scroll it is spread over shrinks, so a phone reader
     reaches the end of the page in about three quarters of the travel. It also
     speeds the scrub up slightly, which is the right direction on a touch screen
     where one flick covers far more of the page than one wheel notch does. */
  .pfilm{height:calc(var(--pfilm-h,700vh) * 0.72)}

  .pbeat{padding:0 var(--pad)}
  .pbeat h1,.pbeat h2{font-size:clamp(1.72rem,7.4vw,2.5rem);max-width:15ch}
  .pbeat .lede{font-size:clamp(.92rem,3.5vw,1.02rem);max-width:34ch}
  .pbeat.at-top{padding-top:clamp(84px,12vh,120px)}
  .pbeat.at-low{padding-bottom:clamp(56px,9vh,92px)}
  /* a 560px-wide pull quote hard against the left edge of a phone reads as a
     mistake, so the side positions collapse back to the centre */
  .pbeat.at-left,.pbeat.at-right{justify-content:center;text-align:center}
  .pbeat.at-left .pb,.pbeat.at-right .pb{max-width:100%}
  .pbeat.at-left h2,.pbeat.at-right h2,
  .pbeat.at-left .lede,.pbeat.at-right .lede{margin-left:auto;margin-right:auto}
  .pbeat.at-left .btnrow,.pbeat.at-right .btnrow{justify-content:center}

  .pdata{right:auto;left:var(--pad);top:auto;transform:none;
    bottom:clamp(84px,13vh,128px);width:calc(100% - var(--pad) * 2)}
  .pdata .plot{height:clamp(78px,12vh,104px)}
  .pdata .note{font-size:.82rem}

  .pcount{bottom:clamp(22px,4vh,38px)}
  .pcount .n{font-size:clamp(2.6rem,14vw,3.6rem)}

  .pbox b{font-size:9px;letter-spacing:.14em}
  /* the label under a box on the right of a narrow frame runs off the edge */
  .pbox.flip b{left:auto;right:0;text-align:right}
}

@media (max-width:430px){
  .pbeat h1,.pbeat h2{font-size:clamp(1.55rem,8vw,2rem)}
  .pnote{border-radius:15px}
  .pdata .axis{font-size:8.5px;letter-spacing:.1em}
}

/* A screen too short to hold a headline and a caption at once drops the caption
   rather than overlapping them. */
@media (max-height:560px){
  .pbeat .lede{display:none}
  .pcount .sub{display:none}
}