/* KZM Contractors' Van Door hero (kzm-v-b2.html, Luke's sign-off 27 Oct 2026) as a stamp for device frames, used with shared/kzmhost.js.
   The rules below are the page's own, word for word, less its html,body rule. Everything kzb- prefixed and sized against the .kzb container.
   The frame sets --kz-h to its height (844px in the iPhone, 700px in the window). This file pulls in the fonts and the Book here pill (kzm.css).
   After the page's rules: a reset for what a host page lets inherit (site.html sets line-height 1.5 on body), the pill inside the frame,
   one ch length pinned as em, and the hold that keeps the entry still until the stamp is first seen. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=Caprasimo&family=DM+Sans:wght@400;500;600&display=swap");
@import url("kzm.css");
@property --kzb-fr{syntax:'<percentage>';inherits:false;initial-value:135%}
.kzb,.kzb *{box-sizing:border-box}
.kzb{
  --kzb-g9:#0f2318; --kzb-g8:#1d3a29; --kzb-g7:#27493a; --kzb-cream:#f3e9d2; --kzb-cream2:#e7d8b4;
  --kzb-mustard:#e4a834; --kzb-mustard-d:#a8761c; --kzb-orange:#d9622b; --kzb-ink:#14211a;
  --kzb-ice:#e4efeb; --kzb-mint:#9fcdc5; --kzb-teal:#4f97a3; --kzb-teal-d:#2c7480; --kzb-rust:#c4531f;
  --kzb-pad:clamp(20px,5.2cqi,80px);
  container-type:inline-size; position:relative; display:flex; flex-direction:column; min-height:var(--kz-h,100svh); overflow:hidden;
  background:var(--kzb-g8); color:var(--kzb-cream);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; font-stretch:100%;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.kzb a{color:inherit;text-decoration:none}
.kzb-defs{position:absolute;width:0;height:0;overflow:hidden}

/* duco: a soft light pass over the panel and a fine grain, like paint on a van */
.kzb-paint{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 55% at 22% 8%,rgba(255,255,255,.075),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.035) 0,transparent 38%,rgba(0,0,0,.16) 100%)}
.kzb-paint::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

.kzb-in{position:relative;flex:1 1 auto;display:flex;flex-direction:column;padding:0 var(--kzb-pad)}

