/* InfinetCX — shared stylesheet for the product pages.
   Tokens follow the 20% inverse mix: --inverse / --on-inverse flip with
   the theme, so one surface in five is the opposite theme. */
:root{
  --brand-deep:#0E4A4F;--brand-teal:#2F8E99;--brand-citron:#C7D02D;--brand-amber:#E9A83E;
  --ink:#0d2f33;--ink-soft:#4c6165;--ink-faint:#52666a;
  --paper:#f7f7f4;--paper-alt:#eceee9;--surface:#ffffff;
  --line:#dde1db;--line-strong:#c8cfc7;
  --accent:#0F6F78;--on-accent:#fff;--accent-2:#66711a;--accent-3:#8b6420;
  --accent-soft:#e2f0f1;--accent-2-soft:#f3f6dd;--accent-3-soft:#f6eedf;
  --inverse:#0E4A4F;--inverse-2:#2F8E99;--on-inverse:#f2f7f6;--on-inverse-soft:rgba(242,247,246,.78);
  --inverse-line:rgba(255,255,255,.18);--inverse-accent:#C7D02D;--inverse-chip:rgba(255,255,255,.14);
  --surface-tint:color-mix(in srgb,var(--brand-deep) 4%,#fff);
  --note-bg:#fff7e0;--note-ink:#6b4a0c;--note-line:#e9c874;
  --shadow-sm:0 2px 8px rgba(15,17,21,.05);--shadow-md:0 12px 32px rgba(15,17,21,.08);--shadow-lg:0 28px 60px rgba(15,17,21,.14);
  --shadow-shot:0 0 0 1px rgba(15,111,120,.10),0 18px 40px -8px rgba(15,111,120,.28),0 0 70px 6px rgba(47,142,153,.20);
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#eaf1f0;--ink-soft:#a0b3b4;--ink-faint:#93a9ab;
  --paper:#08272a;--paper-alt:#0c3034;--surface:#0f393d;--line:#1a474c;--line-strong:#276064;
  --accent:#5CBCC6;--on-accent:#08272a;--accent-2:#C7D02D;--accent-3:#E9A83E;
  --accent-soft:#0d3f44;--accent-2-soft:#2a3310;--accent-3-soft:#3a2e14;
  --inverse:#f2f5f1;--inverse-2:#dde8e4;--on-inverse:#0d2f33;--on-inverse-soft:rgba(13,47,51,.72);
  --inverse-line:rgba(13,47,51,.14);--inverse-accent:#0F6F78;--inverse-chip:rgba(13,47,51,.08);
  --surface-tint:color-mix(in srgb,#eaf1f0 5%,#0f393d);
  --note-bg:#3a2e14;--note-ink:#f3d58f;--note-line:#7a5a1c;
  --shadow-sm:0 2px 8px rgba(0,0,0,.4);--shadow-md:0 12px 32px rgba(0,0,0,.45);--shadow-lg:0 28px 60px rgba(0,0,0,.55);
  --shadow-shot:var(--shadow-lg);
}}
:root[data-theme="dark"]{
  --ink:#eaf1f0;--ink-soft:#a0b3b4;--ink-faint:#93a9ab;
  --paper:#08272a;--paper-alt:#0c3034;--surface:#0f393d;--line:#1a474c;--line-strong:#276064;
  --accent:#5CBCC6;--on-accent:#08272a;--accent-2:#C7D02D;--accent-3:#E9A83E;
  --accent-soft:#0d3f44;--accent-2-soft:#2a3310;--accent-3-soft:#3a2e14;
  --inverse:#f2f5f1;--inverse-2:#dde8e4;--on-inverse:#0d2f33;--on-inverse-soft:rgba(13,47,51,.72);
  --inverse-line:rgba(13,47,51,.14);--inverse-accent:#0F6F78;--inverse-chip:rgba(13,47,51,.08);
  --surface-tint:color-mix(in srgb,#eaf1f0 5%,#0f393d);
  --note-bg:#3a2e14;--note-ink:#f3d58f;--note-line:#7a5a1c;
  --shadow-sm:0 2px 8px rgba(0,0,0,.4);--shadow-md:0 12px 32px rgba(0,0,0,.45);--shadow-lg:0 28px 60px rgba(0,0,0,.55);
  --shadow-shot:var(--shadow-lg);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em;line-height:1.15;font-weight:600;text-wrap:balance}
img{max-width:100%;display:block}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
section{padding-block:clamp(52px,7vw,88px)}

.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--ink);color:var(--paper)}
.bar .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:10px}
.bar strong{font-family:'Space Grotesk',sans-serif;font-size:14px}
.bar .sp{flex:1}
.seg{display:flex;gap:2px;padding:3px;border-radius:100px;background:rgba(255,255,255,.12)}
.seg button{border:0;background:transparent;color:inherit;opacity:.75;padding:6px 12px;border-radius:100px;font-size:12.5px;font-weight:600;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);opacity:1}
.chk{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;cursor:pointer}
.chk input{accent-color:var(--brand-citron);width:15px;height:15px}
.note{display:flex;gap:10px;background:var(--note-bg);color:var(--note-ink);border:1px dashed var(--note-line);border-radius:12px;padding:10px 14px;font-size:13px;line-height:1.45;margin-bottom:22px;max-width:780px}
.hide-notes .note{display:none}