/* nav */
.kzb-nav{flex:none;height:64px;display:flex;align-items:center;gap:12px;position:relative;z-index:3}
.kzb-brand{display:flex;align-items:center;gap:9px;margin-right:auto}
.kzb-mark{width:38px;height:38px;flex:none;display:block;border-radius:50%;padding:2px;background:var(--kzb-cream);box-shadow:0 2px 0 var(--kzb-g9)}
.kzb-mark img{display:block;width:100%;height:100%;border-radius:50%;background:#ebdfc4}
.kzb-word{display:flex;flex-direction:column;line-height:1}
.kzb-word b{font:400 26px/0.9 'Caprasimo',Georgia,serif;letter-spacing:.01em;color:var(--kzb-cream);text-shadow:.06em .07em 0 var(--kzb-g9)}
.kzb-word i{font-style:normal;font-weight:700;font-stretch:100%;font-size:7.6px;letter-spacing:.1em;margin-right:-.1em;text-transform:uppercase;color:var(--kzb-mustard);margin-top:5px}
.kzb-links{display:none}
.kzb-navcall{display:none}
.kzb-icall,.kzb-menu{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kzb-icall{background:var(--kzb-mustard);color:var(--kzb-ink)}
.kzb-menu{background:transparent;color:var(--kzb-cream);box-shadow:inset 0 0 0 1.5px rgba(243,233,210,.32)}
.kzb-icall svg,.kzb-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kzb-swage{position:absolute;left:0;right:0;top:64px;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,rgba(255,255,255,.07) 1px 2px)}

/* main */
.kzb-main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-top:14px;position:relative;z-index:2}
.kzb-art{position:relative;flex:1 1 0;min-height:118px;max-height:250px}
.kzb-win{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:#0d130f;
  border:7px solid #0d130f;box-shadow:0 0 0 1.5px rgba(243,233,210,.26),0 18px 40px -18px rgba(0,0,0,.6)}
.kzb-ph{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:46% 60%;border-radius:17px}
.kzb-ph-s{opacity:0;transition:opacity 1.1s ease}
.kzb[data-season=summer] .kzb-ph-s{opacity:1}
/* frost on the glass, thick in the corners, cleared from the middle out when the season turns */
.kzb-frost{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:17px;--kzb-fr:135%;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='f'%20x='0'%20y='0'%3E%3CfeTurbulence%20type='turbulence'%20baseFrequency='.07'%20numOctaves='5'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeGaussianBlur%20stdDeviation='.35'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.95%200%200%200%200%20.98%200%200%200%200%201%202.8%200%200%200%20-.95'/%3E%3C/filter%3E%3Crect%20width='300'%20height='300'%20filter='url%28%23f%29'/%3E%3C/svg%3E") 0 0/300px 300px,
    radial-gradient(ellipse 85% 80% at 50% 50%,rgba(228,239,242,0) 35%,rgba(228,239,242,.7) 100%);
  -webkit-mask-image:radial-gradient(ellipse 74% 70% at 50% 48%,transparent var(--kzb-fr),#000 calc(var(--kzb-fr) + 40%));
  mask-image:radial-gradient(ellipse 74% 70% at 50% 48%,transparent var(--kzb-fr),#000 calc(var(--kzb-fr) + 40%));
  transition:--kzb-fr 1.5s cubic-bezier(.3,0,.2,1)}
.kzb[data-season=winter] .kzb-frost{--kzb-fr:48%}
/* summer sun on the glass */
.kzb-glare{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:17px;opacity:0;mix-blend-mode:screen;transition:opacity 1.2s ease .2s;
  background:radial-gradient(circle at 86% 0%,rgba(255,247,224,.95) 0,rgba(255,224,156,.5) 8%,rgba(255,184,92,.16) 26%,transparent 52%)}
.kzb[data-season=summer] .kzb-glare{opacity:1}
/* the plate on the glass: Heating or Cooling */
.kzb-mode{position:absolute;z-index:3;bottom:7px;right:7px;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(14,26,19,.6);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(243,233,210,.24),0 6px 16px -8px rgba(0,0,0,.55)}
.kzb-mb{display:inline-flex;align-items:center;gap:5px;height:27px;padding:0 9px 0 7px;border:0;border-radius:999px;background:transparent;color:rgba(243,233,210,.8);
  font:700 9px/1 'Archivo',system-ui,sans-serif;font-stretch:115%;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .35s ease,color .35s ease}
.kzb-mb svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s ease}
.kzb-mb[aria-pressed=true]{background:var(--kzb-cream);color:var(--kzb-g8)}
.kzb-mb[data-to=winter][aria-pressed=true] svg{stroke:var(--kzb-rust)}
.kzb-mb[data-to=summer][aria-pressed=true] svg{stroke:var(--kzb-teal-d)}
.kzb-mb:focus-visible,.kzb-bb:focus-visible{outline:2px solid var(--kzb-mustard);outline-offset:3px}
.kzb-win::before{content:"";position:absolute;inset:0;border-radius:17px;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 10px 22px -6px rgba(0,0,0,.55)}
.kzb-win::after{content:"";position:absolute;inset:0;border-radius:17px;z-index:1;pointer-events:none;
  background:linear-gradient(112deg,transparent 0 14%,rgba(255,255,255,.13) 14% 27%,transparent 27% 31%,rgba(255,255,255,.07) 31% 34%,transparent 34%)}
.kzb-bb{position:absolute;z-index:2;width:116px;height:116px;left:-6px;bottom:-56px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.38));-webkit-tap-highlight-color:transparent}
.kzb-badge{display:block;width:100%;height:100%;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.kzb-bb:hover .kzb-badge{transform:rotate(-9deg)}
.kzb-badge.kzb-spin{animation:kzb-spin 1.05s cubic-bezier(.5,0,.2,1)}
.kzb-sc{transition:opacity .3s ease}
.kzb-sc-s,.kzb[data-season=summer] .kzb-sc-w{opacity:0}
.kzb[data-season=summer] .kzb-sc-s{opacity:1}
.kzb-rw{transition:fill .5s ease}
.kzb[data-season=winter] .kzb-rw-h{fill:var(--kzb-rust)}
.kzb[data-season=summer] .kzb-rw-c{fill:var(--kzb-teal-d)}
.kzb-ring{font-family:'Archivo',sans-serif;font-weight:800;font-stretch:125%;font-size:23px;letter-spacing:.16em;fill:var(--kzb-g8)}

.kzb-copy{flex:none;position:relative}
.kzb-eyebrow{min-height:56px;padding:9px 0 0 124px;font-weight:700;font-stretch:125%;font-size:10.5px;line-height:1.55;letter-spacing:.2em;text-transform:uppercase;color:var(--kzb-mustard)}
.kzb-eyebrow span{display:block}
.kzb-h1{margin:12px 0 0;font:400 clamp(40px,12.1cqi,140px)/.96 'Caprasimo',Georgia,serif;letter-spacing:-.005em;color:var(--kzb-cream);
  text-shadow:.045em .05em 0 var(--kzb-g9);text-wrap:balance}
.kzb-amp{color:var(--kzb-mustard)}
.kzb-hot,.kzb-cool{transition:text-shadow .8s ease}
.kzb[data-season=winter] .kzb-hot{text-shadow:.045em .05em 0 var(--kzb-orange)}
.kzb[data-season=summer] .kzb-cool{text-shadow:.045em .05em 0 var(--kzb-teal)}
.kzb-sub{margin:12px 0 0;font-size:15px;line-height:1.45;color:rgba(243,233,210,.82)}
.kzb-cta{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:18px}
.kzb-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 26px;border-radius:12px;
  background:var(--kzb-mustard);color:var(--kzb-ink) !important;font-weight:700;font-size:17px;letter-spacing:.005em;
  box-shadow:0 3px 0 var(--kzb-mustard-d),0 12px 24px -10px rgba(0,0,0,.5);transition:transform .15s ease,box-shadow .15s ease}
.kzb-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kzb-btn:hover{transform:translateY(-1px)}
.kzb-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--kzb-mustard-d),0 6px 14px -8px rgba(0,0,0,.5)}
.kzb-call{display:flex;align-items:center;gap:8px;font-size:15px;color:rgba(243,233,210,.8)}
.kzb-call b{font-weight:700;color:var(--kzb-cream);letter-spacing:.02em;border-bottom:1.5px solid rgba(228,168,52,.7);padding-bottom:1px}
.kzb-call svg{width:17px;height:17px;fill:none;stroke:var(--kzb-mustard);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kzb-proof{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:13px;color:rgba(243,233,210,.7)}
.kzb-proof b{color:var(--kzb-cream);font-weight:700}
.kzb-stars{display:inline-flex;gap:2px;margin-right:6px;vertical-align:-1px}
.kzb-stars svg{width:13px;height:13px;fill:var(--kzb-mustard)}
.kzb-rate{display:inline-flex;align-items:center}
.kzb-lic{display:inline-flex;align-items:center;gap:6px}
.kzb-lic::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--kzb-orange)}

/* the stripe, painted across the panel edge to edge: ice, mint and teal in winter, cream, mustard and orange in summer.
   The summer coat grows from the left; going back it shrinks to the right, so either way the new colour is laid on left to right. */