.nav{border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:20}
.nav .wrap{display:flex;align-items:center;gap:18px;height:64px}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;display:flex;align-items:center;gap:8px}
.logo i{width:26px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--brand-deep),var(--brand-teal));display:block}
.logo em{font-style:normal;color:var(--accent-2)}
.crumbs{margin-left:auto;font-size:13.5px;color:var(--ink-soft)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:100px;font-size:14px;font-weight:600;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.sm{padding:9px 16px;font-size:13px}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.h2{font-size:clamp(26px,3.6vw,38px);margin:10px 0 12px;max-width:660px}
.lede{color:var(--ink-soft);font-size:clamp(15px,1.5vw,17px);max-width:62ch}

/* hero */
.hero{background:radial-gradient(620px 420px at 86% 8%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 64%),
 radial-gradient(520px 380px at 2% 46%,color-mix(in srgb,var(--brand-citron) 13%,transparent),transparent 64%),var(--paper);
 padding-block:clamp(44px,6vw,74px)}
.hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:38px;align-items:center}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(32px,5vw,54px);font-weight:700;margin:12px 0 16px}
.hero h1 span{color:var(--accent)}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.fine{margin-top:14px;font-size:13px;color:var(--ink-faint)}
.vid{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-shot);border:1px solid var(--line);background:var(--surface)}
.vid img{width:100%}
.vid .play{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--brand-deep) 42%,transparent);cursor:pointer;border:0;width:100%}
.vid .play span{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--paper);color:var(--accent);box-shadow:var(--shadow-md);font-size:22px;padding-left:5px}
.vid .cap{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(14,74,79,.85))}

/* inverse strip */
.strip{background:var(--inverse);color:var(--on-inverse);padding-block:24px}
.strip .wrap{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.strip b{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--inverse-accent)}
.strip span{font-size:13.5px;padding:8px 14px;border-radius:100px;background:var(--inverse-chip)}

/* before/after */
.ba{display:grid;gap:10px;margin-top:26px}
.ba .r{display:grid;grid-template-columns:1fr 26px 1fr;gap:14px;align-items:center;background:var(--surface-tint);border:1px solid var(--line);border-radius:16px;padding:14px 18px}
@media (max-width:640px){.ba .r{grid-template-columns:1fr;gap:6px}.ba .arr{display:none}}
.ba .was{color:var(--ink-faint);font-size:14px;font-style:italic}
.ba .now{font-weight:600;font-size:14.5px}
.ba .arr{color:var(--accent);font-weight:700;text-align:center}