.kzb-stripe{flex:none;position:relative;z-index:1;margin:18px calc(-1 * var(--kzb-pad)) 0;display:flex;flex-direction:column;gap:5px}
.kzb-stripe i{position:relative;display:block;transform-origin:0 50%;background:var(--c)}
.kzb-stripe i::after{content:"";position:absolute;inset:0;background:var(--w);transform:scaleX(0);transform-origin:100% 50%;transition:transform 1.05s cubic-bezier(.65,0,.25,1) var(--d)}
.kzb[data-season=summer] .kzb-stripe i::after{transform:scaleX(1);transform-origin:0 50%}
.kzb-stripe i:nth-child(1){height:5px;--c:var(--kzb-ice);--w:var(--kzb-cream);--d:0s}
.kzb-stripe i:nth-child(2){height:11px;--c:var(--kzb-mint);--w:var(--kzb-mustard);--d:.09s}
.kzb-stripe i:nth-child(3){height:11px;--c:var(--kzb-teal);--w:var(--kzb-orange);--d:.18s}
.kzb-stripe::after{content:"";display:block;height:0}
.kzb-foot{flex:none;height:98px;margin:5px calc(-1 * var(--kzb-pad)) 0;padding:14px var(--kzb-pad) 0;position:relative;z-index:1;background:var(--kzb-cream);color:var(--kzb-g8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 14px 22px -16px rgba(15,35,24,.35)}
.kzb-svc{display:none}
.kzb-area{max-width:50%;font-weight:700;font-stretch:125%;font-size:9.5px;line-height:1.6;letter-spacing:.18em;text-transform:uppercase;color:rgba(29,58,41,.82)}
.kzb-area-x{display:none}

/* desktop: copy left, window and badge right, stripe and the painted service list across the bottom */
@container (min-width: 900px){
  .kzb-nav{height:clamp(80px,6.6cqi,100px);gap:clamp(20px,2.4cqi,40px)}
  .kzb-swage{top:clamp(80px,6.6cqi,100px)}
  .kzb-mark{width:clamp(46px,3.9cqi,58px);height:clamp(46px,3.9cqi,58px)}
  .kzb-brand{gap:14px}
  .kzb-word b{font-size:clamp(27px,2.3cqi,34px)}
  .kzb-word i{font-size:clamp(9.5px,.8cqi,12px);font-stretch:125%;letter-spacing:.28em;margin-right:0}
  .kzb-links{display:flex;gap:clamp(22px,2.6cqi,40px);font-size:clamp(14.5px,1.18cqi,17px);font-weight:500;color:rgba(243,233,210,.82)}
  .kzb-links a{padding:8px 0;border-bottom:1.5px solid transparent;transition:border-color .2s ease,color .2s ease}
  .kzb-links a:hover{color:var(--kzb-cream);border-color:var(--kzb-mustard)}
  .kzb-navcall{display:flex;flex-direction:column;align-items:flex-end;line-height:1;margin-left:clamp(8px,1.4cqi,24px)}
  .kzb-navcall span{font-weight:700;font-stretch:125%;font-size:clamp(9px,.74cqi,11px);letter-spacing:.24em;text-transform:uppercase;color:var(--kzb-mustard)}
  .kzb-navcall b{font:400 clamp(22px,1.85cqi,28px)/1 'Caprasimo',Georgia,serif;color:var(--kzb-cream);margin-top:6px;letter-spacing:.01em;text-shadow:.05em .06em 0 var(--kzb-g9)}
  .kzb-icall,.kzb-menu{display:none}

  .kzb-main{flex-direction:row-reverse;align-items:center;gap:clamp(40px,5cqi,96px);padding-top:0}
  .kzb-art{flex:0 0 44%;align-self:stretch;max-height:none;min-height:0;margin:clamp(28px,3.4cqi,56px) 0 clamp(54px,5.6cqi,90px)}
  .kzb-win{border-radius:clamp(30px,2.8cqi,44px);border-width:clamp(9px,.8cqi,12px)}
  .kzb-ph,.kzb-frost,.kzb-glare,.kzb-win::before,.kzb-win::after{border-radius:clamp(21px,2cqi,32px)}
  .kzb-mode{top:clamp(14px,1.3cqi,20px);bottom:auto;right:clamp(14px,1.3cqi,20px)}
  .kzb-mb{gap:6px;letter-spacing:.14em;font-stretch:118%}
  .kzb-mb{height:clamp(32px,2.7cqi,38px);padding:0 clamp(12px,1.1cqi,16px) 0 clamp(10px,.9cqi,13px);font-size:clamp(10px,.84cqi,12px)}
  .kzb-mb svg{width:clamp(14px,1.2cqi,17px);height:clamp(14px,1.2cqi,17px)}
  .kzb-bb{width:clamp(200px,20.5cqi,330px);height:clamp(200px,20.5cqi,330px);left:clamp(-150px,-9cqi,-70px);bottom:clamp(-110px,-7.4cqi,-70px)}
  .kzb-copy{flex:1 1 0;min-width:0;padding-bottom:clamp(8px,1.4cqi,24px)}
  .kzb-eyebrow{min-height:0;padding:0;font-size:clamp(10.5px,.92cqi,14px);letter-spacing:.18em}
  .kzb-eyebrow span{display:inline}
  .kzb-eyebrow span+span::before{content:"\00b7";margin:0 .7em;color:rgba(228,168,52,.6)}
  .kzb-h1{margin-top:clamp(14px,1.3cqi,22px);font-size:clamp(50px,min(6.5cqi,calc(var(--kz-h,100svh) * .1)),116px);line-height:.94}
  .kzb-sub{margin-top:clamp(18px,1.7cqi,28px);font-size:clamp(17px,1.4cqi,21px);max-width:38ch}
  .kzb-cta{flex-direction:row;align-items:center;gap:clamp(18px,2cqi,30px);margin-top:clamp(24px,2.2cqi,36px)}
  .kzb-btn{height:clamp(56px,4.6cqi,64px);padding:0 clamp(26px,2.4cqi,36px);font-size:clamp(17px,1.4cqi,19px)}
  .kzb-call{font-size:clamp(15px,1.25cqi,18px)}
  .kzb-proof{margin-top:clamp(16px,1.5cqi,24px);font-size:clamp(13px,1.05cqi,15px)}

  .kzb-stripe{gap:6px;margin-top:0}
  .kzb-stripe i:nth-child(1){height:6px}
  .kzb-stripe i:nth-child(2),.kzb-stripe i:nth-child(3){height:clamp(13px,1.15cqi,18px)}
  .kzb-foot{height:auto;margin-top:6px;padding:clamp(15px,1.4cqi,22px) var(--kzb-pad) clamp(18px,1.8cqi,28px);display:flex;flex-direction:column;gap:8px}
  .kzb-svc{display:block;max-width:calc(100% + var(--kzb-pad) - 214px);font-weight:800;font-stretch:108%;font-size:clamp(10.5px,.86cqi,13px);line-height:1.7;letter-spacing:.12em;text-transform:uppercase;color:var(--kzb-g8)}
  .kzb-svc span{white-space:nowrap}
  .kzb-svc span:not(:last-child)::after{content:"";display:inline-block;width:6px;height:6px;margin:0 .95em;transform:translateY(-1px) rotate(45deg);vertical-align:middle;background:var(--kzb-orange)}
  .kzb-area{max-width:calc(100% + var(--kzb-pad) - 214px);font-size:clamp(9.5px,.76cqi,11.5px);font-weight:600;font-stretch:104%;letter-spacing:.11em;color:rgba(29,58,41,.8);white-space:nowrap}
  .kzb-area b{font-weight:800;color:var(--kzb-g8)}
}
@container (min-width: 1200px){ .kzb-area-x{display:inline} }

/* motion: the stripe is painted on left to right, the badge goes on, the copy follows. Once, on load. */
@media (prefers-reduced-motion: no-preference){
  .kzb-stripe i{animation:kzb-paint 1.1s cubic-bezier(.65,0,.2,1) both}
  .kzb-stripe i:nth-child(1){animation-delay:.1s}
  .kzb-stripe i:nth-child(2){animation-delay:.2s}
  .kzb-stripe i:nth-child(3){animation-delay:.3s}
  .kzb-bb{animation:kzb-on .9s cubic-bezier(.2,.8,.2,1) .35s both}
  .kzb[data-season=winter] .kzb-frost{animation:kzb-creep 2.2s cubic-bezier(.2,.7,.2,1) .2s backwards}
  .kzb-copy>*{animation:kzb-up .7s cubic-bezier(.2,.8,.2,1) both}
  .kzb-copy>:nth-child(2){animation-delay:.08s}
  .kzb-copy>:nth-child(3){animation-delay:.16s}
  .kzb-copy>:nth-child(4){animation-delay:.24s}
  .kzb-copy>:nth-child(5){animation-delay:.3s}
  .kzb-win{animation:kzb-fade .9s ease both}
}
@keyframes kzb-paint{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes kzb-on{from{opacity:0;transform:translateY(12px) rotate(-10deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes kzb-creep{from{--kzb-fr:135%}}
@keyframes kzb-spin{0%{transform:rotate(0)}64%{transform:rotate(374deg)}100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .kzb *,.kzb *::after{transition:none !important} }
@keyframes kzb-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes kzb-fade{from{opacity:0}to{opacity:1}}

/* stamp only: the host page's inherited type stops at the van door */
.kzb{font-size:16px;font-weight:400;font-style:normal;line-height:normal;letter-spacing:normal;word-spacing:normal;text-align:left;text-indent:0;text-transform:none;white-space:normal}
/* the pill sits bottom right of the frame, not the viewport (kzm.css fixes it to the page), and moves out at the same width the page does.
   Its type smoothing is the page's default, not the hero's. */
.kzb .kzm-friend{position:absolute;right:16px;bottom:22px;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
/* .kzb-sub's 38ch is Archivo's 21.763em, pinned: when the font lands late, Chrome can keep the fallback font's ch inside a container query
   and the line runs 407px, not 370px (it happens on kzm-v-b2.html too, under load) */
@container (min-width: 900px){
  .kzb .kzm-friend{right:28px;bottom:24px}
  .kzb-sub{max-width:21.763em}
}
/* the entry (stripe, badge, copy, the penguin's wave) waits until the stamp is first seen; kzmhost.js takes kzh-wait off */
.kzb.kzh-wait *{animation-play-state:paused !important}