/* screens */
.shots{margin-top:26px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tab{font:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:100px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tab:hover{border-color:var(--line-strong);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--inverse);color:var(--on-inverse);border-color:transparent}
.panel{display:grid;grid-template-columns:1fr 250px;gap:18px;align-items:start}
@media (max-width:860px){.panel{grid-template-columns:1fr}.panel .side{max-width:300px;margin-inline:auto}}
.panel[hidden]{display:none}
.frame{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-shot);background:var(--surface)}
.cap{font-size:13px;color:var(--ink-soft);margin-top:10px}
.cap b{color:var(--ink);font-weight:600}
.side .frame{border-radius:20px}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
@media (max-width:860px){.pillars{grid-template-columns:1fr}}
.pill{background:var(--surface-tint);border:1px solid var(--line);border-radius:18px;padding:20px}
.pill .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--inverse);color:var(--on-inverse);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;margin-bottom:10px}
.pill h3{font-size:19px;margin-bottom:6px}
.pill p{font-size:13.5px;color:var(--ink-soft)}
.pill ul{list-style:none;margin-top:10px;display:grid;gap:6px}
.pill li{font-size:13px;color:var(--ink-soft);display:flex;gap:8px}
.pill li::before{content:'';flex:none;width:16px;height:16px;border-radius:50%;margin-top:2px;background:var(--accent-soft) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F8E99' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* stories */
.stories{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
@media (max-width:760px){.stories{grid-template-columns:1fr}}
.story{background:var(--surface-tint);border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:10px}
.story .who{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700}
.story .what{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.story p{font-size:14px;color:var(--ink-soft)}
.story .q{border-left:3px solid var(--line-strong);padding-left:14px;font-style:italic;color:var(--ink-faint);font-size:13.5px}

/* trade fit */
.trade{background:var(--inverse);color:var(--on-inverse);border-radius:24px;padding:clamp(24px,4vw,40px);margin-top:10px}
.trade h2{font-size:clamp(24px,3.4vw,34px);max-width:20ch;margin-bottom:12px}
.trade p{color:var(--on-inverse-soft);max-width:60ch}
.trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.trades span{font-size:13px;font-weight:600;padding:7px 14px;border-radius:100px;background:var(--inverse-chip)}
.trades span.on{background:var(--inverse-accent);color:var(--inverse)}

/* close */
.close{text-align:center}
.close .h2{margin-inline:auto}
footer{background:var(--inverse);color:var(--on-inverse-soft);padding-block:34px;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- site nav + footer (shared across the product pages) ---- */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}
.nav .wrap{gap:14px}
.logo{text-decoration:none;color:var(--ink)}
.logo img{width:30px;height:auto;display:block}
.plinks{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.plinks a{font-size:13.5px;font-weight:500;color:var(--ink-soft);padding:7px 11px;border-radius:100px;text-decoration:none;transition:background .2s,color .2s}
.plinks a:hover{background:var(--paper-alt);color:var(--ink)}
.plinks a[aria-current="page"]{background:var(--inverse);color:var(--on-inverse)}
.thbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.thbtn:hover{background:var(--paper-alt)}
.thbtn svg{width:17px;height:17px}
.thbtn .sun{display:none}
:root[data-theme="dark"] .thbtn .sun{display:block}
:root[data-theme="dark"] .thbtn .moon{display:none}
@media (max-width:980px){.plinks{display:none}.nav .btn{margin-left:auto}}
/* a slot waiting on real content (video, quote) stays out of the page */
[data-slot][hidden]{display:none !important}
.sfoot{background:var(--inverse);color:var(--on-inverse-soft);padding-block:40px 30px;font-size:13.5px}
.sfoot .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
@media (max-width:760px){.sfoot .grid{grid-template-columns:1fr}}
.sfoot h5{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--inverse-accent);margin-bottom:10px}
.sfoot ul{list-style:none;display:grid;gap:6px}
.sfoot a{color:var(--on-inverse);text-decoration:none}
.sfoot a:hover{text-decoration:underline}
.sfoot .brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;color:var(--on-inverse);margin-bottom:8px}
.sfoot .bottom{margin-top:28px;padding-top:18px;border-top:1px solid var(--inverse-line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sfoot .addr{margin-top:12px;font-size:12.5px;line-height:1.6}

/* ============================================================
   MOTION (26 Sep) — shared by the product pages and Find your
   business, with assets/motion.js. Nothing moves unless the
   visitor scrolls, taps or hovers; everything plays once; reduced
   motion gets the still page (see the rule near the top).
   ============================================================ */
/* reveal: motion.js marks what starts below the fold and adds .in as it arrives */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease) var(--rd,0ms),transform .7s var(--ease) var(--rd,0ms)}
.rv.in{opacity:1;transform:none}
/* a video button stays out of the page until its video exists (assets/video.js) */
[data-video-for][hidden]{display:none!important}
/* screen tabs: the new panel fades up instead of snapping in */
.panel.fade{animation:panelIn .4s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}}
/* the hero screen sits a little deeper than the page as you scroll */
@media (prefers-reduced-motion:no-preference) and (min-width:921px){
  @supports (animation-timeline: scroll()){
    .hero .vid img,.hero .hb-desk img{animation:heroShot linear both;animation-timeline:scroll(root);animation-range:0 80vh}
    @keyframes heroShot{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.04) translateY(-3.5%)}}
  }
}
/* page to page: the product picture you clicked grows into its page */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
/* the header and product strip hold still; only the page under them moves,
   and the active product pill slides across to the product you picked */
.nav>.wrap{view-transition-name:site-nav}
.psub{view-transition-name:site-psub}
.pswitch a[aria-current="page"]{view-transition-name:psub-pill}
::view-transition-old(site-nav),::view-transition-new(site-nav),::view-transition-old(site-psub),::view-transition-new(site-psub){animation:none}
::view-transition-group(psub-pill){animation-duration:.5s}
::view-transition-old(root){animation:vtOut .22s ease both}
::view-transition-new(root){animation:vtIn .45s cubic-bezier(.22,1,.36,1) .05s both}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---- global nav: the home page's structure on every page ---- */
.mlinks{display:flex;gap:4px;align-items:center;margin-left:auto}
.mlinks>a,.ndrop-btn{font:inherit;font-size:14.5px;font-weight:500;color:var(--ink-soft);padding:8px 14px;border-radius:100px;border:0;background:transparent;text-decoration:none;cursor:pointer;transition:color .2s,background .2s}
.mlinks>a:hover,.mlinks>a[aria-current="page"],.ndrop-btn:hover,.ndrop.open .ndrop-btn{color:var(--ink);background:var(--paper-alt)}
.ndrop{position:static}
.nav>.wrap{position:relative}
.ndrop-btn{display:inline-flex;align-items:center;gap:5px;padding-right:12px}
.ndrop-btn svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.ndrop.open .ndrop-btn svg{transform:rotate(180deg)}
.pmenu{position:absolute;top:calc(100% - 4px);right:0;width:min(560px,calc(100vw - 32px));opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:16px;z-index:160;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s}
.pmenu::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.ndrop.open .pmenu{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s}
.pm-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:2px 6px 10px}
.pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.pm-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;color:var(--ink);text-decoration:none;transition:background .2s}
.pm-item:hover,.pm-item:focus-visible,.pm-item[aria-current="page"]{background:var(--paper-alt)}
.pm-ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;overflow:hidden}
.pm-ic img{width:100%;height:100%;display:block;object-fit:cover}
.pm-ic svg{width:19px;height:19px}
.pm-txt{display:grid;gap:1px;min-width:0}
.pm-txt b{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600}
.pm-txt small{font-size:12.5px;color:var(--ink-soft);line-height:1.35}
.pm-own{margin-top:8px;background:linear-gradient(135deg,var(--inverse),var(--inverse-2));color:var(--on-inverse);padding:12px 14px}
.pm-own:hover,.pm-own:focus-visible,.pm-own[aria-current="page"]{background:linear-gradient(135deg,var(--inverse),var(--inverse-2));filter:brightness(1.08)}
.pm-own .pm-ic{background:var(--inverse-chip);color:var(--inverse-accent)}
.pm-own .pm-txt small{color:var(--on-inverse-soft)}
.pm-arrow{margin-left:auto;font-weight:700;color:var(--inverse-accent)}
.pm-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding:12px 6px 2px;border-top:1px solid var(--line)}
.pm-foot a{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}
.pm-foot a:hover{text-decoration:underline}
@media (max-width:760px){.mlinks>a{display:none}.pm-grid{grid-template-columns:1fr}.pmenu{position:fixed;left:16px;right:16px;top:64px;width:auto}}
@media (max-width:420px){.nav .btn.sm{display:none}}

/* ---- product sub-bar: breadcrumb flowing into the product switcher ---- */
.psub{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.psub .wrap{display:flex;align-items:center;gap:10px;height:46px;overflow-x:auto;scrollbar-width:none}
.psub .wrap::-webkit-scrollbar{display:none}
.crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-faint);white-space:nowrap;margin:0;padding:0;list-style:none}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs li+li::before{content:'/';margin-right:6px;opacity:.6}
.pswitch{display:flex;gap:2px}
.pswitch a{font-size:13px;font-weight:500;color:var(--ink-soft);padding:5px 11px;border-radius:100px;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.pswitch a:hover{background:var(--paper-alt);color:var(--ink)}
.pswitch a[aria-current="page"]{background:var(--inverse);color:var(--on-inverse)}
@media (max-width:760px){.crumbs{display:none}}
@media (prefers-reduced-motion:reduce){.pmenu,.ndrop-btn svg{transition:none}}

/* ---- auto-rolling screen tabs + handwritten caption (assets/tabs.js) ---- */
.hand{font-family:'Kalam','Segoe Print',cursive;font-weight:400;line-height:1.15}
.tab{position:relative;overflow:hidden}
.shots.auto .tab[aria-selected="true"]::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--inverse-accent);transform-origin:left;animation:tabFill 5.5s linear both}
.shots.paused .tab::after,.shots.held .tab::after{animation-play-state:paused}
@keyframes tabFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pnote{font-size:clamp(22px,2.6vw,28px);color:var(--accent);margin:4px 0 16px;min-height:1.2em}
.pnote.in{animation:noteWrite 1.1s steps(28,end) both}
@keyframes noteWrite{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.pnote.in{animation:none}}